obsidian-plugin/jsmorabito_obsidian-commander
1
0
Fork 0
mirror of https://github.com/jsmorabito/obsidian-commander.git synced 2026-07-22 06:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add about section

Browse source
This commit is contained in:
phibr0 2022-07-12 19:31:46 +02:00
parent 8195fe3393
commit d7ebd69c1c
9 changed files with 152 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
manifest.json
View file

@ -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",

4
package.json
View file

@ -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",

68
src/styles.scss
View file

@ -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;

40
src/ui/components/About.tsx Normal file
View file

@ -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 = <button onClick={(e): void => { showConfetti(e); setTimeout(() => location.replace("https://forms.gle/hPjn61G9bqqFb3256"), Math.random() * 800 + 500); }}><ObsidianIcon icon="message-square" size={20} /> Leave Feedback</button>;
const donateBtn = <button onClick={(e): void => { showConfetti(e); setTimeout(() => location.replace("https://buymeacoffee.com/phibr0"), Math.random() * 800 + 500); }}><ObsidianIcon icon="coffee" size={20} />Support Development</button>;
return (
<div className="cmdr-about">
{Platform.isMobile && [<hr />, feedbackBtn, donateBtn]}
{Platform.isDesktop && [
<div className="setting-item mod-toggle" style={{ width: "100%", borderTop: "1px solid var(--background-modifier-border)", paddingTop: "18px" }}>
<div className="setting-item-info">
<div className="setting-item-name">Leave Feedback</div>
<div className="setting-item-description">Share feedback, issues, and ideas with our feedback form.</div>
</div>
<div className="setting-item-control">
{feedbackBtn}
</div>
</div>,
<div className="setting-item mod-toggle" style={{ width: "100%" }}>
<div className="setting-item-info">
<div className="setting-item-name">Donate</div>
<div className="setting-item-description">Consider donating to support development.</div>
</div>
<div className="setting-item-control">
{donateBtn}
</div>
</div>,
<hr />
]}
<Logo />
<b>{manifest.name}</b>
<Credits />
<span className="cmdr-version">{manifest.version}</span>
</div>
);
}

49
src/ui/components/Credits.tsx
View file

@ -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 (
<div className="cmdr-credits">
<span>by Johnny✨ and phibr0</span>
<ObsidianIcon
icon="coffee"
size={24}
className="clickable-icon"
aria-label={t("Support development")}
aria-label-position="left"
id="cmdr-coffee-btn"
onClick={async ({ target }): Promise<void> => {
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();
}}
/>
<span>By Johnny✨ and phibr0</span>
</div>
);
}

6
src/ui/components/Logo.tsx Normal file
View file

@ -0,0 +1,6 @@
import { h } from "preact";
import logo from "src/assets/commander-logo.svg";
export default function Logo(): h.JSX.Element {
return <div class="cmdr-icon-wrapper" dangerouslySetInnerHTML={{ __html: logo }} />;
}

4
src/ui/components/commandViewerComponent.tsx
View file

@ -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<CommandManagerBase>(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/)) && <div class="cmdr-commands-empty">
{/* This isn't really dangerous,
as the svg is inserted at build time and no other data can be passed to it */}
<div class="cmdr-icon-wrapper" dangerouslySetInnerHTML={{ __html: logo }} />
<Logo />
<h3>{t("No commands here!")}</h3>
<span>{t("Would you like to add one now?")}</span>
</div>}

8
src/ui/components/settingTabComponent.tsx
View file

@ -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
<Fragment>
{Platform.isDesktop && <div className="cmdr-setting-title">
<h1>{plugin.manifest.name}</h1>
<Credits />
</div>}
{(Platform.isDesktop || open) && <nav class={`cmdr-setting-header ${mobileMode ? "cmdr-mobile" : ""}`}>
@ -158,8 +157,9 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co
<div class={`cmdr-setting-content ${mobileMode ? "cmdr-mobile" : ""}`}>
{(Platform.isDesktop || !open) && tabs[activeTab].tab}
{Platform.isMobile && open && <Credits />}
{((Platform.isMobile && open) || (Platform.isDesktop && activeTab === 0)) && <About manifest={plugin.manifest} />}
</div>
</Fragment>
</Fragment >
);
}

39
src/util.tsx
View file

@ -2,10 +2,11 @@ import { CommanderSettings, CommandIconPair } from './types';
import CommanderPlugin from "./main";
import AddCommandModal from "./ui/addCommandModal";
import ChooseIconModal from './ui/chooseIconModal';
import { Command, setIcon } from 'obsidian';
import { Command, Platform, setIcon } from 'obsidian';
import ChooseCustomNameModal from './ui/chooseCustomNameModal';
import { ComponentProps, h } from 'preact';
import { useRef, useLayoutEffect } from 'preact/hooks';
import confetti from 'canvas-confetti';
/**
* It creates a modal, waits for the user to select a command, and then creates another modal to wait
@ -73,3 +74,39 @@ export function updateHiderStylesheet(settings: CommanderSettings): void {
document.head.appendChild(createEl("style", { attr: { "id": "cmdr" }, text: style, type: "text/css" }));
}
}
export async function showConfetti({ target }: MouseEvent): Promise<void> {
const myCanvas = activeDocument.createElement('canvas');
activeDocument.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();
await myConfetti({
particleCount: Platform.isDesktop ? 160 : 80,
startVelocity: 55,
spread: 75,
angle: 90,
drift: -1,
ticks: 250,
origin: {
x: (pos.x + pos.width / 2) / activeWindow.innerWidth,
y: (pos.y + pos.height / 2) / activeWindow.innerHeight,
},
});
myCanvas.remove();
}