GTK интерфейс

[ls0h]

Привет!

В продолжении разговора в теме про AppImage #8 (comment) , а именно вот этого предложения:

В графическом интерфейсе сделать две вкладки "Enabled services" и "Available services".

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

Я начал работу над интерфейсом на GTK (https://github.com/ls0h/bubblejail/tree/feature/gtk). Предложенную идею про разделение на две вкладки я почти реализовал. Пока интерфейс находится в разработке. Опции сервисов (так же сохранение, создание нового сервиса, ...) ещё не реализованы. Зато сервисы можно сворачивать. А прототип можно запустить и попробовать.

P.S.: Пока для простоты разработки bubblejail_gtk.py находится в корне проекта. Потом будет перенесён в пакет bubblejail.

P.S.: Дальнейшее обсуждение интерфейса можно вести в этой теме или на каждую идею/доработку открывать отдельную?

[igo95862]

Круто выглядит.

P.S.: Дальнейшее обсуждение интерфейса можно вести в этой теме или на каждую идею/доработку открывать отдельную?

В этой.

[ls0h]

Привет!

Прототип ls0h@9c6f5d0 вполне работает. Во всяком случае тот функционал, что был в оригинальном приложении. Плюс разделение сервисов на вкладки.

Так же я добавил переключатель для выбора создавать ли .desktop:

В планах:

• Сделать удаление из списка. Сейчас кнопка Delete ничего не делает.
• Добавить поиск по сервисам. В месте указанном курсором будет кнопка поиска, при нажатии на которую вместо вкладок будет отображаться строка ввода и, по мере ввода, будут отображаться те сервисы, в названии или описании которых есть введённый текст
  
• Добавить кнопку для запуска рядом с Edit. чтобы пользователю было удобно тестировать приложения сразу после изменения настроек.
• Добавить описание. При выборе instance из списка, ниже списка будет отображаться его описание. Возможно вместе с иконкой, если к instance привязан .desktop.
• Исправить особенность отображения иконок Save, Back, ... в заголовке окна. Почему-то на тёмном фоне они остаются тёмными, хотя в других приложениях такие же иконки отображаются белыми.
  
  (пример из Glade)
  При использовании светлой темы проблем нет.

Вопросы:

• При удалении можно просто удалить соответствующую instance директорию в ~/.local/share/bubblejail/instances/ или нужно сделать что-то ещё? Естественно, пользователю будет показан диалог для подтверждения.
• Я не понял, зачем при отображении OptionSpaceSeparatedStr в интерфейсе вместо пробелов используется \t? Почему не пробелы? В интерфейсе это смотрится странно. Для чего это нужно?
• Куда лучше положить файлы .glade? Вероятно bubblejail_gtk.py будет разделён на модули, некоторые классы хорошо бы вынести из него. Куда положить отдельные модули? И как это тестировать, чтобы можно было запускать приложение из development директории, и оно находило нужные ресурсы (те же .glade)? Чтобы каждый раз не устанавливать после каждой правки.

Как вопрос с кнопкой удаления и вопросы с размещением модулей и файлов .glade будут решены я сделаю pull request в основной репозиторий?

P.S.: При запуске есть несколько Warning из-за того, что работа со стоковыми кнопками объявлена deprecated. Это не большая проблема. Я её решу, как найду подходящие иконки для кнопок. Аналогичное сообщение по поводу выравнивания с использованием старого метода. На работу это никак не влияет.

[igo95862]

Ты видел какой дизайн GNOME рекомендует: https://developer.gnome.org/hig/stable/patterns.html.en

Думаю это будет интересно как можно ближе быть к их рекомендациям. То что я изначально создал было на очень скорую руку и дизайн кривоватый.

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

Добавить кнопку для запуска рядом с Edit. чтобы пользователю было удобно тестировать приложения сразу после изменения настроек.

Особенно если можно запустить без сохранения настроек. Я подумаю как это сделать.

Я не понял, зачем при отображении OptionSpaceSeparatedStr в интерфейсе вместо пробелов используется \t? Почему не пробелы? В интерфейсе это смотрится странно. Для чего это нужно?

У меня пробелы смотрелись слишком узкими. (как будто там не было пробела) Возможно это была проблемма с PyQt5.

При удалении можно просто удалить соответствующую instance директорию в ~/.local/share/bubblejail/instances/ или нужно сделать что-то ещё? Естественно, пользователю будет показан диалог для подтверждения.

Лучше в мусор. Я напишу код в следующей версии.

Куда лучше положить файлы .glade? Вероятно bubblejail_gtk.py будет разделён на модули, некоторые классы хорошо бы вынести из него. Куда положить отдельные модули? И как это тестировать, чтобы можно было запускать приложение из development директории, и оно находило нужные ресурсы (те же .glade)? Чтобы каждый раз не устанавливать после каждой правки.

meson может строить определеную цель, то есть meson build gtk-gui создаст executable gtk-gui в папке стоительства и из оттуда можно запустить.

Вот так будет выглядить папка со всеми исходниками src

...
src-+
    python-+
            ...
    gtk-+
        .glade
        ...

Из папки python можно будет запускать скрипты типо как dev.py

Я опубликовал версию 0.4.2 сегодня. Это будет наверно последняя перед 0.5.0 где будут все изменения.

[ls0h]

Ты видел какой дизайн GNOME рекомендует

Видел эту ссылку, но подробно не читал ещё. Я отталкивался от дизайна Glade. На мой взгляд достаточно похоже.

В headerbar так же много разнообразных элементов управления. При этом кнопка поиска расположена не в headerbar (как рекомендует HIG), а ниже. Думаю, интерфейс BubbleJail, как и интерфейс самого Glade несколько сложнее, чем примеры приложений по ссылке. Однако, я постараюсь учитывать их рекомендации. А ты заметил какие-то несоответствия или это просто пожелание?

Еще выбору профиля при создании Instance тоже требуется отдельное окошко.

Можно использовать ComboBox, совмещённый с полем ввода. Когда пользователь будет писать, список вариантов будет фильтроваться. Хотя можно и всплывающий диалог, тогда там можно будет выводить описание профиля.

Особенно если можно запустить без сохранения настроек.

Хорошая мысль. Дать пользователю возможность быстро попробовать и вернуть обратно, если не подошло.

Лучше в мусор. Я напишу код в следующей версии.

Тогда я пока уберу кнопку Delete?

Из папки python можно будет запускать скрипты типо как dev.py

Ок. Я попробую разобраться с этим и с meson.

Я опубликовал версию 0.4.2 сегодня. Это будет наверно последняя перед 0.5.0 где будут все изменения.

Прошу прощения, не понял, какой из этого вывод. Мне надо успеть написать всё запланированное до версии 0.5.0? Это вообще имеет отношение к pull request и делать ли мне его, когда я закончу с описанными выше изменениями?

[ls0h]

meson может строить определеную цель

Вроде разобрался: ls0h@2266772
Файлы с описанием интерфейса теперь попадают в /usr/share/bubblejail/gtk/.

Другие вопросы из предыдущего сообщения пока остаются.

[igo95862]

Хмм у тебя странный Glade. Наверное Ubuntuосвские темы

Тогда я пока уберу кнопку Delete?

Да можно добавить в будушем.

Прошу прощения, не понял, какой из этого вывод. Мне надо успеть написать всё запланированное до версии 0.5.0? Это вообще имеет отношение к pull request и делать ли мне его, когда я закончу с описанными выше изменениями?

Нет, никуда спешить не надо. Я переписываю сервисы и много всего поломаю. Мне интересен дизайн интерфейса а не код.

[ls0h]

Хмм у тебя странный Glade. Наверное Ubuntuосвские темы

Да в принципе то же самое. Я говорил про расположение элементов и их назначение, а не про тему оформления.

Мне интересен дизайн интерфейса а не код.

Код для интерфейса на GTK уже есть. Я бы хотел его включить в проект, если ты не против. В принципе я мог бы заниматься его развитием. Многие аспекты UI больше завязаны на взаимодействие (код), чем на внешний вид.

Я переписываю сервисы и много всего поломаю.

Есть какой-то план? Я мог бы поучаствовать.

P.S.: Ты пробовал запускать интерфейс на GTK? Как по удобству взаимодействия?

[igo95862]

Код для интерфейса на GTK уже есть. Я бы хотел его включить в проект, если ты не против. В принципе я мог бы заниматься его развитием. Многие аспекты UI больше завязаны на взаимодействие (код), чем на внешний вид.

Я очень хотел написать GTK интерфейс на C. (даже создал новую D-Bus библиотеку) Если использовать Glade то можно использовать тот же .glade файл для C то и для Python.

Есть какой-то план? Я мог бы поучаствовать.

Я думаю какой дизайн будет луше всего.

Скорее всего каждый сервис будет использовать @classmethod для __iter__. Вся кофигурация будет в отдельном классе что значит меньше инициирования отдельных сервисов.

Мне нужно понять какую мета информация потребуется для графического интерфейса который использует D-Bus для комуникации.

[ls0h]

Я очень хотел написать GTK интерфейс на C

Необычный подход! Чаще встречается когда основная (вычислительная) часть на C, а интерфейс как раз на Python или другом высокоуровневом языке. Если не секрет, почему интерфейс на C, когда остальные части на Python? Остальные части так же будут переписаны на C?

[igo95862]

Чаще встречается когда основная (вычислительная) часть на C, а интерфейс как раз на Python или другом высокоуровневом языке. Если не секрет, почему интерфейс на C, когда остальные части на Python?

Вычесления довольно не значительные. Куда важнее возможность быстрого создания прототипов.

Графический интерфейс наоборот очень стабилный.

Остальные части так же будут переписаны на C?

Нет.

[ghost]

В headerbar так же много разнообразных элементов управления. При этом кнопка поиска расположена не в headerbar (как рекомендует HIG), а ниже.

Она там расположена, чтобы быть рядом с полем поиска по виджетам. Но в большинстве гномо-приложений поле поиска выпадает сверху по шорткату, либо после нажатия на кнопку, которая находится в хедбаре. Да и много элементов управления в хедбаре для bubblejail ни к чему.

[igo95862]

Вот что у меня получается.

[ls0h]

Хорошо. Не уверен, подходящий ли вариант делать кнопку настроек (шестерёнку) на каждой строке. С одной стороны это хорошо, можно быстро на неё нажать, с другой - визуально будет не очень, т.к. они будут стоят достаточно близко и будут образовывать вертикальную линию повторяющихся элементов. Кстати, надо будет для иконки приложения резервировать место, т.к. далеко не у всех instance они есть, если место не резервировать, то название может сдвигаться влево, что помешает выравниванию. А что ты думаешь, если "Instances list" написать в подзаголовок, под основное назание?

P.S.: Я тут тоже делаю вариант этого интерфейса. Чуть позже покажу, как доделаю.
P.P.S: А ты каким DE пользуешься? Как-то я эту информацию упустил...

[ls0h]

Вот такой вариант:


При выделении пункта списка в нижней части отображается информация. Если иконка есть, то она отображается слева от информации. Если её нет, то информация сдвигается. Если никакой пункт не выделен, то нижняя часть окна полностью скрывается и всё окно занимает список.

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

Я осознанно не делаю иконки напротив каждого пункта. На мой взгляд, они будут присутствовать не так уж часто. Почему? Зачем вообще пользователю BubbleJail? Как часто он будет запускать с её помощью приложения из репозитория (которым как правило доверяют, которые уже могут быть ограничены через AppArmor или другие песочницы) и как часто будет запускать приложения просто скачанные откуда-то? Я думаю, в запуске недоверенных приложений из ненадёжных источников и есть смысл. А для них, скорее всего, никакой иконки приложения не будет, либо её невозможно будет найти, т.к. она будет лежать вне XDG_DATA_DIRS.

Для перехода к редактированию можно выделить пункт списка и нажать Edit, так же можно нажать Enter или сделать двойной клик.

Вот рабочий код: ls0h@2f9fc97
Можно попробовать, проверить удобство взаимодействия.

[ls0h]

Я добавил фильтр для быстрого поиска нужного сервиса.
Вот так выглядит окно, когда фильтр не активен:

Вот так, когда активен:

Поиск производится по service.pretty_name и service.description. В дальнейшем я думаю добавить какую-нибудь подсветку (выделение или подчёркивание) для совпадающего текста. А также, возможно, поиск и по названиям параметров.
Взгляни: ls0h@74125de

[igo95862]

А что ты думаешь, если "Instances list" написать в подзаголовок, под основное назание?

Сделал.

А ты каким DE пользуешься? Как-то я эту информацию упустил...

GNOME самый ванильный.

Я осознанно не делаю иконки напротив каждого пункта. На мой взгляд, они будут присутствовать не так уж часто. Почему? Зачем вообще пользователю BubbleJail? Как часто он будет запускать с её помощью приложения из репозитория (которым как правило доверяют, которые уже могут быть ограничены через AppArmor или другие песочницы) и как часто будет запускать приложения просто скачанные откуда-то?

Наоборот я создавал Bubblejail чтобы запускать программы из репозитория. У AppArmor, SELinux и Firejail конфигурация слишком не комфортная так как приходится прописовать лишком много правил. Сервисы созданы на основе того как flatpak задает параметры. Flatpak не поддерживает программы из репозитория поэтому я создал bubblejail. Профили как раз сушествуют чтобы легко установить приложения из репозитория. (я добавлю код который будет фильторовать профили на основе того установлен ли Desktop Entry)

Еще я бы не стал добавлять Command Line в окошко информации. Все Desktop Entries генерируемые при создании Instance из профиля напрямую отправляют аргументы. (Exec=bubblejail run FirefoxInstance /usr/lib/firefox/firefox %u и Exec=bubblejail run FirefoxInstance /usr/lib/firefox/firefox --new-window %u) executable_name опция в основном нужна для более комфортного запуска с коммандной строки.

Я планирую находить иконки из Desktop Entry асоциирваного с Instance. Мета данные сохраняются при создании Instance.

Я думаю поле поиска должно фокусироваться при запуске исчезать если пользователь кликнул где-то снаружи. Так Geddit делает и мне кажется очень удобно. Еще иконка наверное должна быть в GtkHeaderBar как во всех остальных GNOME программах.

Иконка Firefox очень хорошо выглядит. Векторные иконки эот сахар для глаз. Может побольше их?

[ls0h]

Наоборот я создавал Bubblejail чтобы запускать программы из репозитория.

Ок. Вероятно я не совсем понял цели проекта. В любом случае, если иконки приложений использовать в списке, то надо придумать, как резервировать место, если иконки нет. Иначе, строка с названием, которая идёт следом за иконкой будет сдвигаться и это будет некрасиво. Можно задать минимальный размер для GtkImage (которая содержит иконку). Но лучше так не делать, т.к. при разных настройках у пользователя иконки могут быть больше/меньше и опять всё сдвинется. В общем, если найдётся хорошее решение, то добавлю. Т.е. я согласен, что это неплохо, но надо придумать, как сделать.

Еще я бы не стал добавлять Command Line в окошко информации.

Можно убрать. Однако, опять же, если это instance для приложения не из репозитория, для него будет автоматически создан .desktop файл? А так пользователю видно, что запускается.

Я планирую находить иконки из Desktop Entry асоциирваного с Instance

Именно так сейчас это и работает в моей версии GTK интерфейса.

Иконка Firefox очень хорошо выглядит. Векторные иконки эот сахар для глаз.
Может побольше их?

Не совсем понял, о чём ты говоришь. Что значит "побольше их"? Иконка приложения берётся из темы оформления по имени, которое указывается в .desktop файле. Т.е. я на выбор векторная или растровая не влияю никак в своём коде. Какая тема у пользователя стоит, такая и иконка. А так согласен, хорошо когда векторные... :-)
UPD: А, в смысле размер, отображаемый в окне сделать больше? Что-то я затупил...

