From 6f62526bc3f4ec6af8d1a29d42740f2edf6b58d8 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 23 May 2024 22:50:59 +0700 Subject: [PATCH] make todo list less shitty + style updates --- .config/ags/modules/sideright/todolist.js | 50 +++++++++++++++-------- .config/ags/scss/_overview.scss | 4 +- .config/ags/scss/_sidebars.scss | 50 +++++++++++------------ 3 files changed, 59 insertions(+), 45 deletions(-) diff --git a/.config/ags/modules/sideright/todolist.js b/.config/ags/modules/sideright/todolist.js index 75cbdfa73..fb78c0752 100644 --- a/.config/ags/modules/sideright/todolist.js +++ b/.config/ags/modules/sideright/todolist.js @@ -5,25 +5,20 @@ import { MaterialIcon } from '../.commonwidgets/materialicon.js'; import { TabContainer } from '../.commonwidgets/tabcontainer.js'; import Todo from "../../services/todo.js"; import { setupCursorHover } from '../.widgetutils/cursorhover.js'; -import { NavigationIndicator } from '../.commonwidgets/cairo_navigationindicator.js'; -const defaultTodoSelected = 'undone'; - -const todoListItem = (task, id, isDone, isEven = false) => { - const crosser = Widget.Box({ - className: 'sidebar-todo-crosser', +const TodoListItem = (task, id, isDone, isEven = false) => { + const taskName = Widget.Label({ + hexpand: true, + xalign: 0, + wrap: true, + className: 'txt txt-small sidebar-todo-txt', + label: task.content, + selectable: true, }); - const todoContent = Widget.Box({ - className: 'sidebar-todo-item spacing-h-5', + const actions = Box({ + hpack: 'end', + className: 'spacing-h-5 sidebar-todo-actions', children: [ - Widget.Label({ - hexpand: true, - xalign: 0, - wrap: true, - className: 'txt txt-small sidebar-todo-txt', - label: task.content, - selectable: true, - }), Widget.Button({ // Check/Uncheck vpack: 'center', className: 'txt sidebar-todo-item-action', @@ -61,6 +56,21 @@ const todoListItem = (task, id, isDone, isEven = false) => { }, setup: setupCursorHover, }), + ] + }) + const crosser = Widget.Box({ + className: 'sidebar-todo-crosser', + }); + const todoContent = Widget.Box({ + className: 'sidebar-todo-item spacing-h-5', + children: [ + Widget.Box({ + vertical: true, + children: [ + taskName, + actions, + ] + }), crosser, ] }); @@ -70,7 +80,10 @@ const todoListItem = (task, id, isDone, isEven = false) => { transitionDuration: userOptions.animations.durationLarge, child: todoContent, }) - return widgetRevealer; + return Box({ + homogeneous: true, + children: [widgetRevealer] + }); } const todoItems = (isDone) => Widget.Scrollable({ @@ -78,11 +91,12 @@ const todoItems = (isDone) => Widget.Scrollable({ vscroll: 'automatic', child: Widget.Box({ vertical: true, + className: 'spacing-v-5', setup: (self) => self .hook(Todo, (self) => { self.children = Todo.todo_json.map((task, i) => { if (task.done != isDone) return null; - return todoListItem(task, i, isDone); + return TodoListItem(task, i, isDone); }) if (self.children.length == 0) { self.homogeneous = true; diff --git a/.config/ags/scss/_overview.scss b/.config/ags/scss/_overview.scss index 03d3720b9..1ba52c3ed 100644 --- a/.config/ags/scss/_overview.scss +++ b/.config/ags/scss/_overview.scss @@ -85,11 +85,11 @@ .overview-search-result-btn:hover, .overview-search-result-btn:focus { - background-color: $hovercolor; + background-color: $layer2; } .overview-search-result-btn:active { - background-color: $activecolor; + background-color: $layer2Hover; } .overview-tasks { diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index a4ee1a642..ecfc2baa2 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -59,25 +59,11 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); .sidebar-iconbutton:hover, .sidebar-iconbutton:focus { - background-color: $hovercolor; + background-color: $layer1Hover; } .sidebar-iconbutton:active { - background-color: $activecolor; -} - -.sidebar-button { - @include element_decel; - padding: 0rem $rounding_small; -} - -.sidebar-button:hover, -.sidebar-button:focus { - background-color: $hovercolor; -} - -.sidebar-button:active { - background-color: $activecolor; + background-color: $layer1Active; } .sidebar-button-active { @@ -87,11 +73,11 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); .sidebar-button-active:hover, .sidebar-button-active:focus { - background-color: mix($primary, $hovercolor, 70%); + background-color: mix($primary, $layer1Hover, 70%); } .sidebar-button-active:active { - background-color: mix($primary, $hovercolor, 40%); + background-color: mix($primary, $layer1Active, 40%); } .sidebar-buttons-separator { @@ -111,11 +97,11 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); .sidebar-navrail-btn:hover>box>label:first-child, .sidebar-navrail-btn:focus>box>label:first-child { - background-color: $hovercolor; + background-color: $layer1Hover; } .sidebar-navrail-btn:active>box>label:first-child { - background-color: $activecolor; + background-color: $layer1Active; } .sidebar-navrail-btn-active>box>label:first-child { @@ -125,8 +111,8 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); .sidebar-navrail-btn-active:hover>box>label:first-child, .sidebar-navrail-btn-active:focus>box>label:first-child { - background-color: mix($secondaryContainer, $hovercolor, 90%); - color: mix($onSecondaryContainer, $hovercolor, 90%); + background-color: mix($secondaryContainer, $layer1Hover, 90%); + color: mix($onSecondaryContainer, $layer1Hover, 90%); } .sidebar-sysinfo-grouppad { @@ -268,7 +254,21 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); } .sidebar-todo-item { - padding-right: 0.545rem; + @include small-rounding; + margin-right: 0.545rem; + // padding: 0.341rem; + background-color: $layer2; + color: $onLayer2; +} + +.sidebar-todo-txt { + margin: 0.341rem; + margin-bottom: 0rem; +} + +.sidebar-todo-actions { + margin: 0.341rem; + margin-top: 0rem; } .sidebar-todo-item-action { @@ -280,11 +280,11 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); .sidebar-todo-item-action:hover, .sidebar-todo-item-action:focus { - background-color: $hovercolor; + background-color: $layer2Hover; } .sidebar-todo-item-action:active { - background-color: $activecolor; + background-color: $layer2Active; } .sidebar-todo-crosser {