feat: impl design header
This commit is contained in:
+79
-25
@@ -1,44 +1,98 @@
|
||||
import {
|
||||
Button,
|
||||
HorizontalBox,
|
||||
VerticalBox,
|
||||
} from "std-widgets.slint";
|
||||
|
||||
import { BrowserConfig } from "./types.slint";
|
||||
|
||||
export component BrowserItem {
|
||||
height: 80px;
|
||||
in property <BrowserConfig> browser;
|
||||
in property <bool> selected;
|
||||
|
||||
height: 88px;
|
||||
width: 100%;
|
||||
|
||||
Rectangle {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(30, 41, 59, 0.3);
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
background: selected ? #1e293b : #0f172a;
|
||||
|
||||
HorizontalBox {
|
||||
height: 80px;
|
||||
padding: 8px;
|
||||
alignment: space-between;
|
||||
Image {
|
||||
height: 48px;
|
||||
padding: 16px;
|
||||
spacing: 16px;
|
||||
|
||||
Rectangle {
|
||||
width: 48px;
|
||||
source: @image-url("../logos/firefox_48x48.png");
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: #1e293b;
|
||||
|
||||
Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
text: browser.icon;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: browser.path;
|
||||
vertical_alignment: center;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: browser.flags;
|
||||
vertical_alignment: center;
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
VerticalBox {
|
||||
alignment: center;
|
||||
Button {
|
||||
text: "use";
|
||||
spacing: 4px;
|
||||
|
||||
Text {
|
||||
text: browser.name;
|
||||
color: #f8fafc;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
if (browser.is-default): Rectangle {
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
background: #3b82f6;
|
||||
|
||||
Text {
|
||||
text: "По умолчанию";
|
||||
color: #60a5fa;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
VerticalBox {
|
||||
alignment: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
if (selected): Rectangle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #3b82f6;
|
||||
|
||||
Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
text: "✓";
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
if (!selected): Text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
text: ">";
|
||||
color: #64748b;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import {
|
||||
Button,
|
||||
HorizontalBox,
|
||||
VerticalBox,
|
||||
} from "std-widgets.slint";
|
||||
|
||||
export component Footer inherits Rectangle {
|
||||
callback settings-clicked();
|
||||
callback feedback-clicked();
|
||||
callback open-clicked();
|
||||
|
||||
HorizontalBox {
|
||||
spacing: 16px;
|
||||
padding-top: 16px;
|
||||
|
||||
HorizontalBox {
|
||||
spacing: 16px;
|
||||
|
||||
Button {
|
||||
text: "⚙️ Настроить";
|
||||
clicked => {
|
||||
root.settings-clicked();
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "💬 Обратная связь";
|
||||
clicked => {
|
||||
root.feedback-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Открыть";
|
||||
clicked => {
|
||||
root.open-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { BrowserConfig } from "./types.slint";
|
||||
|
||||
|
||||
export component Header inherits Rectangle {
|
||||
in property <string> url;
|
||||
property <brush> icon-gradient: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
|
||||
|
||||
VerticalLayout {
|
||||
// width: 100%;
|
||||
width: 448px;
|
||||
padding: 12px;
|
||||
padding-top: 20px;
|
||||
spacing: 12px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Rectangle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: icon-gradient;
|
||||
|
||||
Image {
|
||||
source: @image-url("../logos/globe.svg");
|
||||
colorize: white;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
spacing: 4px;
|
||||
|
||||
Text {
|
||||
font-family: "Segpoe UI";
|
||||
text: "Выберите браузер";
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
font-family: "Segpoe UI";
|
||||
text: "Для открытия ссылки";
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: #1e293b;
|
||||
border-width: 1px;
|
||||
border-color: #334155;
|
||||
|
||||
HorizontalLayout {
|
||||
padding: 12px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
spacing: 8px;
|
||||
alignment: start;
|
||||
|
||||
Image {
|
||||
source: @image-url("../logos/external_link.svg");
|
||||
width: 16px;
|
||||
colorize: #64748b;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
padding-top: 2px;
|
||||
|
||||
Text {
|
||||
text: "ku6epxboctuk.github.io";
|
||||
color: #cbd5e1;
|
||||
font-size: 14px;
|
||||
font-family: "Consolas";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
y: parent.height - self.height;
|
||||
background: #334155;
|
||||
}
|
||||
}
|
||||
+78
-30
@@ -1,43 +1,91 @@
|
||||
import {
|
||||
SpinBox,
|
||||
Button,
|
||||
CheckBox,
|
||||
Slider,
|
||||
LineEdit,
|
||||
ScrollView,
|
||||
ListView,
|
||||
HorizontalBox,
|
||||
VerticalBox,
|
||||
GridBox,
|
||||
StandardButton,
|
||||
Palette,
|
||||
} from "std-widgets.slint";
|
||||
import { Button, CheckBox, ListView } from "std-widgets.slint";
|
||||
import { BrowserItem } from "./browser_item.slint";
|
||||
|
||||
import { Header } from "./header.slint";
|
||||
import { Footer } from "./footer.slint";
|
||||
import { BrowserConfig } from "./types.slint";
|
||||
|
||||
export component MainWindow inherits Window {
|
||||
in property <[BrowserConfig]> browser-model: [];
|
||||
in property <string> current-url: "";
|
||||
in-out property <bool> remember-choice: false;
|
||||
in-out property <bool> always-ask: true;
|
||||
in property <int> selected-index: 0;
|
||||
|
||||
callback todo-added(string);
|
||||
callback remove-done();
|
||||
callback update_todo(BrowserConfig);
|
||||
callback browser-selected(BrowserConfig);
|
||||
callback toggle-remember(bool);
|
||||
callback toggle-always-ask(bool);
|
||||
callback settings-clicked();
|
||||
callback feedback-clicked();
|
||||
callback open-clicked();
|
||||
callback request-drag();
|
||||
|
||||
preferred-width: 400px;
|
||||
preferred-height: 600px;
|
||||
// no-frame: true;
|
||||
background: transparent;
|
||||
width: 488px;
|
||||
height: 800px;
|
||||
default-font-family: "Segoe UI";
|
||||
|
||||
VerticalBox {
|
||||
x: root.safe-area-insets.left;
|
||||
y: root.safe-area-insets.top;
|
||||
width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
|
||||
height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;
|
||||
VerticalLayout {
|
||||
alignment: start;
|
||||
width: 488px;
|
||||
height: 800px;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
Rectangle {
|
||||
max-width: 448px;
|
||||
width: 100%;
|
||||
height: 760px;
|
||||
border-radius: 16px;
|
||||
clip: true;
|
||||
background: #0f172a;
|
||||
border-width: 1px;
|
||||
border-color: #334155;
|
||||
|
||||
list-view := ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
padding: 5px;
|
||||
for browser in root.browser-model: BrowserItem {
|
||||
browser: browser;
|
||||
padding: 12px;
|
||||
|
||||
Header {
|
||||
url: current-url;
|
||||
}
|
||||
|
||||
// ListView {
|
||||
// max-height: 400px;
|
||||
|
||||
// for browser[i] in root.browser-model: BrowserItem {
|
||||
// browser: browser;
|
||||
// selected: i == root.selected-index;
|
||||
// }
|
||||
// }
|
||||
|
||||
// spacing: 12px;
|
||||
// padding-left: 4px;
|
||||
|
||||
// CheckBox {
|
||||
// text: "Запомнить выбор для " + root.current-url;
|
||||
// checked <=> root.remember-choice;
|
||||
// toggled => {
|
||||
// root.toggle-remember(root.remember-choice);
|
||||
// }
|
||||
// }
|
||||
|
||||
// CheckBox {
|
||||
// text: "Всегда спрашивать";
|
||||
// checked <=> root.always-ask;
|
||||
// toggled => {
|
||||
// root.toggle-always-ask(root.always-ask);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Rectangle {
|
||||
vertical-stretch: 1;
|
||||
}
|
||||
|
||||
Footer {
|
||||
settings-clicked => settings-clicked();
|
||||
feedback-clicked => feedback-clicked();
|
||||
open-clicked => open-clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+4
-3
@@ -1,7 +1,8 @@
|
||||
|
||||
@rust-attr(derive(serde::Serialize, serde::Deserialize))
|
||||
export struct BrowserConfig {
|
||||
export struct BrowserConfig {
|
||||
icon: string,
|
||||
name: string,
|
||||
path: string,
|
||||
flags: string,
|
||||
}
|
||||
is-default: bool,
|
||||
}
|
||||
Reference in New Issue
Block a user