sidebar: add volume mixer

2024-03-24 21:37:06 +07:00
parent bf2920a76d
commit 0fd91e18fc
12 changed files with 401 additions and 42 deletions
@@ -4,6 +4,7 @@ const { Box, Button, EventBox, Label, Overlay, Stack } = Widget;
 import { MaterialIcon } from './materialicon.js';
 import { NavigationIndicator } from './cairo_navigationindicator.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
+import { DoubleRevealer } from '../.widgethacks/advancedrevealers.js';

 export const TabContainer = ({ icons, names, children, className = '', setup = () => { }, ...rest }) => {
    const shownIndex = Variable(0);
@@ -167,3 +168,107 @@ export const IconTabContainer = ({

    return mainBox;
 }
+
+export const ExpandingIconTabContainer = ({
+    icons, names, children, className = '',
+    setup = () => { }, onChange = () => { },
+    tabsHpack = 'center', tabSwitcherClassName = '',
+    ...rest
+}) => {
+    const shownIndex = Variable(0);
+    let previousShownIndex = 0;
+    const count = Math.min(icons.length, names.length, children.length);
+    const tabs = Box({
+        hpack: tabsHpack,
+        className: `spacing-h-5 ${tabSwitcherClassName}`,
+        children: icons.map((icon, i) => {
+            const tabIcon = MaterialIcon(icon, 'norm', { hexpand: true });
+            const tabName = DoubleRevealer({
+                transition1: 'slide_right',
+                transition2: 'crossfade',
+                duration1: 0,
+                duration2: 0,
+                // duration1: userOptions.animations.durationSmall,
+                // duration2: userOptions.animations.durationSmall,
+                child: Label({
+                    className: 'margin-left-5 txt-small',
+                    label: names[i],
+                }),
+                revealChild: i === shownIndex.value,
+            })
+            const button = Button({
+                className: 'tab-icon-expandable',
+                tooltipText: names[i],
+                child: Box({
+                    homogeneous: true,
+                    children: [Box({
+                        hpack: 'center',
+                        children: [
+                            tabIcon,
+                            tabName,
+                        ]
+                    })],
+                }),
+                setup: setupCursorHover,
+                onClicked: () => shownIndex.value = i,
+            });
+            button.toggleFocus = (value) => {
+                tabIcon.hexpand = !value;
+                button.toggleClassName('tab-icon-expandable-active', value);
+                tabName.toggleRevealChild(value);
+            }
+            return button;
+        }),
+        setup: (self) => self.hook(shownIndex, (self) => {
+            self.children[previousShownIndex].toggleFocus(false);
+            self.children[shownIndex.value].toggleFocus(true);
+            previousShownIndex = shownIndex.value;
+        }),
+    });
+    const tabSection = Box({
+        homogeneous: true,
+        children: [EventBox({
+            onScrollUp: () => mainBox.prevTab(),
+            onScrollDown: () => mainBox.nextTab(),
+            child: Box({
+                vertical: true,
+                hexpand: true,
+                children: [
+                    tabs,
+                ]
+            })
+        })]
+    });
+    const contentStack = Stack({
+        transition: 'slide_left_right',
+        children: children.reduce((acc, currentValue, index) => {
+            acc[index] = currentValue;
+            return acc;
+        }, {}),
+        setup: (self) => self.hook(shownIndex, (self) => {
+            self.shown = `${shownIndex.value}`;
+        }),
+    });
+    const mainBox = Box({
+        attribute: {
+            children: children,
+            shown: shownIndex,
+            names: names,
+        },
+        vertical: true,
+        className: `spacing-v-5 ${className}`,
+        setup: (self) => {
+            self.pack_start(tabSection, false, false, 0);
+            self.pack_end(contentStack, true, true, 0);
+            setup(self);
+            self.hook(shownIndex, (self) => onChange(self, shownIndex.value));
+        },
+        ...rest,
+    });
+    mainBox.nextTab = () => shownIndex.value = Math.min(shownIndex.value + 1, count - 1);
+    mainBox.prevTab = () => shownIndex.value = Math.max(shownIndex.value - 1, 0);
+    mainBox.cycleTab = () => shownIndex.value = (shownIndex.value + 1) % count;
+    mainBox.shown = shownIndex;
+
+    return mainBox;
+}