Merge pull request #1361 from kando-menu/feature/refine-settings-css

New General settings dialog

Author: Schneegans

assets/images/blossom_large.svg

@@ -21,8 +21,13 @@ This changelog follows the rules of [Keep a Changelog](http://keepachangelog.com
 
 **Release Date:** TBD
 
+### :tada: Added
+
+- A redesigned General-Settings dialog with a completely new layout. All the options are still there, but they are now organized in categories which should make it easier to navigate through the settings.
+
 ### :wrench: Changed
 
+- The styling of the settings dialog has been updated in various places to make it look more modern.
 - Updated many dependencies to their latest versions. Feel free to report any issues you encounter!
 
 ## [Kando 2.3.0](https://github.com/kando-menu/kando/releases/tag/v2.3.0)

docs/changelog.md

@@ -187,7 +187,7 @@
       "wlroots-pointer-get-timeout-default-behavior": "Pointer fallback position",
       "center": "Center",
       "previously-reported": "Previously reported",
-      "backup-and-restore": "Backup and Restore",
+      "backup-and-restore": "Backup & Restore",
       "message": "All your menus and Kando's settings are stored in two JSON files which you can also edit, share, or backup. Click [here]({{link}}) to open the directory where the files are stored.",
       "backup-menus": "Backup menus.json…",
       "backup-settings": "Backup config.json…",
@@ -199,7 +199,13 @@
       "reload-sound-theme": "Reload sound theme",
       "dev-tools-note": "Kando uses two windows: One for the menu and one for the settings. You can open the development tools to inspect both windows separately.",
       "menu-window-dev-tools": "Inspect menu",
-      "settings-window-dev-tools": "Inspect settings"
+      "settings-window-dev-tools": "Inspect settings",
+      "app-settings": "Application Settings",
+      "interaction-modes": "Interaction Modes",
+      "input-options": "Input Options",
+      "learn-interaction-mode": "Learn more about Kando's interaction modes [here]({{link}})!",
+      "backup-menus-note": "This will backup or restore all your menus at once. This includes all your configured shortcuts, menu layouts, and your menu collections.",
+      "backup-settings-note": "This will backup or restore Kando's settings, which include all your general settings and your menu-theme configuration."
     },
     "introduction-dialog": {
       "slide1-title": "Kando offers a unique and efficient way for interacting with your computer.",
@@ -282,7 +288,7 @@
     "shortcut-info": "This shortcut opens the menu. It must contain one normal key and any number of modifiers such as Ctrl, Alt, or Shift. When recording, you do not have to press all keys at once, you can also press them one after another. This is useful if a shortcut is already bound to another menu!",
     "shortcut-label": "Shortcut",
     "shortcut-recording": "Press a shortcut…",
-    "shortcut-id-label": "Shortcut\u00a0ID",
+    "shortcut-id-label": "Shortcut ID",
     "tags-info": "Tags can be used to group menus in menu collections.",
     "tags": "Tags",
     "quick-select-key-info": "This key allows you to quickly select the menu item.",

locales/en/translation.json

@@ -9,15 +9,12 @@
 // SPDX-License-Identifier: MIT
 
 @use '../../variables.scss' as *;
+@use '../../mixins.scss' as *;
 
 textarea.picker {
-  background-color: $widget-normal;
+  @include text-input;
 
-  color: $text-normal;
-  border: none;
-  border-radius: 5px;
-  font-size: inherit;
-  padding: 5px;
+  padding: 10px;
   margin-top: 8px;
 
   transition: box-shadow 150ms ease;
@@ -26,10 +23,6 @@ textarea.picker {
 
   overflow-x: hidden;
 
-  &:hover {
-    background-color: $widget-normal-hover;
-  }
-
   &.invalid {
     box-shadow: 0 0 15px rgba(255, 64, 64, 1) inset;
   }

src/settings-renderer/components/common/Base64IconPicker.module.scss

@@ -0,0 +1,35 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//   _  _ ____ _  _ ___  ____                                                           //
+//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
+//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
+//                                                                                      //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
+// SPDX-License-Identifier: MIT
+
+// Blossom filter opacity for different color schemes
+
+:global(body.systemColors) {
+  .blossom {
+    filter: grayscale(80%) opacity(0.2) blur(2px);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .blossom {
+      filter: grayscale(80%) opacity(0.03) blur(2px);
+    }
+  }
+}
+
+:global(body.lightColors) {
+  .blossom {
+    filter: grayscale(80%) opacity(0.2) blur(2px);
+  }
+}
+
+:global(body.darkColors) {
+  .blossom {
+    filter: grayscale(80%) opacity(0.03) blur(2px);
+  }
+}

src/settings-renderer/components/common/Blossom.module.scss

@@ -0,0 +1,51 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//   _  _ ____ _  _ ___  ____                                                           //
+//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
+//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
+//                                                                                      //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+
+import * as classes from './Blossom.module.scss';
+
+const blossom = require('../../../../assets/images/blossom_large.svg');
+
+type Props = {
+  readonly size?: number | string;
+  readonly cropRight?: number;
+  readonly cropBottom?: number;
+  readonly top?: number | string;
+  readonly left?: number | string;
+  readonly right?: number | string;
+  readonly bottom?: number | string;
+};
+
+/**
+ * Blossom component displays a decorative blossom image.
+ *
+ * @param props The properties for the blossom component.
+ * @returns An image element displaying the blossom image.
+ */
+export default function Blossom(props: Props) {
+  return (
+    <img
+      className={classes.blossom}
+      src={blossom}
+      style={{
+        position: 'absolute',
+        width: props.size,
+        height: props.size,
+        top: props.top,
+        left: props.left,
+        right: props.right,
+        bottom: props.bottom,
+        objectFit: 'cover',
+        objectPosition: `${props.cropRight || 0}px ${props.cropBottom || 0}px`,
+      }}
+    />
+  );
+}

src/settings-renderer/components/common/Blossom.tsx

@@ -9,14 +9,14 @@
 // SPDX-License-Identifier: MIT
 
 @use '../../variables.scss' as *;
+@use '../../mixins.scss' as *;
 
 .button {
+  @include normal-button;
+
   display: inline-flex;
   align-items: center;
 
-  color: $text-normal;
-  border: none;
-  border-radius: 5px;
   font-size: inherit;
   white-space: nowrap;
   line-height: 1.3rem;
@@ -73,59 +73,20 @@
   justify-content: center;
 }
 
-.secondary {
-  background-color: $widget-normal;
-
-  &:hover {
-    background-color: $widget-normal-hover;
-  }
-
-  &.pressed {
-    background-color: $widget-normal-active;
-  }
-}
-
-.flat {
-  background-color: transparent;
-
-  &:hover {
-    background-color: $widget-light;
-  }
+.invisible {
+  @include invisible-button;
 }
 
 .tool {
-  background-color: transparent;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-  }
+  @include tool-button;
 }
 
 .primary {
-  background-color: $widget-primary;
-
-  &:hover {
-    background-color: $widget-primary-hover;
-  }
-
-  &.pressed {
-    background-color: $widget-primary-active;
-  }
+  @include primary-button;
 }
 
 .floating {
-  background-color: $widget-normal;
   border-radius: 50px;
-
-  &:hover {
-    color: $text-link-hover;
-    background-color: $widget-normal-hover;
-  }
-
-  &.pressed {
-    background-color: $widget-normal-active;
-  }
 }
 
 .small {

src/settings-renderer/components/common/Button.module.scss

@@ -32,7 +32,7 @@ type Props = {
    * background when hovered, tool has no background at all. Defaults to 'secondary'.
    * Floating has a dark background and more rounded corners.
    */
-  readonly variant?: 'primary' | 'secondary' | 'flat' | 'tool' | 'floating';
+  readonly variant?: 'primary' | 'secondary' | 'invisible' | 'tool' | 'floating';
 
   /** Size of the button. Defaults to 'medium'. */
   readonly size?: 'small' | 'medium' | 'large';

src/settings-renderer/components/common/Button.tsx

@@ -10,35 +10,55 @@
 
 @use '../../variables.scss' as *;
 
+// Toggle switch style
 .checkbox {
   appearance: none;
-  margin: 0.15em;
-
-  background-color: $widget-normal;
-  width: 1.5em;
-  height: 1.5em;
-  border-radius: 50%;
+  width: 3em;
+  height: 1.6em;
+  background: $widget-normal;
+  border-radius: 0.8em;
+  position: relative;
+  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.08) inset;
+  margin: 0;
 
   &::before {
-    content: '✔';
-    display: block;
-    margin-top: -0.3em;
-    margin-left: 0.075em;
-    transform: scale(0);
-    transition: 120ms transform ease-in-out;
-    color: $text-link;
-    font-size: 2em;
+    content: '';
+    position: absolute;
+    left: 0.2em;
+    top: 0.2em;
+    width: 1.2em;
+    height: 1.2em;
+    background: $window-background;
+    border-radius: 50%;
+    box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+  }
+
+  &:checked {
+    background: $text-link;
   }
 
   &:checked::before {
-    transform: scale(1);
+    transform: translateX(1.4em);
+    background: $window-background;
   }
 
   &:hover {
-    background-color: $widget-normal-hover;
+    background: $widget-normal-hover;
+  }
+
+  &:checked:hover {
+    background: $text-link-hover;
+  }
+
+  &:active::before {
+    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.18);
   }
 
-  &:active {
-    transform: translateY(1px);
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 }

src/settings-renderer/components/common/Checkbox.module.scss

@@ -9,19 +9,12 @@
 // SPDX-License-Identifier: MIT
 
 @use '../../variables.scss' as *;
+@use '../../mixins.scss' as *;
 
 .select {
-  background-color: $widget-normal;
-  width: 100%;
-
-  color: $text-normal;
-  border: none;
-  border-radius: 5px;
-  font-size: inherit;
+  @include text-input;
 
-  padding: 3px;
+  cursor: default;
 
-  &:hover {
-    background-color: $widget-normal-hover;
-  }
+  width: 100%;
 }