feat: settings as separate window
This commit is contained in:
+195
-193
@@ -2,231 +2,233 @@ import { ListView } from "std-widgets.slint";
|
||||
import { Theme } from "./theme.slint";
|
||||
import { BrowserConfig, RememberedEntry } from "./types.slint";
|
||||
|
||||
export component SettingsView inherits Rectangle {
|
||||
export component SettingsWindow inherits Window {
|
||||
title: "bropicker — настройки";
|
||||
width: 760px;
|
||||
height: 560px;
|
||||
background: Theme.surface-main;
|
||||
default-font-family: "Segoe UI";
|
||||
|
||||
in property <[BrowserConfig]> browsers;
|
||||
in property <[RememberedEntry]> remembered;
|
||||
callback back();
|
||||
callback remove-browser(string);
|
||||
callback remove-remembered(string);
|
||||
callback redetect();
|
||||
callback esc-pressed();
|
||||
|
||||
background: transparent;
|
||||
scope := FocusScope {
|
||||
init => {
|
||||
self.focus();
|
||||
}
|
||||
key-pressed(event) => {
|
||||
if (event.text == Key.Escape) {
|
||||
root.esc-pressed();
|
||||
accept
|
||||
} else {
|
||||
reject
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
callback restore-focus();
|
||||
restore-focus => {
|
||||
scope.focus();
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
padding: 16px;
|
||||
spacing: 12px;
|
||||
padding: 20px;
|
||||
spacing: 14px;
|
||||
|
||||
Text {
|
||||
text: "Настройки";
|
||||
color: Theme.text-main;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
spacing: 14px;
|
||||
|
||||
Rectangle {
|
||||
width: 32px;
|
||||
border-radius: 8px;
|
||||
background: back-touch.has-hover ? Theme.surface-hover : transparent;
|
||||
VerticalLayout {
|
||||
spacing: 8px;
|
||||
|
||||
back-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.back();
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
|
||||
Text {
|
||||
text: "Браузеры";
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Rectangle {}
|
||||
|
||||
Rectangle {
|
||||
width: 110px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
background: redetect-touch.has-hover ? Theme.surface-hover : Theme.surface-elevated;
|
||||
border-width: 1px;
|
||||
border-color: Theme.border-main;
|
||||
|
||||
redetect-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.redetect();
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text: "Автодетект";
|
||||
color: redetect-touch.has-hover ? Theme.text-main : Theme.text-control;
|
||||
font-size: 12px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
source: @image-url("../icons/arrow_left.svg");
|
||||
colorize: back-touch.has-hover ? Theme.text-main : Theme.text-muted;
|
||||
Rectangle {
|
||||
vertical-stretch: 1;
|
||||
border-radius: 12px;
|
||||
background: Theme.surface-elevated;
|
||||
border-width: 1px;
|
||||
border-color: Theme.border-main;
|
||||
clip: true;
|
||||
|
||||
ListView {
|
||||
for b in root.browsers: Rectangle {
|
||||
height: 56px;
|
||||
background: transparent;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 14px;
|
||||
padding-right: 10px;
|
||||
spacing: 12px;
|
||||
|
||||
Image {
|
||||
width: 26px;
|
||||
y: (parent.height - self.height) / 2;
|
||||
source: b.icon;
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
horizontal-stretch: 1;
|
||||
alignment: center;
|
||||
|
||||
Text {
|
||||
text: b.name;
|
||||
color: Theme.text-main;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: b.path;
|
||||
color: Theme.text-hint;
|
||||
font-size: 11px;
|
||||
font-family: "Consolas";
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 30px;
|
||||
border-radius: 6px;
|
||||
background: del-touch.has-hover ? #ef444420 : transparent;
|
||||
|
||||
del-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.remove-browser(b.name);
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
source: @image-url("../icons/trash.svg");
|
||||
colorize: del-touch.has-hover ? #ef4444 : Theme.text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
spacing: 8px;
|
||||
|
||||
Text {
|
||||
text: "Настройки";
|
||||
color: Theme.text-main;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
|
||||
Text {
|
||||
text: "Браузеры";
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Rectangle {}
|
||||
|
||||
Rectangle {
|
||||
width: 120px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
background: redetect-touch.has-hover ? Theme.surface-hover : Theme.surface-elevated;
|
||||
border-width: 1px;
|
||||
border-color: Theme.border-main;
|
||||
|
||||
redetect-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.redetect();
|
||||
}
|
||||
text: "Запомненные домены";
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text: "Автодетект";
|
||||
color: redetect-touch.has-hover ? Theme.text-main : Theme.text-control;
|
||||
font-size: 12px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
vertical-stretch: 1;
|
||||
border-radius: 12px;
|
||||
background: Theme.surface-elevated;
|
||||
border-width: 1px;
|
||||
border-color: Theme.border-main;
|
||||
clip: true;
|
||||
|
||||
Rectangle {
|
||||
vertical-stretch: 3;
|
||||
border-radius: 8px;
|
||||
background: Theme.surface-elevated;
|
||||
clip: true;
|
||||
|
||||
ListView {
|
||||
for b in root.browsers: Rectangle {
|
||||
height: 52px;
|
||||
background: transparent;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 12px;
|
||||
padding-right: 8px;
|
||||
spacing: 10px;
|
||||
|
||||
Image {
|
||||
width: 22px;
|
||||
y: (parent.height - self.height) / 2;
|
||||
source: b.icon;
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
horizontal-stretch: 1;
|
||||
alignment: center;
|
||||
|
||||
Text {
|
||||
text: b.name;
|
||||
color: Theme.text-main;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: b.path;
|
||||
color: Theme.text-hint;
|
||||
font-size: 11px;
|
||||
font-family: "Consolas";
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 28px;
|
||||
border-radius: 6px;
|
||||
background: del-touch.has-hover ? #ef444420 : transparent;
|
||||
|
||||
del-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.remove-browser(b.name);
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
source: @image-url("../icons/trash.svg");
|
||||
colorize: del-touch.has-hover ? #ef4444 : Theme.text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Запомненные домены";
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
vertical-stretch: 2;
|
||||
border-radius: 8px;
|
||||
background: Theme.surface-elevated;
|
||||
clip: true;
|
||||
|
||||
ListView {
|
||||
for r in root.remembered: Rectangle {
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 12px;
|
||||
padding-right: 8px;
|
||||
spacing: 10px;
|
||||
|
||||
VerticalLayout {
|
||||
horizontal-stretch: 1;
|
||||
alignment: center;
|
||||
ListView {
|
||||
for r in root.remembered: Rectangle {
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 6px;
|
||||
padding-left: 14px;
|
||||
padding-right: 10px;
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: r.domain;
|
||||
color: Theme.text-main;
|
||||
font-size: 13px;
|
||||
font-family: "Consolas";
|
||||
vertical-alignment: center;
|
||||
VerticalLayout {
|
||||
horizontal-stretch: 1;
|
||||
alignment: center;
|
||||
|
||||
Text {
|
||||
text: r.domain;
|
||||
color: Theme.text-main;
|
||||
font-size: 14px;
|
||||
font-family: "Consolas";
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "→ " + r.browser;
|
||||
color: Theme.text-hint;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "→ " + r.browser;
|
||||
color: Theme.text-hint;
|
||||
font-size: 12px;
|
||||
vertical-alignment: center;
|
||||
Rectangle {
|
||||
width: 30px;
|
||||
border-radius: 6px;
|
||||
background: del2-touch.has-hover ? #ef444420 : transparent;
|
||||
|
||||
del2-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.remove-remembered(r.domain);
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
source: @image-url("../icons/trash.svg");
|
||||
colorize: del2-touch.has-hover ? #ef4444 : Theme.text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 28px;
|
||||
border-radius: 6px;
|
||||
background: del2-touch.has-hover ? #ef444420 : transparent;
|
||||
|
||||
del2-touch := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.remove-remembered(r.domain);
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
source: @image-url("../icons/trash.svg");
|
||||
colorize: del2-touch.has-hover ? #ef4444 : Theme.text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user