From 03c0d6143304b08f3e76cdbbc91ce78441847ec1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 9 Mar 2023 23:37:25 +0800
Subject: [PATCH] Beautify shortcuts settings
---
src/assets/floating-button.svg | 5 +++
src/assets/multi-column.svg | 6 ++++
src/assets/tab-menu-bar.svg | 10 ++++++
src/components/shortcuts-settings.css | 48 +++++++++++++++++++++++++++
src/components/shortcuts-settings.jsx | 43 +++++++++++++++++++++---
5 files changed, 107 insertions(+), 5 deletions(-)
create mode 100644 src/assets/floating-button.svg
create mode 100644 src/assets/multi-column.svg
create mode 100644 src/assets/tab-menu-bar.svg
diff --git a/src/assets/floating-button.svg b/src/assets/floating-button.svg
new file mode 100644
index 00000000..6a9ad117
--- /dev/null
+++ b/src/assets/floating-button.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
+ <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+ <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+ <path fill="#4169E1" d="M14 52a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm64-42a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/multi-column.svg b/src/assets/multi-column.svg
new file mode 100644
index 00000000..5e8deff7
--- /dev/null
+++ b/src/assets/multi-column.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 62">
+ <rect width="78" height="58" x="2" y="2" fill="#999" fill-opacity=".3" stroke="#999" stroke-width="3" rx="4"/>
+ <rect width="18" height="46" x="8" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+ <rect width="18" height="46" x="32" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+ <rect width="18" height="46" x="56" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/tab-menu-bar.svg b/src/assets/tab-menu-bar.svg
new file mode 100644
index 00000000..64b48b03
--- /dev/null
+++ b/src/assets/tab-menu-bar.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
+ <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+ <path fill="#999" fill-opacity=".3" d="M19 3h62v10H19z"/>
+ <path stroke="#4169E1" stroke-width="2" d="M43 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+ <path stroke="#999" stroke-width="2" d="M52 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+ <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+ <path fill="#999" fill-opacity=".3" d="M3 49h30v10H3z"/>
+ <path stroke="#4169E1" stroke-width="2" d="M11 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+ <path stroke="#999" stroke-width="2" d="M20 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 0758f967..7cd8e494 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -33,7 +33,55 @@
#shortcuts-settings-container .shortcuts-view-mode {
display: flex;
align-items: center;
+ gap: 2px;
+ margin: 8px 0 0;
+}
+#shortcuts-settings-container .shortcuts-view-mode label {
+ border-radius: 4px;
+ background-color: var(--bg-faded-color);
+ padding: 16px;
+ text-align: center;
+ cursor: pointer;
+ display: block;
+ flex-grow: 1;
+ display: flex;
gap: 8px;
+ flex-direction: column;
+ align-items: center;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:first-child {
+ border-top-left-radius: 16px;
+ border-bottom-left-radius: 16px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:last-child {
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label img {
+ max-height: 64px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label span {
+ text-align: center;
+ font-size: 80%;
+}
+#shortcuts-settings-container .shortcuts-view-mode label input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
+ opacity: 0.5;
+ transition: opacity 0.2s;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
+ box-shadow: inset 0 0 0 3px var(--link-color);
+}
+#shortcuts-settings-container
+ .shortcuts-view-mode
+ label
+ input:is(:hover, :active, :checked)
+ ~ * {
+ opacity: 1;
}
#shortcuts-settings-container summary {
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index ecf39c3d..77bdbf0b 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -4,6 +4,9 @@ import mem from 'mem';
import { useEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
+import floatingButtonUrl from '../assets/floating-button.svg';
+import multiColumnUrl from '../assets/multi-column.svg';
+import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
import { api } from '../utils/api';
import states from '../utils/states';
@@ -208,9 +211,40 @@ function ShortcutsSettings() {
</header>
<main>
<p>
- <label class="shortcuts-view-mode">
- Specify a list of shortcuts that'll appear as:
- <select
+ Specify a list of shortcuts that'll appear as:
+ <div class="shortcuts-view-mode">
+ {[
+ {
+ value: 'float-button',
+ label: 'Floating button',
+ imgURL: floatingButtonUrl,
+ },
+ {
+ value: 'tab-menu-bar',
+ label: 'Tab/Menu bar',
+ imgURL: tabMenuBarUrl,
+ },
+ {
+ value: 'multi-column',
+ label: 'Multi-column',
+ imgURL: multiColumnUrl,
+ },
+ ].map(({ value, label, imgURL }) => (
+ <label>
+ <input
+ type="radio"
+ name="shortcuts-view-mode"
+ value={value}
+ checked={snapStates.settings.shortcutsViewMode === value}
+ onChange={(e) => {
+ states.settings.shortcutsViewMode = e.target.value;
+ }}
+ />{' '}
+ <img src={imgURL} alt="" /> <span>{label}</span>
+ </label>
+ ))}
+ </div>
+ {/* <select
value={snapStates.settings.shortcutsViewMode || 'float-button'}
onChange={(e) => {
states.settings.shortcutsViewMode = e.target.value;
@@ -219,8 +253,7 @@ function ShortcutsSettings() {
<option value="float-button">Floating button</option>
<option value="multi-column">Multi-column</option>
<option value="tab-menu-bar">Tab/Menu bar </option>
- </select>
- </label>
+ </select> */}
</p>
{/* <p>
<details>