Несколько пользовательских стилей оформления (user CSS)

22.01.2017 02:41

В дополнение к комплексному стилю "Тонированный Планировщик", я опубликовал ещё несколько мелких стилей, изменяющих отдельные аспекты интерфейса Планфикса по моему вкусу.
Все эти стили, как и "Тонированный Планировщик", предназначены не для украшения интерфейса, а для облегчения его визуального восприятия (не без красоты, само собой).

Стили с подробными описаниями — на сайте userstyles.org. Для установки в Chrome и Firefox рекомендуется использовать расширение Stylish.
Стили предназначены для совместного использования, не конфликтуют между собой и с "Тонированным Планировщиком", но могут произвольно использоваться самостоятельно.

Комментарий, яркая форма
В окне редактирования задачи делает поле-кнопку "Добавить комментарий" и саму форму добавления комментария ярко выделяющимися — добавляет окантовку и светло-жёлтый фон.

Комментарий, кнопки вверху
В форме добавления/редактирования комментария к задаче переносит наверх кнопки "Добавить"/"Сохранить", "Отмена", "Сохранить как черновик" и дополнительные кнопки-иконки.

Цветная подсветка выбора
Добавляет светло-зелёную подсветку выбранного элемента в левой панели, в различных списках задач, проектов и т.п.

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

P.S. Если какой-то стиль вызвал интерес, рекомендую установить его (и Stylish, если ещё не установлен) и посмотреть живьём, как оно смотрится (установленный стиль включается/отключается одним кликом без перезагрузки страницы).

Пользуйтесь на здоровье! ;-)

23.01.2017 12:59

попробовал поставил все стили.
Смотрю что получается.

23.01.2017 13:40

попробовал поставил все стили.

Ну, они именно так задумывались и используются, вместе со стилем для Планировщика. :)
Сначала оно вообще одним большим стилем было, потом стал делить для удобства отладки, а позже для публикации совсем раздробил и причесал.

23.01.2017 13:59

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

Ну и вначале автоматом все равно скроллирую комментарии даже при добавлении на автомате вниз.
Вижу что кнопок нет, понимаю, что надо идти вверх. Иду вверх.

23.01.2017 15:58

:)
Понимаю.
Я бы сделал всё единообразно, но дело в том, что форма редактирования существующего комментария, при всём внешнем сходстве с формой добавления нового, внутри реализована совершенно иначе. Так что я в какой-то момент бросил это дело. Тем более, что: 1) при добавлении нового комментария работает стиль "Комментарий, яркая форма", так что визуально всё выглядит существенно иначе; 2) при редактировании комментария отсутствует отображение чек-листа задачи, как основная причина создания этого стиля-костыля.
Но ради гармонии мира :) я попробую таки доработать стиль, чтобы и при редактировании кнопки перемещались.

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

Собственно, все эти стили являются деятельным призывом к разработчикам задуматься о внедрении чего-то подобного.

Добавлено спустя 20 минут 3 секунды:
Ещё надо заметить, что в web-интерфейсах в подобных случаях часто ставят кнопки действия и над окном редактирования, и под ним. Но такой фокус средствами user css точно осилить не получится. Это или user script мутить, или таки к разработчикам. :)

Добавлено спустя 1 час 28 минут:
Вот, что значит, Андрей, задеть автора за живое! :)
Сделал перенос так же при редактировании комментария. Обновите стиль.
Надеюсь, косяки не полезут.

23.01.2017 17:16

Да.
Получилось.
Теперь и в редактировании - кнопки вверху. - http://joxi.ru/KAxYNaVIlO3vr8

Осталось перенастроить мозг, чтобы он автоматом не пытался скроллировать комментарий вниз для поиска кнопочек.

У Вас нет случайно такого патча? :))

23.01.2017 17:27

У Вас нет случайно такого патча? :))

Тут css мало, тут скрипты нужны. Надо поискать GreaseMonkey/TamperMonkey для Мозга. =)

23.01.2017 17:27

Чуть крупнее и контрастнее - за это отдельное спасибо!
Так путь до задачи читается значительно лучше!
Там шрифт мелкий и еще светло серый - на белом фоне плохо читается.
С большим шрифтом стало нагляднее.

24.01.2017 19:48

Сделал маленький стиль для изменения размера шрифта в редакторе.

05.02.2017 17:29

По мотивам недавнего обсуждения "Интерфейс / Проекты и задачи в дереве. Визуальное отличие", немного обновил стиль "Чуть крупнее и контрастнее". Ну и ещё там парочка мелочей добавилась.

Добавлено спустя 26 минут 7 секунд:
Для интересующихся: опубликовал экспериментальный стиль "Нанокарточки".

08.02.2017 03:28

По мотивам давнего обсуждения Перенести последний столбец "Добавить в Планировщик" сделал ещё один экспериментальный стиль — "Добавить в Планировщик Плюс", убирающий правую колонку "Добавить в Планировщик" и превращающий её во всплывающее меню.

