Find Widget UI enhancement

В далеком 2017 году некто Peng Lyu (rebornix) задался вопросом о наилучшем пользовательском интерфейсе для Find Widget в Visual Studio Code. В ходе дискуссии было выбрано всем нам знакомое поведение поисковой строки в VSCode. И там же было отвергнуто предложение о возможности закрепления поисковой строки в нижней части редактора. А эпический комментарий:

The current find widget solution I like because it is similar to the chrome experience which every user on the planet is familar with.

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

Однако, есть уверенность, что многим пользователям VSCode привычнее было бы видеть строку поиска внизу. Я один из таких пользователей. Почему? Наверное дело в привычке и в том что, во многих программах поисковая строка всегда была внизу. Например:

  • LibreOffice Writer

  • Firefox

  • Netbeans (на замену которого был выбран VSCode)

Если вы читаете эту статью, то подход «так сделано в Chrome» явно не для вас. И когда рационально сделать не получается, то на выручку приходит творческая половина мозга. Делюсь своим решением.

Решение

В первую очередь ставим расширение Custom CSS and JS Loader. Выполняем команды:

sudo chown -R $(whoami) $(which code)
sudo chown -R $(whoami) /usr/share/code

В settings.json редактора делаем настройку (не забудьте использовать свой путь к файлу):

"vscode_custom_css.imports": [
  "file:///home/gozoro/vscode_style.css"
],

В vscode_style.css вставляем следующие стили:

.editor-widget.find-widget{
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom:22px;
  width:600px !important;
  margin-left: 0px;
  border:1px solid #aaa;
  transform: translateY(100px);
}

.editor-widget.find-widget.visible{
  transform: translateY(0px);
}

Перегружаем стили командой «Reload Custom CSS and JS». Готово! Конечно это не идеальное решение. Find Widget накладывается на Panel, если она закреплена внизу (Move Panel Bottom) и при обновлении редактора нужно повторно перегружать стили, но я остался доволен, а это главное в творческом подходе.

Бонус

Раз уже меняем стили, то можно исправить еще парочку раздражителей.

Первое. Выделим жирным группы на вкладке SOURCE CONTROL. Вот эти:

Добавляем соответствующий стиль:

.monaco-tl-row .resource-group{
  font-weight: bold;
}

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

.quick-input-widget{
  margin-top:240px;
  border:1px solid #aaa;
  box-shadow: 0 0 12px 4px #c0c0c0 !important
}

Теперь на полном экране выглядит удобнее.

Комментарии (5)


  1. Krasnoarmeec
    07.01.2023 12:47
    +1

    С почином Вас!
    Отличная первая статья, не смог пройти мимо.


    1. gozoro Автор
      07.01.2023 13:46

      Спасибо, и за приглашение тоже!


  1. Tony-Sol
    07.01.2023 16:25
    +1

    Супер, то что нужно!

    Заодно получается можно сделать скролл для status line’а?


  1. dedmagic
    08.01.2023 14:08

    Насколько я понимаю, то же самое можно сделать путём правки файла workbench.desktop.main.css – это если не хочется ставить ещё одно расширение.


    1. gozoro Автор
      08.01.2023 21:32

      Да, можно и так. Я так делал в начале, пока не нашел расширение. С расширением удобнее, не нужно вспоминать где этот файл лежит, какие и где нужно делать правки, т.к. после обновления версии VSCode все правки в css будут потеряны. А с расширением весь кастомный css лежит отдельно и не потеряется.

      После команды «Reload Custom CSS and JS» расширение можно отключить, оно нужно только в момент обновления файла.