From 9b69a38c7485ea1e9b26d3f69fe2a150e5b641c2 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] 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 d5e73b38e..6285ee2d7 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 9afd224d1..785b1bba6 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 775252324..d7148984b 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 722462c0b..2784d55cf 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 312c4db21..ebcf47bb5 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 cd755c33a..53ec25a7e 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 503c0992b..89a06ad0b 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 59749dacf..6859879b9 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 bd56dfccf..5e248963a 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;