Et2SelectCat: Add in category colors & icons

This commit is contained in:
nathan 2022-06-06 16:09:08 -06:00
parent c631bd8b7f
commit 796c0a33df
4 changed files with 45 additions and 13 deletions

View File

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

View File

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

View File

@ -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[]

View File

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