Предложения панели кнопок редактора

Внести вклад UX
1

Здравствуйте,

Это распространённая проблема на нашем форуме. Нативное мобильное контекстное меню и выделение усложняют использование панели кнопок редактора. Поэтому я внёс некоторые «костыльные» изменения (требуют доработки), но, думаю, это хорошая идея… :slightly_smiling_face:
Показываю пример.

Контекстное меню перекрывает панель кнопок редактора.

Screenshot_20230108_041530_com.android.chrome
Screenshot_20230108_041530_com.android.chrome1080×2240 245 KB

Выделение и контекстное меню перекрывают всплывающее меню параметров.

Screenshot_20230108_041646_com.android.chrome
Screenshot_20230108_041646_com.android.chrome1080×2240 229 KB

Я переместил панель кнопок редактора в нижнюю часть редактора на мобильных устройствах, а также изменил положение всплывающего меню параметров.

Рабочий стол

Screenshot 2023-01-08 at 16.07.47
Screenshot 2023-01-08 at 16.07.47743×404 16 KB

Мобильное устройство

Screenshot_20230108_160152_com.android.chrome
Screenshot_20230108_160152_com.android.chrome1080×2240 202 KB

Таким образом, нативные элементы выделения и контекстного меню не будут перекрывать эту часть.

Общие > CSS

.d-editor-textarea-wrapper {
  .d-editor-button-bar {
    display: flex;
    overflow-x: auto;
    background: var(--primary-very-low);
    .btn,
    .select-kit {
      flex: 1;
      color: var(--primary-high);
    }
    // Всплывающее меню
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

Мобильное устройство > CSS

#reply-control {
  .submit-panel {
    margin-top: 1em;
  }
}

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Увеличенный отступ снизу, чтобы выделение последней строки не перекрывало панель кнопок
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Всплывающее меню
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      position: static;
      .select-kit-filter {
        display: none;
      }
      .select-kit-body {
        transform: none !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row;
        justify-content: flex-start;
        max-width: 100%;
        width: 100% !important;
        overflow-x: auto;
        background: var(--primary-very-low);
        border: none;
      }
      .select-kit-row {
        padding: 0.5em 0.65em;
        border: 1px solid transparent;
        border-top: none;
      }
      .select-kit-collection {
        display: contents;
      }
    }
  }
}
13 лайков
Composer tip under specific tag topics
Can't get to the bold, italic buttons if too close to the top
Can't get to the bold, italic buttons if too close to the top
2023: The Year in Review
2

Это отлично, большое спасибо. Это лишь небольшое изменение, но оно действительно делает мобильный опыт превосходным :smiling_face_with_three_hearts:

4 лайка
3

Да, у меня были те же проблемы, и это было бы отличным улучшением.

Чувствую, что скоро появится компонент темы…

5 лайков
4

Звучит отлично. Пожалуйста, протестируйте также на устройствах, где в окне ввода помещается только три строки, а не около 12, как на вашем первом скриншоте. Such a tiny window to edit here on a cell phone

2 лайка
5

Мне очень понравился тот вариант, но теперь он плохо взаимодействует с AI-помощником :cry:

2 лайка
6

Привет, Дон!

Подскажи, пожалуйста, есть ли решение для клавиатуры Android на мобильных устройствах?

На Google Pixel 8 и, возможно, на других Android-смартфонах при использовании редактора кода в разделах Customization > Theme и Customization > Theme component клавиатура перекрывает область ввода, если кода много и он находится внизу экрана. Та же проблема возникает в редакторе кода для новых шаблонов форм.

Если я правильно понимаю, это можно исправить, добавив нижний отступ? Тогда клавиатура будет перекрывать только пустое пространство?

1 лайк
7

Привет :wave:

Я разместил AI в правом верхнем углу. Думаю, это ни на что не повлияет, а расширенные опции будут на всю ширину вверху. Я отключил анимации, чтобы избежать мерцания при выборе. Код не был тщательно протестирован, но что-то… Думаю, он должен работать и на iPhone, но я не проверял это, поэтому пожалуйста, протестируйте перед запуском в продакшн. Редактор всегда занимает полную высоту.

Мобильная версия / CSS

