mirror of
https://github.com/flectar/mail.git
synced 2026-11-11 17:57:54 +00:00
102 lines
3.0 KiB
Plaintext
102 lines
3.0 KiB
Plaintext
import { HorizontalBox } from "std-widgets.slint";
|
||
import { TypeScale } from "../typography.slint";
|
||
|
||
// Shared by onboarding and account settings so provider entry points keep the
|
||
// same recognizable brand treatment throughout the app.
|
||
export component ProviderButton inherits Rectangle {
|
||
in property <string> text;
|
||
in property <image> icon;
|
||
in property <bool> colorize-icon: false;
|
||
in property <length> icon-offset-x: 0px;
|
||
in property <bool> enabled: true;
|
||
in property <string> tooltip-text: "";
|
||
in property <color> foreground;
|
||
in property <color> muted;
|
||
in property <color> surface;
|
||
in property <color> hover-surface;
|
||
in property <color> button-border;
|
||
callback clicked;
|
||
|
||
height: 48px;
|
||
border-radius: 8px;
|
||
border-width: 1px;
|
||
border-color: root.enabled ? root.button-border : root.button-border.transparentize(0.5);
|
||
background: provider-hit.has-hover && root.enabled ? root.hover-surface : root.surface;
|
||
accessible-role: button;
|
||
accessible-label: root.tooltip-text == "" ? root.text : root.text + ". " + root.tooltip-text;
|
||
accessible-enabled: root.enabled;
|
||
accessible-action-default => {
|
||
if root.enabled {
|
||
root.clicked();
|
||
}
|
||
}
|
||
animate background { duration: 150ms; }
|
||
|
||
HorizontalBox {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
spacing: 12px;
|
||
cross-axis-alignment: center;
|
||
opacity: root.enabled ? 1 : 0.5;
|
||
|
||
Rectangle {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: transparent;
|
||
|
||
Image {
|
||
x: root.icon-offset-x;
|
||
width: 20px;
|
||
height: 20px;
|
||
source: root.icon;
|
||
colorize: root.colorize-icon ? root.foreground : transparent;
|
||
image-fit: contain;
|
||
accessible-role: none;
|
||
}
|
||
}
|
||
Text {
|
||
horizontal-stretch: 1;
|
||
text: root.text;
|
||
color: root.foreground;
|
||
font-size: TypeScale.body-large;
|
||
font-weight: 600;
|
||
vertical-alignment: center;
|
||
overflow: elide;
|
||
}
|
||
Text {
|
||
text: "›";
|
||
color: root.muted;
|
||
font-size: TypeScale.title-large;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
provider-hit := TouchArea {
|
||
clicked => {
|
||
if root.enabled {
|
||
root.clicked();
|
||
}
|
||
}
|
||
mouse-cursor: root.enabled ? pointer : default;
|
||
}
|
||
|
||
Rectangle {
|
||
visible: root.tooltip-text != "" && provider-hit.has-hover;
|
||
x: (parent.width - self.width) / 2;
|
||
y: -self.height - 6px;
|
||
width: tooltip-label.preferred-width + 16px;
|
||
height: 28px;
|
||
border-radius: 5px;
|
||
background: #292929;
|
||
z: 10000;
|
||
|
||
tooltip-label := Text {
|
||
text: root.tooltip-text;
|
||
color: white;
|
||
font-size: TypeScale.secondary;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
}
|