From 5c097812ad45c17341c986cb6ad8265f164d5324 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 00:18:59 +0700 Subject: [PATCH 1/7] sidebar: segcyer api stuff let me cook --- .config/ags/modules/.miscutils/system.js | 6 +- .../ags/modules/indicators/musiccontrols.js | 11 ++-- .../modules/sideleft/apis/ai_chatmessage.js | 18 ++---- .config/ags/modules/sideleft/apis/booru.js | 34 +++++------ .config/ags/modules/sideleft/apis/chatgpt.js | 2 +- .config/ags/modules/sideleft/apis/gemini.js | 2 +- .config/ags/modules/sideleft/apis/waifu.js | 12 +--- .config/ags/scss/_common.scss | 4 +- .config/ags/scss/_sidebars.scss | 57 +++++++++++-------- 9 files changed, 70 insertions(+), 76 deletions(-) diff --git a/.config/ags/modules/.miscutils/system.js b/.config/ags/modules/.miscutils/system.js index d5e73b38..6285ee2d 100644 --- a/.config/ags/modules/.miscutils/system.js +++ b/.config/ags/modules/.miscutils/system.js @@ -1,3 +1,4 @@ +const { GLib } = imports.gi; import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; const { execAsync, exec } = Utils; @@ -6,6 +7,9 @@ export const isDebianDistro = (distroID == 'linuxmint' || distroID == 'ubuntu' | export const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros' || distroID == 'cachyos'); export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`); +const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`; +export let darkMode = !(Utils.readFile(LIGHTDARK_FILE_LOCATION).trim() == '-l'); + export const getDistroIcon = () => { // Arches if(distroID == 'arch') return 'arch-symbolic'; @@ -40,4 +44,4 @@ export const getDistroName = () => { if(distroID == 'raspbian') return 'Raspbian'; if(distroID == 'kali') return 'Kali Linux'; return 'Linux'; -} \ No newline at end of file +} diff --git a/.config/ags/modules/indicators/musiccontrols.js b/.config/ags/modules/indicators/musiccontrols.js index 9afd224d..785b1bba 100644 --- a/.config/ags/modules/indicators/musiccontrols.js +++ b/.config/ags/modules/indicators/musiccontrols.js @@ -1,4 +1,4 @@ -const { Gdk, GdkPixbuf, GLib, Gtk } = imports.gi; +const { GLib } = imports.gi; import App from 'resource:///com/github/Aylur/ags/app.js'; import Widget from 'resource:///com/github/Aylur/ags/widget.js'; import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; @@ -9,10 +9,9 @@ const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget; import { fileExists } from '../.miscutils/files.js'; import { AnimatedCircProg } from "../.commonwidgets/cairo_circularprogress.js"; import { showMusicControls } from '../../variables.js'; +import { darkMode } from '../.miscutils/system.js'; const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated` -const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`; -const lightDark = Utils.readFile(LIGHTDARK_FILE_LOCATION).trim(); const COVER_COLORSCHEME_SUFFIX = '_colorscheme.css'; var lastCoverPath = ''; @@ -181,7 +180,7 @@ const CoverArt = ({ player, ...rest }) => { } const coverPath = player.coverPath; - const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`; + const stylePath = `${player.coverPath}${darkMode ? '' : '-l'}${COVER_COLORSCHEME_SUFFIX}`; if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete Utils.timeout(200, () => { // self.attribute.showImage(self, coverPath); @@ -200,9 +199,9 @@ const CoverArt = ({ player, ...rest }) => { // Generate colors execAsync(['bash', '-c', - `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${lightDark}`]) + `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${darkMode ? '' : '-l'}`]) .then(() => { - exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`) + exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${darkMode ? '' : '-l'}`) exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`); exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`); Utils.timeout(200, () => { diff --git a/.config/ags/modules/sideleft/apis/ai_chatmessage.js b/.config/ags/modules/sideleft/apis/ai_chatmessage.js index 77525232..d7148984 100644 --- a/.config/ags/modules/sideleft/apis/ai_chatmessage.js +++ b/.config/ags/modules/sideleft/apis/ai_chatmessage.js @@ -283,19 +283,15 @@ export const ChatMessage = (message, modelName = 'Model') => { const messageContentBox = MessageContent(message.content); const thisMessage = Box({ className: 'sidebar-chat-message', + homogeneous: true, children: [ - Box({ - className: `sidebar-chat-indicator ${message.role == 'user' ? 'sidebar-chat-indicator-user' : 'sidebar-chat-indicator-bot'}`, - }), Box({ vertical: true, - hpack: 'fill', - hexpand: true, children: [ Label({ - hpack: 'fill', + hpack: 'start', xalign: 0, - className: 'txt txt-bold sidebar-chat-name', + className: `txt txt-bold sidebar-chat-name sidebar-chat-name-${message.role == 'user' ? 'user' : 'bot'}`, wrap: true, useMarkup: true, label: (message.role == 'user' ? USERNAME : modelName), @@ -324,17 +320,13 @@ export const SystemMessage = (content, commandName, scrolledWindow) => { const thisMessage = Box({ className: 'sidebar-chat-message', children: [ - Box({ - className: `sidebar-chat-indicator sidebar-chat-indicator-System`, - }), Box({ vertical: true, - hpack: 'fill', - hexpand: true, children: [ Label({ xalign: 0, - className: 'txt txt-bold sidebar-chat-name', + hpack: 'start', + className: 'txt txt-bold sidebar-chat-name sidebar-chat-name-system', wrap: true, label: `System • ${commandName}`, }), diff --git a/.config/ags/modules/sideleft/apis/booru.js b/.config/ags/modules/sideleft/apis/booru.js index 722462c0..2784d55c 100644 --- a/.config/ags/modules/sideleft/apis/booru.js +++ b/.config/ags/modules/sideleft/apis/booru.js @@ -204,9 +204,6 @@ const BooruPage = (taglist) => { overlays: [imageActions] }) } - const colorIndicator = Box({ - className: `sidebar-chat-indicator`, - }); const downloadState = Stack({ homogeneous: false, transition: 'slide_up_down', @@ -233,7 +230,7 @@ const BooruPage = (taglist) => { hscroll: 'automatic', child: Box({ hpack: 'fill', - className: 'sidebar-waifu-content spacing-h-5', + className: 'spacing-h-5', children: [ ...taglist.map((tag) => CommandButton(tag)), Box({ hexpand: true }), @@ -246,8 +243,7 @@ const BooruPage = (taglist) => { const pageImageGrid = Grid({ // columnHomogeneous: true, // rowHomogeneous: true, - className: 'sidebar-waifu-image', - // css: 'min-height: 90px;' + className: 'sidebar-booru-imagegrid', }); const pageImageRevealer = Revealer({ transition: 'slide_down', @@ -256,6 +252,7 @@ const BooruPage = (taglist) => { child: pageImageGrid, }); const thisPage = Box({ + homogeneous: true, className: 'sidebar-chat-message', attribute: { 'imagePath': '', @@ -289,20 +286,17 @@ const BooruPage = (taglist) => { downloadIndicator.attribute.hide(); }, }, - children: [ - colorIndicator, - Box({ - vertical: true, - className: 'spacing-v-5', - children: [ - pageHeading, - Box({ - vertical: true, - children: [pageImageRevealer], - }) - ] - }) - ], + children: [Box({ + vertical: true, + className: 'spacing-v-5', + children: [ + pageHeading, + Box({ + vertical: true, + children: [pageImageRevealer], + }) + ] + })], }); return thisPage; } diff --git a/.config/ags/modules/sideleft/apis/chatgpt.js b/.config/ags/modules/sideleft/apis/chatgpt.js index 312c4db2..ebcf47bb 100644 --- a/.config/ags/modules/sideleft/apis/chatgpt.js +++ b/.config/ags/modules/sideleft/apis/chatgpt.js @@ -247,7 +247,7 @@ const GPTWelcome = () => Box({ }); export const chatContent = Box({ - className: 'spacing-v-15', + className: 'spacing-v-5', vertical: true, setup: (self) => self .hook(GPTService, (box, id) => { diff --git a/.config/ags/modules/sideleft/apis/gemini.js b/.config/ags/modules/sideleft/apis/gemini.js index cd755c33..53ec25a7 100644 --- a/.config/ags/modules/sideleft/apis/gemini.js +++ b/.config/ags/modules/sideleft/apis/gemini.js @@ -151,7 +151,7 @@ const geminiWelcome = Box({ }); export const chatContent = Box({ - className: 'spacing-v-15', + className: 'spacing-v-5', vertical: true, setup: (self) => self .hook(GeminiService, (box, id) => { diff --git a/.config/ags/modules/sideleft/apis/waifu.js b/.config/ags/modules/sideleft/apis/waifu.js index 503c0992..89a06ad0 100644 --- a/.config/ags/modules/sideleft/apis/waifu.js +++ b/.config/ags/modules/sideleft/apis/waifu.js @@ -11,6 +11,7 @@ import { MaterialIcon } from '../../.commonwidgets/materialicon.js'; import { MarginRevealer } from '../../.widgethacks/advancedrevealers.js'; import { setupCursorHover, setupCursorHoverInfo } from '../../.widgetutils/cursorhover.js'; import WaifuService from '../../../services/waifus.js'; +import { darkMode } from '../../.miscutils/system.js'; async function getImageViewerApp(preferredApp) { Utils.execAsync(['bash', '-c', `command -v ${preferredApp}`]) @@ -117,9 +118,6 @@ const WaifuImage = (taglist) => { onClicked: action, setup: setupCursorHover, }) - const colorIndicator = Box({ - className: `sidebar-chat-indicator`, - }); const downloadState = Stack({ homogeneous: false, transition: 'slide_up_down', @@ -139,7 +137,7 @@ const WaifuImage = (taglist) => { }); const blockHeading = Box({ hpack: 'fill', - className: 'sidebar-waifu-content spacing-h-5', + className: 'spacing-h-5', children: [ ...taglist.map((tag) => CommandButton(tag)), Box({ hexpand: true }), @@ -248,14 +246,10 @@ const WaifuImage = (taglist) => { else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`]) .then(showImage) .catch(print); - blockHeading.get_children().forEach((child) => { - child.setCss(`border-color: ${dominant_color};`); - }) - colorIndicator.css = `background-color: ${dominant_color};`; + thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.9);`; }, }, children: [ - colorIndicator, Box({ vertical: true, className: 'spacing-v-5', diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index 59749dac..6859879b 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -29,8 +29,8 @@ menu { @include elevation-border-softer; padding: 0.681rem; - background: $surfaceVariant; - color: $onSurfaceVariant; + background: $layer2; + color: $onLayer2; border-radius: 1.159rem; -gtk-outline-radius: 1.159rem; diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index bd56dfcc..5e248963 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -2,8 +2,6 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); $textboxColor: mix($surface, $surfaceVariant, 80%); $system: $secondary; $onSystem: $onSecondary; -$chatgpt: $primary; -$onChatgpt: $onPrimary; @mixin group-padding { padding: 0.341rem; @@ -596,32 +594,47 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-message { margin: 0.682rem; + @include normal-rounding; + @include group-padding; + background-color: $layer1; } .sidebar-chat-indicator { @include element_decel; @include full-rounding; min-width: 0.136rem; +} + +.sidebar-chat-indicator-waifu { + @include element_decel; + @include full-rounding; + min-width: 0.136rem; background-color: $onBackground; } -.sidebar-chat-indicator-user { - background-color: $onBackground; -} - -.sidebar-chat-indicator-bot { - background-color: $chatgpt; -} - -.sidebar-chat-indicator-System { - background-color: $system; -} - .sidebar-chat-name { @include titlefont; - padding: 0.341rem; - margin-left: -0.136rem; - padding-left: 0.818rem; + @include small-rounding; + padding: 0.341rem 0.818rem; + margin: 0.341rem; + // margin-left: 0rem; + background-color: $layer2; + color: $onLayer2; +} + +.sidebar-chat-name-user { + background-color: $layer2; + color: $onLayer2; +} + +.sidebar-chat-name-bot { + background-color: $secondary; + color: $onSecondary; +} + +.sidebar-chat-name-system { + background-color: $secondaryContainer; + color: $onSecondaryContainer; } .sidebar-chat-txtblock { @@ -808,17 +821,11 @@ $colorpicker_rounding: 0.341rem; padding-left: 0.818rem; } -.sidebar-waifu-content { - margin-left: 0.682rem; -} - .sidebar-waifu-txt { @include readingfont; - margin-left: 0.682rem; } .sidebar-waifu-image { - margin-left: 0.682rem; @include normal-rounding; background-size: cover; background-repeat: no-repeat; @@ -850,6 +857,10 @@ $waifu_image_overlay_transparency: 0.7; background-color: rgba(60, 60, 60, $waifu_image_overlay_transparency); } +.sidebar-booru-imagegrid { + @include normal-rounding; +} + .sidebar-booru-image { @include small-rounding; margin: 0.273rem; From 03d3d3ed8a6a76b697eb32f58ff442ba093997ab Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 00:45:49 +0700 Subject: [PATCH 2/7] fix #329 --- .config/ags/modules/bar/normal/music.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/.config/ags/modules/bar/normal/music.js b/.config/ags/modules/bar/normal/music.js index ea9c3540..3879fafd 100644 --- a/.config/ags/modules/bar/normal/music.js +++ b/.config/ags/modules/bar/normal/music.js @@ -208,18 +208,20 @@ export default () => { return EventBox({ onScrollUp: (self) => switchToRelativeWorkspace(self, -1), onScrollDown: (self) => switchToRelativeWorkspace(self, +1), - onPrimaryClick: () => showMusicControls.setValue(!showMusicControls.value), - onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print), - onMiddleClick: () => execAsync('playerctl play-pause').catch(print), - setup: (self) => self.on('button-press-event', (self, event) => { - if (event.get_button()[1] === 8) // Side button - execAsync('playerctl previous').catch(print) - }), child: Box({ className: 'spacing-h-4', children: [ SystemResourcesOrCustomModule(), - BarGroup({ child: musicStuff }), + EventBox({ + child: BarGroup({ child: musicStuff }), + onPrimaryClick: () => showMusicControls.setValue(!showMusicControls.value), + onSecondaryClick: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print), + onMiddleClick: () => execAsync('playerctl play-pause').catch(print), + setup: (self) => self.on('button-press-event', (self, event) => { + if (event.get_button()[1] === 8) // Side button + execAsync('playerctl previous').catch(print) + }), + }) ] }) }); From 5635372c6692454cd0903086234c60aeba563aee Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 00:54:44 +0700 Subject: [PATCH 3/7] #327 for osk --- .config/ags/scss/_osk.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss index d5e62fff..6c42a108 100644 --- a/.config/ags/scss/_osk.scss +++ b/.config/ags/scss/_osk.scss @@ -11,7 +11,7 @@ $osk_key_fontsize: 1.091rem; @include elevation2; // min-height: 29.591rem; // min-width: 50rem; - background-color: $t_background; + background-color: $layer0; } .osk-body { @@ -32,7 +32,7 @@ $osk_key_fontsize: 1.091rem; .osk-dragline { @include full-rounding; - background-color: $surfaceVariant; + background-color: $onLayer0Inactive; min-height: 0.273rem; min-width: 10.227rem; margin-top: 0.545rem; @@ -41,8 +41,8 @@ $osk_key_fontsize: 1.091rem; .osk-key { border-radius: $osk_key_rounding; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; padding: $osk_key_padding; font-weight: 500; font-size: $osk_key_fontsize; @@ -50,16 +50,16 @@ $osk_key_fontsize: 1.091rem; .osk-key:hover, .osk-key:focus { - background-color: $hovercolor; + background-color: $layer1Hover; } .osk-key:active { - background-color: $activecolor; + background-color: $layer1Active; font-size: $osk_key_fontsize; } .osk-key-active { - background-color: $activecolor; + background-color: $layer1Active; } .osk-key-normal { @@ -95,8 +95,8 @@ $osk_key_fontsize: 1.091rem; .osk-control-button { border-radius: $osk_key_rounding; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-weight: 500; font-size: $osk_key_fontsize; padding: 0.682rem; @@ -104,11 +104,11 @@ $osk_key_fontsize: 1.091rem; .osk-control-button:hover, .osk-control-button:focus { - background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%); + background-color: $layer1Hover; } .osk-control-button:active { - background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); + background-color: $layer1Active; font-size: $osk_key_fontsize; } From c0b16056171be2ea62ce7d390ecd2638428d1714 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 00:57:21 +0700 Subject: [PATCH 4/7] osk: make fn keys look less weird --- .config/ags/scss/_osk.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss index 6c42a108..b1d8210a 100644 --- a/.config/ags/scss/_osk.scss +++ b/.config/ags/scss/_osk.scss @@ -1,7 +1,7 @@ $osk_key_height: 2.5rem; $osk_key_width: 2.5rem; $osk_key_padding: 0.188rem; -$osk_key_rounding: 0.682rem; +$osk_key_rounding: 0.545rem; $osk_key_fontsize: 1.091rem; .osk-window { From c39b573300d5b025232a0d135c39d9c563683683 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 01:22:38 +0700 Subject: [PATCH 5/7] #327 for session screen --- .config/ags/modules/session/sessionscreen.js | 18 +++++++-------- .config/ags/scss/_osk.scss | 2 +- .config/ags/scss/_session.scss | 23 ++++++++++++-------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/.config/ags/modules/session/sessionscreen.js b/.config/ags/modules/session/sessionscreen.js index 1f90636e..eb2089c5 100644 --- a/.config/ags/modules/session/sessionscreen.js +++ b/.config/ags/modules/session/sessionscreen.js @@ -8,7 +8,7 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; const { exec, execAsync } = Utils; -const SessionButton = (name, icon, command, props = {}) => { +const SessionButton = (name, icon, command, props = {}, colorid = 0) => { const buttonDescription = Widget.Revealer({ vpack: 'end', transitionDuration: userOptions.animations.durationSmall, @@ -21,7 +21,7 @@ const SessionButton = (name, icon, command, props = {}) => { }); return Widget.Button({ onClicked: command, - className: 'session-button', + className: `session-button session-color-${colorid}`, child: Widget.Overlay({ className: 'session-button-box', child: Widget.Label({ @@ -61,14 +61,14 @@ const SessionButton = (name, icon, command, props = {}) => { export default () => { // lock, logout, sleep - const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync(['loginctl', 'lock-session']) }); - const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'pkill Hyprland || pkill sway']) }); - const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') }); + const lockButton = SessionButton('Lock', 'lock', () => { App.closeWindow('session'); execAsync(['loginctl', 'lock-session']) }, {}, 1); + const logoutButton = SessionButton('Logout', 'logout', () => { App.closeWindow('session'); execAsync(['bash', '-c', 'pkill Hyprland || pkill sway']) }, {}, 2); + const sleepButton = SessionButton('Sleep', 'sleep', () => { App.closeWindow('session'); execAsync('systemctl suspend') }, {}, 3); // hibernate, shutdown, reboot - const hibernateButton = SessionButton('Hibernate', 'downloading', () => { App.closeWindow('session'); execAsync('systemctl hibernate') }); - const shutdownButton = SessionButton('Shutdown', 'power_settings_new', () => { App.closeWindow('session'); execAsync('systemctl poweroff') }); - const rebootButton = SessionButton('Reboot', 'restart_alt', () => { App.closeWindow('session'); execAsync('systemctl reboot') }); - const cancelButton = SessionButton('Cancel', 'close', () => App.closeWindow('session'), { className: 'session-button-cancel' }); + const hibernateButton = SessionButton('Hibernate', 'downloading', () => { App.closeWindow('session'); execAsync('systemctl hibernate') }, {}, 4); + const shutdownButton = SessionButton('Shutdown', 'power_settings_new', () => { App.closeWindow('session'); execAsync('systemctl poweroff') }, {}, 5); + const rebootButton = SessionButton('Reboot', 'restart_alt', () => { App.closeWindow('session'); execAsync('systemctl reboot') }, {}, 6); + const cancelButton = SessionButton('Cancel', 'close', () => App.closeWindow('session'), { className: 'session-button-cancel' }, 7); const sessionDescription = Widget.Box({ vertical: true, diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss index b1d8210a..6cefc4af 100644 --- a/.config/ags/scss/_osk.scss +++ b/.config/ags/scss/_osk.scss @@ -16,7 +16,7 @@ $osk_key_fontsize: 1.091rem; .osk-body { padding: 1.023rem; - padding-top: 0px; + padding-top: 0rem; } .osk-show { diff --git a/.config/ags/scss/_session.scss b/.config/ags/scss/_session.scss index aa8f51a1..9853b3bc 100644 --- a/.config/ags/scss/_session.scss +++ b/.config/ags/scss/_session.scss @@ -1,24 +1,23 @@ .session-bg { - background-color: mix($t_t_background, $background, 40%); + background-color: transparentize($color: $layer0, $amount: 0.4); } .session-button { @include large-rounding; min-width: 8.182rem; min-height: 8.182rem; - background-color: $surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-size: 3rem; } .session-button-focused { - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $layer1Hover; } .session-button-desc { - background-color: mix($surface, $surfaceVariant, 50%); - color: mix($onSurface, $onSurfaceVariant, 50%); + background-color: $layer2; + color: $onLayer2; border-bottom-left-radius: $rounding_large; border-bottom-right-radius: $rounding_large; padding: 0.205rem 0.341rem; @@ -29,7 +28,13 @@ @include large-rounding; min-width: 8.182rem; min-height: 5.455rem; - background-color: $surfaceVariant; - color: $onSurfaceVariant; + background-color: $layer1; + color: $onLayer1; font-size: 3rem; } + +@for $i from 1 through 7 { + .session-color-#{$i} { + color: nth($sessionColors, $i); + } +} \ No newline at end of file From c300b74afd2aecc591b66eee975204f84433f8e6 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 08:35:09 +0700 Subject: [PATCH 6/7] fix bar volume scrolling --- .config/ags/modules/bar/normal/spaceright.js | 36 +++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/.config/ags/modules/bar/normal/spaceright.js b/.config/ags/modules/bar/normal/spaceright.js index 56ecbcc7..0b4fee7b 100644 --- a/.config/ags/modules/bar/normal/spaceright.js +++ b/.config/ags/modules/bar/normal/spaceright.js @@ -39,18 +39,6 @@ export default () => { }), }); const SpaceRightDefaultClicks = (child) => Widget.EventBox({ - onScrollUp: () => { - if (!Audio.speaker) return; - if (Audio.speaker.volume <= 0.09) Audio.speaker.volume += 0.01; - else Audio.speaker.volume += 0.03; - Indicator.popup(1); - }, - onScrollDown: () => { - if (!Audio.speaker) return; - if (Audio.speaker.volume <= 0.09) Audio.speaker.volume -= 0.01; - else Audio.speaker.volume -= 0.03; - Indicator.popup(1); - }, onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) }, onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) }, onPrimaryClick: () => App.toggleWindow('sideright'), @@ -79,10 +67,24 @@ export default () => { ], }); - return Widget.Box({ - children: [ - actualContent, - Widget.Box({ className: 'bar-corner-spacing' }), - ] + return Widget.EventBox({ + onScrollUp: () => { + if (!Audio.speaker) return; + if (Audio.speaker.volume <= 0.09) Audio.speaker.volume += 0.01; + else Audio.speaker.volume += 0.03; + Indicator.popup(1); + }, + onScrollDown: () => { + if (!Audio.speaker) return; + if (Audio.speaker.volume <= 0.09) Audio.speaker.volume -= 0.01; + else Audio.speaker.volume -= 0.03; + Indicator.popup(1); + }, + child: Widget.Box({ + children: [ + actualContent, + SpaceRightDefaultClicks(Widget.Box({ className: 'bar-corner-spacing' })), + ] + }) }); } \ No newline at end of file From 5d51ed686125219e2380aaddc29fe84f07fe4a66 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 08:35:57 +0700 Subject: [PATCH 7/7] #327 for indicators --- .config/ags/modules/indicators/colorscheme.js | 4 +- .../ags/modules/indicators/indicatorvalues.js | 18 ++++--- .config/ags/scss/_colors.scss | 36 ++++++++++++-- .config/ags/scss/_common.scss | 8 ++-- .config/ags/scss/_osd.scss | 48 ++++++++++++------- 5 files changed, 80 insertions(+), 34 deletions(-) diff --git a/.config/ags/modules/indicators/colorscheme.js b/.config/ags/modules/indicators/colorscheme.js index e0c46c1a..33b745a3 100644 --- a/.config/ags/modules/indicators/colorscheme.js +++ b/.config/ags/modules/indicators/colorscheme.js @@ -34,8 +34,8 @@ const ColorschemeContent = () => Box({ ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }), ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }), ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }), - ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }), - ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }), + ColorBox({ name: 'L1', className: 'osd-color osd-color-layer1' }), + ColorBox({ name: 'L0', className: 'osd-color osd-color-layer0' }), ] }) ] diff --git a/.config/ags/modules/indicators/indicatorvalues.js b/.config/ags/modules/indicators/indicatorvalues.js index e373e491..18f22862 100644 --- a/.config/ags/modules/indicators/indicatorvalues.js +++ b/.config/ags/modules/indicators/indicatorvalues.js @@ -6,7 +6,11 @@ import { MarginRevealer } from '../.widgethacks/advancedrevealers.js'; import Brightness from '../../services/brightness.js'; import Indicator from '../../services/indicator.js'; -const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...rest }) => { +const OsdValue = ({ + name, nameSetup = undefined, labelSetup, progressSetup, + extraClassName = '', extraProgressClassName = '', + ...rest +}) => { const valueName = Label({ xalign: 0, yalign: 0, hexpand: true, className: 'osd-label', @@ -20,7 +24,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r return Box({ // Volume vertical: true, hexpand: true, - className: 'osd-bg osd-value', + className: `osd-bg osd-value ${extraClassName}`, attribute: { 'disable': () => { valueNumber.label = '󰖭'; @@ -35,7 +39,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r ] }), ProgressBar({ - className: 'osd-progress', + className: `osd-progress ${extraProgressClassName}`, hexpand: true, vertical: false, setup: progressSetup, @@ -48,6 +52,8 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r export default () => { const brightnessIndicator = OsdValue({ name: 'Brightness', + extraClassName: 'osd-brightness', + extraProgressClassName: 'osd-brightness-progress', labelSetup: (self) => self.hook(Brightness, self => { self.label = `${Math.round(Brightness.screen_value * 100)}`; }, 'notify::screen-value'), @@ -59,9 +65,9 @@ export default () => { const volumeIndicator = OsdValue({ name: 'Volume', - attribute: { - headphones: undefined, - }, + extraClassName: 'osd-volume', + extraProgressClassName: 'osd-volume-progress', + attribute: { headphones: undefined }, nameSetup: (self) => Utils.timeout(1, () => { const updateAudioDevice = (self) => { const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone'); diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 30ffb7d3..cc119562 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -142,10 +142,12 @@ $layer1: $surface; $onLayer1: $onSurface; $onLayer1Inactive: mix($onLayer1, $layer1, 45%); $onLayer1: $onSurfaceVariant; +$layer1Hover: mix($layer1, $onLayer1, 85%); +$layer1Active: mix($layer1, $onLayer1, 70%); $layer2: $surfaceVariant; $onLayer2: $onSurfaceVariant; -$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); -$layer2Active: mix($layer2, $onSurfaceVariant, 80%); +$layer2Hover: mix($layer2, $onLayer2, 90%); +$layer2Active: mix($layer2, $onLayer2, 80%); // Elements $windowtitleOnLayer0Inactive: $onLayer0Inactive; $windowtitleOnLayer0: $onLayer0; @@ -185,6 +187,17 @@ $cheatsheetColors: ( $onSecondaryContainer, $onSecondaryContainer ); +$sessionColors: ( + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1 +); +$brightnessOnLayer0: $onLayer0; +$volumeOnLayer0: $onLayer0; ///////////////////// test theme: amarena (kind of) ///////////////////////// // $layer0: #0e1116; @@ -194,10 +207,12 @@ $cheatsheetColors: ( // $layer1: #171c22; // $onLayer1Inactive: mix($onLayer1, $layer1, 45%); // $onLayer1: $onSurfaceVariant; +// $layer1Hover: mix($layer1, $onLayer1, 85%); +// $layer1Active: mix($layer1, $onLayer1, 70%); // $layer2: #252c35; // $onLayer2: $onSurfaceVariant; -// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%); -// $layer2Active: mix($layer2, $onSurfaceVariant, 80%); +// $layer2Hover: mix($layer2, $onLayer2, 90%); +// $layer2Active: mix($layer2, $onLayer2, 80%); // $layer3: #1C232A; // // Bar // $windowtitleOnLayer0Inactive: #70afa4; @@ -239,3 +254,16 @@ $cheatsheetColors: ( // #FB6396, // #6EC1D6 // ); +// $sessionColors: ( +// #F692B2, +// #6EC1D6, +// #CD84C8, +// #7FE4D2, +// #94CF95, +// #CD84C8, +// #FB6396 +// ); +// // Osd +// $brightnessOnLayer0: #F692B2; +// $volumeOnLayer0: #94CF95; + diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index 6859879b..6e38992d 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -13,7 +13,7 @@ color: $onSecondary; } - caret-color: $primary; + caret-color: $onLayer2; } @keyframes appear { @@ -50,18 +50,18 @@ menubar>menuitem { menu>menuitem { padding: 0.4em 1.5rem; background: transparent; - transition: 0.2s ease background; + transition: 0.2s ease background-color; border-radius: 0.545rem; -gtk-outline-radius: 0.545rem; } menu>menuitem:hover, menu>menuitem:focus { - background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); + background-color: $layer2Hover; } menu>menuitem:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 80%); + background-color: $layer2Active; } radio { diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss index 15119a78..76fe3866 100644 --- a/.config/ags/scss/_osd.scss +++ b/.config/ags/scss/_osd.scss @@ -10,7 +10,7 @@ .osd-value { @include elevation-border; @include elevation2; - background-color: $t_background; + background-color: $layer0; border-radius: 1.023rem; padding: 0.625rem 1.023rem; padding-top: 0.313rem; @@ -27,7 +27,7 @@ min-height: 0.954rem; min-width: 0.068rem; border-radius: 10rem; - background-color: $secondaryContainer; + background-color: $layer2; // border: 0.068rem solid $onSecondaryContainer; } @@ -37,18 +37,13 @@ min-width: 0.680rem; margin: 0rem 0.137rem; border-radius: 10rem; - background-color: $onSecondaryContainer; + background-color: $onLayer2; } } -.osd-icon { - color: $onPrimaryContainer; -} - .osd-label { font-size: 1.023rem; font-weight: 500; - color: $onBackground; margin-top: 0.341rem; } @@ -56,7 +51,24 @@ @include titlefont; font-size: 1.688rem; font-weight: 500; - color: $onBackground; + color: $onLayer0; +} + +.osd-brightness { + color: $brightnessOnLayer0; +} +.osd-brightness-progress { + progress { + background-color: $brightnessOnLayer0; + } +} +.osd-volume { + color: $volumeOnLayer0; +} +.osd-volume-progress { + progress { + background-color: $volumeOnLayer0; + } } .osd-notifs { @@ -65,7 +77,7 @@ .osd-colorscheme { border-radius: 1.023rem; - background-color: $t_background; + background-color: $layer0; padding: 1.023rem; @include elevation2; } @@ -108,15 +120,15 @@ color: $onSurfaceVariant; box { background-color: $onSurfaceVariant; } } -.osd-color-surface { - background-color: $surface; - color: $onSurface; - box { background-color: $onSurface; } +.osd-color-L1 { + background-color: $layer1; + color: $onLayer1; + box { background-color: $onLayer1; } } -.osd-color-background { - background-color: $background; - color: $onBackground; - box { background-color: $onBackground; } +.osd-color-layer0 { + background-color: $layer0; + color: $onLayer0; + box { background-color: $onLayer0; } } .osd-show {