.fk-d-menu {
  &[data-identifier=ai-composer-helper-menu] {
    position: fixed;
    display: block;
    max-width: 730px !important;
    width: 100%;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    animation: none;
    .fk-d-menu__inner-content {
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
    
    .ai-composer-helper-menu {
      width: 100%;
      .ai-custom-prompt {
        &__input[type=text] {
          width: 100%;
        }
      }
      .ai-helper-loading {
        display: flex;
        justify-content: center;
      }
      .ai-helper-button-group {
        justify-content: center;
      }
      
      &:not(.is-expanded) {
        position: unset;
        background: none;
        width: 100%;
        right: 0;
        padding: 0;
        ul {
          position: absolute;
          right: 8px;
          button {
            background: var(--secondary);
            border: none;
            border-radius: var(--d-button-border-radius);
            box-shadow: 0 0 0 1px var(--primary-medium);
            width: 4.5em;
            height: 1.7em;
            margin-top: calc(var(--header-offset) + 8px);
            animation: none;
            .d-icon {
              margin-right: 0.45em;
            }
            .d-button-label {
              display: block;
              color: var(--primary-high);
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

#reply-control.open {
  height: 100%;
}

@Heliosurge, я не уверен насчет этого, но если это распространенная проблема или проблема ядра, то, думаю, стоит открыть новую тему Contribute > UX с несколькими скриншотами или видео… :slightly_smiling_face:

1 лайк
9

На iPhone это работает, но значок шестеренки открывается странно. Он появляется внутри панели кнопок.

1 лайк
10

Будет сделано, спасибо, Дон! :+1:

Добавил этот код для поддержки компонента подсчета символов.

CSS для мобильных устройств

//* Перемещает счетчик символов над нижней панелью редактора
.character-counts {
    bottom: 2.5em !important;
}

До добавления этого кода счетчик символов и панель редактора перекрывали друг друга.

Результат

Screenshot_20240822-214435
Screenshot_20240822-214435864×1817 142 KB

1 лайк
11

И думал, что ты переместил панель инструментов вверх. Но она должна быть всё ещё внизу? Ну, на iPhone она сверху, но её можно прокручивать.

12

Думаю, это сделано специально. Посмотрите последнее видео в первом сообщении темы.

Последний код, который я поделился, предназначен только для позиционирования кнопки ИИ; это дополнение к кодам из первого сообщения темы. Но, конечно, вы можете использовать его и отдельно. :slightly_smiling_face:

13

Дополнительно? Хорошо, я полностью заменил мобильный раздел :squinting_face_with_tongue:

Редактирование

Кнопки теперь находятся там, где должны быть, и работают как положено после применения всех сниппетов — как из исходного сообщения, так и нового. Но теперь у меня нет иконки AI :man_facepalming:

Редактирование 2

Когда я нажимаю на гамбургер-меню композера (то есть скрываю панель кнопок), появляется иконка AI.

А шестерёнка на iPad ничего не делает.

Звучит ли это лучше, чем мои предыдущие безумные попытки?

1 лайк
14

Да, похоже, это не работает с обратным порядком столбца или другим упорядочиванием. Поэтому, если это не сработает в данном случае, нам не удастся объединить эти два изменения. :confused:

Я поищу новое решение, чтобы это заработало, и немного переработаю дизайн…

15

Обидно. Потому что для меня, как для обывателя, это звучит как смена подхода в обсуждении того, как обновление AI-помощника сломало несколько вещей на устройствах Apple, ведь ваше решение работало раньше :thinking:

16

Нажимали ли вы недавно на шестерёнку в редакторе? Мы добавили туда ярлык и ссылку на вычитку, которыми очень удобно пользоваться на мобильных устройствах.

17

У меня такого не было. Довольно приятно, мне стоит чаще пользоваться корректурой, тогда я, возможно, не буду так грубо нарушать правила английского языка.

На изображении показано сообщение в цифровом приложении, возможно, в электронной почте или чате, с предложением редактирования. (Подпись сгенерирована ИИ)
На изображении показано сообщение в цифровом приложении, возможно, в электронной почте или чате, с предложением редактирования. (Подпись сгенерирована ИИ)1190×522 108 KB

И всё же я упускаю другие возможности, которые предлагает помощник на базе ИИ. Но, конечно, решение с шестерёнкой действительно простое в использовании.

1 лайк
18

Привет, Дон

Кажется, код нужно обновить, так как панель больше не прокручивается для элементов, не отображаемых на ней.