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

Аватара пользователя
Сулимов Антон
Сообщения: 16
Зарегистрирован: 25.05.2016 00:50

14.02.2017 00:48

Изначально было вообще вот так, совсем а-ля Trello
Прикольные стили. В них больше контрастности, резкости.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

14.02.2017 01:34

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

Добавлено спустя 23 минуты 12 секунд:
Вообще, Антон, если Вам понравилась общая идея стилей с тех моих старых скриншотов, то рекомендую в нынешней версии стиля поиграться с цветом фона. Для этого нужно минимум навыков владения "инструментами разработчика" в Chrome или Firefox. Цвет этот задаётся в одном месте для блока верхнего уровня правой панели .b-planner-block (и ещё в одном для "уголочка" в левом меню). Изменение этого цвета мало к чему обязывает, т.к. он прямо взаимодействует на экране только с верхним заголовком Планировщика (в отличие от фона блоков, который повсеместно взаимодействует с множеством разнообразных элементов интерфейса). Я только что попробовал сделать общий фон цветом хаки, заметно более тёмным, чем фон блоков — получившееся мне не шибко понравилось, но какая-то цельность в картине была.

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

Аватара пользователя
Сулимов Антон
Сообщения: 16
Зарегистрирован: 25.05.2016 00:50

14.02.2017 05:37

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

Аватара пользователя
Илья Федоров
Сообщения: 10
Зарегистрирован: 15.01.2018 15:17

19.01.2018 23:10

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

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

20.01.2018 00:04

Кирилл, спасибо большое за эти "фишки"
На здоровье! :)
какую-нибудь инструкцию по тому как эти стили внедрить в планфикс.
Я так понимаю, с применением пользовательских стилей (userstyles, user stylesheets, user CSS) в браузере Вы не сталкивались? Дело в том, что пользовательские стили — это общий инструмент, который применим к почти любым web-страницам. Корректировка интерфейса Планфикса по своим представлениям — это частный случай. Общая суть в том, что можно применить своё альтернативное оформление к элементам web-страницы по различным их идентификаторам. 
Чтобы применение своих стилей делалось легко, а их создание и редактирование было удобным, добрые люди сделали много разных расширений для браузеров. В Chrome самым популярным вроде бы является Stylish. У него есть онлайн-библиотека готовых стилей. Мои стили именно в неё загружены.
Чтобы вникнуть в тему, лучше какую-нибудь "общеобразовательную" статью прочитать про userstyles и Stylish. Хороших таких статей на русском у на примете нет, к сожалению. Вот разве что нашлась более-менее годная https://sonikelf.ru/perekrashivaem-lyub ... n-slylish/  (её текст страдает SEO-синдромом, увы).
Эти мои стили я достаточно долго не обновлял в онлайн-библиотеке, так как откликов по ним почти не было и я не знаю, пользуются ли люди ими до сих пор. Так что возможно, где-то они уже "не лепятся" и дают корявые результаты из-за того, что поменялась вёрстка страниц Планфикса ("Тонированный Планировщик" точно корявит в нескольких местах). Надо бы как-то обновить из тех, что у меня локально установлены и поправлены под актуальную вёрстку.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

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

15.11.2018 14:02

Освежил свои стили для ПланФикса (и добавил несколько новых, всего их полтора десятка).

Обращаю внимание, что стиль "Комментарий, кнопки вверху" на данный момент работает только для "классического" вида ленты действий. Вряд ли я буду его адаптировать для "современного" вида, так как там значительно более сложная структура вёрстки окна редактирования.
Стиль "Цветная подсветка выбора" ушёл в архив после изменения дизайна левой панели в ПланФиксе.

Остальные стили актуальны, универсальны и независимы друга от друга.

Как обычно, это одновременно и работоспособные средства, и демонстрация идей для интерфейса.

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

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

15.11.2018 14:40

Новые стили, добавленные недавно

Как обычно, это одновременно и работоспособные средства, и демонстрация идей для интерфейса.

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


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


Отключение серой шторки
При изменении ширины основных панелей в ПланФиксе поверх изменяемой панели отображается серая "шторка". Данный стиль убирает её, а так же делает разделитель панелей более заметным в процессе его перемещения мышью (делает его темнее и добавляет тень).
Изображение


Метка смены таблица/список
Малюсенький вспомогательный стиль.
Отображает над таблицей задач (а также проектов и т.п.) метку ширины видимой области, на которой происходит переключение вида между таблицей и компактным списком.
Изображение

Аватара пользователя
Кирилл Панькин
Сообщения: 244
Зарегистрирован: 30.03.2016 16:58

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

15.11.2018 15:36

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

Компактные поля в карточке
Применяется к дополнительным полям в карточке задачи.
Ставит подпись поля на одну строку с его содержимым (меняет отображение с flex на inline-block), добавляет двоеточие после подписи, уменьшает высоту блока.
Изображение


P.S. Для управления стилями в браузере рекомендую вместо популярного Stylish пользоваться расширением Stylus — оно удобнее, гибче и лучше, кажется, во всех смыслах.

Ответить