Дизайн диалоговых окон

[uranic2]

Заметил что в MTN не используются линии для отделения областей в диалогах.

Например, как это сделано в Farmanager

Для сравнения MNT2:

В других диалогах, на мой взгляд, кнопки ещё более оторвано выглядят

Ну раз все лучшее из far, то может хотя бы кнопочки отделять чертой?
Хотя, может это только у меня такой фетиш 😉?

[uranic2]

Ах, да еще заметил в диалогах, кнопки внизу по разному выровнены. Где-то строго по центру, а как на скриншоте выше, "Cancel" подвинута правее. Есть зафиксированное правило?

[uranic2]

Ради интереса посмотрел как может выглядеть окно с разделителями (правда здесь масштаб 100%, в отличии от 125% на предыдущих скринах). И да, расстояние меду кнопками увеличил, а то тени наезжают друг на друга

[uranic2]

{
  "type": "dialog",
  "version": "2.0",
  "title": "Search",
  "width": 60,
  "height": 10,
  "children": [
    {
      "type": "label",
      "text": "Find:",
      "id": "lbl_find",
      "col": 1,
      "row": 0,
      "width": 56,
      "height": 1
    },
    {
      "type": "input",
      "id": "find",
      "value": "",
      "history": "editfind",
      "col": 1,
      "row": 1,
      "width": 56,
      "height": 1
    },
    {
      "type": "checkbox",
      "id": "opt_case",
      "text": "&Case sensitive",
      "checked": false,
      "col": 1,
      "row": 4,
      "width": 27,
      "height": 1
    },
    {
      "type": "checkbox",
      "id": "opt_words",
      "text": "&Whole words",
      "checked": false,
      "col": 1,
      "row": 3,
      "width": 27,
      "height": 1
    },
    {
      "type": "checkbox",
      "id": "opt_regex",
      "text": "Reg&ular expressions",
      "checked": false,
      "col": 30,
      "row": 3,
      "width": 27,
      "height": 1
    },
    {
      "type": "checkbox",
      "id": "opt_reverse",
      "text": "Re&verse search",
      "checked": false,
      "col": 30,
      "row": 4,
      "width": 27,
      "height": 1
    },
    {
      "type": "separator",
      "col": 0,
      "row": 5,
      "width": 58,
      "height": 1
    },
    {
      "type": "button",
      "id": "ok",
      "text": "Search",
      "default": true,
      "col": 1,
      "row": 6,
      "width": 12,
      "height": 1
    },
    {
      "type": "button",
      "id": "word",
      "text": "Wo&rd",
      "col": 15,
      "row": 6,
      "width": 10,
      "height": 1
    },
    {
      "type": "button",
      "id": "selection",
      "text": "Se&lection",
      "col": 27,
      "row": 6,
      "width": 14,
      "height": 1
    },
    {
      "type": "button",
      "id": "cancel",
      "text": "Cancel",
      "cancel": true,
      "col": 46,
      "row": 6,
      "width": 10,
      "height": 1
    },
    {
      "type": "separator",
      "col": 0,
      "row": 2,
      "width": 58
    }
  ]
}

[dmitrybeloshistov]

В UI (WinGUI) как-то прижилось несколько подходов
Если кнопки внизу, то:

• кнопки рядом смещенные к правому краю (ОК/Отмена)
• кнопки рядом по центру - (ОК/Отмена), Да/Нет, Продолжить/Пропустить/Сделать что-то
• кнопки разнесенные по ширине (слева - ОК, справа Отмена или Группа кнопок справа, / группа кнопок слева)
  Если кнопки слева (по вертикали) - то одна под одной.

Ну и да - чаще стараются делать кнопки одной ширины - эстетика + моторика - в кнопки одинаковой ширины легче попасть мышом

P.S.. у нас JSON - правим там и смотрим что получилось

[dmitrybeloshistov]

Мне одному кажется, что обрамление [ Кнопка ] - как-то криво? Уезжают символы то вправо, то влево... Может отказаться вообще от символов [] и помечать только текущую/кнопку по умолчанию как "<Кнопка>" / ">Кнопка<"? Да и тени у кнопок - такое себе. Наследие и все такое, но лишнее место все же...

