From af2913f17e93f1780d608e68ea996e3d48880928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Thu, 30 Dec 2021 19:28:43 +0100 Subject: [PATCH] remove shoelace, switch from bootstrap icons to boxicons --- ui/package.json | 2 +- ui/rollup.config.js | 15 +- ui/src/App.svelte | 27 +- ui/src/components/AttributeView.svelte | 26 +- ui/src/components/Inspect.svelte | 5 +- ui/src/components/display/UpObject.svelte | 9 +- ui/src/components/layout/Footer.svelte | 1 + ui/src/components/layout/Header.svelte | 16 +- ui/src/components/layout/Jobs.svelte | 9 +- ui/src/components/layout/Notifications.svelte | 3 +- ui/src/components/utils/Icon.svelte | 19 + ui/src/components/utils/IconButton.svelte | 30 ++ ui/src/components/utils/Input.svelte | 49 +++ ui/src/components/utils/ProgessBar.svelte | 46 +++ ui/src/components/utils/Spinner.svelte | 39 ++ ui/src/components/widgets/Table.svelte | 24 +- ui/src/lib/types.ts | 2 +- ui/src/views/Browse.svelte | 25 +- ui/src/views/Home.svelte | 5 +- ui/yarn.lock | 391 ++++++++++++------ 20 files changed, 523 insertions(+), 220 deletions(-) create mode 100644 ui/src/components/utils/Icon.svelte create mode 100644 ui/src/components/utils/IconButton.svelte create mode 100644 ui/src/components/utils/Input.svelte create mode 100644 ui/src/components/utils/ProgessBar.svelte create mode 100644 ui/src/components/utils/Spinner.svelte diff --git a/ui/package.json b/ui/package.json index 7f37c56..0234bfd 100644 --- a/ui/package.json +++ b/ui/package.json @@ -35,7 +35,7 @@ "typescript": "^4.0.0" }, "dependencies": { - "@shoelace-style/shoelace": "^2.0.0-beta.58", + "boxicons": "^2.1.1", "date-fns": "^2.25.0", "filesize": "^8.0.6", "history": "^5.1.0", diff --git a/ui/rollup.config.js b/ui/rollup.config.js index 1ab6a88..3c4df98 100644 --- a/ui/rollup.config.js +++ b/ui/rollup.config.js @@ -63,11 +63,20 @@ export default { { src: path.join( path.dirname( - require.resolve("@shoelace-style/shoelace/package.json") + require.resolve("boxicons/package.json") ), - "dist/assets" + "fonts" ), - dest: path.resolve(__dirname, "public/vendor/shoelace"), + dest: path.resolve(__dirname, "public/vendor/boxicons"), + }, + { + src: path.join( + path.dirname( + require.resolve("boxicons/package.json") + ), + "css" + ), + dest: path.resolve(__dirname, "public/vendor/boxicons"), }, ], }), diff --git a/ui/src/App.svelte b/ui/src/App.svelte index 713e2bf..bc8bf79 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -3,24 +3,10 @@ import createHashSource from "./util/history"; import Header from "./components/layout/Header.svelte"; import Footer from "./components/layout/Footer.svelte"; - import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"; - import "@shoelace-style/shoelace/dist/components/input/input.js"; - import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js"; - import "@shoelace-style/shoelace/dist/components/spinner/spinner.js"; - import "@shoelace-style/shoelace/dist/components/card/card.js"; - import "@shoelace-style/shoelace/dist/components/progress-bar/progress-bar"; import Home from "./views/Home.svelte"; import Browse from "./views/Browse.svelte"; import Search from "./views/Search.svelte"; - setBasePath("/vendor/shoelace"); - - $: document.body.classList.toggle( - "sl-theme-dark", - window.matchMedia && - window.matchMedia("(prefers-color-scheme: dark)").matches - ); - const history = createHistory(createHashSource()); let footerHeight = "0"; @@ -29,8 +15,7 @@ } - - +
@@ -52,12 +37,11 @@ @use "sass:color"; @use "normalize.css/normalize.css"; - @use "@shoelace-style/shoelace/dist/themes/light.css"; - @use "@shoelace-style/shoelace/dist/themes/dark.css"; @import url("/assets/fonts/inter.css"); $primary: #2c3e50; - $primary-lighter: #394f66; + $primary-lighter: #3f5770; + $primary-lightest: #3a92f0; $background: white; html { @@ -67,6 +51,7 @@ --foreground-lighter: #{$primary-lighter}; --background: #{$background}; --background-emph: #{color.scale($background, $lightness: -3%)}; + --primary-lightest: #{$primary-lightest}; --error: darkred; --warning: orange; font-size: 15px; @@ -89,6 +74,7 @@ --foreground-lighter: #{color.scale($background, $lightness: -50%)}; --background: #{$primary}; --background-emph: #{$primary-lighter}; + --primary-lightest: #{$primary-lightest}; --error: red; } } @@ -136,9 +122,8 @@ color: var(--foreground); } - sl-spinner { + .spinner { font-size: 2em; - --track-width: 6px; position: relative; left: 50%; diff --git a/ui/src/components/AttributeView.svelte b/ui/src/components/AttributeView.svelte index 491921e..e76892e 100644 --- a/ui/src/components/AttributeView.svelte +++ b/ui/src/components/AttributeView.svelte @@ -6,6 +6,8 @@ import TableComponent from "./widgets/Table.svelte"; // silence false svelte(reactive-component) warnings import type { AttributeChange } from "../types/base"; import type { UpEntry } from "upend"; + import Icon from "./utils/Icon.svelte"; + import IconButton from "./utils/IconButton.svelte"; const dispatch = createEventDispatcher(); export let address: string; @@ -78,7 +80,7 @@ {#if type.icon}
- +
{/if} {type.name || "???"} @@ -91,9 +93,10 @@ {#if currentWidget && (availableWidgets.length > 1 || editable)}
{#each availableWidgets as widget (widget.name)} - (currentWidget = widget.name)} /> {/each} @@ -147,8 +150,9 @@ margin-top: -0.3em; } - sl-icon { - margin-bottom: -2px; + .icon { + position: relative; + bottom: -2px; } } @@ -160,18 +164,6 @@ right: 1ex; font-size: 18px; - - sl-icon-button { - &::part(base) { - padding: 0 calc(0.75ex / 2); - } - - &.active { - &::part(base) { - color: var(--foreground); - } - } - } } } } diff --git a/ui/src/components/Inspect.svelte b/ui/src/components/Inspect.svelte index dc37a69..973fbfa 100644 --- a/ui/src/components/Inspect.svelte +++ b/ui/src/components/Inspect.svelte @@ -7,6 +7,7 @@ import { setContext } from "svelte"; import { writable } from "svelte/store"; import type { UpEntry } from "upend"; +import Spinner from "./utils/Spinner.svelte"; export let address: string; export let index: number | undefined; @@ -84,7 +85,7 @@ {#if $entity} {:else} - + {/if} @@ -122,7 +123,7 @@ {/if}
{:else} - + {/if} {:else}
diff --git a/ui/src/components/display/UpObject.svelte b/ui/src/components/display/UpObject.svelte index 556384b..257e7d1 100644 --- a/ui/src/components/display/UpObject.svelte +++ b/ui/src/components/display/UpObject.svelte @@ -7,6 +7,7 @@ import { useEntity } from "../../lib/entity"; import { readable } from "svelte/store"; import { notify, UpNotification } from "../../notifications"; +import IconButton from "../utils/IconButton.svelte"; const dispatch = createEventDispatcher(); export let address: string; @@ -87,7 +88,7 @@ {/if}
{#if banner && isFile} - diff --git a/ui/src/components/layout/Footer.svelte b/ui/src/components/layout/Footer.svelte index 9848169..9cb960c 100644 --- a/ui/src/components/layout/Footer.svelte +++ b/ui/src/components/layout/Footer.svelte @@ -27,6 +27,7 @@ display: flex; flex-direction: column; background: var(--background); + border-top: 1px solid var(--foreground); } :global(#footer > *) { diff --git a/ui/src/components/layout/Header.svelte b/ui/src/components/layout/Header.svelte index d30e5a8..f2afa95 100644 --- a/ui/src/components/layout/Header.svelte +++ b/ui/src/components/layout/Header.svelte @@ -1,6 +1,8 @@ + + + + diff --git a/ui/src/components/utils/IconButton.svelte b/ui/src/components/utils/IconButton.svelte new file mode 100644 index 0000000..c504bc6 --- /dev/null +++ b/ui/src/components/utils/IconButton.svelte @@ -0,0 +1,30 @@ + + + + + diff --git a/ui/src/components/utils/Input.svelte b/ui/src/components/utils/Input.svelte new file mode 100644 index 0000000..93fbb09 --- /dev/null +++ b/ui/src/components/utils/Input.svelte @@ -0,0 +1,49 @@ + + +
+ + (focused = true)} + on:blur={() => (focused = false)} + /> +
+ + diff --git a/ui/src/components/utils/ProgessBar.svelte b/ui/src/components/utils/ProgessBar.svelte new file mode 100644 index 0000000..7715083 --- /dev/null +++ b/ui/src/components/utils/ProgessBar.svelte @@ -0,0 +1,46 @@ + + +
+
+
+ + {value}% + +
+
+ + diff --git a/ui/src/components/utils/Spinner.svelte b/ui/src/components/utils/Spinner.svelte new file mode 100644 index 0000000..eb63605 --- /dev/null +++ b/ui/src/components/utils/Spinner.svelte @@ -0,0 +1,39 @@ +