From 07f927d4ffebf11f71daccd6a2f7a150a2fa200e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 10 Jan 2024 14:48:29 +0800
Subject: [PATCH] Add notice if there's only 1 shortcut
---
src/app.css | 4 +
src/components/shortcuts-settings.jsx | 193 ++++++++++++++------------
2 files changed, 106 insertions(+), 91 deletions(-)
diff --git a/src/app.css b/src/app.css
index a6c7f4e3..9af5af0b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1059,6 +1059,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.ui-state {
padding: 16px;
text-align: center;
+
+ .icon {
+ vertical-align: middle;
+ }
}
.status-carousel-link {
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index deb64c9a..a2f1bdd2 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -279,92 +279,93 @@ function ShortcutsSettings({ onClose }) {
})}
</div>
{shortcuts.length > 0 ? (
- <ol class="shortcuts-list" ref={shortcutsListParent}>
- {shortcuts.filter(Boolean).map((shortcut, i) => {
- // const key = i + Object.values(shortcut);
- const key = Object.values(shortcut).join('-');
- const { type } = shortcut;
- if (!SHORTCUTS_META[type]) return null;
- let { icon, title, subtitle, excludeViewMode } =
- SHORTCUTS_META[type];
- if (typeof title === 'function') {
- title = title(shortcut, i);
- }
- if (typeof subtitle === 'function') {
- subtitle = subtitle(shortcut, i);
- }
- if (typeof icon === 'function') {
- icon = icon(shortcut, i);
- }
- if (typeof excludeViewMode === 'function') {
- excludeViewMode = excludeViewMode(shortcut, i);
- }
- const excludedViewMode = excludeViewMode?.includes(
- snapStates.settings.shortcutsViewMode,
- );
- return (
- <li key={key}>
- <Icon icon={icon} />
- <span class="shortcut-text">
- <AsyncText>{title}</AsyncText>
- {subtitle && (
- <>
- {' '}
- <small class="ib insignificant">{subtitle}</small>
- </>
- )}
- {excludedViewMode && (
- <span class="tag">
- Not available in current view mode
- </span>
- )}
- </span>
- <span class="shortcut-actions">
- <button
- type="button"
- class="plain small"
- disabled={i === 0}
- onClick={() => {
- const shortcutsArr = Array.from(states.shortcuts);
- if (i > 0) {
- const temp = states.shortcuts[i - 1];
- shortcutsArr[i - 1] = shortcut;
- shortcutsArr[i] = temp;
- states.shortcuts = shortcutsArr;
- }
- }}
- >
- <Icon icon="arrow-up" alt="Move up" />
- </button>
- <button
- type="button"
- class="plain small"
- disabled={i === shortcuts.length - 1}
- onClick={() => {
- const shortcutsArr = Array.from(states.shortcuts);
- if (i < states.shortcuts.length - 1) {
- const temp = states.shortcuts[i + 1];
- shortcutsArr[i + 1] = shortcut;
- shortcutsArr[i] = temp;
- states.shortcuts = shortcutsArr;
- }
- }}
- >
- <Icon icon="arrow-down" alt="Move down" />
- </button>
- <button
- type="button"
- class="plain small"
- onClick={() => {
- setShowForm({
- shortcut,
- shortcutIndex: i,
- });
- }}
- >
- <Icon icon="pencil" alt="Edit" />
- </button>
- {/* <button
+ <>
+ <ol class="shortcuts-list" ref={shortcutsListParent}>
+ {shortcuts.filter(Boolean).map((shortcut, i) => {
+ // const key = i + Object.values(shortcut);
+ const key = Object.values(shortcut).join('-');
+ const { type } = shortcut;
+ if (!SHORTCUTS_META[type]) return null;
+ let { icon, title, subtitle, excludeViewMode } =
+ SHORTCUTS_META[type];
+ if (typeof title === 'function') {
+ title = title(shortcut, i);
+ }
+ if (typeof subtitle === 'function') {
+ subtitle = subtitle(shortcut, i);
+ }
+ if (typeof icon === 'function') {
+ icon = icon(shortcut, i);
+ }
+ if (typeof excludeViewMode === 'function') {
+ excludeViewMode = excludeViewMode(shortcut, i);
+ }
+ const excludedViewMode = excludeViewMode?.includes(
+ snapStates.settings.shortcutsViewMode,
+ );
+ return (
+ <li key={key}>
+ <Icon icon={icon} />
+ <span class="shortcut-text">
+ <AsyncText>{title}</AsyncText>
+ {subtitle && (
+ <>
+ {' '}
+ <small class="ib insignificant">{subtitle}</small>
+ </>
+ )}
+ {excludedViewMode && (
+ <span class="tag">
+ Not available in current view mode
+ </span>
+ )}
+ </span>
+ <span class="shortcut-actions">
+ <button
+ type="button"
+ class="plain small"
+ disabled={i === 0}
+ onClick={() => {
+ const shortcutsArr = Array.from(states.shortcuts);
+ if (i > 0) {
+ const temp = states.shortcuts[i - 1];
+ shortcutsArr[i - 1] = shortcut;
+ shortcutsArr[i] = temp;
+ states.shortcuts = shortcutsArr;
+ }
+ }}
+ >
+ <Icon icon="arrow-up" alt="Move up" />
+ </button>
+ <button
+ type="button"
+ class="plain small"
+ disabled={i === shortcuts.length - 1}
+ onClick={() => {
+ const shortcutsArr = Array.from(states.shortcuts);
+ if (i < states.shortcuts.length - 1) {
+ const temp = states.shortcuts[i + 1];
+ shortcutsArr[i + 1] = shortcut;
+ shortcutsArr[i] = temp;
+ states.shortcuts = shortcutsArr;
+ }
+ }}
+ >
+ <Icon icon="arrow-down" alt="Move down" />
+ </button>
+ <button
+ type="button"
+ class="plain small"
+ onClick={() => {
+ setShowForm({
+ shortcut,
+ shortcutIndex: i,
+ });
+ }}
+ >
+ <Icon icon="pencil" alt="Edit" />
+ </button>
+ {/* <button
type="button"
class="plain small"
onClick={() => {
@@ -373,11 +374,21 @@ function ShortcutsSettings({ onClose }) {
>
<Icon icon="x" alt="Remove" />
</button> */}
- </span>
- </li>
- );
- })}
- </ol>
+ </span>
+ </li>
+ );
+ })}
+ </ol>
+ {shortcuts.length === 1 &&
+ snapStates.settings.shortcutsViewMode !== 'float-button' && (
+ <div class="ui-state insignificant">
+ <Icon icon="info" />{' '}
+ <small>
+ Add more than one shortcut/column to make this work.
+ </small>
+ </div>
+ )}
+ </>
) : (
<div class="ui-state insignificant">
<p>No shortcuts yet. Tap on the Add shortcut button.</p>