Настройка визуальных стилей в CodeLobster IDE

Всем известно о таком, просто магическом воздействии цветов на человека. Цвета могут расслаблять и успокаивать, а могут и наоборот - возбуждать и стимулировать мысль, как кофе. Давайте в этой статье рассмотрим ключевые инструменты CodeLobster IDE, которые обеспечивают настройку цветовых схем и индивидуальных визуальных стилей для программы.

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

Настройка визуальных стилей в CodeLobster IDE

1. Цветовые схемы в CodeLobster IDE

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

IDE позаботится об удобной работе с HTML и XML файлами, а так же со вложенными циклами и строками в PHP и JavaScript, подсвечивая все ключевые элементы кода в соответствии с настройками текущей цветовой схемы. В CodeLobster всего имеется 28 замечательных цветовых схем. Среди них есть насыщенные и красочные схемы, портированные из популярных редакторов - Atom, Brackets, Notepad++, PSPad и Sublime. Для тех, кто имеет опыт работы с другими современными средами для программирования, будет приятно включить для себя подсветку кода в стиле Aptana, Dreamweaver, Komodo, NetBeans, PHPStorm, RapidPHP или Eclipse.

2. Визуальные стили в CodeLobster IDE

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

В то время, как к каждому стилю прикреплена своя цветовая схема редактора, вы можете свободно изменить настройки и выбрать любое сочетание визуальных стилей и цветовых схем. CodeLobster поставляется с предустановленными стилями, всего есть 8 тем для программы:

• "AtomOneDark" и "AtomOneLight" - это тёмная и светлая темы оформления, портированные из популярного редактора Atom.
• "Codelobster Dark" и "Codelobster Light" - родные стили для
• "Modern Dark" и "Modern Light" - пара современных тем оформления, разработанных с использованием принципов Material design.
• "Storm" и "Sublime" - это два тёмных стиля, портированы из одноимённых редакторов.

Для выбора стиля переходим в главное меню "View" -> "Visual Style".

Изменения применяются моментально и вы сразу же можете испытать, насколько этот стиль вам подходит.

3. Редактирование визуальных стилей в CodeLobster IDE

Отображение практически любого элемента UI можно изменить с помощью CSS. Эта возможность предоставляется благодаря новым технологиям, используемым при создании CodeLobster, в частности системе Qt. Теперь настраивать пользовательский интерфейс могут как разработчики программы, так и сами пользователи IDE.

Чтобы приступить к настройке визуальных стилей, переходим в главное меню "Tools" -> "Preferences" и в разделе "IDE" открываем пункт "Visual styles".

Выбираем нужный стиль из списка и дублируем его, для этого нужно нажать кнопку "Edit" и дать своему индивидуальному стилю новое имя. После чего ваш стиль будет установлен по умолчанию и все необходимые ресурсы будут скопированы в директорию "userstyles".

Например, если вы назвали стиль "NewCodelobsterLight", то путь к папке будет такой:

[user dir]/.local/share/CodeLobsterIDE/userstyles

Этот каталог имеет следующую структуру:

• icons - папка с иконками.
• img - здесь находятся дополнительные изображения.
• qss - в этом файле содержатся стили для виджетов.

Чтобы изменить свою тему, откройте для редактирования файл "style.qss", все правила в нём прописаны в формате таблиц стилей Qt (Qt Style Sheets). Синтаксис практически полностью идентичный CSS, но имеет некоторые модификации для более удобной работы с виджетами.

Не обязательно знать названия всех элементов наизусть, достаточно просто ввести первую букву "Q" и нажать Ctrl + Space.

Таким образом, вы получите подсказку по всем доступным селекторам, используемым при создании стилей Qt и сможете выбрать нужный виджет из списка. С простыми виджетами, например, такими как кнопки, работать очень просто. В соответствии с документацией Qt, чтобы применить собственные правила для всех кнопок в программе, нужно использовать селектор QPushButton.

Идентифицировать состояние кнопки помогут псевдо-селекторы, например, :hover - при наведении указателя мыши на кнопку или :pressed - когда кнопка в нажатом состоянии. Проведём эксперимент и заменим фон кнопки при наведении указателя - вместо плоской заливки назначим градиент. Отыщем в файле "style.qss" следующее выражение:

QPushButton:hover { color: black; background-color: #b3bad0; }

Устанавливаем новое значение для свойства "background-color" с помощью инструкции QLinearGradient(). Новый код будет выглядеть так:

QPushButton:hover { color: black; background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2:1, stop: 0 #ffffff, stop: 1 #c4cce3); }

Сохраняем файл, жмём Ctrl + S. После внесения правок нам нужно обновить стиль, для этого выбираем в главном меню "View" -> "Visual Style" -> "Refresh current style" или используем сочетание клавиш Ctrl + Alt + R.

Чтобы проверить результат, откройте любой диалог, например, мастер создания нового проекта, теперь все кнопки будут иметь градиент при наведении мыши.

Выводы

Среда программирования CodeLobster IDE имеет такой пользовательский интерфейс, который помогает сосредоточиться, а не отвлекает. Возможность гибко настраивать цветовые схемы и стили понравится тем разработчикам, которые хотели бы писать код в привлекательной и красивой IDE. Вы сможете создавать свои приложения и одновременно получать эстетическое удовольствие.

Мы уверены, что качественные цветовые схемы и индивидуальные визуальные стили помогут продуктивно работать и даже вдохновят вас на новые идеи.

Похожие записи

Установка и настройка Qt Creator Настройка Vim Настройка Zsh и Oh my Zsh Настройка PHP-FPM