Добавлено спустя 7 часов 17 секунд:
Для порядка опубликовал сборный стиль "planfix.ru - Всё в одном, демо", включающий в себя все мои стили для planfix.ru c теми настройками, какие я использую сам, по состоянию на сейчас.
Для практического использования этот стиль вряд ли годен из-за своей монолитности, а вот для быстрого ознакомления со всем сразу — то, что надо.

08.02.2017 12:35

А можно вопрос или несколько?
Уже ранее спрашивал по оформлению - про скроллеры
1 - Комментарии - отображение скроллера
2 - Дизайн

Скроллер для комментариев
1. Отсутствует, пока не наведешь мышь на поле комментария (большого комментария, который не помещается на одном экране и для которого требуется скролл, чтобы его посмотреть)
2. При наведении мышью на комментарий - элемент скроллер появляется, но плохо заметен на интерфейсе, так же сливается с вертикальной линией, отделяющей комментарий от деталей задачи (правой панели)

Выглядит у меня по крайне мере так:
1 - http://joxi.ru/brReGvLidLJJA1
2 - http://joxi.ru/1A5ZvVyUOzKVrE

Добавлено спустя 3 минуты 13 секунд:
Попробовал установить стиль — "Добавить в Планировщик Плюс", убирающий правую колонку "Добавить в Планировщик".
Мне кажется стало визуально удобнее.
И когда перемещаешься горизонтальной линейкой прокрутки справа уже нет лишнего места, занятого последним столбцом.

Добавлено спустя 3 минуты 7 секунд:
И тогда пока не забыл - вопрос по расширению (в моем случае для Chrome) Stylish.
Ситуация следующая.
На навом работчем месте входим в учетку в Chrome - перечень всех расширений подгружается, но вот стили, которые инсталлированы на одном рабочем месте в Stylish не видны.
Т.е. нужно опять идти на сайт и по ссылочкам их инсталлировать.
Может быть я просто не разобрался еще в этом расширении и что-то делаю не так?

08.02.2017 16:11

Скроллер для комментариев

Уверен, с этим проблем не будет. Сделаю примерно, как в "Тонированном планировщике", и добавлю в "Чуть крупнее и контрастнее".

Мне кажется стало визуально удобнее

:)

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

На сколько я понимаю, это так и задумано автором.

P.S. Наверное, добавлю в "Тонированный Планировщик" цветовую схему "нейтральная" — с белым фоном рабочего поля и серыми бордюрами блоков, которая будет ближе к стандартному оформлению. Это для тех, кому нравится общая идея стиля, но смущает добавление зелёного цвета.

Добавлено спустя 3 часа 7 минут 47 секунд:
Добавил оформление для более заметных полос прокрутки в стиль "Чуть крупнее и контрастнее". Вроде всё ок.

В "Тонированный Планировщик" добавил, как и собирался, нейтральную цветовую схему.

10.02.2017 00:16

Хм. Честно говоря, удивительно. Я понимаю, что количество интересующихся темой не очень-то большое, но по статистике userstyles.org каждый стиль был установлен десяток-другой раз. Я ожидал, что какие-то комментарии будут от людей. Не то, что бы оно мне сильно надо, но как-то это естественно. А тут — тишина. Вот только Андрей пишет, да еще пара человек в других темах кратко отреагировали. Просто любопытно, как оно у других там вообще? Нормально работает или как? :-)

10.02.2017 13:58

Скроллер стал заметнее.
Спасибо большое :)

11.02.2017 19:14

Здравствуйте, Кирилл!
Спасибо Вам за стили!
Мне чень понравились эти:

Добавить в Планировщик Плюс
Комментарий, яркая форма
Цветная подсветка выбора
Чуть крупнее и контрастнее

Подход с мини-стилями - это круто! Они сами по себе маленькие и завершенные. Можно изменить любую, понравивщуюся деталь ПФ. Гараздо круче, чем подход с монолиным стелем "Тонированный Планировщик", который не понравился из-за своих рубящих переходов - куча выделяющихся "прямоугольников" в глаза бьют.
А вот стиль "Нанокарточки" почему не применяется. Устанавливаю, но изменения не происходят.
Ваша работа вдохновляет тоже сделать что-то полезное!

11.02.2017 19:34

Нанокарточки применяются если изменять ширину столбца.

11.02.2017 19:59

Спасибо, Андрей, получилось!
Нанокарточки - класс!

11.02.2017 20:14

там в описании стиля написано, при какой ширине они включаются :) если ширина заканчивается на значение от 5 до 9 пикселей, если ничего не путаю

13.02.2017 04:12

Мелкие стили просто клас! Когда ПФ уже доберётся до переделки интерфейса?
Сворачивание списка планировщиков в плюсик класная вещь. Сразу как-то легче стало!
Как идея, было бы здорово, если бы список действий над задачей в планировщике тоже как-то упростить. Часто приходится его разворачивать чтобы добраться до пункта "Завершить". Да и названия действий уже не нужны - уже ориентируешься по иконкам.

