extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP styling buttons: another approach to style buttons, keeping the icon slotted

Browse Source
This commit is contained in:
Hadi Nategh 2022-01-20 13:13:04 +01:00
parent cc9a6bcf8a
commit 28bcaf9422
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/js/etemplate/Et2Button/ButtonStyles.ts
View File

@ -27,5 +27,6 @@ export const buttonStyles = [
background-position: left center; background-position: left center;
background-size: contain; background-size: contain;
margin: 2px; margin: 2px;
height:20px;
} }
`]; `];

23
api/js/etemplate/Et2Button/Et2Button.ts
View File

@ -62,6 +62,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
padding: 0; padding: 0;
/* These should probably come from somewhere else */ /* These should probably come from somewhere else */
max-width: 125px; max-width: 125px;
min-width: fit-content;
} }
:host([readonly]) { :host([readonly]) {
display: none; display: none;
@ -69,15 +70,13 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
/* Set size for icon */ /* Set size for icon */
::slotted([slot="icon"][src]) { ::slotted([slot="icon"][src]) {
width: 20px; width: 20px;
padding-right: 3px;
} }
::slotted([slot="icon"][src='']) { ::slotted([slot="icon"][src='']) {
display: none; display: none;
} }
.imageOnly { .imageOnly {
width:20px; width:18px;
height: 20px; height: 18px;
background-color: var(--bg_color_5_gray);
} }
`, `,
]; ];
@ -91,6 +90,16 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
} }
} }
get slots()
{
return {
...super.slots,
icon: () =>
{
return document.createElement("img");
}
}
}
constructor() constructor()
{ {
@ -190,8 +199,12 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{ {
return ''; return '';
} }
this._iconNode.src = this._image;
return html` return html`
<div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}" style="background-image: url(${this._image})"> <div class="button-content et2_button ${this._label?'':'imageOnly'}" id="${this._buttonId}">
<slot name="icon"></slot>
<slot name="label">${this._label}</slot> <slot name="label">${this._label}</slot>
</div> `; </div> `;
} }

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

@ -2793,7 +2793,9 @@ div.et2_toolbar_more h.ui-accordion-header.header_list-short span.ui-accordion-h
padding-left: 0; padding-left: 0;
background-color: #fafafa; background-color: #fafafa;
} }
.nextmatch_header_row et2-button {
background-color: #fafafa;
}
.et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text { .et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image.et2_toolbar_hasCaption, .nextmatch_header_row .et2_button_text {
width: auto; width: auto;
background-position: 6px center; background-position: 6px center;

2
mail/templates/default/index.xet
View File

@ -130,7 +130,7 @@
</grid> </grid>
</template> </template>
<template id="mail.index.add" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.add" template="" lang="" group="0" version="1.9.001">
<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose"/> <buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" image="add"/>
</template> </template>
<template id="mail.index.header_right" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.header_right" template="" lang="" group="0" version="1.9.001">
<hbox id="mail.index.vacationnotice" class="mail-index_vacation"><vbox> <hbox id="mail.index.vacationnotice" class="mail-index_vacation"><vbox>