diff --git a/.config/ags/lib/notification.js b/.config/ags/lib/notification.js index e3adcc62c..97f53c092 100644 --- a/.config/ags/lib/notification.js +++ b/.config/ags/lib/notification.js @@ -258,8 +258,13 @@ export default ({ className: `${isPopup ? 'popup-' : ''}notif-${notifObject.urgency} spacing-h-10`, children: [ notifIcon, - notifText, - notifExpandButton, + Box({ + className: 'spacing-h-5', + children: [ + notifText, + notifExpandButton, + ] + }) ] }) diff --git a/.config/ags/scripts/templates/hypr/colors.conf b/.config/ags/scripts/templates/hypr/colors.conf index f62ab7a71..0c1ba7f08 100755 --- a/.config/ags/scripts/templates/hypr/colors.conf +++ b/.config/ags/scripts/templates/hypr/colors.conf @@ -1,4 +1,4 @@ -$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}22 -s 00000000)" +$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}44 -s 00000000)" general { col.active_border = rgba({{ $onPrimary }}FF) @@ -6,13 +6,13 @@ general { } plugin { - droidbars { + droidbars { # This is my hyprbars mod that broke :( # example config bar_height = 30 background_color = rgba({{ $background }}FF) # background_color_active = rgba({{ $surfaceVariant }}FF) # Not added yet text_color = rgba({{ $onSecondaryContainer }}FF) - font_family = Lexend + font_family = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif button_font_fmily = JetBrainsMono NF # example buttons (R -> L) @@ -24,7 +24,7 @@ plugin { } hyprbars { # Honestly idk if it works like css, but well, why not - bar_text_font = Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif + bar_text_font = Rubik, Geist, AR One Sans, Reddit Sans, Inter, Roboto, Ubuntu, Noto Sans, sans-serif bar_height = 30 bar_padding = 10 bar_button_padding = 5 diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index dfde74374..8e58a313e 100644 --- a/.config/ags/scss/_bar.scss +++ b/.config/ags/scss/_bar.scss @@ -45,8 +45,7 @@ $bar_subgroup_bg: mix($surfaceVariant, $primary, 89%); } .bar-group-pad-system { - padding-left: 1.023rem; - padding-right: 0.341rem; + padding: 0rem 0.341rem; } .bar-group-pad-music { @@ -131,6 +130,10 @@ $bar_subgroup_bg: mix($surfaceVariant, $primary, 89%); margin: 0rem 0.341rem; } +.bar-clock-box { + margin: 0rem 0.682rem; +} + .bar-clock { @include titlefont; font-size: 1.2727rem; diff --git a/.config/ags/scss/_musicmaterial.scss b/.config/ags/scss/_musicmaterial.scss index e69de29bb..8b1378917 100755 --- a/.config/ags/scss/_musicmaterial.scss +++ b/.config/ags/scss/_musicmaterial.scss @@ -0,0 +1 @@ + diff --git a/.config/ags/style.css b/.config/ags/style.css index c50978b5c..4378de070 100644 --- a/.config/ags/style.css +++ b/.config/ags/style.css @@ -549,8 +549,7 @@ tooltip { padding: 0rem 0.681rem; } .bar-group-pad-system { - padding-left: 1.023rem; - padding-right: 0.341rem; } + padding: 0rem 0.341rem; } .bar-group-pad-music { padding-right: 1.023rem; @@ -619,6 +618,9 @@ tooltip { background-color: rgba(53, 47, 51, 0.31); margin: 0rem 0.341rem; } +.bar-clock-box { + margin: 0rem 0.682rem; } + .bar-clock { font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif; font-size: 1.2727rem; } diff --git a/.config/ags/widgets/bar/system.js b/.config/ags/widgets/bar/system.js index c90ba4ba2..b2b51ecb4 100644 --- a/.config/ags/widgets/bar/system.js +++ b/.config/ags/widgets/bar/system.js @@ -28,7 +28,7 @@ const BatBatteryProgress = () => { const BarClock = () => Widget.Box({ vpack: 'center', - className: 'spacing-h-5 txt-onSurfaceVariant', + className: 'spacing-h-5 txt-onSurfaceVariant bar-clock-box', children: [ Widget.Label({ className: 'bar-clock', @@ -59,30 +59,27 @@ const UtilButton = ({ name, icon, onClicked }) => Button({ label: `${icon}`, }) -const Utilities = () => Scrollable({ - hexpand: true, - child: Box({ - hpack: 'center', - className: 'spacing-h-5', - children: [ - UtilButton({ - name: 'Screen snip', icon: 'screenshot_region', onClicked: () => { - Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`]) - .catch(print) - } - }), - UtilButton({ - name: 'Color picker', icon: 'colorize', onClicked: () => { - Utils.execAsync(['hyprpicker', '-a']).catch(print) - } - }), - UtilButton({ - name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => { - App.toggleWindow('osk'); - } - }), - ] - }) +const Utilities = () => Box({ + hpack: 'center', + className: 'spacing-h-5', + children: [ + UtilButton({ + name: 'Screen snip', icon: 'screenshot_region', onClicked: () => { + Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`]) + .catch(print) + } + }), + UtilButton({ + name: 'Color picker', icon: 'colorize', onClicked: () => { + Utils.execAsync(['hyprpicker', '-a']).catch(print) + } + }), + UtilButton({ + name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => { + App.toggleWindow('osk'); + } + }), + ] }) const BarBattery = () => Box({ @@ -117,17 +114,26 @@ const BarBattery = () => Box({ // revealer.revealChild = Battery.charging; // }), // }), - Stack({ - transition: 'slide_up_down', - items: [ - ['discharging', Widget.Label({ - className: 'txt-norm txt', - label: '•', - }),], - ['charging', MaterialIcon('bolt', 'norm')], - ], + // Stack({ + // transition: 'slide_up_down', + // items: [ + // ['discharging', Widget.Label({ + // className: 'txt-norm txt', + // label: '•', + // }),], + // ['charging', MaterialIcon('bolt', 'norm')], + // ], + // setup: (self) => self.hook(Battery, revealer => { + // self.shown = Battery.charging ? 'charging' : 'discharging'; + // }), + // }), + Revealer({ + transitionDuration: 150, + revealChild: false, + transition: 'slide_right', + child: MaterialIcon('bolt', 'norm'), setup: (self) => self.hook(Battery, revealer => { - self.shown = Battery.charging ? 'charging' : 'discharging'; + self.revealChild = Battery.charging; }), }), Label({ @@ -156,21 +162,26 @@ const BarBattery = () => Box({ ] }); +const BarGroup = ({ child }) => Widget.Box({ + className: 'bar-group-margin bar-sides', + children: [ + Widget.Box({ + className: 'bar-group bar-group-standalone bar-group-pad-system', + children: [child], + }), + ] +}); + export const ModuleSystem = () => Widget.EventBox({ onScrollUp: () => execAsync('hyprctl dispatch workspace -1'), onScrollDown: () => execAsync('hyprctl dispatch workspace +1'), onPrimaryClick: () => App.toggleWindow('sideright'), child: Widget.Box({ - className: 'bar-group-margin bar-sides', + className: 'spacing-h-5', children: [ - Widget.Box({ - className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5', - children: [ - BarClock(), - Utilities(), - BarBattery(), - ], - }), + BarGroup({ child: BarClock() }), + BarGroup({ child: Utilities() }), + BarGroup({ child: BarBattery() }), ] }) }); diff --git a/.config/ags/widgets/sideleft/sideleft.js b/.config/ags/widgets/sideleft/sideleft.js index a335eb276..fc8ceccf4 100644 --- a/.config/ags/widgets/sideleft/sideleft.js +++ b/.config/ags/widgets/sideleft/sideleft.js @@ -175,9 +175,9 @@ export default () => Box({ else if (event.get_keyval()[1] === Gdk.KEY_Tab) switchToTab((currentTabId + 1) % contents.length); else if (event.get_keyval()[1] === Gdk.KEY_Page_Up) - switchToTab(Math.max(currentTabId - 1), 0); + switchToTab(Math.max(currentTabId - 1, 0)); else if (event.get_keyval()[1] === Gdk.KEY_Page_Down) - switchToTab(Math.min(currentTabId + 1), contents.length); + switchToTab(Math.min(currentTabId + 1, contents.length - 1)); } if (contentStack.shown == 'apis') { // If api tab is focused // Automatically focus entry when typing