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 {Et2Dialog} from "../Et2Dialog/Et2Dialog";
import {SlMenuItem} from "@shoelace-style/shoelace";
import {cssImage} from "../Et2Widget/Et2Widget";
/**
* Favorites widget, designed for use in the nextmatch header
@ -50,24 +51,34 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
return [
...super.styles,
css`
et2-image {
height: 2ex;
padding: 0px;
margin-top: -5px;
vertical-align: middle;
}
et2-image[src="trash"] {
display:none;
}
sl-menu {
min-width: 15em;
}
sl-menu-item:hover et2-image[src="trash"] {
display:initial;
}
.menu-item__chevron {
display:none;
}
et2-image {
height: 2ex;
padding: 0px;
margin-top: -5px;
vertical-align: middle;
}
et2-image[src="trash"] {
display:none;
}
sl-menu {
min-width: 15em;
}
sl-menu-item:hover et2-image[src="trash"] {
display:initial;
}
/* Add star icons - radio button is already in prefix */
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')}"/>`;
//@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
let icon = (option.group !== false && !is_admin || option.value == 'blank') ? "" : html`
<et2-image slot="suffix" src=${"trash"} icon @click=${this._handleDelete}
statustext="${this.egw().lang("Delete")}"></et2-image>`;
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 : ""}
${icon}
${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) {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
:host([icon]) {
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;
}
.favorites .sideboxstar {
.favorites .sideboxstar, .favorites div.ui-icon-heart {
height: 9px;
display: inline-block;
padding: 0px 4px;
@ -2292,11 +2292,17 @@ div.message.floating, lion-validation-feedback[type] {
vertical-align: middle;
display: inline-block;
margin: -1px 1px 0px 1px;
height: 12px;
width: 6px;
}
.sidebox-favorites .favorites div.ui-icon-trash {
margin-top: -5px;
margin-right: 4px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
}
ul[id$='favorites_popup_state'] span.filter_value {

10
pixelegg/css/mobile.css
View File

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

10
pixelegg/css/monochrome.css
View File

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

2
pixelegg/css/pixelegg.css
View File

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

8
pixelegg/less/etemplate2.less
View File

@ -754,7 +754,13 @@ div.header_row_right{
line-height: inherit;
padding: 2px 1px;
// 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
div.sideboxstar {
width: 4px;

10
pixelegg/mobile/fw_mobile.css
View File

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