Ссылка, которую я убрал, и почему она вернулась

Productivity

В посте на прошлой неделе о разделах боковой панели была часть Что вырезало ревью плана, и одним из пунктов там была ссылка Настроить боковую панель: она появлялась при наведении, стояла под разделами и открывала окно свойств. Я её убрал и написал, что «элемент, который появляется только при наведении, да ещё внизу прокручиваемой области, никто не находит».

Сам по себе довод был верным. И всё же этот релиз возвращает её вариант, и разницу стоит объяснить: она касается единственного случая, который тот довод не учёл.

Пустая боковая панель

У заголовка каждого раздела в боковой панели есть кнопка настроек, которая появляется при наведении, и до сих пор в её меню был ровно один пункт: Убрать из боковой панели. Теги включены по умолчанию, так что в новом рабочем пространстве один раздел. Уберите его — разумно, если вы не пользуетесь тегами, — и середина боковой панели опустеет. «Новая заметка» и «Главная» сверху, «Файлы», «Корзина» и «Настройки» снизу, а между ними ничего.

Это «ничего» и есть проблема. Чтобы вернуть раздел, нужно открыть Ещё → Пользовательские свойства, выбрать свойство и включить Показывать в боковой панели. Такой путь есть, и в прошлом посте я доказывал, что до него один клик. Но это один клик, только если вы уже знаете, что пустое место можно настроить. Пустая область об этом не говорит. Единственное, что похоже на подходящее место, — кнопка Настройки, а она открывает не то окно.

Так что у верного правила из ревью — элементы внизу списка, видные только при наведении, никто не замечает — есть оговорка. Когда список пуст, у него нет низа, и взгляду в этой области больше не за что зацепиться. Пустое состояние — единственное место, где подсказка при наведении работает: ей не с чем соперничать.

Что вышло

Настроить боковую панель появляется в области разделов, только когда в боковой панели нет ни одного раздела: теги убраны и не включено ни одно свойство, которому есть что показать. Наведите курсор на боковую панель — кнопка плавно проявится; нажмите — откроется окно свойств. Включите любой раздел, закройте окно, и кнопки больше нет. Она нарочно нарисована как приглушённая строка с пунктирной рамкой, а не как сплошная кнопка: это не действие, которое совершают часто, а подсказка, что здесь может что-то быть.

Условие строже, чем «в боковой панели нет свойств». Включённое свойство типа «Связь», у которого ещё ни в одной заметке нет значения, ничего не отображает, и для вас это та же пустая боковая панель. Кнопка ориентируется на то, что видно на экране, а не на флаги.

Редактировать свойство, не уходя из боковой панели

В меню раздела появился второй пункт, и его мне стоило выпустить первым: Редактировать свойство. Наведите курсор на заголовок раздела, нажмите кнопку настроек, выберите этот пункт, и откроется окно свойств, где это свойство уже выбрано: его варианты, цвета, переключатель Показывать в боковой панели — всё сразу перед вами. Для тегов и доски открывается их встроенная панель, закрытая для изменений, где единственная настройка — переключатель боковой панели.

Раньше, чтобы отредактировать свойство, которое видно в боковой панели, нужно было открыть «Ещё → Пользовательские свойства» и найти его в списке. При трёх свойствах это пустяк. При пятнадцати — уже поиск того, что боковая панель и так знала: курсор ведь был на нём.

Как открыть окно сразу на нужном свойстве

Под обоими изменениями лежит небольшая инженерная деталь: окну свойств теперь можно сказать, на каком свойстве открыться. Звучит как пустяк, но пустяком это было не совсем.

У окна уже были правила выбора: при открытии выбрать первое пользовательское свойство; перейти к свойству в момент его создания, как только придут обновлённые данные, где оно уже есть; восстановиться, если выбранное свойство пропало из списка. Эти правила живут в одном эффекте, и новое нужно было вписать, не сломав их.

Загвоздка во времени. Окно загружает список, только пока открыто, а этот список делит кеш с боковой панелью, так что обычно он уже на месте — но не всегда. Если нужно выбрать свойство, которого в списке ещё нет, окно должно дождаться списка, а не сдаться. У только что созданного свойства задача того же вида, и я решил её так: держать id и пробовать снова, когда придут данные. Запрошенное свойство использует ту же идею с одним отличием. Созданное свойство гарантированно появится, так что ждать правильно. А запрошенное мог удалить коллега между вашим наведением и кликом, поэтому если список пришёл без него, окно возвращается к обычному выбору по умолчанию, а не висит вечно на пустом месте.

Это различие занимает несколько строк, и только благодаря ему функция не работает через раз.

Как тестировать то, чего не видно

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

Второй придирчивее, чем кажется. Playwright считает прозрачный элемент видимым — у него есть размеры и он не скрыт, — так что простая проверка «виден ли» прошла бы независимо от того, работает ли появление при наведении. Поэтому тест читает вычисленную прозрачность (opacity) до и после наведения. Если вся суть элемента в том, когда он появляется, проверяйте именно это «когда».

Все изменения списком

  • В меню раздела теперь два пункта: Редактировать свойство / Убрать из боковой панели.

  • Боковая панель без разделов показывает Настроить боковую панель при наведении.

  • Окно свойств открывается на выбранном свойстве, а если того уже нет, возвращается к выбору по умолчанию.

Справка: Боковая панель · Пользовательские свойства · Список изменений v0.8.1

Читайте также