Я думаю поле поиска должно фокусироваться при запуске

Я сделал так, что поле поиска сервисов фокусируется при нажатии на кнопку 🔍, только ещё не сделал commit.

исчезать если пользователь кликнул где-то снаружи

С этим не совсем согласен. Смотри. Пользователь нажал кнопку 🔍, ввёл какой-то текст, чтобы найти нужный сервис. Он может нажать ➕ для нескольких найденных сервисов, чтобы перенести их в Enabled services. При этом поле ввода для поиска будет оставаться. Если сделать так, чтобы поле поиска пропадало когда пользователь кликает в другое место, то ему придётся каждый раз вызывать его заново чтобы найти и добавить несколько сервисов. Кстати, фокус теряется и поле скрывается при нажатии на Esc (ещё не сделал commit). Это стандартное поведение для полей ввода Gnome.

Я ещё хочу, чтобы поле поиска отображалось при нажатии Ctrl+F. С этим есть какая-то проблема. Во время Preview snapshot в Glade комбинации клавиш работают, а в приложении - нет. Думаю, как это исправить...

Еще иконка наверное должна быть в GtkHeaderBar как во всех остальных GNOME программах.

Можно попробовать. Вообще так не во всех, я именно поэтому и приводил выше скриншот Glade. Там поиск виджетов находится под GtkHeaderBar.

