From 796c0a33dfdd09f8be61e270113def13a3d80253 Mon Sep 17 00:00:00 2001 From: nathan Date: Mon, 6 Jun 2022 16:09:08 -0600 Subject: [PATCH] Et2SelectCat: Add in category colors & icons --- api/categories.php | 2 +- api/js/etemplate/Et2Select/Et2Select.ts | 34 ++++++++++++++++++++- api/js/etemplate/Et2Select/StaticOptions.ts | 16 ++++------ api/src/Etemplate/Widget/Select.php | 6 +++- 4 files changed, 45 insertions(+), 13 deletions(-) diff --git a/api/categories.php b/api/categories.php index 3973f08cf1..4086c45b8d 100644 --- a/api/categories.php +++ b/api/categories.php @@ -44,7 +44,7 @@ foreach($categories as $cat) { // Use slightly more specific selector that just class, to allow defaults // if the category has no color - $content .= ".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']};} /*{$cat['name']}*/\n"; + $content .= ".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 , et2-select-cat > .cat_{$cat['id']} {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']};} /*{$cat['name']}*/\n"; } if (!empty($cat['data']['icon'])) { diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index eead519af2..a9bf19d9cd 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -56,6 +56,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS text-indent: 5px; } + /* This is the drop-down arrow on the right */ ::slotted([slot="suffix"]) { font-size: 120% !important; font-weight: bold; @@ -346,11 +347,42 @@ customElements.define("et2-select-bool", Et2SelectBool); export class Et2SelectCategory extends Et2Select { + static get styles() + { + return [ + ...super.styles, + css` + ::slotted(*) { + border-left: 3px solid transparent; + } + ` + ] + } + + static get properties() + { + return { + ...super.properties, + /** + * Include global categories + */ + global_categories: {type: Boolean}, + /** + * Show categories from this application. If not set, will be the current application + */ + application: {type: String}, + /** + * Show categories below this parent category + */ + parent_cat: {type: Number} + } + } + constructor() { super(); - this.select_options = so.cat(this, {other: this.other || []}); + this.select_options = so.cat(this); } } diff --git a/api/js/etemplate/Et2Select/StaticOptions.ts b/api/js/etemplate/Et2Select/StaticOptions.ts index 05c72371c3..e77f3750df 100644 --- a/api/js/etemplate/Et2Select/StaticOptions.ts +++ b/api/js/etemplate/Et2Select/StaticOptions.ts @@ -229,22 +229,18 @@ export class StaticOptions return this.cached_server_side(widget, 'select-app', options); } - cat(widget : Et2SelectWidgets, attrs) : SelectOption[] + cat(widget : Et2SelectWidgets) : SelectOption[] { - // Add in application, if not there - if(typeof attrs.other == 'undefined') + var options = [widget.global_categories, /*?*/, widget.application, widget.parent_cat]; + + if(typeof options[3] == 'undefined') { - attrs.other = new Array(4); - } - if(typeof attrs.other[3] == 'undefined') - { - attrs.other[3] = attrs.application || + options[3] = widget.application || // When the widget is first created, it doesn't have a parent and can't find it's instanceManager (widget.getInstanceManager() && widget.getInstanceManager().app) || widget.egw().app_name(); } - var options = (attrs.other || []).join(','); - return this.cached_server_side(widget, 'select-cat', options).map(cat => { cat.class += ' cat_'+cat.value; return cat }); + return this.cached_server_side(widget, 'select-cat', options.join(',')) } country(widget : Et2SelectWidgets, attrs) : SelectOption[] diff --git a/api/src/Etemplate/Widget/Select.php b/api/src/Etemplate/Widget/Select.php index 580c6eacd9..be3935304e 100644 --- a/api/src/Etemplate/Widget/Select.php +++ b/api/src/Etemplate/Widget/Select.php @@ -648,12 +648,16 @@ class Select extends Etemplate\Widget 'main' => (int)$cat['main'], 'children' => $cat['children'] ?? null, //add different class per level to allow different styling for each category level: - 'class' => "cat_level". $cat['level'] + 'class' => "cat_level" . $cat['level'] . " cat_{$cat['id']}" ); // Send data too if(is_array($cat['data'])) { $options[$cat['id']] += $cat['data']; + if($cat['data']['icon']) + { + $options[$cat['id']]['icon'] = \admin_categories::icon_url($cat['data']['icon']); + } } } // preserve unavailable cats (eg. private user-cats)