language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-11-17 18:57:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

em: polish menu (#2366)

Browse source
This commit is contained in:
Florian Blasius 2023-03-10 13:05:52 +00:00 • committed by GitHub
parent 656569be0d
commit 2da2f51929
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 111 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

22
examples/energy-monitor/ui/mid_main.slint
View file

@ -27,18 +27,34 @@ export component MidMain {
PageContainer {
Overview {}
clicked => {
show-page(0);
}
}
PageContainer {
Usage {}
clicked => {
show-page(1);
}
}
PageContainer {
Balance {}
clicked => {
show-page(2);
}
}
PageContainer {
Weather {}
clicked => {
show-page(3);
}
}
animate viewport-x { duration: Theme.durations.medium; }
@ -56,7 +72,7 @@ export component MidMain {
i-menu-page := MenuPage {
page-changed(index) => {
i-menu.hide();
i-page-scroll-view.viewport-x = min(0px, max(max-viewport-x, -(index * item-width)));
show-page(index);
}
close => {
@ -69,4 +85,8 @@ export component MidMain {
}
}
}
function show-page(index: int) {
i-page-scroll-view.viewport-x = min(0px, max(max-viewport-x, -(index * item-width)));
}
}

39
examples/energy-monitor/ui/pages/menu_page/menu_overview.slint
View file

@ -17,42 +17,3 @@ export global MenuOverviewAdapter {
in-out property <int> current-page;
out property <int> count: model.length;
}
export component MenuOverview inherits Page {
callback page-changed <=> i-page-list.selection-changed;
callback show-settings <=> i-settings-button.clicked;
callback show-about <=> i-about-button.clicked;
in property <[StandardListViewItem]> model <=> MenuOverviewAdapter.model;
in-out property <int> current-page <=> MenuOverviewAdapter.current-page;
padding-left: 0;
padding-right: 0;
VerticalLayout {
padding: Theme.spaces.medium;
spacing: Theme.spaces.small;
HorizontalLayout {
vertical-stretch: 0;
i-settings-button := IconButton {
icon: Images.settings;
}
// spacer
Rectangle {
horizontal-stretch: 1;
}
i-about-button := IconButton {
icon: Images.information;
}
}
i-page-list := ListView {
model: root.model;
selected-index <=> root.current-page;
}
}
}

40
examples/energy-monitor/ui/pages/menu_page/menu_page.slint
View file

@ -2,7 +2,7 @@
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
import { About } from "about.slint";
import { MenuOverview, MenuOverviewAdapter } from "menu_overview.slint";
import { MenuOverviewAdapter } from "menu_overview.slint";
import { Settings, SettingsAdapter } from "settings.slint";
import { Theme } from "../../theme.slint";
@ -31,45 +31,27 @@ export component MenuPage {
width: 2 * parent.width;
clip: true;
if(parent.x > -parent.width) : MenuOverview {
if(current-index == 0) : Settings {
width: root.width;
page-changed(index) => {
root.page-changed(index);
}
show-settings => {
show-settings = true;
current-index = 1;
}
show-about => {
show-settings = false;
current-index = 1;
}
}
if(!show-settings && current-index == 1) : About {
x: root.width;
width: root.width;
back => {
back();
}
}
if(show-settings && current-index == 1) : Settings {
x: root.width;
width: root.width;
back => {
back();
}
close => {
root.close();
}
}
if(current-index == 1) : About {
x: root.width;
width: root.width;
back => {
back();
}
}
animate x { duration: Theme.durations.fast; }
}

7
examples/energy-monitor/ui/pages/menu_page/settings.slint
View file

@ -9,6 +9,7 @@ import { IconButton, CheckBox, RadioButton, Switch, ScrollView, Item, ItemGroupB
export global SettingsAdapter {
callback check-radio-option(int /* index */);
// fuctions
in-out property <bool> fuction-one-checked: true;
in-out property <bool> kiosk-mode-checked;
@ -37,7 +38,7 @@ export global SettingsAdapter {
export component Settings inherits Page {
callback close();
callback back <=> i-back-button.clicked;
callback show-about <=> i-back-button.clicked;
callback check-radio-option <=> SettingsAdapter.check-radio-option;
// fuctions
@ -66,11 +67,11 @@ export component Settings inherits Page {
HorizontalLayout {
vertical-stretch: 0;
alignment: start;
alignment: end;
i-back-button := IconButton {
horizontal-stretch: 0;
icon: Images.arrow-left;
icon: Images.information;
}
}

2
examples/energy-monitor/ui/small_main.slint
View file

@ -29,7 +29,7 @@ export component SmallMain {
}
pagination-clicked => {
i-menu.show-button();
i-menu.open-menu();
i-navigation.hide();
}

23
examples/energy-monitor/ui/widgets/menu.slint
View file

@ -39,6 +39,7 @@ export component Menu {
visible: container-visibility == 1.0;
border-radius: 4px;
background: Theme.palette.ebony-radial-gradient;
clip: true;
// avoid click-through
TouchArea {}
@ -54,9 +55,12 @@ export component Menu {
alignment: start;
i-menu-button := MenuButton {
clicked => {
toggle-open();
if(open) {
hide();
} else {
open-menu();
}
}
}
}
@ -69,19 +73,8 @@ export component Menu {
menu-button-visible = false;
}
public function show-button() {
menu-button-visible = true;
}
function toggle-open() {
menu-button-visible = false;
open = !open;
if(open) {
opend();
} else {
closed();
}
public function open-menu() {
open = true;
}
public function hide() {

41
examples/energy-monitor/ui/widgets/page_scroll_view.slint
View file

@ -8,8 +8,9 @@ import { Theme } from "../theme.slint";
component ScrollBar {
private property <length> ref-width: self.width - 4px;
in property <float> range;
in property <float> value;
in-out property<length> page-size;
in-out property<length> value;
in-out property<length> maximum;
min-height: 14px;
@ -18,22 +19,45 @@ component ScrollBar {
border-radius: 6px;
border-color: Theme.palette.slint-blue-300;
Rectangle {
x: 2px - ref-width * value;
y: 2px;
i-indicator := Rectangle {
x: 2px + (root.ref-width - i-indicator.width) * (-root.value / root.maximum);
height: parent.height - 4px;
background: Theme.palette.slint-blue-300;
width: ref-width * range;
width: max(32px, ref-width * root.page-size / (root.maximum + root.page-size));
border-radius: parent.border-radius - 2px;
}
}
TouchArea {
property <length> pressed-value;
width: parent.width;
height: parent.height;
pointer-event(event) => {
if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
self.pressed-value = -root.value;
}
}
moved => {
if (self.enabled && self.pressed) {
root.value = -max(0px, min(root.maximum, self.pressed-value + (
(self.mouse-x - self.pressed-x) * (root.maximum / (root.width - i-indicator.width))
)));
}
}
}
}
export component PageContainer {
callback clicked <=> i-touch-area.clicked;
min-width: 320px;
min-height: 240px;
max-height: 300px;
i-touch-area := TouchArea {}
Rectangle {
border-radius: 6px;
background: Theme.palette.dark-deep-blue;
@ -93,8 +117,9 @@ export component PageScrollView {
horizontal-stretch: 1;
ScrollBar {
value: i-flickable.viewport-x / i-flickable.viewport-width;
range: i-flickable.width / i-flickable.viewport-width;
maximum: i-flickable.viewport-width - i-flickable.width;
page-size: i-flickable.width;
value <=> i-flickable.viewport-x;
}
}