sideleft: expand button

.config/ags/modules/.commonwidgets/tabcontainer.js

@@ -6,7 +6,12 @@ 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 }) => {
+export const TabContainer = ({
+    icons, names, children,
+    className = '', setup = () => { },
+    extraTabStripWidgets = [],
+    ...rest
+}) => {
     const shownIndex = Variable(0);
     let previousShownIndex = 0;
     const count = Math.min(icons.length, names.length, children.length);
@@ -52,10 +57,17 @@ export const TabContainer = ({ icons, names, children, className = '', setup = (
             onScrollUp: () => mainBox.prevTab(),
             onScrollDown: () => mainBox.nextTab(),
             child: Box({
-                vertical: true,
+                className: 'spacing-h-5',
                 children: [
-                    tabs,
-                    tabIndicatorLine
+                    Box({
+                        vertical: true,
+                        hexpand: true,
+                        children: [
+                            tabs,
+                            tabIndicatorLine
+                        ]
+                    }),
+                    ...extraTabStripWidgets,
                 ]
             })
         })]

.config/ags/modules/sideleft/sideleft.js

@@ -28,37 +28,56 @@ const SIDEBARTABS = {
 }
 const CONTENTS = userOptions.sidebar.pages.order.map((tabName) => SIDEBARTABS[tabName])
 
-const pinButton = Button({
+// const pinButton = Button({
+//     attribute: {
+//         'enabled': false,
+//         'toggle': (self) => {
+//             self.attribute.enabled = !self.attribute.enabled;
+//             self.toggleClassName('sidebar-controlbtn-enabled', self.attribute.enabled);
+
+//             const sideleftWindow = App.getWindow('sideleft');
+//             const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
+
+//             sideleftContent.toggleClassName('sidebar-pinned', self.attribute.enabled);
+
+//             if (self.attribute.enabled) {
+//                 sideleftWindow.exclusivity = 'exclusive';
+//             }
+//             else {
+//                 sideleftWindow.exclusivity = 'normal';
+//             }
+//         },
+//     },
+//     vpack: 'start',
+//     className: 'sidebar-controlbtn',
+//     child: MaterialIcon('push_pin', 'larger'),
+// tooltipText: `Pin sidebar (${userOptions.keybinds.sidebar.pin})`,
+//     onClicked: (self) => self.attribute.toggle(self),
+//     setup: (self) => {
+//         setupCursorHover(self);
+//         self.hook(App, (self, currentName, visible) => {
+//             if (currentName === 'sideleft' && visible) self.grab_focus();
+//         })
+//     },
+// })
+
+const expandButton = Button({
     attribute: {
         'enabled': false,
         'toggle': (self) => {
             self.attribute.enabled = !self.attribute.enabled;
-            self.toggleClassName('sidebar-pin-enabled', self.attribute.enabled);
+            self.toggleClassName('sidebar-controlbtn-enabled', self.attribute.enabled);
 
-            const sideleftWindow = App.getWindow('sideleft');
-            const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
-
-            sideleftContent.toggleClassName('sidebar-pinned', self.attribute.enabled);
-
-            if (self.attribute.enabled) {
-                sideleftWindow.exclusivity = 'on-demad';
-            }
-            else {
-                sideleftWindow.exclusivity = 'normal';
-            }
+            widgetContent.toggleClassName('sidebar-left-expanded', self.attribute.enabled);
+            widgetContent.toggleClassName('sidebar-left', !self.attribute.enabled);
         },
     },
     vpack: 'start',
-    className: 'sidebar-pin',
-    child: MaterialIcon('push_pin', 'larger'),
-    tooltipText: 'Pin sidebar (Ctrl+P)',
+    className: 'sidebar-controlbtn',
+    child: MaterialIcon('expand_content', 'larger'),
+    tooltipText: `Expand sidebar (${userOptions.keybinds.sidebar.expand})`,
     onClicked: (self) => self.attribute.toggle(self),
-    setup: (self) => {
-        setupCursorHover(self);
-        self.hook(App, (self, currentName, visible) => {
-            if (currentName === 'sideleft' && visible) self.grab_focus();
-        })
-    },
+    setup: setupCursorHover,
 })
 
 export const widgetContent = TabContainer({
@@ -66,56 +85,64 @@ export const widgetContent = TabContainer({
     names: CONTENTS.map((item) => item.friendlyName),
     children: CONTENTS.map((item) => item.content),
     className: 'sidebar-left spacing-v-10',
-    setup: (self) => self.hook(App, (self, currentName, visible) => {
-        if (currentName === 'sideleft')
-            self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
-    }),
+    // setup: (self) => self.hook(App, (self, currentName, visible) => {
+    //     if (currentName === 'sideleft')
+    //         self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
+    // }),
+    extraTabStripWidgets: [
+        // pinButton,
+        expandButton,
+    ]
 });
 
-export default () => Box({
-    // vertical: true,
-    vexpand: true,
-    css: 'min-width: 2px;',
-    children: [
-        widgetContent,
-    ],
-    setup: (self) => self
-        .on('key-press-event', (widget, event) => { // Handle keybinds
-            if (checkKeybind(event, userOptions.keybinds.sidebar.pin))
-                pinButton.attribute.toggle(pinButton);
-            else if (checkKeybind(event, userOptions.keybinds.sidebar.cycleTab))
-                widgetContent.cycleTab();
-            else if (checkKeybind(event, userOptions.keybinds.sidebar.nextTab))
-                widgetContent.nextTab();
-            else if (checkKeybind(event, userOptions.keybinds.sidebar.prevTab))
-                widgetContent.prevTab();
+export default () => {
+    return Box({
+        // vertical: true,
+        vexpand: true,
+        css: 'min-width: 2px;',
+        children: [
+            widgetContent,
+        ],
+        setup: (self) => self
+            .on('key-press-event', (widget, event) => { // Handle keybinds
+                if (checkKeybind(event, userOptions.keybinds.sidebar.cycleTab))
+                    widgetContent.cycleTab();
+                else if (checkKeybind(event, userOptions.keybinds.sidebar.nextTab))
+                    widgetContent.nextTab();
+                else if (checkKeybind(event, userOptions.keybinds.sidebar.prevTab))
+                    widgetContent.prevTab();
+                else if (checkKeybind(event, userOptions.keybinds.sidebar.expand))
+                    expandButton.attribute.toggle(expandButton);
+                // if (checkKeybind(event, userOptions.keybinds.sidebar.pin))
+                //     pinButton.attribute.toggle(pinButton);
 
-            if (widgetContent.attribute.names[widgetContent.attribute.shown.value] == 'APIs') { // If api tab is focused
-                // Focus entry when typing
-                if ((
-                    !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
-                    event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
-                    widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space)
-                    ||
-                    ((event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
-                        event.get_keyval()[1] === Gdk.KEY_v)
-                ) {
-                    chatEntry.grab_focus();
-                    const buffer = chatEntry.get_buffer();
-                    buffer.set_text(buffer.text + String.fromCharCode(event.get_keyval()[1]), -1);
-                    buffer.place_cursor(buffer.get_iter_at_offset(-1));
+                if (widgetContent.attribute.names[widgetContent.attribute.shown.value] == 'APIs') { // If api tab is focused
+                    // Focus entry when typing
+                    if ((
+                        !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                        event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
+                        widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space)
+                        ||
+                        ((event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                            event.get_keyval()[1] === Gdk.KEY_v)
+                    ) {
+                        chatEntry.grab_focus();
+                        const buffer = chatEntry.get_buffer();
+                        buffer.set_text(buffer.text + String.fromCharCode(event.get_keyval()[1]), -1);
+                        buffer.place_cursor(buffer.get_iter_at_offset(-1));
+                    }
+                    // Switch API type
+                    else if (checkKeybind(event, userOptions.keybinds.sidebar.apis.nextTab)) {
+                        const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
+                        toSwitchTab.nextTab();
+                    }
+                    else if (checkKeybind(event, userOptions.keybinds.sidebar.apis.prevTab)) {
+                        const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
+                        toSwitchTab.prevTab();
+                    }
                 }
-                // Switch API type
-                else if (checkKeybind(event, userOptions.keybinds.sidebar.apis.nextTab)) {
-                    const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
-                    toSwitchTab.nextTab();
-                }
-                else if (checkKeybind(event, userOptions.keybinds.sidebar.apis.prevTab)) {
-                    const toSwitchTab = widgetContent.attribute.children[widgetContent.attribute.shown.value];
-                    toSwitchTab.prevTab();
-                }
-            }
 
-        })
-    ,
-});
+            })
+        ,
+    });
+}

.config/ags/scss/_sidebars.scss

@@ -24,6 +24,16 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
     padding: 1.023rem;
 }
 
+.sidebar-left-expanded {
+    @include menu_decel;
+    @include elevation-border;
+    @include elevation2;
+    border-radius: $rounding_large - $elevation_margin + 0.068rem;
+    min-width: 54.545rem;
+    background-color: $background;
+    padding: 1.023rem;
+}
+
 .sidebar-group {
     @include normal-rounding;
     @include group-padding;
@@ -826,7 +836,7 @@ $skeleton-accent: mix($secondary, $onSecondary, 50%);
     background-color: $activecolor;
 }
 
-.sidebar-pin {
+.sidebar-controlbtn {
     @include small-rounding;
     @include element_decel;
     min-height: 2.386rem;
@@ -834,16 +844,16 @@ $skeleton-accent: mix($secondary, $onSecondary, 50%);
     color: $onSurface;
 }
 
-.sidebar-pin:hover,
-.sidebar-pin:focus {
+.sidebar-controlbtn:hover,
+.sidebar-controlbtn:focus {
     background-color: $hovercolor;
 }
 
-.sidebar-pin:active {
+.sidebar-controlbtn:active {
     background-color: $activecolor;
 }
 
-.sidebar-pin-enabled {
+.sidebar-controlbtn-enabled {
     background-color: $primary;
 
     label {
@@ -851,12 +861,12 @@ $skeleton-accent: mix($secondary, $onSecondary, 50%);
     }
 }
 
-.sidebar-pin-enabled:hover,
-.sidebar-pin-enabled:focus {
+.sidebar-controlbtn-enabled:hover,
+.sidebar-controlbtn-enabled:focus {
     background-color: mix($primary, $hovercolor, 70%);
 }
 
-.sidebar-pin-enabled:active {
+.sidebar-controlbtn-enabled:active {
     background-color: mix($primary, $hovercolor, 40%);
 }