Создание перемещаемых кнопок в браузере Vivaldi.

15:35 МСК, 03 апреля 2019 г. Автор: Admin

Впервые в истории развития веб-обозревателя Vivaldi, кнопка может существовать в нескольких местах. Вот как можно этого добиться.

Одно из основных убеждений разработчиков браузера Vivaldi в том, что именно пользователи хотят настраивать. Это также одна из причин, по которой многим нравится работать с этим веб-обозревателем. Для нашей команды - наши пользователи также являются дизайнерами. С Vivaldi, они вполне могут выразить себя, чтобы настроить все правильно, и по своему вкусу. Есть много способов сделать это. Например, перемещение кнопок в пользовательском интерфейсе до этого момента, сделать было практически невозможно.

С Vivaldi 2.4 изменилось многое. Впервые в истории создания браузера, кнопка может существовать в нескольких местах. Новые кнопки имеют новые функции, которые мы будем использовать для создания других альтернатив и лучшей управляемости. Кроме того, встроена поддержка специальных возможностей, а также поддержка значков, «состояний», меню, всплывающих окон и опции перетаскивания.

Разработчики недаром потратили время на то, чтобы многое переосмыслить, перерисовать графику панели инструментов (коллега по дизайну Atle, поделится некоторыми подробностями о том, как они были сделаны). Мы определились с тремя базовыми размерами, и с обновленным компонентом панели инструментов, теперь кнопки переключаются на правильный размер по мере необходимости.

Те из вас, кто использовал Vivaldi с самого начала, знают, что он позиционировался как «браузер для наших друзей». Мы строили основы по частям, с обратной связью с вами, при этом и не предполагали, что кто-то из команды Vivaldi тогда мог подумать, что Vivaldi 2.4 будет выглядеть таким, как он есть сегодня. Это привело ко многим нововведениям, разработанным и построенным разными людьми.

Ранние компоненты Vivaldi могли бы иметь согласованный дизайн, но связаная с этим логика, возможно сильно бы отличалась. Использование веб-технологий позволило разрабатывать некоторые вещи довольно быстро и продуктивно. Результатом чего, стала (помимо прочего) большая коллекция уникальных кнопок. Наличие таких кнопок, позволяющих им существовать в другом месте пользовательского интерфейса, означало добавление определенной последовательности и нового дизайна.

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

Например, наш коллега Petter, уже создал компонент панели инструментов, который может отображать разные кнопки. Это был значительный объем работы, тем более, что он выполнялся параллельно с основной веткой разработки. Как только такие изменения были объединены с основной идеей проекта, все это ровно сложилось в довольно монолитную конструкцию.

Пользовательский интерфейс браузера Vivaldi построен на популярной библиотеке JavaScript. На языке React, элементы являются независимыми, повторно используемыми компонентами. Цель написания компонента кнопки состояла в том, чтобы сделать кнопки панели инструментов предсказуемыми и последовательными. Чтобы избежать потери функциональности, или возникновения ошибок, при этом должен поддерживаться расширенный набор всех функций этих кнопок.

Когда мы только начинали, мы представляли этот список достаточно простым и коротким. Но позже обнаружили, что (удивительно) у нас было большое разнообразие кнопок, и иногда разные способы сделать одно и то же. Основы довольно просты. Кнопка должна иметь заголовок, или графическое изображение. И нажатие на нее должно вызвать определенное действие.

Мы задаем кнопкам функцию вызывать меню, например, кнопку «Корзина». Некоторые кнопки имеют как действие, так и меню, например, «Назад». Здесь мы поддерживаем оба контекстных меню. Мы добавили еще третий способ доступа к меню, нажав стрелку вниз, когда кнопка находится в фокусе. Говоря о фокусе, новый компонент построен так, что он не получит фокус при нажатии.

Возможно, нам меньше всего нравится в них использование HTML-кнопок с переключением фокуса, а более точная обработка фокуса в новом компоненте, пожалуй, и есть наилучшая функция. Выше мы упоминали действие и меню. Но есть много других функций, которые также были добавлены, например, всплывающее окно, вторичные действия для среднего (или дополнительного) клика. Накладные значки, перетаскивание.

Vivaldi версии 2.4 предлагается с поддержкой перетаскивания для кнопок адреса и строки состояния. Для перемещения кнопки требуется модификатор, в настоящее время это клавиша Shift. Когда кнопка перемещается, мы точно понимаем, где ее можно отпустить. Включение перетаскивания требует тонкой обработки событий. И как мы думаем, что любой, кто работал с этим, скажет то же самое - так работать не очень приятно. Но, в конце концов, это сработало, и нам даже пришлось заняться некоторыми интересными вещами, такими как создание пользовательских перетаскиваемых изображений.

Перетаскивание изображения.

С помощью веб-технологий, система создаст изображение перетаскивания, используя снимок экрана перемещаемого элемента. Для кнопок это означало бы использование нажатого состояния, которое выглядело бы по меньшей мере странно. Наш коллега Atle, долгое время был поклонником суперэллипса, или формы сквирла. Мы сразу же поняли, что это именно то, что мы будем использовать для перетаскивания. Следить за цветами темы было бы непросто, так как базовый векторный актив без каких-либо стилей - черный. Что означает, что здесь требуется некоторая определенность.

Шаг за шагом.

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

Мы надеемся, что вам понравится новый Vivaldi 2.4. Есть много деталей, не описанных здесь, при этом, некоторые из них являются малозаметными и не столь несущественными. Если после прочтения этого материала, вы обнаружите, что именно вам нравится в интерфейсе обозревателя, сообщите нам об этом. Если вы видите что-то не устраивающее вас, зайдите на vivaldi.com/bugreport и также сообщите нам. Спасибо за использование веб-браузера Vivaldi!
________________________________________________________________________________________________

4424

Была ли информация на этой странице полезной для вас?