UI2 actions для строки таблицы На рассмотрении
Тоже частая ситуация при работе с таблицами -- набор каких-то действий над строкой данных. Копирование, удаление и т.д.
Я пробовал сделать несколько иконок в последовательных <a>. Слишком близко.
Я пробовал сделать несколько button.circle -- великоваты и слишком привлекают внимание
Я пробовал сделать несколько button.nobutton -- большие отступы, колонка становится довольно широкой.
Сделал в общем td > ul.actions > ul > li > a. Немного страшненько, но в целом сойдёт. Может дизайнеры что-нибудь придумают более приличное и напишут рекомендацию на этот случай или даже добавят в ui2.css?
table
ul.actions
display inline
padding 0
list-style-type none
white-space nowrap
li
display inline-block
margin 0 0.3em
white-space nowrap
&:first-child
margin-left 0
&:last-child
margin-right 0
a
opacity 0.5
color var(--text-color-link);
white-space nowrap
&:hover
color var(--text-color-link);
opacity 1
5 комментариев
Можно в данном случае использовать иконки увеличенного размера .icon.large и регулировать отступы с помощью .custom-mr-8.
Но если действий много, то возможно, следует главное действие оформить обычной кнопкой .button.small, а остальное завернуть рядом в .waDropdown. Или же все оформить внутри .waDropdown.
Это все мысли вслух. Пожелание по готовому решению принято. Постараемся что-то придумать и добавить пример в приложении UI.
это же калька с bootstrap - добавить класс custom-mx-8 или custom-mx-12 к кнопкам и все
В подобных случаях, когда рядом находится несколько иконок действий и их нужно расположить поплотнее, можно использовать одну иконку в виде трех точек (fa-ellipsis-h), при нажатии на которую выпадает список всех действий (.waDropdown). Таким образом таблица не будет перегружена большим количеством кнопок в одном столбце и больше места достанется контенту в других столбцах.
Также, в некоторых случаях можно оставить на виду 1-2 иконки часто выполняемых действий рядом с иконкой в виде трех точек.
Цвет в подобных случаях, когда много повторяющихся иконок среди контента, можно использовать менее заметный (.gray). Полупрозрачный синий цвет иконок или других элементов выглядит не совсем в стиле WA2, так что его лучше не использовать.
Кстати, в выпадающем списке (.waDropdown) иконки по умолчанию имеют довольно светлый серый цвет, поэтому если сделать одну иконку удаления красной, то и другие желательно сделать более темного серого или разноцветными, чтобы они не выглядели блекло, как задизейбленные.
имхо, не люблю такую реализацию. это может быть удобно, когда изменения требуется вносить разово для 1-2 строк. но когда стоит задача внести изменения в 100-1000 строк лишний клик тормозит процесс.
Если Вы меняете 100-1000 строк вручную, то стоит задуматься об импорте данных..