extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 09:05:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP styling buttons

Browse Source
This commit is contained in:
Hadi Nategh 2022-01-19 18:30:45 +01:00
parent 5ec2a233a4
commit d33534e2e1
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,4 +21,11 @@ export const buttonStyles = [
:host(:active) {
box-shadow: inset 1px 2px 1px rgb(0 0 0 / 50%);
}
div {
flex: 1 1 auto;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
margin: 2px;
}
`];

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

@ -59,7 +59,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
buttonStyles,
css`
:host {
padding: 1px 8px;
padding: 0;
/* These should probably come from somewhere else */
max-width: 125px;
}
@ -74,6 +74,11 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
::slotted([slot="icon"][src='']) {
display: none;
}
.imageOnly {
width:20px;
height: 20px;
background-color: var(--bg_color_5_gray);
}
`,
];
}
@ -86,16 +91,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
}
}
get slots()
{
return {
...super.slots,
icon: () =>
{
return document.createElement("img");
}
}
}
constructor()
{
@ -195,13 +190,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{
return '';
}
this._iconNode.src = this._image;
return html`
<div class="button-content et2_button" id="${this._buttonId}">
<slot name="icon"></slot>
<slot>${this._label}</slot>
<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> `;
}