holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Favorites: Add icons to dropdown, fix icon styling in sidebox menu

Browse Source
This commit is contained in:
nathan 2022-06-28 14:09:29 -06:00
parent 4f4b83733c
commit 2cd5c861aa
8 changed files with 61 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
api/js/etemplate/Et2Favorites/Et2Favorites.ts
View File

@ -16,6 +16,7 @@ import {et2_INextmatchHeader, et2_nextmatch} from "../et2_extension_nextmatch";
import {Et2Image} from "../Et2Image/Et2Image"; import {Et2Image} from "../Et2Image/Et2Image";
import {Et2Dialog} from "../Et2Dialog/Et2Dialog"; import {Et2Dialog} from "../Et2Dialog/Et2Dialog";
import {SlMenuItem} from "@shoelace-style/shoelace"; import {SlMenuItem} from "@shoelace-style/shoelace";
import {cssImage} from "../Et2Widget/Et2Widget";
/** /**
* Favorites widget, designed for use in the nextmatch header * Favorites widget, designed for use in the nextmatch header
@ -50,24 +51,34 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
return [ return [
...super.styles, ...super.styles,
css` css`
et2-image { et2-image {
height: 2ex; height: 2ex;
padding: 0px; padding: 0px;
margin-top: -5px; margin-top: -5px;
vertical-align: middle; vertical-align: middle;
} }
et2-image[src="trash"] { et2-image[src="trash"] {
display:none; display:none;
} }
sl-menu { sl-menu {
min-width: 15em; min-width: 15em;
} }
sl-menu-item:hover et2-image[src="trash"] { sl-menu-item:hover et2-image[src="trash"] {
display:initial; display:initial;
} }
.menu-item__chevron { /* Add star icons - radio button is already in prefix */
display:none; sl-menu-item::part(base) {
} background-image: ${cssImage("fav_filter")};
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 5px center;
}
sl-menu-item[checked]::part(base) {
background-image: ${cssImage("favorites")};
}
sl-menu-item:last-child::part(base) {
background-image: none;
}
`, `,
]; ];
} }
@ -145,14 +156,14 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
title="${this.egw().lang('Set as default')}"/>`; title="${this.egw().lang('Set as default')}"/>`;
//@ts-ignore TS doesn't know about window.app //@ts-ignore TS doesn't know about window.app
let is_admin = (typeof window.app['admin'] != "undefined"); let is_admin = (typeof this.egw().app('admin') != "undefined");
//@ts-ignore option.group does not exist //@ts-ignore option.group does not exist
let icon = (option.group !== false && !is_admin || option.value == 'blank') ? "" : html` let icon = (option.group !== false && !is_admin || option.value == 'blank') ? "" : html`
<et2-image slot="suffix" src=${"trash"} icon @click=${this._handleDelete} <et2-image slot="suffix" src=${"trash"} icon @click=${this._handleDelete}
statustext="${this.egw().lang("Delete")}"></et2-image>`; statustext="${this.egw().lang("Delete")}"></et2-image>`;
return html` return html`
<sl-menu-item value="${option.value}"> <sl-menu-item value="${option.value}" ?checked="${option.value == this._preferred}">
${option.value !== Et2Favorites.ADD_VALUE ? radio : ""} ${option.value !== Et2Favorites.ADD_VALUE ? radio : ""}
${icon} ${icon}
${option.label} ${option.label}

1
api/js/etemplate/Et2Image/Et2Image.ts
View File

