From 8bae3e14e9fa666395c417cec1e7e01a15f6fded Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 3 Apr 2025 15:35:38 +0200 Subject: [PATCH] sideleft: expand button --- .../modules/.commonwidgets/tabcontainer.js | 20 ++- .config/ags/modules/sideleft/sideleft.js | 167 ++++++++++-------- .config/ags/scss/_sidebars.scss | 26 ++- 3 files changed, 131 insertions(+), 82 deletions(-) diff --git a/.config/ags/modules/.commonwidgets/tabcontainer.js b/.config/ags/modules/.commonwidgets/tabcontainer.js index 876875ddf..a55ce9812 100644 --- a/.config/ags/modules/.commonwidgets/tabcontainer.js +++ b/.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, ] }) })] diff --git a/.config/ags/modules/sideleft/sideleft.js b/.config/ags/modules/sideleft/sideleft.js index a3cc9340f..01dd91b71 100644 --- a/.config/ags/modules/sideleft/sideleft.js +++ b/.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(); - } - } - }) - , -}); + }) + , + }); +} diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 999ac4cf4..ac3bebd49 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.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%); }