Fix mobile category colors in list, fix category-color class CSS variable

Added information about --category-color to the styles doc
This commit is contained in:
nathan 2024-10-24 10:18:18 -06:00
parent 74dd6de90b
commit 23fb0dcdd8
5 changed files with 44 additions and 10 deletions

View File

@ -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']))

View File

@ -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_<category ID>",
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* <br/>Note how 'Responsible' widget wraps |
### cat_\<ID>
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-<ID>-color`.
Usually used in the nextmatch, this will put the colored category indicator on the row.
```
<styles>
tr {
border-left: 3px solid var(--category-color);
}
</styles>
...
<row class="cat_$row_cont[cat_id]">
// Row contents here
</row>
```
## Directly Customising Widgets
If you need to customise an individual widget further, you can

View File

@ -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;

View File

@ -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;

View File

@ -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;