[ls0h]

ls0h@8305882

Внёс небольшие изменения:

• Поле ввода получает фокус при нажатии на 🔍
• Поле ввода теряет фокус при нажатии Esc
• Для сравнения с предыдущим вариантом кнопка 🔍 перенесена в GtkHeaderBar. Я бы вернул обратно.

На мой взгляд лучше, чтобы кнопка 🔍 оставалась рядом с Enabled services | Available services. Доводы:

• Без кнопки 🔍 содержимое GtkHeaderBar симметрично, с каждой стороны по одной кнопке: слева Back, справа Save. Если 🔍 добавить в GtkHeaderBar, то симметрия нарушается. Это некрасиво.
• Логика интерфейса. Смотри, все кнопки в GtkHeaderBar предназначены для управления Instances: когда в окне отображается список Instances, то там New и Edit (потом добавятся Delete и Execute/Run); когда в окне отображаются параметры (сервисы), либо диалог создания нового Instance, то там кнопки Back и Save. Кнопка 🔍 для поиска/фильтра Services там лишняя, она НЕ работает с Instances. Это нарушает логику интерфейса. А расположение близко к Enabled services | Available servicesподсказывает пользователю, что это поиск по Services. Другие дело, если добавить кнопку поиска по списку Instances, то, вероятно, в GtkHeaderBar ей будет самое место.
• Практичное использование места. Рядом с Enabled services | Available services много свободного места, в GtkHeaderBar - мало.

