diff --git a/web/components/command_palette.tsx b/web/components/command_palette.tsx index 859856dd..0437234e 100644 --- a/web/components/command_palette.tsx +++ b/web/components/command_palette.tsx @@ -1,6 +1,6 @@ import { isMacLike } from "../../common/util.ts"; import { FilterList } from "./filter.tsx"; -import { faPersonRunning } from "../deps.ts"; +import { TerminalIcon } from "../deps.ts"; import { AppCommand } from "../hooks/command.ts"; import { FilterOption } from "../../common/types.ts"; @@ -30,7 +30,7 @@ export function CommandPalette({ placeholder="Command" options={options} allowNew={false} - icon={faPersonRunning} + icon={TerminalIcon} helpText="Start typing the command name to filter results, press Return to run." onSelect={(opt) => { if (opt) { diff --git a/web/components/filter.tsx b/web/components/filter.tsx index c24b16a9..00b3d0f4 100644 --- a/web/components/filter.tsx +++ b/web/components/filter.tsx @@ -1,8 +1,8 @@ import { useEffect, useRef, useState } from "../deps.ts"; -import { FontAwesomeIcon } from "../deps.ts"; -import type { IconDefinition } from "../deps.ts"; import { FilterOption } from "../../common/types.ts"; import fuzzysort from "https://esm.sh/fuzzysort@2.0.1"; +import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.3/src/index"; +import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types"; function magicSorter(a: FilterOption, b: FilterOption): number { if (a.orderId && b.orderId) { @@ -59,7 +59,7 @@ export function FilterList({ allowNew = false, helpText = "", completePrefix, - icon, + icon: Icon, newHint, }: { placeholder: string; @@ -71,7 +71,7 @@ export function FilterList({ completePrefix?: string; helpText: string; newHint?: string; - icon?: IconDefinition; + icon?: FunctionalComponent; }) { const searchBoxRef = useRef(null); const [text, setText] = useState(""); @@ -210,7 +210,7 @@ export function FilterList({ }} > - {icon && } + {Icon && } ; description: string; callback: () => void; }; @@ -45,7 +38,6 @@ export function TopBar({ }) { // const [theme, setTheme] = useState(localStorage.theme ?? "light"); const inputRef = useRef(null); - // const isMac = isMacLike(); return (
@@ -103,7 +95,7 @@ export function TopBar({ }} title={actionButton.description} > - + ))}
diff --git a/web/deps.ts b/web/deps.ts index 7907e453..47901557 100644 --- a/web/deps.ts +++ b/web/deps.ts @@ -13,9 +13,13 @@ export { useState, } from "https://esm.sh/preact@10.11.1/hooks"; -export { FontAwesomeIcon } from "https://esm.sh/@aduh95/preact-fontawesome@0.1.5?external=@fortawesome/fontawesome-common-types"; -export { faPersonRunning } from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0"; -export type { IconDefinition } from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0"; +export { + Book as BookIcon, + Home as HomeIcon, + Moon as MoonIcon, + Sun as SunIcon, + Terminal as TerminalIcon, +} from "https://esm.sh/preact-feather@4.2.1"; // Y collab export * as Y from "yjs"; diff --git a/web/editor.tsx b/web/editor.tsx index 8eb557a5..30e36e52 100644 --- a/web/editor.tsx +++ b/web/editor.tsx @@ -1,20 +1,16 @@ // Third party web dependencies import { + BookIcon, + HomeIcon, + MoonIcon, preactRender, + SunIcon, + TerminalIcon, useEffect, useReducer, yUndoManagerKeymap, } from "./deps.ts"; -// Iconography -import { - faFolderTree, - faHome, - faMoon, - faRunning, - faSun, -} from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0"; - // Third-party dependencies import { autocompletion, @@ -123,7 +119,7 @@ export class Editor { openPages = new Map(); editorView?: EditorView; viewState: AppViewState; - viewDispatch: React.Dispatch; + viewDispatch: Function; space: Space; pageNavigator: PathPageNavigator; eventHook: EventHook; @@ -395,7 +391,7 @@ export class Editor { options, placeHolder, helpText, - onSelect: (option) => { + onSelect: (option: any) => { this.viewDispatch({ type: "hide-filterbox" }); this.focus(); resolve(option); @@ -856,28 +852,28 @@ export class Editor { }} actionButtons={[ { - icon: faHome, + icon: HomeIcon, description: `Go home (Alt-h)`, callback: () => { editor.navigate(""); }, }, { - icon: faFolderTree, + icon: BookIcon, description: `Open page (${isMacLike() ? "Cmd-k" : "Ctrl-k"})`, callback: () => { dispatch({ type: "start-navigate" }); }, }, { - icon: faRunning, + icon: TerminalIcon, description: `Run command (${isMacLike() ? "Cmd-/" : "Ctrl-/"})`, callback: () => { dispatch({ type: "show-palette" }); }, }, { - icon: localStorage.theme === "dark" ? faSun : faMoon, + icon: localStorage.theme === "dark" ? SunIcon : MoonIcon, description: "Toggle dark mode", callback: () => { if (localStorage.theme === "dark") { diff --git a/web/styles/filter_box.scss b/web/styles/filter_box.scss index 73686031..cad1311f 100644 --- a/web/styles/filter_box.scss +++ b/web/styles/filter_box.scss @@ -44,9 +44,8 @@ .sb-icon { padding: 0 8px 0 5px; - } - .sb-name { - padding-top: -3px; + position: relative; + top: 3px; } } diff --git a/web/styles/theme.scss b/web/styles/theme.scss index 74044a44..735a222f 100644 --- a/web/styles/theme.scss +++ b/web/styles/theme.scss @@ -50,12 +50,16 @@ } .sb-actions button { - border: 1px solid #7897d0; - border-radius: 3px; + border: 0; margin: 3px; - font-size: 15px; padding: 5px; - background-color: #e6e6e6; + background-color: transparent; + color: #292929; + cursor: pointer; +} + +.sb-actions button:hover { + color: #0772be; } /* Filter boxes */ @@ -74,6 +78,7 @@ color: #000; } + .sb-filter-box .sb-header input::placeholder { color: rgb(199, 199, 199); font-weight: normal; @@ -404,6 +409,14 @@ html[data-theme="dark"] { color: rgb(200, 200, 200); } + .sb-actions button { + color: #adadad; + } + + .sb-actions button:hover { + color: #37a1ed; + } + .sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4 { color: #d1d1d1; } diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md index f09e0145..9c573471 100644 --- a/website/CHANGELOG.md +++ b/website/CHANGELOG.md @@ -7,6 +7,7 @@ release. * Replaced the `--password` flag with `--user` taking a basic auth combination of username and password, e.g. `--user pete:1234`. Authentication now uses standard basic auth. This should fix attachments not working with password-protected setups. * Added support for ~~strikethrough~~ syntax. +* New button icons, from [feather](https://feathericons.com/) --- diff --git a/website/Silver Bullet.md b/website/Silver Bullet.md index 26cf4d5d..154ca0d9 100644 --- a/website/Silver Bullet.md +++ b/website/Silver Bullet.md @@ -31,8 +31,8 @@ On this site, everything is editable just none of it persists (the back-end is r Don’t just sit there, try it! -* Click on the page picker (folder tree) icon at the top right, or hit `Cmd-k` (Mac) or `Ctrl-k` (Linux and Windows) to open the **page switcher**. Type the name of a non-existent page to create it (although it won’t save in this environment). -* Click on the run button (top right) or hit `Cmd-/` (Mac) or `Ctrl-/` (Linux and Windows) to open the **command palette** (note that not all commands will work in this mode). +* Click on the page picker (book icon) icon at the top right, or hit `Cmd-k` (Mac) or `Ctrl-k` (Linux and Windows) to open the **page switcher**. Type the name of a non-existent page to create it (although it won’t save in this environment). +* Click on the terminal button (top right) or hit `Cmd-/` (Mac) or `Ctrl-/` (Linux and Windows) to open the **command palette** (note that not all commands will work in this mode). * Select some text and hit `Alt-m` to ==highlight== it, or `Cmd-b` (Mac) or `Ctrl-b` (Windows/Linux) to make it **bold**, or `Cmd-i` (Mac) or `Ctrl-i` (Windows/Linux) to make it _italic_. * Click a link somewhere on this page to navigate there. * Start typing `[[` somewhere to insert a page link (with completion).