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

Внести вклад 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
2023: The Year in Review
Can't get to the bold, italic buttons if too close to the top
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 при использовании редактора кода в #theme и #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, я не уверен насчёт этого, но если это распространённая проблема или проблема ядра, то, думаю, стоит открыть новую тему в 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

Привет, Дон

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