holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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-size: contain;
margin: 2px;
height:20px;
}
`];

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

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

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

@ -130,7 +130,7 @@
</grid>
</template>
<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 id="mail.index.header_right" template="" lang="" group="0" version="1.9.001">
<hbox id="mail.index.vacationnotice" class="mail-index_vacation"><vbox>