Remove border from buttons without labels for fancy theme

Needed some parts exposed.
This commit is contained in:
nathan 2024-11-04 14:15:39 -07:00
parent c1030d709c
commit b29aafcaf3
6 changed files with 37 additions and 2 deletions

View File

@ -22,7 +22,7 @@ export class Et2Button extends ButtonMixin(Et2InputWidget(SlButton))
{ {
return { return {
...super.properties, ...super.properties,
label: {type: String, noAccessor: true} label: {type: String, noAccessor: true, reflect: true}
} }
} }

View File

@ -163,6 +163,8 @@ export class Et2LinkTo extends Et2InputWidget(LitElement)
return html` return html`
<slot name="before"></slot> <slot name="before"></slot>
<et2-vfs-select <et2-vfs-select
part="vfs button"
exportparts="base:button_base"
id="link" id="link"
?readonly=${this.readonly} ?readonly=${this.readonly}
method=${method || nothing} method=${method || nothing}
@ -181,6 +183,8 @@ export class Et2LinkTo extends Et2InputWidget(LitElement)
label=${this.egw().lang("move")}></et2-button> label=${this.egw().lang("move")}></et2-button>
</et2-vfs-select> </et2-vfs-select>
<et2-vfs-select <et2-vfs-select
part="vfs button clipboard"
exportparts="base:button_base"
id="paste" id="paste"
image="clipboard-data" aria-label=${this.egw().lang("clipboard contents")} noSubmit="true" image="clipboard-data" aria-label=${this.egw().lang("clipboard contents")} noSubmit="true"
title=${this.egw().lang("Clipboard contents")} title=${this.egw().lang("Clipboard contents")}

View File

@ -216,6 +216,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement)
return html` return html`
<et2-button part="button" <et2-button part="button"
exportparts="base"
image=${image} image=${image}
title=${this.title} title=${this.title}
helptext=${this.helptext} helptext=${this.helptext}

View File

@ -182,9 +182,12 @@ export class et2_file extends et2_inputWidget
this.span = jQuery(document.createElement("et2-button")) this.span = jQuery(document.createElement("et2-button"))
.addClass('et2_file_span') .addClass('et2_file_span')
.attr("image", "attach") .attr("image", "attach")
.attr('label', this.options.label || '')
.attr("noSubmit", true) .attr("noSubmit", true)
.appendTo(this.node); .appendTo(this.node);
if(this.option.label)
{
this.span.attr('label', this.options.label || '')
}
let span = this.span; let span = this.span;
this.input = jQuery(document.createElement("input")) this.input = jQuery(document.createElement("input"))

View File

@ -7170,6 +7170,26 @@ img.et2_button_icon[src*="svg"]:hover {
.sl-theme-dark et2-button:not(imageOnly) > et2-image[class*="clock"] { .sl-theme-dark et2-button:not(imageOnly) > et2-image[class*="clock"] {
--et2-button-image-padding-left: 0.2rem; --et2-button-image-padding-left: 0.2rem;
} }
:root et2-button:not([label])::part(base),
:host et2-button:not([label])::part(base),
.sl-theme-light et2-button:not([label])::part(base),
.sl-theme-dark et2-button:not([label])::part(base),
:root et2-button-timestamp::part(base),
:host et2-button-timestamp::part(base),
.sl-theme-light et2-button-timestamp::part(base),
.sl-theme-dark et2-button-timestamp::part(base) {
--sl-input-border-color: transparent;
}
:root et2-vfs-select::part(base),
:host et2-vfs-select::part(base),
.sl-theme-light et2-vfs-select::part(base),
.sl-theme-dark et2-vfs-select::part(base),
:root et2-link-to::part(button_base),
:host et2-link-to::part(button_base),
.sl-theme-light et2-link-to::part(button_base),
.sl-theme-dark et2-link-to::part(button_base) {
--sl-input-border-color: transparent;
}
:root et2-tabbox, :root et2-tabbox,
:host et2-tabbox, :host et2-tabbox,
.sl-theme-light et2-tabbox, .sl-theme-light et2-tabbox,

View File

@ -19,6 +19,13 @@
--et2-button-image-padding-left: .2rem; --et2-button-image-padding-left: .2rem;
} }
et2-button:not([label])::part(base), et2-button-timestamp::part(base) {
--sl-input-border-color: transparent;
}
et2-vfs-select::part(base), et2-link-to::part(button_base) {
--sl-input-border-color: transparent;
}
et2-tabbox { et2-tabbox {
--track-width: 0px; --track-width: 0px;