13.02.2017 17:24

Антон, рад, что "пошло в жилу". :)

На счёт "Тонированого Планировщика".
Там, строго говоря, нет чему быть немонолитным. Он ведь, в сущности, делает всего 3 вещи: изменяет цвет фона рабочего поля, задаёт размеры блоков/рамок вокруг содержимого и добавляет блокам/рамкам цвет.
Я запросто могу сделать настраиваемые пользователем основные цвета (фон и границы), но толку от это будет не очень много, это я из опыта говорю. Дело в том, что там все цвета находятся на грани уверенной различимости и по яркости, и по насыщенности. Под имеющиеся цвета подстроены цвета многих тонких границ и второстепенных элементов (скажем, "шкала" часов в планировщике). Если изменить основные цвета, то другие будут или недостаточно контрастными рядом с ними, или наоборот слишком контрастными. Т.е. надо настраивать и их тоже, но их там порядка десятка наберётся, а такое через опции установки стиля настраивать очень неудобно. Потому я ограничился просто двумя цветовыми схемами — своей "родной" зеленоватой и нейтральной.
На счёт кучи графического "мусора" в виде прямоугольников. Я сам не в восторге от такой ситуации, но это лучшее, что получилось исходя из моего собственного видения задачи, а оно следующее: карточки и другие элементы блоков с их белым фоном должны ясно различаться на общем фоне; области блоков (списков, Хроники, календарей) должны быть заметны. В общем, должны быть ясно видна иерархия "рабочая область — блок (список и др.) — элемент (карточка и др.)". При этом, обозначились ещё два ограничения. Не трудно заметить, что одним из вдохновляющих факторов моего стиля было оформление Trello, но не потому что Trello популярен и всё такое, а потому что считаю его подход к цветовому оформлению удачным в своём роде. Изначально было вообще вот так, совсем а-ля Trello. Но подумав, я решил, что как-то несолидно так буквально подражать другому решению, а самое главное — такое тёмное оформление пойдёт в разрез с общим светлым оформлением интерфейса ПланФикса. Потому было принято фундаментальное ограничение — тёмного должно быть поменьше, ради сохранения преемственности с остальным интерфейсом. С другой стороны, попытки оставить общий фон рабочей области планировщика вообще белым тоже не принесли удовлетворения — белые карточки, даже будучи помещены в затемнённые блоки, всё равно визуально терялись на общем белом фоне и выглядели в каком-то смысле как сквозные дырки в блоках, через которые виден фон. С третьей стороны, сильно светлый цвет блоков, применение которого должно снизить эффект этих самых "рубящих переходов", играет злую шутку, заставляя зрение напрягаться, отыскивая визуальные границы блоков. Вполне допускаю, что это чистая субъективщина, но, что поделать — я художник, я так вижу ;-) . Именно на этот случай для желающих я добавил вариант "Тонированного Планировщика" в нейтральном оформлении, с белым фоном и светло-серыми блоками. Кстати, надо заметить, что пока я потихоньку пилил свой стиль (задолго до публикации), практически в том же направлении шли и разработчики ПланФикса (я об этом не знал, т.к. у меня был включен мой стиль =) ) — светло-серый фон карточек, служивший для их выделения на фоне белого рабочего поля, стал белым, а списки обзавелись серыми рамками (мой стиль с нейтральным оформлением получается очень похожим на это, но с ним рамки получают ещё и Хроника, и Календарь).
Вот такой комплекс факторов и устремлений привёл к появлению "Тонированого Планировщика", какой он сейчас есть. Возможно, существуют и другие способы оформить блоки в планировщике, выполняя обозначенные мной принципы и ограничения, но я в процессе "игр" с цветами таковых не нашёл.

Когда ПФ уже доберётся до переделки интерфейса?

Да чего, нормально. Идут потихоньку. :)

Часто приходится его разворачивать чтобы добраться до пункта "Завершить".

Но ведь порядок пунктов можно для себя менять — 3 самых востребованных переместить вверх и они будут отображаться сразу, без подписей. Вполне разумное ограничение, по-моему.
Хотя, для продвинутых пользователей и правда было бы неплохо иметь вариант отображать сразу все пункты меню в виде иконок без подписей.
Немножко залез грязными лапищами под капот к этой штуке. Думаю, можно что-то там допилить средствами стилей.

13.02.2017 17:26

а мне на почту уже пришло уведомление :) с текстом

13.02.2017 18:10

Да, я понимаю, но там только половина. :)

Добавлено спустя 43 минуты 5 секунд:
Вот теперь можно читать мой длиннопост выше. :)

13.02.2017 18:14

Но ведь порядок пунктов можно для себя менять — 3 самых востребованных переместить вверх и они будут отображаться сразу, без подписей. Вполне разумное ограничение, по-моему.

А где это делается?

13.02.2017 18:19

В настройке фильтра списка — "Настройка меню карточки" (в самом низу).