mirror of
https://github.com/slint-ui/slint.git
synced 2025-11-01 12:24:16 +00:00
Allow scrolling through tabs for all backends
This allows the user to use the scroll wheel to scroll through the tabs. In order to do this I have made created a common TabBarBase and let all other implementations of TabBar* inherit from it. I also used slint-lsp to format the files (it did not like the inline comments).
This commit is contained in:
notfirefox
Olivier Goffart
parent
ba3a1af167
commit
2ee1ee435d
6 changed files with 154 additions and 87 deletions
35
internal/compiler/widgets/common/tabwidget-base.slint
Normal file
35
internal/compiler/widgets/common/tabwidget-base.slint
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
|
||||
|
||||
export component TabBarBase inherits TouchArea {
|
||||
// injected properties:
|
||||
// The currently selected tab
|
||||
in-out property <int> current;
|
||||
// The total number of tabs
|
||||
in-out property <int> num-tabs;
|
||||
|
||||
// Returns the index of the previous tab
|
||||
protected pure function previous-tab() -> int {
|
||||
return Math.max(root.current - 1, 0);
|
||||
}
|
||||
|
||||
// Returns the index of the next tab
|
||||
protected pure function next-tab() -> int {
|
||||
return Math.min(root.current + 1, root.num-tabs - 1);
|
||||
}
|
||||
|
||||
private property <length> scroll-delta: 2px;
|
||||
|
||||
// Allows scrolling through the tabs
|
||||
scroll-event(event) => {
|
||||
if (event.delta-y < -root.scroll-delta) {
|
||||
root.current = next-tab();
|
||||
return accept;
|
||||
}
|
||||
if (event.delta-y > -root.scroll-delta) {
|
||||
root.current = previous-tab();
|
||||
return accept;
|
||||
}
|
||||
reject
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import { CosmicPalette, CosmicFontSettings } from "styling.slint";
|
||||
import { StateLayerBase } from "components.slint";
|
||||
import { TabBarBase } from "../common/tabwidget-base.slint";
|
||||
|
||||
export component TabWidgetImpl inherits Rectangle {
|
||||
in property <length> tabbar-preferred-height;
|
||||
|
|
@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
|
|||
}
|
||||
|
||||
export component TabImpl inherits Rectangle {
|
||||
in property <int> current-focused; // The currently focused tab
|
||||
in property <int> tab-index; // The index of this tab
|
||||
in property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in property <int> current-focused;
|
||||
// The index of this tab
|
||||
in property <int> tab-index;
|
||||
// The total number of tabs
|
||||
in property <int> num-tabs;
|
||||
in property <string> title <=> text.text;
|
||||
in property <bool> enabled: true;
|
||||
out property <bool> has-focus: root.current-focused == root.tab-index;
|
||||
in-out property <int> current; // The currently selected tab
|
||||
// The currently selected tab
|
||||
in-out property <int> current;
|
||||
|
||||
private property <bool> show-left-border: root.tab-index == 0 || root.is-current;
|
||||
private property <bool> show-right-border: root.current != root.tab-index + 1;
|
||||
|
|
@ -69,7 +74,7 @@ export component TabImpl inherits Rectangle {
|
|||
background: state-layer.background;
|
||||
}
|
||||
|
||||
if root.has-focus : Rectangle {
|
||||
if root.has-focus: Rectangle {
|
||||
Rectangle {
|
||||
y: 0;
|
||||
height: root.height - root.inner-border-radius;
|
||||
|
|
@ -126,11 +131,10 @@ export component TabImpl inherits Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
export component TabBarImpl {
|
||||
export component TabBarImpl inherits TabBarBase {
|
||||
// injected properties:
|
||||
in-out property <int> current; // The currently selected tab
|
||||
in-out property <int> current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1; // The currently focused tab
|
||||
in-out property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in-out property <int> current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1;
|
||||
|
||||
accessible-role: tab-list;
|
||||
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
|
||||
|
|
@ -140,7 +144,7 @@ export component TabBarImpl {
|
|||
@children
|
||||
}
|
||||
|
||||
if focus-scope.has-focus : Rectangle {
|
||||
if focus-scope.has-focus: Rectangle {
|
||||
y: root.height - self.height;
|
||||
height: 1px;
|
||||
background: CosmicPalette.accent-background;
|
||||
|
|
@ -150,12 +154,13 @@ export component TabBarImpl {
|
|||
property <int> focused-tab: 0;
|
||||
|
||||
x: 0;
|
||||
width: 0px; // Do not react on clicks
|
||||
// Do not react on clicks
|
||||
width: 0px;
|
||||
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.LeftArrow) {
|
||||
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
||||
|
|
@ -170,12 +175,12 @@ export component TabBarImpl {
|
|||
|
||||
key-released(event) => {
|
||||
if (event.text == " ") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component TabWidget inherits TabWidget {}
|
||||
export component TabWidget inherits TabWidget { }
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import { CupertinoPalette, CupertinoFontSettings } from "styling.slint";
|
||||
import { FocusBorder } from "components.slint";
|
||||
import { TabBarBase } from "../common/tabwidget-base.slint";
|
||||
|
||||
export component TabWidgetImpl inherits Rectangle {
|
||||
in property <length> tabbar-preferred-height;
|
||||
|
|
@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
|
|||
}
|
||||
|
||||
export component TabImpl inherits Rectangle {
|
||||
in property <int> current-focused; // The currently focused tab
|
||||
in property <int> tab-index; // The index of this tab
|
||||
in property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in property <int> current-focused;
|
||||
// The index of this tab
|
||||
in property <int> tab-index;
|
||||
// The total number of tabs
|
||||
in property <int> num-tabs;
|
||||
in property <string> title <=> i-text.text;
|
||||
in property <bool> enabled: true;
|
||||
out property <bool> has-focus: root.current-focused == root.tab-index;
|
||||
in-out property <int> current; // The currently selected tab
|
||||
// The currently selected tab
|
||||
in-out property <int> current;
|
||||
|
||||
private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
|
||||
private property <bool> is-current: root.tab-index == root.current;
|
||||
|
|
@ -45,11 +50,10 @@ export component TabImpl inherits Rectangle {
|
|||
accessible-role: tab;
|
||||
accessible-label: root.title;
|
||||
|
||||
if (root.is-current || i-touch-area.pressed) : Rectangle {
|
||||
if (root.is-current || i-touch-area.pressed): Rectangle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: i-touch-area.pressed ? CupertinoPalette.secondary-control-background :
|
||||
CupertinoPalette.control-background;
|
||||
background: i-touch-area.pressed ? CupertinoPalette.secondary-control-background : CupertinoPalette.control-background;
|
||||
border-radius: 5px;
|
||||
drop-shadow-blur: 0.25px;
|
||||
drop-shadow-color: #0000001f;
|
||||
|
|
@ -57,10 +61,13 @@ export component TabImpl inherits Rectangle {
|
|||
border-width: 1px;
|
||||
border-color: CupertinoPalette.decent-border;
|
||||
|
||||
animate background { duration: 75ms; easing: linear; }
|
||||
animate background {
|
||||
duration: 75ms;
|
||||
easing: linear;
|
||||
}
|
||||
}
|
||||
|
||||
if (!root.is-current && root.tab-index < root.num-tabs - 1) : Rectangle {
|
||||
if (!root.is-current && root.tab-index < root.num-tabs - 1): Rectangle {
|
||||
x: root.width - self.width;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 1px;
|
||||
|
|
@ -90,16 +97,14 @@ export component TabImpl inherits Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
export component TabBarImpl {
|
||||
export component TabBarImpl inherits TabBarBase {
|
||||
// injected properties:
|
||||
in-out property <int> current; // The currently selected tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
|
||||
in-out property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
|
||||
|
||||
accessible-role: tab-list;
|
||||
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
|
||||
|
||||
|
||||
Rectangle {
|
||||
border-radius: 7px;
|
||||
border-color: CupertinoPalette.bar-border;
|
||||
|
|
@ -128,12 +133,13 @@ export component TabBarImpl {
|
|||
property <int> focused-tab: 0;
|
||||
|
||||
x: 0;
|
||||
width: 0px; // Do not react on clicks
|
||||
// Do not react on clicks
|
||||
width: 0px;
|
||||
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.LeftArrow) {
|
||||
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
||||
|
|
@ -148,12 +154,12 @@ export component TabBarImpl {
|
|||
|
||||
key-released(event) => {
|
||||
if (event.text == " ") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component TabWidget inherits TabWidget {}
|
||||
export component TabWidget inherits TabWidget { }
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import { FluentPalette, FluentFontSettings } from "styling.slint";
|
||||
import { FocusBorder } from "components.slint";
|
||||
import { TabBarBase } from "../common/tabwidget-base.slint";
|
||||
|
||||
export component TabWidgetImpl inherits Rectangle {
|
||||
in property <length> tabbar-preferred-height;
|
||||
|
|
@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
|
|||
}
|
||||
|
||||
export component TabImpl inherits Rectangle {
|
||||
in property <int> current-focused; // The currently focused tab
|
||||
in property <int> tab-index; // The index of this tab
|
||||
in property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in property <int> current-focused;
|
||||
// The index of this tab
|
||||
in property <int> tab-index;
|
||||
// The total number of tabs
|
||||
in property <int> num-tabs;
|
||||
in property <string> title <=> i-text.text;
|
||||
in property <bool> enabled: true;
|
||||
out property <bool> has-focus: root.current-focused == root.tab-index;
|
||||
in-out property <int> current; // The currently selected tab
|
||||
// The currently selected tab
|
||||
in-out property <int> current;
|
||||
|
||||
private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
|
||||
private property <bool> is-current: root.tab-index == root.current;
|
||||
|
|
@ -57,8 +62,7 @@ export component TabImpl inherits Rectangle {
|
|||
border-radius: 7px;
|
||||
border-width: root.is-current ? 1px : 0px;
|
||||
border-color: FluentPalette.card-stroke;
|
||||
background: i-touch-area.pressed || root.is-current ? FluentPalette.layer-on-mica-base-alt :
|
||||
i-touch-area.has-hover ? FluentPalette.layer-on-mica-base-alt-secondary : transparent;
|
||||
background: i-touch-area.pressed || root.is-current ? FluentPalette.layer-on-mica-base-alt : i-touch-area.has-hover ? FluentPalette.layer-on-mica-base-alt-secondary : transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,14 +87,14 @@ export component TabImpl inherits Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
if (!root.is-current && !root.hide-right-border && !i-touch-area.has-hover && !i-touch-area.pressed) : Rectangle {
|
||||
if (!root.is-current && !root.hide-right-border && !i-touch-area.has-hover && !i-touch-area.pressed): Rectangle {
|
||||
x: (parent.width - self.width);
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: FluentPalette.divider;
|
||||
}
|
||||
|
||||
if (!root.is-current && !i-touch-area.has-hover && !i-touch-area.pressed) : Rectangle {
|
||||
if (!root.is-current && !i-touch-area.has-hover && !i-touch-area.pressed): Rectangle {
|
||||
y: (parent.height - self.height);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
|
@ -98,16 +102,15 @@ export component TabImpl inherits Rectangle {
|
|||
}
|
||||
|
||||
// focus border
|
||||
if (root.has-focus && root.enabled) : FocusBorder {
|
||||
if (root.has-focus && root.enabled): FocusBorder {
|
||||
border-radius: i-background.border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
export component TabBarImpl {
|
||||
export component TabBarImpl inherits TabBarBase {
|
||||
// injected properties:
|
||||
in-out property <int> current; // The currently selected tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
|
||||
in-out property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
|
||||
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
|
|
@ -122,12 +125,13 @@ export component TabBarImpl {
|
|||
property <int> focused-tab: 0;
|
||||
|
||||
x: 0;
|
||||
width: 0px; // Do not react on clicks
|
||||
// Do not react on clicks
|
||||
width: 0px;
|
||||
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.LeftArrow) {
|
||||
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
||||
|
|
@ -142,12 +146,12 @@ export component TabBarImpl {
|
|||
|
||||
key-released(event) => {
|
||||
if (event.text == " ") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component TabWidget inherits TabWidget {}
|
||||
export component TabWidget inherits TabWidget { }
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
|
||||
import { MaterialPalette, MaterialFontSettings } from "styling.slint";
|
||||
import { TabBarBase } from "../common/tabwidget-base.slint";
|
||||
|
||||
export component TabWidgetImpl inherits Rectangle {
|
||||
in property <length> tabbar-preferred-height;
|
||||
|
|
@ -27,12 +28,16 @@ export component TabWidgetImpl inherits Rectangle {
|
|||
}
|
||||
|
||||
export component TabImpl inherits Rectangle {
|
||||
in property <int> current-focused; // The currently focused tab
|
||||
in property <int> tab-index; // The index of this tab
|
||||
in property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in property <int> current-focused;
|
||||
// The index of this tab
|
||||
in property <int> tab-index;
|
||||
// The total number of tabs
|
||||
in property <int> num-tabs;
|
||||
in property <string> title <=> i-text.text;
|
||||
in property <bool> enabled: true;
|
||||
in-out property <int> current; // The currently selected tab
|
||||
// The currently selected tab
|
||||
in-out property <int> current;
|
||||
|
||||
private property <bool> has-focus: root.current-focused == root.tab-index;
|
||||
private property <bool> active: root.tab-index == root.current;
|
||||
|
|
@ -52,8 +57,11 @@ export component TabImpl inherits Rectangle {
|
|||
border-radius: i-container.border-radius;
|
||||
background: MaterialPalette.accent-background;
|
||||
|
||||
animate opacity { duration: 250ms; easing: ease; }
|
||||
}
|
||||
animate opacity {
|
||||
duration: 250ms;
|
||||
easing: ease;
|
||||
}
|
||||
}
|
||||
|
||||
i-layout := HorizontalLayout {
|
||||
padding-left: 16px;
|
||||
|
|
@ -67,7 +75,10 @@ export component TabImpl inherits Rectangle {
|
|||
font-size: MaterialFontSettings.title-small.font-size;
|
||||
font-weight: MaterialFontSettings.title-small.font-weight;
|
||||
|
||||
animate color { duration: 250ms; easing: ease; }
|
||||
animate color {
|
||||
duration: 250ms;
|
||||
easing: ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +89,10 @@ export component TabImpl inherits Rectangle {
|
|||
y: parent.height - self.height;
|
||||
background: MaterialPalette.accent-background;
|
||||
|
||||
animate opacity { duration: 250ms; easing: ease; }
|
||||
animate opacity {
|
||||
duration: 250ms;
|
||||
easing: ease;
|
||||
}
|
||||
}
|
||||
|
||||
i-touch-area := TouchArea {
|
||||
|
|
@ -90,11 +104,10 @@ export component TabImpl inherits Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
export component TabBarImpl {
|
||||
export component TabBarImpl inherits TabBarBase {
|
||||
// injected properties:
|
||||
in-out property <int> current; // The currently selected tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
|
||||
in-out property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
|
||||
|
||||
accessible-role: tab-list;
|
||||
accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
|
||||
|
|
@ -109,12 +122,13 @@ export component TabBarImpl {
|
|||
property <int> focused-tab: 0;
|
||||
|
||||
x: 0;
|
||||
width: 0; // Do not react on clicks
|
||||
// Do not react on clicks
|
||||
width: 0;
|
||||
|
||||
key-pressed(event) => {
|
||||
if (event.text == "\n") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.LeftArrow) {
|
||||
self.focused-tab = Math.max(self.focused-tab - 1, 0);
|
||||
|
|
@ -129,13 +143,12 @@ export component TabBarImpl {
|
|||
|
||||
key-released(event) => {
|
||||
if (event.text == " ") {
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
root.current = root.current-focused;
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export component TabWidget inherits TabWidget {}
|
||||
export component TabWidget inherits TabWidget { }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
|
||||
|
||||
import { TabBarBase } from "../common/tabwidget-base.slint";
|
||||
|
||||
export component TabWidgetImpl inherits NativeTabWidget { }
|
||||
|
||||
export component TabImpl inherits NativeTab {
|
||||
|
|
@ -8,41 +10,43 @@ export component TabImpl inherits NativeTab {
|
|||
accessible-label <=> root.title;
|
||||
}
|
||||
|
||||
export component TabBarImpl {
|
||||
export component TabBarImpl inherits TabBarBase {
|
||||
// injected properties:
|
||||
in-out property <int> current; // The currently selected tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? root.current : -1; // The currently focused tab
|
||||
in-out property <int> num-tabs; // The total number of tabs
|
||||
// The currently focused tab
|
||||
in-out property <int> current-focused: i-focus-scope.has-focus ? root.current : -1;
|
||||
|
||||
accessible-role: tab-list;
|
||||
accessible-delegate-focus: root.current;
|
||||
|
||||
Rectangle {
|
||||
clip: true; // The breeze style draws outside of the tab bar, which is clip by default with Qt
|
||||
// The breeze style draws outside of the tab bar, which is clip by default with Qt
|
||||
clip: true;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 0px; // Qt renders Tabs next to each other and renders "spacing" as part of the tab itself
|
||||
// Qt renders Tabs next to each other and renders "spacing" as part of the tab itself
|
||||
spacing: 0px;
|
||||
alignment: NativeStyleMetrics.tab-bar-alignment;
|
||||
@children
|
||||
}
|
||||
}
|
||||
|
||||
i-focus-scope := FocusScope {
|
||||
x:0;
|
||||
width: 0px; // Do not react on clicks
|
||||
x: 0;
|
||||
// Do not react on clicks
|
||||
width: 0px;
|
||||
|
||||
key-pressed(event) => {
|
||||
if (event.text == Key.LeftArrow) {
|
||||
root.current = Math.max(root.current - 1, 0);
|
||||
return accept;
|
||||
root.current = root.previous-tab();
|
||||
return accept;
|
||||
}
|
||||
if (event.text == Key.RightArrow) {
|
||||
root.current = Math.min(root.current + 1, root.num-tabs - 1);
|
||||
return accept;
|
||||
root.current = root.next-tab();
|
||||
return accept;
|
||||
}
|
||||
return reject;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component TabWidget inherits TabWidget {}
|
||||
export component TabWidget inherits TabWidget { }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue