From 23fb0dcdd8b5da2d0c05e1919e94514b6eefd774 Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 24 Oct 2024 10:18:18 -0600 Subject: [PATCH] Fix mobile category colors in list, fix category-color class CSS variable Added information about --category-color to the styles doc --- api/categories.php | 2 +- .../pages/getting-started/styling.md | 24 ++++++++++++++++++- pixelegg/css/mobile.css | 21 ++++++++++++---- pixelegg/css/mobile.less | 4 ++-- pixelegg/mobile/fw_mobile.css | 3 ++- 5 files changed, 44 insertions(+), 10 deletions(-) diff --git a/api/categories.php b/api/categories.php index 86e64d6795..bcba68396e 100644 --- a/api/categories.php +++ b/api/categories.php @@ -45,7 +45,7 @@ foreach($categories as $cat) // Use slightly more specific selector that just class, to allow defaults // if the category has no color $content .= "/** {$cat['name']} **/\n/*webComponent*/\n"; - $content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};}, :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n"; + $content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};} :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n"; $content .= "/*legacy*/\n.egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};} \n"; } if (!empty($cat['data']['icon'])) diff --git a/doc/etemplate2/pages/getting-started/styling.md b/doc/etemplate2/pages/getting-started/styling.md index 58f5ba8de9..633e0bf8a3 100644 --- a/doc/etemplate2/pages/getting-started/styling.md +++ b/doc/etemplate2/pages/getting-started/styling.md @@ -1,6 +1,6 @@ # Styling -Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css +Our overall styling is a combination of our site-wide style (pixelegg / kdots), etemplate2.css and [Shoelace](https://shoelace.style/) styles Some handy excerpts: @@ -22,6 +22,10 @@ Some handy excerpts: --warning-color: rgba(255, 204, 0, .5); --error-color: rgba(204, 0, 51, .5); + /* Inside a node with a category class like "cat_", + this is defined to the category's color + */ + --category-color: transparent } ``` @@ -78,6 +82,24 @@ These widgets are in an et2-vbox: | ![fixed label example #3](/assets/images/styling_et2-label-fixed_3.png) | | *--label_width CSS variable changed for more space*
Note how 'Responsible' widget wraps | +### cat_\ + +Adding a category class sets the category color CSS variable `--category-color` to that category's color. Individual +category colors are also available with the `--cat--color`. +Usually used in the nextmatch, this will put the colored category indicator on the row. + +``` + + tr { + border-left: 3px solid var(--category-color); + } + +... + + // Row contents here + +``` + ## Directly Customising Widgets If you need to customise an individual widget further, you can diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index dd4123cbb3..3f9e3c1b40 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -1342,9 +1342,6 @@ option:checked { .ui-widget-header .ui-state-error-text { color: #FF0000; } -.drop-hover { - background-color: #FFDD73; -} .ui-icon-close { background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg"); background-repeat: no-repeat; @@ -6803,6 +6800,7 @@ table.egwGridView_grid img.et2_appicon { --sl-focus-ring-width: 2px; --sl-color-gray-150: hsl(240, 4.9%, 92.5%); --track-width: 3px; + --et2-favorites-left: 0.4em; } .bi::before, [class^="bi-"]::before, @@ -7081,7 +7079,11 @@ table.egwGridView_grid img.et2_appicon { border-top-color: #404040; border-top-width: 4px !important; } -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon, +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { + filter: none; + width: calc(1em + 2px) !important; + height: calc(1em + 2px) !important; +} .standartTreeImage { filter: none; } @@ -7148,6 +7150,11 @@ img.et2_button_icon[src*="svg"]:hover { ::-ms-input-placeholder { color: #666666; } +.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) { + justify-content: center; + --et2-button-image-padding-left: 0; + padding-inline-start: 0; +} @keyframes fw-firstload { 0%, 20%, @@ -7170,6 +7177,9 @@ img.et2_button_icon[src*="svg"]:hover { } } @media all { + :host { + --et2-favorites-left: 0.7em; + } body { background-color: transparent; /*BOF close/back button styling*/ @@ -7206,10 +7216,11 @@ img.et2_button_icon[src*="svg"]:hover { body table.egwGridView_outer tbody tr td .mobile_cat_col { position: absolute; min-height: 100%; - bottom: 0; top: 0; + left: 0px; width: 10px; display: block; + background-color: var(--category-color); } body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col { background: #F5F5F5; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 05a3b99753..c5cdf20b03 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -78,11 +78,11 @@ .mobile_cat_col { position: absolute; min-height: 100%; - bottom:0; top:0; + left: 0px; width:10px; display: block; - + background-color: var(--category-color); } span.cat_.mobile_cat_col { background: #F5F5F5; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 7bc2b7f01c..d6b5e7cf96 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -7023,10 +7023,11 @@ img.et2_button_icon[src*="svg"]:hover { body table.egwGridView_outer tbody tr td .mobile_cat_col { position: absolute; min-height: 100%; - bottom: 0; top: 0; + left: 0px; width: 10px; display: block; + background-color: var(--category-color); } body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col { background: #F5F5F5;