106 lines
3.0 KiB
Plaintext
106 lines
3.0 KiB
Plaintext
import { Theme } from "./theme.slint";
|
||
|
||
export component BrowserItem inherits Rectangle {
|
||
in property <image> browser-icon;
|
||
in property <string> browser-name;
|
||
in property <bool> is-default;
|
||
in property <bool> selected;
|
||
callback clicked;
|
||
|
||
height: 84px;
|
||
background: transparent;
|
||
|
||
panel := Rectangle {
|
||
y: 4px;
|
||
height: 76px;
|
||
border-radius: 12px;
|
||
background: touch.has-hover ? Theme.surface-hover
|
||
: root.selected ? Theme.surface-elevated
|
||
: Theme.surface-item;
|
||
border-width: root.selected ? 2px : 1px;
|
||
border-color: root.selected ? #3b82f680 : transparent;
|
||
|
||
touch := TouchArea {
|
||
mouse-cursor: pointer;
|
||
clicked => {
|
||
root.clicked();
|
||
}
|
||
}
|
||
|
||
HorizontalLayout {
|
||
padding: 14px;
|
||
spacing: 16px;
|
||
|
||
Rectangle {
|
||
width: 48px;
|
||
vertical-stretch: 0;
|
||
border-radius: 12px;
|
||
background: Theme.surface-elevated;
|
||
|
||
Image {
|
||
x: (parent.width - self.width) / 2;
|
||
y: (parent.height - self.height) / 2;
|
||
width: 30px;
|
||
height: 30px;
|
||
source: root.browser-icon;
|
||
}
|
||
}
|
||
|
||
VerticalLayout {
|
||
alignment: center;
|
||
|
||
HorizontalLayout {
|
||
spacing: 8px;
|
||
alignment: start;
|
||
|
||
Text {
|
||
text: root.browser-name;
|
||
color: Theme.text-main;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
if root.is-default: Rectangle {
|
||
height: 22px;
|
||
border-radius: 11px;
|
||
background: #3b82f620;
|
||
|
||
HorizontalLayout {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
|
||
Text {
|
||
text: "По умолчанию";
|
||
color: #60a5fa;
|
||
font-size: 12px;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
VerticalLayout {
|
||
width: 20px;
|
||
alignment: center;
|
||
|
||
Image {
|
||
width: 16px;
|
||
height: 16px;
|
||
source: @image-url("../icons/check.svg");
|
||
colorize: #3b82f6;
|
||
visible: root.selected;
|
||
}
|
||
|
||
Text {
|
||
text: "›";
|
||
color: Theme.text-muted;
|
||
font-size: 16px;
|
||
visible: !root.selected;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|