From 77c79a2d9931a2018621d9e4cd02d2c08362648b Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Fri, 26 Jul 2024 23:58:16 -0700 Subject: [PATCH] Updated the settings dialog button styling. --- lib/types/options.d.ts | 21 +++++++++++++ scss/style/settings/dialog.scss | 47 ++++++++++++++++++++++++++---- widget/settings/shared/Inputter.ts | 20 +------------ widget/settings/shared/Label.ts | 36 +++++++++++------------ widget/settings/shared/Option.ts | 10 +++++-- 5 files changed, 90 insertions(+), 44 deletions(-) diff --git a/lib/types/options.d.ts b/lib/types/options.d.ts index 3f340bf..640b96f 100644 --- a/lib/types/options.d.ts +++ b/lib/types/options.d.ts @@ -1,3 +1,24 @@ +import { Opt } from "lib/option"; + export type Unit = "imperial" | "metric"; export type PowerOptions = "sleep" | "reboot" | "logout" | "shutdown"; export type NotificationAnchor = "top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left"; +export type RowProps = { + opt: Opt + title: string + note?: string + type?: + | "number" + | "color" + | "float" + | "object" + | "string" + | "enum" + | "boolean" + | "img" + | "font" + enums?: string[] + max?: number + min?: number + subtitle?: string +} diff --git a/scss/style/settings/dialog.scss b/scss/style/settings/dialog.scss index 6838698..c917551 100644 --- a/scss/style/settings/dialog.scss +++ b/scss/style/settings/dialog.scss @@ -25,24 +25,26 @@ window.settings-dialog { button.close { color: $bar-menus-iconbuttons-passive; + image { font-size: 2em; } &:hover { - color: $bar-menus-iconbuttons-active; + color: $bar-menus-buttons-active; } } button.reset { color: $bar-menus-iconbuttons-passive; padding: $padding*.5; + image { font-size: 1.25em; } &:hover { - color: $bar-menus-iconbuttons-active; + color: $bar-menus-buttons-active; } } } @@ -159,52 +161,79 @@ window.settings-dialog { .reset { color: $bar-menus-iconbuttons-passive; } + .options-label { color: $bar-menus-text; } + .options-sublabel { font-size: 0.75em; margin-top: 0.2em; color: $bar-menus-dimtext; } + .inputter-container { border-radius: $bar-menus-border-radius * 0.5; + :first-child { border-radius: $bar-menus-border-radius * 0.5; } + padding: 0.35em 0.35em; background: $surface1; margin-right: 1em; } } + .options-header { margin: 1em 1em; + .label-name { color: $bar-menus-label; font-size: 0.9em; margin-right: 0.5em; } } + .pager-button { margin: 0.5em 0.75em; - &.category label{ + &.category label { font-size: 1.4em; } &:hover { color: $bar-menus-iconbuttons-active; } + &.active { color: $bar-menus-iconbuttons-active; } } -.bar-theme-page { min-height: 40em; + +.bar-theme-page { + min-height: 40em; } + .settings-menu-stack { background: $red; } + .paged-container { + .reset-options { + color: $bar-menus-iconbuttons-passive; + + image:disabled { + color: $bar-menus-buttons-disabled; + } + + &:hover { + image { + color: $bar-menus-buttons-active; + } + } + } + scrollbar { margin-right: 0.2em; min-width: 0.6em; @@ -217,15 +246,18 @@ window.settings-dialog { background: $bar-menus-buttons-default; } } + selection { background: $bar-menus-background; } switch { font-size: 10px; + &:checked { background: $bar-menus-switch-enabled; } + slider { background-color: $bar-menus-switch-puck; } @@ -264,6 +296,7 @@ dialog { viewport { border-right: .25em solid $bar-menus-border-color; + list { row { padding: 0em 1.5em; @@ -272,6 +305,7 @@ dialog { background: $bar-menus-buttons-default; color: $bar-menus-buttons-text; } + label { margin: 0.5em 0.5em; font-size: 0.85em; @@ -280,6 +314,7 @@ dialog { } } + stack { .horizontal .path-bar { button { @@ -295,6 +330,7 @@ dialog { &:hover { background: transparentize($bar-menus-buttons-active, 0.5); } + label { margin: 0em 0.25em; color: $bar-menus-buttons-text @@ -304,12 +340,13 @@ dialog { margin: 0em 0.5em; color: $bar-menus-buttons-text } + margin: 0.25em; } } } - treeview header button{ + treeview header button { padding: 0.25em; border: .15em solid $bar-menus-border-color; } diff --git a/widget/settings/shared/Inputter.ts b/widget/settings/shared/Inputter.ts index f0070bc..f34268d 100644 --- a/widget/settings/shared/Inputter.ts +++ b/widget/settings/shared/Inputter.ts @@ -1,25 +1,7 @@ import { Opt } from "lib/option" import Gdk from "gi://Gdk" import icons from "lib/icons" - -export type RowProps = { - opt: Opt - title: string - note?: string - type?: - | "number" - | "color" - | "float" - | "object" - | "string" - | "enum" - | "boolean" - | "img" - | "font" - enums?: string[] - max?: number - min?: number -} +import { RowProps } from "lib/types/options" const EnumSetter = (opt: Opt, values: string[]) => { const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) }) diff --git a/widget/settings/shared/Label.ts b/widget/settings/shared/Label.ts index a6dad97..6e5506d 100644 --- a/widget/settings/shared/Label.ts +++ b/widget/settings/shared/Label.ts @@ -1,20 +1,20 @@ -export const Label = (name, sub = "") => { - return Widget.Box({ - vertical: true, - hpack: "start", - children: [ - Widget.Label({ +export const Label = (name: string, sub = "") => { + return Widget.Box({ + vertical: true, hpack: "start", - vpack: "center", - class_name: "options-label", - label: name - }), - Widget.Label({ - hpack: "start", - vpack: "center", - class_name: "options-sublabel", - label: sub - }), - ] - }) + children: [ + Widget.Label({ + hpack: "start", + vpack: "center", + class_name: "options-label", + label: name + }), + Widget.Label({ + hpack: "start", + vpack: "center", + class_name: "options-sublabel", + label: sub + }), + ] + }) } diff --git a/widget/settings/shared/Option.ts b/widget/settings/shared/Option.ts index 08f8881..25d151e 100644 --- a/widget/settings/shared/Option.ts +++ b/widget/settings/shared/Option.ts @@ -1,8 +1,14 @@ import { Label } from "./Label"; import { Inputter } from "./Inputter"; import icons from "lib/icons"; +import { RowProps } from "lib/types/options"; -export const Option = (props, className = '') => { +type Option = { + title: string, + subtitle: string, + +} +export const Option = (props: RowProps, className: string = '') => { return Widget.Box({ class_name: "option-item", hexpand: true, @@ -16,7 +22,7 @@ export const Option = (props, className = '') => { Inputter(props, className), Widget.Button({ vpack: "center", - class_name: "reset", + class_name: "reset-options", child: Widget.Icon(icons.ui.refresh), on_clicked: () => props.opt.reset(), sensitive: props.opt.bind().as(v => v !== props.opt.initial),