diff --git a/manifest.json b/manifest.json index dba9df0..77be3dd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "cmdr", "name": "Commander", - "version": "0.0.13", + "version": "0.0.14", "minAppVersion": "0.12.0", "description": "Customize your workspace by adding commands /everywhere/.", "author": "jsmorabito & phibr0", diff --git a/package.json b/package.json index 3e9ef02..1eab1e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cmdr", - "version": "0.0.13", + "version": "0.0.14", "description": "Customize your workspace by adding commands /everywhere/.", "main": "main.js", "scripts": { @@ -13,10 +13,8 @@ "author": "jsmorabito & phibr0", "devDependencies": { "@types/canvas-confetti": "^1.4.2", - "@types/chroma-js": "^2.1.3", "@types/node": "^16.11.6", "@types/react": "^18.0.12", - "@types/sortablejs": "^1.13.0", "@typescript-eslint/eslint-plugin": "^5.2.0", "@typescript-eslint/parser": "^5.2.0", "builtin-modules": "^3.2.0", diff --git a/src/styles.scss b/src/styles.scss index 5810748..b89b9fa 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -23,15 +23,6 @@ } } -.cmdr-credits { - display: flex; - - > span { - color: var(--text-muted); - font-size: 16px; - } -} - .cmdr-mobile .cmdr-credits { place-content: center; } @@ -211,6 +202,7 @@ transition: color 200ms ease; width: 100%; display: flex; + font-weight: 500; justify-content: space-between; &:first-child { @@ -266,6 +258,64 @@ } } +.cmdr-credits { + display: flex; + + > span { + color: var(--text-muted); + font-size: 14px; + } +} + +.cmdr-about { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 64px; + + hr { + width: 100%; + margin-top: 0; + } + + button { + display: flex; + align-items: center; + background-color: transparent !important; + border: 2px solid var(--interactive-accent); + color: var(--interactive-accent); + height: 2.6em; + font-weight: 700; + gap: 16px; + border-radius: 6px; + margin-bottom: 8px; + + &:last-of-type { + margin-bottom: 32px; + } + } + + .setting-item { + button { + margin: 0; + } + } + + .cmdr-icon-wrapper { + display: flex; + + > svg { + width: 70px; + height: 70px; + } + } + + .cmdr-version { + font-size: 12px; + color: var(--text-muted); + } +} + // @media only screen and (max-width: 1500px) { // .cmdr-setting-header { // display: flex; diff --git a/src/ui/components/About.tsx b/src/ui/components/About.tsx new file mode 100644 index 0000000..b9a09cc --- /dev/null +++ b/src/ui/components/About.tsx @@ -0,0 +1,40 @@ +import { Platform, PluginManifest } from "obsidian"; +import { h } from "preact"; +import { showConfetti, ObsidianIcon } from "src/util"; +import Credits from "./Credits"; +import Logo from "./Logo"; + +export default function About({ manifest }: { manifest: PluginManifest }): h.JSX.Element { + const feedbackBtn = ; + const donateBtn = ; + return ( +
+ {Platform.isMobile && [
, feedbackBtn, donateBtn]} + {Platform.isDesktop && [ +
+
+
Leave Feedback
+
Share feedback, issues, and ideas with our feedback form.
+
+
+ {feedbackBtn} +
+
, +
+
+
Donate
+
Consider donating to support development.
+
+
+ {donateBtn} +
+
, +
+ ]} + + {manifest.name} + + {manifest.version} +
+ ); +} diff --git a/src/ui/components/Credits.tsx b/src/ui/components/Credits.tsx index 9bb7945..a58ac8b 100644 --- a/src/ui/components/Credits.tsx +++ b/src/ui/components/Credits.tsx @@ -1,56 +1,9 @@ -import confetti from "canvas-confetti"; -import { Platform } from "obsidian"; import { h } from "preact"; -import t from "src/l10n"; -import { ObsidianIcon } from "src/util"; export default function Credits(): h.JSX.Element { return (
- by Johnny✨ and phibr0 - => { - const myCanvas = document.createElement('canvas'); - document.body.appendChild(myCanvas); - myCanvas.style.position = "fixed"; - myCanvas.style.width = "100vw"; - myCanvas.style.height = "100vh"; - myCanvas.style.top = "0px"; - myCanvas.style.left = "0px"; - //@ts-ignore - myCanvas.style["pointer-events"] = "none"; - //@ts-ignore - myCanvas.style["z-index"] = "100"; - - const myConfetti = confetti.create(myCanvas, { - resize: true, - useWorker: true - }); - const pos = (target as HTMLDivElement).getBoundingClientRect(); - - setTimeout(() => location.replace("https://buymeacoffee.com/phibr0"), Math.random() * 800 + 500); - - await myConfetti({ - particleCount: Platform.isDesktop ? 150 : 80, - startVelocity: Platform.isDesktop ? 45 : 55, - spread: Platform.isDesktop ? 120 : 75, - angle: Platform.isDesktop ? 200 : 100, - drift: -1, - origin: { - x: pos.x / window.innerWidth, - y: pos.y / window.innerHeight, - }, - }); - - myCanvas.remove(); - }} - /> + By Johnny✨ and phibr0
); } diff --git a/src/ui/components/Logo.tsx b/src/ui/components/Logo.tsx new file mode 100644 index 0000000..8a1e6b5 --- /dev/null +++ b/src/ui/components/Logo.tsx @@ -0,0 +1,6 @@ +import { h } from "preact"; +import logo from "src/assets/commander-logo.svg"; + +export default function Logo(): h.JSX.Element { + return
; +} diff --git a/src/ui/components/commandViewerComponent.tsx b/src/ui/components/commandViewerComponent.tsx index e4c213b..1e52eb4 100644 --- a/src/ui/components/commandViewerComponent.tsx +++ b/src/ui/components/commandViewerComponent.tsx @@ -1,7 +1,6 @@ import { createContext, Fragment, h } from "preact"; import CommanderPlugin from "src/main"; import CommandComponent from "./commandComponent"; -import logo from "src/assets/commander-logo.svg"; import CommandManagerBase from "src/manager/commands/commandManager"; import { chooseNewCommand, isModeActive, ObsidianIcon } from "src/util"; import { arrayMoveMutable } from "array-move"; @@ -9,6 +8,7 @@ import ChooseIconModal from "../chooseIconModal"; import ConfirmDeleteModal from "../confirmDeleteModal"; import t from "src/l10n"; import { Platform } from "obsidian"; +import Logo from "./Logo"; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion export const ManagerContext = createContext(null!); @@ -62,7 +62,7 @@ export default function CommandViewer({ manager, plugin, onOpenHider }: CommandV {!manager.pairs.some((pre) => isModeActive(pre.mode) || pre.mode.match(/mobile|desktop/)) &&
{/* This isn't really dangerous, as the svg is inserted at build time and no other data can be passed to it */} -
+

{t("No commands here!")}

{t("Would you like to add one now?")}
} diff --git a/src/ui/components/settingTabComponent.tsx b/src/ui/components/settingTabComponent.tsx index bb16737..13ba906 100644 --- a/src/ui/components/settingTabComponent.tsx +++ b/src/ui/components/settingTabComponent.tsx @@ -4,8 +4,8 @@ import { useEffect, useMemo, useState } from "preact/hooks"; import t from "src/l10n"; import { ObsidianIcon } from "src/util"; import CommanderPlugin from "../../main"; +import About from "./About"; import CommandViewer from "./commandViewerComponent"; -import Credits from "./Credits"; import HidingViewer from "./hidingViewer"; import { ToggleComponent } from "./settingComponent"; @@ -143,7 +143,6 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co {Platform.isDesktop &&

{plugin.manifest.name}

-
} {(Platform.isDesktop || open) &&