@ -26,7 +26,6 @@ export class Et2Image extends Et2Widget(SlotMixin(LitElement)) implements et2_ID
::slotted(img) { ::slotted(img) {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
vertical-align: middle;
} }
:host([icon]) { :host([icon]) {
height: 1.3rem; height: 1.3rem;

8
api/templates/default/etemplate2.css
View File

@ -2262,7 +2262,7 @@ div.message.floating, lion-validation-feedback[type] {
display: inline-block; display: inline-block;
} }
.favorites .sideboxstar { .favorites .sideboxstar, .favorites div.ui-icon-heart {
height: 9px; height: 9px;
display: inline-block; display: inline-block;
padding: 0px 4px; padding: 0px 4px;
@ -2292,11 +2292,17 @@ div.message.floating, lion-validation-feedback[type] {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
margin: -1px 1px 0px 1px; margin: -1px 1px 0px 1px;
height: 12px;
width: 6px;
} }
.sidebox-favorites .favorites div.ui-icon-trash { .sidebox-favorites .favorites div.ui-icon-trash {
margin-top: -5px; margin-top: -5px;
margin-right: 4px; margin-right: 4px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
} }
ul[id$='favorites_popup_state'] span.filter_value { ul[id$='favorites_popup_state'] span.filter_value {

10
pixelegg/css/mobile.css
View File

@ -934,7 +934,7 @@
background-size: 12px 12px; background-size: 12px 12px;
background-position: 1px 0; background-position: 1px 0;
margin-right: 9px; margin-right: 9px;
margin-left: 2px; margin-left: 4px;
} }
.sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar { .sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar {
width: 4px; width: 4px;
@ -4937,7 +4937,7 @@ span.overlayContainer img.overlay {
#egw_fw_sidebar #egw_fw_splitter { #egw_fw_sidebar #egw_fw_splitter {
position: absolute; position: absolute;
width: 8px; width: 8px;
top: 40px; top: 0px;
bottom: 3px; bottom: 3px;
right: 0px; right: 0px;
} }
@ -5075,9 +5075,9 @@ span.overlayContainer img.overlay {
background-image: url(../images/splitter_vert.png); background-image: url(../images/splitter_vert.png);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #ffffff; background-color: transparent;
position: absolute; position: absolute;
width: 5px; width: 4px;
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize;
} }
@ -5087,7 +5087,7 @@ span.overlayContainer img.overlay {
opacity: 1 !important; opacity: 1 !important;
} }
.egw_fw_ui_splitter_hover { .egw_fw_ui_splitter_hover {
background-color: white; background-color: #CDCDCD;
} }
.egw_fw_ui_category_content { .egw_fw_ui_category_content {
background-color: #ffffff; background-color: #ffffff;

10
pixelegg/css/monochrome.css
View File

@ -914,7 +914,7 @@
background-size: 12px 12px; background-size: 12px 12px;
background-position: 1px 0; background-position: 1px 0;
margin-right: 9px; margin-right: 9px;
margin-left: 2px; margin-left: 4px;
} }
.sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar { .sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar {
width: 4px; width: 4px;
@ -4917,7 +4917,7 @@ span.overlayContainer img.overlay {
#egw_fw_sidebar #egw_fw_splitter { #egw_fw_sidebar #egw_fw_splitter {
position: absolute; position: absolute;
width: 8px; width: 8px;
top: 40px; top: 0px;
bottom: 3px; bottom: 3px;
right: 0px; right: 0px;
} }
@ -5055,9 +5055,9 @@ span.overlayContainer img.overlay {
background-image: url(../images/splitter_vert.png); background-image: url(../images/splitter_vert.png);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #ffffff; background-color: transparent;
position: absolute; position: absolute;
width: 5px; width: 4px;
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize;
} }
@ -5067,7 +5067,7 @@ span.overlayContainer img.overlay {
opacity: 1 !important; opacity: 1 !important;
} }
.egw_fw_ui_splitter_hover { .egw_fw_ui_splitter_hover {
background-color: white; background-color: #CDCDCD;
} }
.egw_fw_ui_category_content { .egw_fw_ui_category_content {
background-color: #ffffff; background-color: #ffffff;

2
pixelegg/css/pixelegg.css
View File

@ -924,7 +924,7 @@
background-size: 12px 12px; background-size: 12px 12px;
background-position: 1px 0; background-position: 1px 0;
margin-right: 9px; margin-right: 9px;
margin-left: 2px; margin-left: 4px;
} }
.sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar { .sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar {
width: 4px; width: 4px;

8
pixelegg/less/etemplate2.less
View File

@ -754,7 +754,13 @@ div.header_row_right{
line-height: inherit; line-height: inherit;
padding: 2px 1px; padding: 2px 1px;
// Heart // Heart
div.ui-icon-heart {background-image: url(../images/favorites.svg); background-size: 12px 12px;background-position: 1px 0;margin-right:9px;margin-left:2px;} div.ui-icon-heart {
background-image: url(../images/favorites.svg);
background-size: 12px 12px;
background-position: 1px 0;
margin-right: 9px;
margin-left: 4px;
}
// Bulltpoints // Bulltpoints
div.sideboxstar { div.sideboxstar {
width: 4px; width: 4px;

10
pixelegg/mobile/fw_mobile.css
View File

@ -945,7 +945,7 @@
background-size: 12px 12px; background-size: 12px 12px;
background-position: 1px 0; background-position: 1px 0;
margin-right: 9px; margin-right: 9px;
margin-left: 2px; margin-left: 4px;
} }
.sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar { .sidebox-favorites ul.favorites li.ui-menu-item a div.sideboxstar {
width: 4px; width: 4px;
@ -4948,7 +4948,7 @@ span.overlayContainer img.overlay {
#egw_fw_sidebar #egw_fw_splitter { #egw_fw_sidebar #egw_fw_splitter {
position: absolute; position: absolute;
width: 8px; width: 8px;
top: 40px; top: 0px;
bottom: 3px; bottom: 3px;
right: 0px; right: 0px;
} }
@ -5086,9 +5086,9 @@ span.overlayContainer img.overlay {
background-image: url(../images/splitter_vert.png); background-image: url(../images/splitter_vert.png);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #ffffff; background-color: transparent;
position: absolute; position: absolute;
width: 5px; width: 4px;
height: 100%; height: 100%;
cursor: col-resize; cursor: col-resize;
} }
@ -5098,7 +5098,7 @@ span.overlayContainer img.overlay {
opacity: 1 !important; opacity: 1 !important;
} }
.egw_fw_ui_splitter_hover { .egw_fw_ui_splitter_hover {
background-color: white; background-color: #CDCDCD;
} }
.egw_fw_ui_category_content { .egw_fw_ui_category_content {
background-color: #ffffff; background-color: #ffffff;