[uranic2]

Мне одному кажется, что обрамление [ Кнопка ] - как-то криво?

А мне норм. Привык возможно

Да и тени у кнопок - такое себе.

Это да, мне тоже не зашло, оказалось можно отключить в настройках

[dmitrybeloshistov]

Кстати насчет JSON. У нас есть параметр Height. Нужен для - многострочных полей ввода, радиогрупп, списков, и т.п., А вот многие элементы - обычно в 1 строку вмещаются и больше им и не надо (хотя у кнопок Height=1, а с тенями - 2 строки :). Там конечно "твори/выдумывай/пробуй", но ломать диалоги играясь с настройками - та еще идея. В общем тут встает вопрос с верификатором JSON - а все ли, что я в него напихаю переварится нормально?

[uranic2]

но ломать диалоги играясь с настройками - та еще идея

ну это НЕ настройка. Это ресурс программы (зашит в exe), - в исходниках есть DialogDesigner, можно править эти json
А при сборке все эти json линкуются в exe.
Сломать конечно можно через пулл реквест.

[uranic2]

Продублирую из #45 и сюда

По кнопкам я бы предложил следующий вариант

1. Кнопки выравниваются по центру
2. Расстояние между кнопками "2" (при значении "1", тень перекрывает соседнюю кнопку)
3. Разделительную линию размещать над кнопками (row-1).
4. Для теней, оставлять пустую строку после кнопок 🤷‍♂️(ну автору нравятся тени😊, хотя можно и уменашать высоту окна при выключенной тени, но это немного колхозное решение)
5. Пустой линии после заголовка окна не должно быть

[dmitrybeloshistov]

Я бы диалоги вытащил наружу, без линковки. Возможно с добавлением каких-то action для кнопок. Изначально закладывается использование плагинов и как раз для плагинов диалоги в JSON - очень удобно. Сформировал JSON, положил в папочку - вот тебе готовый интерфейс. Надо вклинить кнопку в уже существующий диалог - тоже без проблем.

P.S. В FAR - интерфейс диалогов рисуется через FAR API (не знаю правда как сейчас, может чего и поменялось). У Total - все диалоговое добро и плагинные формы хранится в DLL и по итогу имеем в 1м Total`e столько дублирующихся VCL, сколько плагинов на Delphi подключим (видел коллекции плагинов под него под 100Мб). В общем - отдельная большая тема.

[Laex]

1. Выравнивание и ширина кнопок – раньше положение кнопок было задано в JSON каждого диалога отдельно, и единого правила не было. Теперь в английской раскладке ряд кнопок везде по центру, зазор 2, кнопки одного ряда одной ширины, где подписи позволяют. В неанглийских локалях автоподгонка по ширине всегда центрировала ряды и ставила зазор не меньше 2, так что теперь вид одинаков на разных языках. Линия над кнопками и пустая строка под тенью уже есть в большинстве диалогов. В нескольких диалогах со строкой статуса между линией и кнопками (редактор сочетаний, раскраска, тема) расположение вертикали пока прежнее. Центрирование считается по кнопкам, без учёта тени.
2. Рамка кнопок. Вид кнопки задаётся темой: glyphs.buttonNormal и glyphs.buttonDefault (по умолчанию [ {0} ] и < {0} , см. docs/THEMES.md). Вариант «помечена только кнопка по умолчанию» можно получить своей темой: buttonNormal = {0}, buttonDefault = <{0}. Менять вид по умолчанию не планирую. Тени отключаются или смягчаются в диалоге «Шрифт / экран» (поле «Тени»).
3. Диалоги вне exe. Для плагинов это работает: плагин в ShowDialog передаёт либо готовый JSON, либо имя файла из своей папки plugins\<id\dialogs\<имя.json. Ничего перелинковывать не нужно. Встроенные диалоги из внешних файлов я загружать не буду – чтение с диска для них отключено специально, чтобы случайный файл не подменил диалог. Идея добавлять кнопки с действиями к встроенным диалогам интересная, но требует отдельного формата и проверки JSON. Валидацию (допустимые row и width, пересечения, высота кнопки с тенью 2 строки) – нужна в любом случае.