Я думаю, придерживаться HIG хорошо. Однако иногда от него можно отходить, когда это логично.

P.S.: Проблему с Ctrl+F пока не решил.

[igo95862]

В любом случае, если иконки приложений использовать в списке, то надо придумать, как резервировать место, если иконки нет. Иначе, строка с названием, которая идёт следом за иконкой будет сдвигаться и это будет некрасиво. Можно задать минимальный размер для GtkImage (которая содержит иконку). Но лучше так не делать, т.к. при разных настройках у пользователя иконки могут быть больше/меньше и опять всё сдвинется. В общем, если найдётся хорошее решение, то добавлю. Т.е. я согласен, что это неплохо, но надо придумать, как сделать.

Можно использовать какую нибудь стандартную иконку. Например system-run-symbolic

Однако, опять же, если это instance для приложения не из репозитория, для него будет автоматически создан .desktop файл?

Да

Не совсем понял, о чём ты говоришь. Что значит "побольше их"?

У меня появилась идея добавить иконку к каждуму сервису рядом с названием. В Adwaita есть куча иконок которые вполне могли подойти к сервисам. Но это на потом.

Практичное использование места. Рядом с Enabled services | Available services много свободного места, в GtkHeaderBar - мало

У Ubuntu стоит расширение добавляющее Maximize, Minimize кнопки которых в ванильном GNOME нет. Ещё текущее окошко довольно узкое. GNOME рекомендует минимум ширину 640 пикселей а сейчас стартовая ширина 500.

