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,11 +57,18 @@ export const TabContainer = ({ icons, names, children, className = '', setup = (
             onScrollUp: () => mainBox.prevTab(),
             onScrollDown: () => mainBox.nextTab(),
             child: Box({
+                className: 'spacing-h-5',
+                children: [
+                    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');
+            widgetContent.toggleClassName('sidebar-left-expanded', self.attribute.enabled);
-            const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
+            widgetContent.toggleClassName('sidebar-left', !self.attribute.enabled);
-
-            sideleftContent.toggleClassName('sidebar-pinned', self.attribute.enabled);
-
-            if (self.attribute.enabled) {
-                sideleftWindow.exclusivity = 'on-demad';
-            }
-            else {
-                sideleftWindow.exclusivity = 'normal';
-            }
         },
     },
     vpack: 'start',
-    className: 'sidebar-pin',
+    className: 'sidebar-controlbtn',
-    child: MaterialIcon('push_pin', 'larger'),
+    child: MaterialIcon('expand_content', 'larger'),
-    tooltipText: 'Pin sidebar (Ctrl+P)',
+    tooltipText: `Expand sidebar (${userOptions.keybinds.sidebar.expand})`,
     onClicked: (self) => self.attribute.toggle(self),
-    setup: (self) => {
+    setup: setupCursorHover,
-        setupCursorHover(self);
-        self.hook(App, (self, currentName, visible) => {
-            if (currentName === 'sideleft' && visible) self.grab_focus();
-        })
-    },
 })
 
 export const widgetContent = TabContainer({
@@ -66,13 +85,18 @@ 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) => {
+    // setup: (self) => self.hook(App, (self, currentName, visible) => {
-        if (currentName === 'sideleft')
+    //     if (currentName === 'sideleft')
-            self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
+    //         self.toggleClassName('sidebar-pinned', pinButton.attribute.enabled && visible);
-    }),
+    // }),
+    extraTabStripWidgets: [
+        // pinButton,
+        expandButton,
+    ]
 });
 
-export default () => Box({
+export default () => {
+    return Box({
         // vertical: true,
         vexpand: true,
         css: 'min-width: 2px;',
@@ -81,14 +105,16 @@ export default () => Box({
         ],
         setup: (self) => self
             .on('key-press-event', (widget, event) => { // Handle keybinds
-            if (checkKeybind(event, userOptions.keybinds.sidebar.pin))
+                if (checkKeybind(event, userOptions.keybinds.sidebar.cycleTab))
-                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();
+                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
@@ -119,3 +145,4 @@ export default () => Box({
             })
         ,
     });
+}

.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-controlbtn:hover,
-.sidebar-pin:focus {
+.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-controlbtn-enabled:hover,
-.sidebar-pin-enabled:focus {
+.sidebar-controlbtn-enabled:focus {
     background-color: mix($primary, $hovercolor, 70%);
 }
 
-.sidebar-pin-enabled:active {
+.sidebar-controlbtn-enabled:active {
     background-color: mix($primary, $hovercolor, 40%);
 }