DroidScript
DroidScript
разработка мобильных приложений

Thunkable X: повышаем удобство работы в IDE

Thunkable X  
17.01.2020

Одним из существенных недостатков платформы Thunkable X, и многих других web-страниц, является неудобный для работы интерфейс, который можно ощутимоj улучшить при помощи плагина, позволяющего создавать и подгружать свои стили.

Для правки интерфейса воспользуемся браузерным плагином Stylish, при помощи которого можно создавать, сохранять и загружать для указанных доменов скрипты с собственными CSS-стилями. При включенном плагине подгрузка стилей для страниц целевого домена происходит автоматически, что позволяет быстро привести интерфейс web-страниц в удобное для работы состояние.

Для начала установите плагин Stylish. Если скрипт стиля не запустится, а такое, к сожалению, возможно, необходимо включить экспериментальную опцию. Для этого, например, в Firefox переходим в настройки, введя в адресную строку about:config. В появившемся окне ищем параметр layout.css.moz-document.content.enabled и включаем его, установив true. После этого сообщение об ошибке для правила @-moz-document не исчезнет, но скрипт будет работать.

Готовые стили нас не интересуют, а потому переходим к созданию нового стиля в редакторе, интерфейс которого показан ниже.

Интерфейс Stylish

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

Работа по созданию своих стилей происходит достаточно просто. В браузере открываем две вкладки с интересующей целевой страницей и для первой вкладке включаем отображение панели разработчика (F12). На вкладке "инспектора DOM и стилей" находим нужный для правки элемент, и в окне стилей производим редактирование его стиля. После успешного редактирования копируем настройки в наш скрипт. Для проверки работы скрипта нажимаем кнопку "Сохранить" и смотрим результат работы целевой страницы на второй вкладке.

Для одного и того же домена можно создать несколько стилевых шаблонов, и использовать разные конфигурации рабочей среды в браузере. Полный код шаблона для монитора с разрешением 1600*900 можно загрузить здесь.

Исходный интерфейс вкладки собственных проектов показан ниже.

Исходный интерфейс окна проектов

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

Исправленный интерфейс окна проектов

На его создание ушло 30-40 минут, а вот с интерфейсом редактора вида пришлось изрядно повозиться.

Исходный интерфейс окна редактирования вида

Здесь всё намешано в кучу. Палитра компонентов совмещена с областью компонентов проекта, по причине чего приходится постоянно возиться с разделителем этих областей, который до недавнего времени ещё и работал некорректно в некоторых браузерах. В заголовке помещается всего 4 названия экранов, по причине чего в редакторе блоков приходится постоянно прокручивать их для перехода на нужный экран. Невидимые компоненты с огромными пиктограммами свалены в кучу под областью предварительного просмотра. Сама область предварительного просмотра не соответствует экрану ни одного мобильного устройства, а многие элементы в этой области либо обрезаются, либо вообще не отображаются, выходя за её область. А что на этой крохотной области можно увидеть, если разработка ведётся для планшетов? Ничего. Почему так сделано? Потому что разработчики посчитали, что важнее всего фоновая картинка с изображением непонятно какого устройства. Размеры этой картинки и определяют размеры области просмотра. Дополнительно к этому вся область отмасштабирована так, что придётся изрядно попотеть для ответа на вопрос, почему кнопка шириной 100px в этой области на самом деле имеет ширину 90px. На фоне этого блеклый нечитаемый шрифт большинства надписей уже не вызывает удивление, но вызывает желание как можно быстрее исправить всё, что возможно. А возможно исправить, к сожалению, далеко не всё из-за того, что свойства компонентов выводятся при помощи скриптов, по причине чего приходится делать десятки лишних щелчков для редактирования свойств на двух вкладках.

Результат правки показан ниже.

Исправленный интерфейс окна редактирования вида

Да, нижнюю часть экрана уродует дикая горизонтальная полоса прокрутки, а панель с названиями экранов улетела в бесконечность, но зато теперь для перехода к нужному экрану в редакторе блоков можно использовать поиск по странице (Ctrl+F4) вместо десятков лишних щелчков для прокрутки экранов.

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

Теоретически, можно продолжить улучшение шаблона - убрать пиктограммы, поработать над шрифтом, отступами и цветом, но это уже тонкости.

Thunkable X  
© 2016-2020  Александр Страшко