Мне еще не нравится что при использовании поиска пропадает возможность переключить между списком Available/Enabled. Например пользователь может набрать "audio" и попробовать переключаться между списками чтобы увидеть какие аудио настройки доступны.

[ls0h]

Можно использовать какую нибудь стандартную иконку.

Да, хорошая мысль. Я попробую.

У меня появилась идея добавить иконку к каждуму сервису рядом с названием.

Интересная мысль, можно попробовать. Правда сомневаюсь, что для всего найдутся в едином стиле.

У Ubuntu стоит расширение добавляющее Maximize, Minimize кнопки которых в ванильном GNOME нет.

Это хорошо. Мне нравится сворачивать окна!. 😄

Ещё текущее окошко довольно узкое. GNOME рекомендует минимум ширину 640 пикселей

Думаю, список будет смотреться слишком пустым.

Мне еще не нравится что при использовании поиска пропадает возможность переключить между списком Available/Enabled

Ок. Попробую фильтровать сразу по обеим группам.

[igo95862]

Думаю, список будет смотреться слишком пустым.

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

[igo95862]

[ls0h]

Ок, я попробую это реализовать. Мне надо разобраться как эффективно создавать свои виджеты, чтобы можно было их добавлять из Glade. Либо, как использовать композитные шаблоны (glade composite widget template) из Python. Пока у меня добавление виджетов делается своим способом.

[ls0h]

Немного поработал над списком Instances: ls0h@b03fed1
Теперь там есть иконки. Для редактирования можно нажать значок ⚙️ (в будущем рядом же планирую добавить 🗑️) или кликнуть два раза элемент списка. Так же есть поиск, с кнопкой 🔍. Кстати, иконки для тёмных и светлых тем теперь выглядят правильно. Проблему с Ctrl+f пока не решил, но нашёл почему не работает. Это из-за перестройки окна при переключении между разными режимами.


Строчку Command line пока оставил. Мне кажется она не мешает и может быть полезной. Для тех Instance, где аргументы не указаны, её можно скрывать, показывать только когда нужно.

[ls0h]

ls0h@6581e8a
Сделал такой же поиск и для окна редактирования. Ищет сразу и по Enabled services и по Available services. Ты был прав, это оказалось достаточно удобно. Так же, Ctrl+F теперь работает. Ещё поменял иконки на symbolic, они теперь нормально смотрятся для разных тем. Немного увеличил отступы.

[igo95862]

Хорошо выглядит