From 23948310832cf1577b7ea76cc04615abfc9b8f86 Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 26 Jul 2022 16:23:27 -0600 Subject: [PATCH] Switch Et2Button base from LionButton to SlButton --- api/js/etemplate/Et2Button/ButtonStyles.ts | 44 ---------- api/js/etemplate/Et2Button/Et2Button.ts | 88 +++++++++++-------- .../Et2DropdownButton/Et2DropdownButton.ts | 4 - 3 files changed, 53 insertions(+), 83 deletions(-) delete mode 100644 api/js/etemplate/Et2Button/ButtonStyles.ts diff --git a/api/js/etemplate/Et2Button/ButtonStyles.ts b/api/js/etemplate/Et2Button/ButtonStyles.ts deleted file mode 100644 index 374a7efea6..0000000000 --- a/api/js/etemplate/Et2Button/ButtonStyles.ts +++ /dev/null @@ -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); - } -`]; \ No newline at end of file diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts index 6d6893912c..20db9039a7 100644 --- a/api/js/etemplate/Et2Button/Et2Button.ts +++ b/api/js/etemplate/Et2Button/Et2Button.ts @@ -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` -
- - ${this.label} -
`; - } - /** * 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 (Array.from(this.children)).find( - el => (el).slot === "icon", + el => (el).slot === "prefix", + ); + } + + get _labelNode() : HTMLElement + { + return (Array.from(this.childNodes)).find( + el => (el).nodeType === 3, ); } diff --git a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts b/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts index 093e42fa27..b815f7ce5c 100644 --- a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts +++ b/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts @@ -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 */