Почему так много вариантов в меню редактора снаряжения?

На компьютере, где в главной строке меню достаточно места, почему так много опций скрыто за значком шестерёнки? Разве «Преформатированный текст», «Маркированный список» и «Нумерованный список» раньше не были в главной строке меню?

4 лайка

Я предполагаю, что это от Meta, судя по скриншоту. :slight_smile:

На моём ноутбуке (Windows/Firefox) панель форматирования выглядит так:

Может ли устройство, которое вы используете, объяснить эту разницу?

Я тоже вижу то же самое, что и @JammyDodger, даже когда сжимаю окно браузера:

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

Это устройство с сенсорным экраном?

4 лайка

Да, это ноутбук с сенсорным экраном. Надеюсь, это можно будет отменить и найти отдельное решение для iPad и планшетов, потому что опыт использования моего 13-дюймового ноутбука (не особенно большого) стал значительно хуже из-за этого изменения.

У меня та же проблема.

Пока/когда/если появится интерфейс для предоставления дополнительных вариантов макета кнопок композера или редактора, @awesomerobot предоставил несколько примеров CSS для их перестановки, и это работает.

Спасибо, Крис !!!

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

Как это сделать:

  1. перейдите в admin>customize>themes, затем нажмите new
  2. дайте ему имя, например «Tiles button order», выберите «component» из выпадающего списка и нажмите «create»
  3. Затем вы можете нажать Edit CSS/HTML, скопировать и вставить CSS выше в раздел common > css

Теперь компонент создан, и его нужно добавить в вашу текущую тему:

  1. вернитесь на предыдущую страницу, затем переключитесь с вкладки компонентов на вкладку тем
  2. выберите вашу активную тему (она будет отмечена зелёной галочкой)
  3. в настройках темы найдите раздел Theme Components, выберите ваш новый компонент из выпадающего списка и нажмите «add»
  4. :tada: Теперь, когда вы вернётесь на главную страницу форума и обновите страницу, компонент должен быть активен.

Из Tiles Image Gallery - #66 by awesomerobot
и Tiles Image Gallery - #68 by awesomerobot

Я также вижу меньше вариантов на своем iPhone 8. Не уверен, связано ли это с этим изменением, но на главной панели меню явно есть много дополнительного места.

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

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

Мы вскользь обсуждали возможность добавления настроек сайта, которые позволят администратору решать, какие элементы скрывать в выпадающем меню настроек, поэтому в будущем эта функциональность может стать настраиваемой.

13 лайков

Очень большой +1 за это.

5 лайков

Было бы лучше, если бы это была настройка пользователя. :slight_smile:

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

3 лайка

На нашем сайте пользователи публикуют множество фрагментов кода, скриптов и выводов логов. С нашей точки зрения, перемещение кнопки предформатированного кода в меню с шестерёнкой для устройств с сенсорным экраном — не самое удачное решение. Есть ли способ (без правки JavaScript) вернуть эту кнопку на панель кнопок или заменить её на другую, которая для нас менее важна?

2 лайка

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

Так вы можете добавить кнопку для предварительно отформатированного текста на сенсорные устройства.

Добавьте следующее в раздел Common/Header нового компонента.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Добавьте это в раздел Common/CSS. Это скроет кнопку предварительно отформатированного текста из всплывающего меню.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

4 лайка

@Дон — огромное спасибо. Работает как по маслу.

1 лайк

Это было бы очень полезно. Я заметил, что большинство пользователей на моём сайте даже не подозревают, что под меню с колесом/шестерёнкой есть какие-либо опции.

1 лайк

Я заметил, что подавляющее большинство пользователей вообще не используют панель инструментов. В том числе и здесь, в Meta.

Так что главный вопрос ™ заключается не в том, что у нас есть или нет в меню шестерёнки, а в том, стоит ли перенести всё в это меню, чтобы обеспечить более чистый опыт написания текста :smirking_face:

1 лайк

После последнего обновления Discourse, похоже, решение, предложенное @Don, больше не работает, кнопка форматирования кода также исчезла из меню шестерёнки. Редакция: После удаления пользовательского компонента кнопка снова появилась в меню шестерёнки. Теперь нам нужно найти альтернативное решение, чтобы вернуть кнопку в верхнее меню на мобильных устройствах.

Как модератор форума по изучению программирования, я считаю крайне важным, чтобы наши пользователи могли правильно форматировать код, в том числе на мобильных устройствах. Эта проблема создаёт для нас дополнительные трудности. :confused:

1 лайк

Привет, @sableraph :wave:

Спасибо, я теперь создал рабочий компонент темы для этого. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions · GitHub

2 лайка

Спасибо за ваш ответ!

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

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

CSS остаётся без изменений.

Похоже, в последнем обновлении Discourse (v3.3.0-beta2) возникла проблема. Кнопка отображается на панели инструментов, но при её нажатии возникает ошибка: «formatCode» не является функцией. Кнопка, оставшаяся на шестерёнке настроек, работает нормально. Что изменилось?

Замените

action: "formatCode",

На

action: () => toolbar.context.send("formatCode")

Это должно решить проблему :+1:

1 лайк