Ku6epXBOCTuK/bropicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add theme, complete footer

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-05-08 04:38:56 +05:00
parent f425145e81
commit eb944e8892
12 changed files with 208 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
icons/cog.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 10.27 7 3.34" />
<path d="m11 13.73-4 6.93" />
<path d="M12 22v-2" />
<path d="M12 2v2" />
<path d="M14 12h8" />
<path d="m17 20.66-1-1.73" />
<path d="m17 3.34-1 1.73" />
<path d="M2 12h2" />
<path d="m20.66 17-1.73-1" />
<path d="m20.66 7-1.73 1" />
<path d="m3.34 17 1.73-1" />
<path d="m3.34 7 1.73 1" />
<circle cx="12" cy="12" r="2" />
<circle cx="12" cy="12" r="8" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 606 B

logos/external_link.svg → icons/external_link.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 314 B

After

Width:  |  Height:  |  Size: 314 B

logos/globe.svg → icons/globe.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 B

After

Width:  |  Height:  |  Size: 313 B

icons/moon.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 320 B

icons/sun.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

src/main.rs
-4
View File
@@ -63,10 +63,6 @@ fn init() -> State {
println!("Settings clicked");
});
main_window.on_feedback_clicked(move || {
println!("Feedback clicked");
});
main_window.on_open_clicked(move || {
println!("Open clicked");
});
ui/button.slint
+35
View File
@@ -0,0 +1,35 @@
import { Theme } from "theme.slint";
export component GradientButton inherits Rectangle {
callback clicked <=> touch.clicked;
in property <string> text;
background: Theme.gradient-main;
border-radius: Theme.radius;
drop-shadow-offset-x: Theme.shadow-primary-x;
drop-shadow-offset-y: Theme.shadow-primary-y;
drop-shadow-blur: Theme.shadow-primary-blur;
drop-shadow-color: touch.has-hover ? Theme.shadow-color : transparent;
horizontal-stretch: 0;
animate drop-shadow-color { duration: 300ms; }
touch := TouchArea {
mouse-cursor: pointer;
}
HorizontalLayout {
padding: Theme.spacing-sm;
padding-left: Theme.spacing-xl;
padding-right: Theme.spacing-xl;
Text {
text: text;
font-family: "Segoe UI";
font-size: 14px;
font-weight: 600;
min-width: self.preferred-width;
min-height: self.preferred-height;
}
}
}
ui/footer.slint
+46 -17
View File
@@ -1,37 +1,66 @@
import {
Button,
HorizontalBox,
VerticalBox,
} from "std-widgets.slint";
import { IconButton } from "icon_button.slint";
import { Theme } from "theme.slint";
import { GradientButton } from "button.slint";
export component Footer inherits Rectangle {
callback settings-clicked();
callback feedback-clicked();
callback open-clicked();
HorizontalBox {
spacing: 16px;
padding-top: 16px;
property <image> cog_icon: @image-url("../icons/cog.svg");
property <image> sun_icon: @image-url("../icons/sun.svg");
property <image> moon_icon: @image-url("../icons/moon.svg");
HorizontalBox {
width: 448px;
Rectangle {
height: 1px;
width: 100%;
y: 0px;
background: Theme.border-main;
}
HorizontalLayout {
alignment: space-between;
spacing: Theme.spacing-lg;
padding: Theme.spacing-md;
padding-left: Theme.spacing-lg;
HorizontalLayout {
spacing: 16px;
Button {
text: "⚙️ Настроить";
VerticalLayout {
alignment: center;
IconButton {
icon: sun_icon;
clicked => {
Theme.toggle();
}
}
}
VerticalLayout {
alignment: center;
IconButton {
icon: cog_icon;
clicked => {
root.settings-clicked();
}
}
}
}
Button {
text: "💬 Обратная связь";
clicked => {
root.feedback-clicked();
HorizontalLayout {
alignment: center;
VerticalLayout {
alignment: center;
Text {
text: "Escape - закрыть";
color: Theme.text-hint;
}
}
}
Button {
GradientButton {
text: "Открыть";
clicked => {
root.open-clicked();
ui/header.slint
+23 -25
View File
@@ -1,40 +1,38 @@
import { BrowserConfig } from "./types.slint";
import { Theme } from "theme.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;
width: 100%;
padding: Theme.spacing-md;
padding-top: Theme.spacing-xl;
spacing: Theme.spacing-md;
HorizontalLayout {
spacing: 12px;
spacing: Theme.spacing-md;
Rectangle {
width: 48px;
height: 48px;
border-radius: 12px;
background: icon-gradient;
border-radius: Theme.radius;
background: Theme.gradient-main;
Image {
source: @image-url("../logos/globe.svg");
source: @image-url("../icons/globe.svg");
colorize: white;
}
}
VerticalLayout {
alignment: center;
spacing: 4px;
spacing: Theme.spacing-xs;
Text {
font-family: "Segpoe UI";
text: "Выберите браузер";
color: #ffffff;
color: Theme.text-main;
font-size: 18px;
font-weight: 600;
}
@@ -42,7 +40,7 @@ export component Header inherits Rectangle {
Text {
font-family: "Segpoe UI";
text: "Для открытия ссылки";
color: #94a3b8;
color: Theme.text-muted;
font-size: 14px;
}
}
@@ -50,22 +48,22 @@ export component Header inherits Rectangle {
Rectangle {
height: 44px;
border-radius: 12px;
background: #1e293b;
border-radius: Theme.radius;
background: Theme.surface-elevated;
border-width: 1px;
border-color: #334155;
border-color: Theme.border-main;
HorizontalLayout {
padding: 12px;
padding-left: 16px;
padding-right: 16px;
spacing: 8px;
padding: Theme.spacing-md;
padding-left: Theme.spacing-lg;
padding-right: Theme.spacing-lg;
spacing: Theme.spacing-sm;
alignment: start;
Image {
source: @image-url("../logos/external_link.svg");
source: @image-url("../icons/external_link.svg");
width: 16px;
colorize: #64748b;
colorize: Theme.text-control-muted;
height: 16px;
}
@@ -74,7 +72,7 @@ export component Header inherits Rectangle {
Text {
text: "ku6epxboctuk.github.io";
color: #cbd5e1;
color: Theme.text-control;
font-size: 14px;
font-family: "Consolas";
}
@@ -87,6 +85,6 @@ export component Header inherits Rectangle {
height: 1px;
width: 100%;
y: parent.height - self.height;
background: #334155;
background: Theme.border-main;
}
}
ui/icon_button.slint
+19
View File
@@ -0,0 +1,19 @@
export component IconButton inherits Rectangle {
callback clicked <=> touch.clicked;
in property <image> icon;
property <color> icon_color: touch.has-hover ? #ffffff : #94a3b8;
height: 24px;
width: 24px;
background: transparent;
touch := TouchArea {
mouse-cursor: pointer;
}
Image {
source: icon;
colorize: icon_color;
width: 24px;
height: 24px;
}
}
ui/main.slint
+7 -9
View File
@@ -3,6 +3,7 @@ import { BrowserItem } from "./browser_item.slint";
import { Header } from "./header.slint";
import { Footer } from "./footer.slint";
import { BrowserConfig } from "./types.slint";
import { Theme } from "theme.slint";
export component MainWindow inherits Window {
in property <[BrowserConfig]> browser-model: [];
@@ -15,7 +16,6 @@ export component MainWindow inherits Window {
callback toggle-remember(bool);
callback toggle-always-ask(bool);
callback settings-clicked();
callback feedback-clicked();
callback open-clicked();
callback request-drag();
@@ -30,20 +30,19 @@ export component MainWindow inherits Window {
width: 488px;
height: 800px;
padding: 20px;
padding: Theme.spacing-xl;
Rectangle {
max-width: 448px;
width: 100%;
height: 760px;
border-radius: 16px;
border-radius: Theme.radius-lg;
clip: true;
background: #0f172a;
background: Theme.surface-main;
border-width: 1px;
border-color: #334155;
border-color: Theme.border-main;
VerticalLayout {
padding: 12px;
Header {
url: current-url;
@@ -83,9 +82,8 @@ export component MainWindow inherits Window {
}
Footer {
settings-clicked => settings-clicked();
feedback-clicked => feedback-clicked();
open-clicked => open-clicked();
settings-clicked => root.settings-clicked();
open-clicked => root.open-clicked();
}
}
}
ui/theme.slint
+42
View File
@@ -0,0 +1,42 @@
export global Theme {
in-out property <bool> is-dark: true;
out property <length> width: 448px;
out property <brush> surface-main: is-dark ? #0f172a : #ffffff;
out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
out property <brush> surface-elevated: is-dark ? #1e293b80 : #ffffff;
out property <brush> surface-hover: is-dark ? #1e293b : #ffffff;
out property <brush> border-main: is-dark ? #334155 : #ffffff;
out property <brush> gradient-main: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
out property <brush> text-main: is-dark ? #ffffff : #000000;
out property <brush> text-muted: is-dark ? #94a3b8 : #000000;
out property <brush> text-control: is-dark ? #cbd5e1 : #000000;
out property <brush> text-control-muted: is-dark ? #64748b : #000000;
out property <brush> text-hint: is-dark ? #475569 : #000000;
out property <brush> shadow-color: is-dark ? #3b82f640 : #000000;
out property <length> shadow-primary-x: 0px;
out property <length> shadow-primary-y: 10px;
out property <length> shadow-primary-blur: 15px;
out property <length> radius: 12px;
out property <length> radius-lg: 16px;
out property <length> spacing-xl: 20px;
out property <length> spacing-lg: 16px;
out property <length> spacing-md: 12px;
out property <length> spacing-sm: 8px;
out property <length> spacing-xs: 4px;
callback toggle();
toggle => {
is-dark = !is-dark;
}
}