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

Switch Et2Button base from LionButton to SlButton

Browse Source
This commit is contained in:
nathan 2022-07-26 16:23:27 -06:00
parent 02ac53ead9
commit 2394831083
3 changed files with 53 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +0,0 @@
/**
* Sharable button styles constant
*/
import {css} from "@lion/core";
import {colorsDefStyles} from "../Styles/colorsDefStyles";
export const buttonStyles = [
colorsDefStyles,
css`
:host {
border: 1px solid gray;
color: var(--gray_70, #505050);
background-color: var(--gray_10, #e6e6e6);
border-radius: 3px;
cursor: pointer;
}
:host([disabled]) {
display: inline-flex;
opacity: .5;
box-shadow: none!important;
cursor: default!important;
}
:host([disabled]) ::slotted(img) {
filter: grayscale(1);
opacity: .5;
}
:host(:hover):not([disabled]) {
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
background-color: var(--bg_color_15_gray, #d9d9d9);
}
:host(:active) {
box-shadow: inset 1px 2px 1px rgb(0 0 0 / 50%);
}
div {
margin: 2px;
height:20px;
font-size: 9pt;
text-shadow: 0 0;
}
:not([disabled]) div {
color: var(--btn-label-color);
}
`];

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

@ -9,14 +9,13 @@
*/
import {css, html, SlotMixin} from "@lion/core";
import {buttonStyles} from "./ButtonStyles";
import {LionButton} from "@lion/button";
import {css} from "@lion/core";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {SlButton} from "@shoelace-style/shoelace";
import shoelace from "../Styles/shoelace";
export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
export class Et2Button extends Et2InputWidget(SlButton)
{
protected _created_icon_node : HTMLImageElement;
protected clicked : boolean = false;
/**
@ -53,8 +52,8 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
static get styles()
{
return [
...shoelace,
...super.styles,
buttonStyles,
css`
:host {
padding: 0;
@ -70,9 +69,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
padding-right: 0px !important;
width: 16px !important;
}
::slotted([slot="icon"][src]) {
::slotted(et2-image) {
width: 20px;
padding-right: 4px;
display: flex;
}
::slotted([slot="icon"][src='']) {
display: none;
@ -81,6 +80,20 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
width:18px;
height: 18px;
}
/* Make hover border match other widgets (select) */
.button--standard.button--default:hover:not(.button--disabled) {
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
.button {
justify-content: left;
}
.button--has-label.button--medium .button__label {
padding: 0 var(--sl-spacing-medium);
}
.button__label {
}
`,
];
}
@ -114,17 +127,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
}
}
get slots()
{
return {
...super.slots,
icon: () =>
{
return document.createElement("img");
}
}
}
constructor()
{
super();
@ -146,6 +148,23 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
//this.classList.add("et2_button")
}
set label(new_label : string)
{
if(!this._labelNode)
{
this.textContent = new_label;
}
else
{
this._labelNode.textContent = new_label;
}
}
get label()
{
return this._labelNode.textContent.trim();
}
set image(new_image : string)
{
let oldValue = this._image;
@ -157,6 +176,13 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{
this.__image = this.egw().image(new_image);
}
if(!this._iconNode)
{
const image = document.createElement("et2-image");
image.slot = "prefix";
this.prepend(image);
}
this._iconNode.src = this.__image;
this.requestUpdate("image", oldValue);
}
@ -240,21 +266,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
}
}
render()
{
this._iconNode.src = this.__image || "";
if(!this.label)
{
this._iconNode.classList.add('imageOnly');
}
return html`
<div class="button-content et2_button ${this.label ? '' : 'imageOnly'}" id="${this._buttonId}"
part="container">
<slot name="icon" class="${this.label ? '' : 'imageOnly'}"></slot>
<slot name="label">${this.label}</slot>
</div> `;
}
/**
* Get a default image for the button based on ID
*
@ -305,7 +316,14 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
get _iconNode() : HTMLImageElement
{
return <HTMLImageElement>(Array.from(this.children)).find(
el => (<HTMLElement>el).slot === "icon",
el => (<HTMLElement>el).slot === "prefix",
);
}
get _labelNode() : HTMLElement
{
return <HTMLImageElement>(Array.from(this.childNodes)).find(
el => (<HTMLElement>el).nodeType === 3,
);
}

4
api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts
View File

@ -14,8 +14,6 @@ import {SlButtonGroup, SlDropdown} from "@shoelace-style/shoelace";
import {css, html, TemplateResult} from "@lion/core";
import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
import {SelectOption} from "../Et2Select/FindSelectOptions";
import {buttonStyles} from "../Et2Button/ButtonStyles";
import shoelace from "../Styles/shoelace";
/**
* A split button - a button with a dropdown list
@ -37,8 +35,6 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
{
return [
...super.styles,
shoelace,
buttonStyles,
css`
:host {
/* Avoid unwanted style overlap from button */