diff --git a/package.json b/package.json index cf42788..1091a0b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "swaf", - "version": "0.24.5", + "version": "0.24.6", "description": "Structure Web Application Framework.", "repository": "https://eternae.ink/ashpie/swaf", "author": "Alice Gaudon ", @@ -33,7 +33,6 @@ "@types/cookie-parser": "^1.4.2", "@types/express": "^4.17.6", "@types/express-session": "^1.17.0", - "@types/feather-icons": "^4.7.0", "@types/formidable": "^2.0.0", "@types/geoip-lite": "^1.1.31", "@types/jest": "^27.0.2", @@ -56,7 +55,6 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-svelte3": "^3.1.2", - "feather-icons": "^4.28.0", "jest": "^27.3.1", "jest-resolve": "^27.3.1", "jest-ts-webcompat-resolver": "^1.0.0", @@ -84,6 +82,7 @@ "express-session": "^1.17.1", "formidable": "^2.0.1", "geoip-lite": "^1.4.2", + "lucide": "^0.16.17", "mjml": "^4.6.2", "mysql": "^2.18.1", "nanoid": "^3.1.20", diff --git a/src/assets/scss/_helpers.scss b/src/assets/scss/_helpers.scss index fbc2059..34cce16 100644 --- a/src/assets/scss/_helpers.scss +++ b/src/assets/scss/_helpers.scss @@ -27,6 +27,22 @@ } + // Buttons + button, .button { + &:not(.bold) { + --background-color: var(--surface); + + &:hover::after { + --background-color: var(--on-surface); + + :global(&) { + --background-color: var(--on-surface); + } + } + } + } + + // States modifiers .primary:not(.bold) { --color: var(--primary-on-surface); @@ -49,19 +65,6 @@ --background-color: var(--surface); } - - // Buttons - button { - --background-color: var(--surface); - } - button:hover::after { - background-color: var(--on-surface); - } - - :global(button:hover::after) { - background-color: var(--on-surface); - } - @if ($shadowStrength > 0) { box-shadow: 0 #{$shadowStrength}px #{$shadowStrength}px #00000045; } diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss index eb318d1..22ae0fc 100644 --- a/src/assets/scss/base.scss +++ b/src/assets/scss/base.scss @@ -155,7 +155,7 @@ h1 { a { text-decoration: none; - .feather.feather-external-link { //todo add js + .icon.lucide-external-link { //todo add js --icon-size: 16px; margin-left: 4px; margin-top: -3px; @@ -239,12 +239,12 @@ button, .button { border: 0; } - .feather { + .icon { --icon-size: 16px; margin-right: 8px; } - .feather.last { + .icon.last { margin-right: 0; margin-left: 8px; } diff --git a/src/assets/scss/panel.scss b/src/assets/scss/panel.scss index e6de525..13b2ce5 100644 --- a/src/assets/scss/panel.scss +++ b/src/assets/scss/panel.scss @@ -16,7 +16,7 @@ margin: 16px 8px; } - > .feather:first-child { + > .icon:first-child { --icon-size: 24px; position: absolute; opacity: 0.2; @@ -35,7 +35,7 @@ font-size: 24px; line-height: 1; - .feather { + .icon { --icon-size: 24px; margin: 0 16px 0 0; opacity: 0.2; diff --git a/src/assets/ts/featherIcons.ts b/src/assets/ts/featherIcons.ts deleted file mode 100644 index f67604a..0000000 --- a/src/assets/ts/featherIcons.ts +++ /dev/null @@ -1,10 +0,0 @@ -import feather from "feather-icons"; - -let alreadyReplaced = false; - -export function replaceIcons(once: boolean = true): void { - if (!once || !alreadyReplaced) { - alreadyReplaced = true; - feather.replace(); - } -} diff --git a/src/assets/ts/icons.ts b/src/assets/ts/icons.ts new file mode 100644 index 0000000..b2bfe86 --- /dev/null +++ b/src/assets/ts/icons.ts @@ -0,0 +1,11 @@ +import {createIcons, icons} from "lucide"; + +let hasAlreadyReplacedIcons = false; + +export function replaceIcons(once: boolean): void { + if (!once || !hasAlreadyReplacedIcons) { + console.log('Create icons...'); + createIcons({icons}); + hasAlreadyReplacedIcons = true; + } +} diff --git a/src/assets/views/auth/account/NamePanel.svelte b/src/assets/views/auth/account/NamePanel.svelte index 71c0c8b..91a301e 100644 --- a/src/assets/views/auth/account/NamePanel.svelte +++ b/src/assets/views/auth/account/NamePanel.svelte @@ -4,13 +4,14 @@ import Form from "../../utils/Form.svelte"; import Field from "../../utils/Field.svelte"; import {hasRoute, route} from "../../../../common/Routing"; + import Icon from "../../utils/Icon.svelte"; let newName = ''; {#if hasRoute('change-name')}
-

Change name

+

Change name

{#if $locals.can_change_name} diff --git a/src/assets/views/auth/account/PasswordPanel.svelte b/src/assets/views/auth/account/PasswordPanel.svelte index f25869b..151cea0 100644 --- a/src/assets/views/auth/account/PasswordPanel.svelte +++ b/src/assets/views/auth/account/PasswordPanel.svelte @@ -3,13 +3,14 @@ import Form from "../../utils/Form.svelte"; import Field from "../../utils/Field.svelte"; import {hasRoute, route} from "../../../../common/Routing"; + import Icon from "../../utils/Icon.svelte"; let removePasswordMode = false; {#if hasRoute('remove-password', 'change-password')}
-

{$locals.has_password ? 'Change' : 'Set'} password

+

{$locals.has_password ? 'Change' : 'Set'} password

{#if removePasswordMode}
import {locals} from "../../../ts/stores"; - import BaseLayout from "../../layouts/BaseLayout.svelte"; + import BaseTemplate from "../../templates/BaseTemplate.svelte"; import Message from "../../components/Message.svelte"; import NamePanel from "./NamePanel.svelte"; import PasswordPanel from "./PasswordPanel.svelte"; import Form from "../../utils/Form.svelte"; import Field from "../../utils/Field.svelte"; import {hasRoute, route} from "../../../../common/Routing"; + import Icon from "../../utils/Icon.svelte"; const mainEmail = $locals.main_email?.email; const personalInfoFields = $locals.user_personal_info_fields || []; const emails = $locals.emails || []; - +
-

Personal information

+

Personal information

{#if $locals.display_email_warning && $locals.emails.length <= 0} @@ -40,7 +41,7 @@ {/if}
-

Email addresses

+

Email addresses

@@ -100,4 +101,4 @@ {/if} - + diff --git a/src/assets/views/auth/auth.svelte b/src/assets/views/auth/auth.svelte index ad14119..c34d380 100644 --- a/src/assets/views/auth/auth.svelte +++ b/src/assets/views/auth/auth.svelte @@ -1,6 +1,6 @@ - +
{#if hasRoute('login')}
-

Log in

+

Log in

-

Register

+

Register

@@ -74,4 +74,4 @@
{/if}
-
+ diff --git a/src/assets/views/backend/accounts_approval.svelte b/src/assets/views/backend/accounts_approval.svelte index dd9cbc2..1eff009 100644 --- a/src/assets/views/backend/accounts_approval.svelte +++ b/src/assets/views/backend/accounts_approval.svelte @@ -1,6 +1,6 @@ - + - + diff --git a/src/assets/views/components/CopyableText.svelte b/src/assets/views/components/CopyableText.svelte new file mode 100644 index 0000000..9b6ee3b --- /dev/null +++ b/src/assets/views/components/CopyableText.svelte @@ -0,0 +1,95 @@ + + + + + +
+
{title}
+
{content}
+ + + {#if showCopiedOverlay} +
Copied!
+ {/if} +
diff --git a/src/assets/views/components/Message.svelte b/src/assets/views/components/Message.svelte index 099e908..2adf74a 100644 --- a/src/assets/views/components/Message.svelte +++ b/src/assets/views/components/Message.svelte @@ -45,7 +45,7 @@ border-radius: 5px; - :global(.feather) { + :global(.icon) { --icon-size: 24px; margin-right: 8px; } @@ -77,7 +77,7 @@ &-discreet { color: var(--on-surface); - .feather { + .icon { --icon-size: 20px; } } @@ -94,7 +94,7 @@ border: 0; - :global(.feather) { + :global(.icon) { margin: 0; } } diff --git a/src/assets/views/components/NavMenu.svelte b/src/assets/views/components/NavMenu.svelte index 01e4b6e..badaf49 100644 --- a/src/assets/views/components/NavMenu.svelte +++ b/src/assets/views/components/NavMenu.svelte @@ -96,7 +96,7 @@ border-radius: $headerHeight; - :global(.feather) { + :global(.icon) { --icon-size: 28px; margin: 0; } diff --git a/src/assets/views/components/NavMenuItem.svelte b/src/assets/views/components/NavMenuItem.svelte index 4f104ed..b01d4c8 100644 --- a/src/assets/views/components/NavMenuItem.svelte +++ b/src/assets/views/components/NavMenuItem.svelte @@ -58,7 +58,7 @@ } } - :global(.feather) { + :global(.icon) { --icon-size: 16px; margin-right: 8px; } diff --git a/src/assets/views/errors/400.svelte b/src/assets/views/errors/400.svelte index 5ad9f17..26064ed 100644 --- a/src/assets/views/errors/400.svelte +++ b/src/assets/views/errors/400.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/401.svelte b/src/assets/views/errors/401.svelte index a6d9d83..516d82a 100644 --- a/src/assets/views/errors/401.svelte +++ b/src/assets/views/errors/401.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/403.svelte b/src/assets/views/errors/403.svelte index 98a397f..489c6b5 100644 --- a/src/assets/views/errors/403.svelte +++ b/src/assets/views/errors/403.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/404.svelte b/src/assets/views/errors/404.svelte index 69c414d..1e526bb 100644 --- a/src/assets/views/errors/404.svelte +++ b/src/assets/views/errors/404.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/429.svelte b/src/assets/views/errors/429.svelte index cd0e471..04ef391 100644 --- a/src/assets/views/errors/429.svelte +++ b/src/assets/views/errors/429.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/500.svelte b/src/assets/views/errors/500.svelte index 4682025..ab3ccd4 100644 --- a/src/assets/views/errors/500.svelte +++ b/src/assets/views/errors/500.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/503.svelte b/src/assets/views/errors/503.svelte index 47e7f5b..4f7ceef 100644 --- a/src/assets/views/errors/503.svelte +++ b/src/assets/views/errors/503.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/assets/views/errors/Error.svelte b/src/assets/views/errors/Error.svelte deleted file mode 100644 index 00248a1..0000000 --- a/src/assets/views/errors/Error.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - - - {code + ' - ' + message} - - - - - -
- - -
{code}
-
{message}
- {#if instructions} -
{@html instructions}
- {/if} - - -
- -
-

Error ID: {$locals.error_id || 'Request has no indentifier.'}

-

- If you think this isn't right, please contact us with the above error ID at - {$locals.app.contact_email}. -

-
diff --git a/src/assets/views/home.svelte b/src/assets/views/home.svelte index b03826a..4dc7521 100644 --- a/src/assets/views/home.svelte +++ b/src/assets/views/home.svelte @@ -1,12 +1,20 @@ - +
-

swaf - Svelte Web Application Framework

+

swaf - {randomTitleSWord} Web Application Framework

Welcome to {$locals.app.name}!

{#if hasAnyRoute('tests', 'design')} @@ -22,4 +30,4 @@ {/if}
-
+ diff --git a/src/assets/views/magic_link.svelte b/src/assets/views/magic_link.svelte index d764927..fc3346b 100644 --- a/src/assets/views/magic_link.svelte +++ b/src/assets/views/magic_link.svelte @@ -1,13 +1,13 @@ - +
{#if $locals.err} @@ -18,4 +18,4 @@ {/if}
-
+ diff --git a/src/assets/views/magic_link_lobby.svelte b/src/assets/views/magic_link_lobby.svelte index b82e291..21b8eb9 100644 --- a/src/assets/views/magic_link_lobby.svelte +++ b/src/assets/views/magic_link_lobby.svelte @@ -1,6 +1,6 @@ - +
Waiting for you to open the link...

-
+ diff --git a/src/assets/views/scripts/ExternalLinkIcons.svelte b/src/assets/views/scripts/ExternalLinkIcons.svelte new file mode 100644 index 0000000..62f0a81 --- /dev/null +++ b/src/assets/views/scripts/ExternalLinkIcons.svelte @@ -0,0 +1,32 @@ + + + + +
+ +
diff --git a/src/assets/views/layouts/BaseLayout.svelte b/src/assets/views/templates/BaseTemplate.svelte similarity index 95% rename from src/assets/views/layouts/BaseLayout.svelte rename to src/assets/views/templates/BaseTemplate.svelte index 4d10962..755d987 100644 --- a/src/assets/views/layouts/BaseLayout.svelte +++ b/src/assets/views/templates/BaseTemplate.svelte @@ -2,6 +2,7 @@ import FlashMessages from "../components/FlashMessages.svelte"; import BaseFooter from "./base/BaseFooter.svelte"; import BaseHeader from "./base/BaseHeader.svelte"; + import CommonScripts from "./CommonScripts.svelte"; export let title: string; export let h1: string = title; @@ -9,6 +10,8 @@ export let refresh_after: number | undefined = undefined; + + diff --git a/src/assets/views/layouts/base/BaseFooter.svelte b/src/assets/views/templates/base/BaseFooter.svelte similarity index 100% rename from src/assets/views/layouts/base/BaseFooter.svelte rename to src/assets/views/templates/base/BaseFooter.svelte diff --git a/src/assets/views/layouts/base/BaseHeader.svelte b/src/assets/views/templates/base/BaseHeader.svelte similarity index 100% rename from src/assets/views/layouts/base/BaseHeader.svelte rename to src/assets/views/templates/base/BaseHeader.svelte diff --git a/src/assets/views/layouts/base/BaseHeaderLogo.svelte b/src/assets/views/templates/base/BaseHeaderLogo.svelte similarity index 100% rename from src/assets/views/layouts/base/BaseHeaderLogo.svelte rename to src/assets/views/templates/base/BaseHeaderLogo.svelte diff --git a/src/assets/views/layouts/base/BaseNavMenuAuth.svelte b/src/assets/views/templates/base/BaseNavMenuAuth.svelte similarity index 100% rename from src/assets/views/layouts/base/BaseNavMenuAuth.svelte rename to src/assets/views/templates/base/BaseNavMenuAuth.svelte diff --git a/src/assets/views/layouts/base/BaseNavMenuLinks.svelte b/src/assets/views/templates/base/BaseNavMenuLinks.svelte similarity index 100% rename from src/assets/views/layouts/base/BaseNavMenuLinks.svelte rename to src/assets/views/templates/base/BaseNavMenuLinks.svelte diff --git a/src/assets/views/layouts/svelte_layout.html b/src/assets/views/templates/svelte_template.html similarity index 100% rename from src/assets/views/layouts/svelte_layout.html rename to src/assets/views/templates/svelte_template.html diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte index 2fba537..c76df9a 100644 --- a/src/assets/views/utils/Field.svelte +++ b/src/assets/views/utils/Field.svelte @@ -96,7 +96,7 @@ background-color: var(--input); border-radius: 5px; - > :global(.feather.icon) { + > :global(.icon) { --icon-size: 24px; margin: 18px; opacity: 0.75; @@ -180,7 +180,7 @@ display: none; } - & + :global(.feather) { + & + :global(.icon) { position: absolute; pointer-events: none; right: 0; @@ -190,7 +190,7 @@ } // TODO: Temporary - &:focus + :global(.feather) { + &:focus + :global(.icon) { transform: rotateX(180deg); } } @@ -317,7 +317,7 @@ .name { font-size: 20px; - :global(.feather) { + :global(.icon) { --icon-size: 24px; margin-right: 8px; } diff --git a/src/assets/views/utils/Icon.svelte b/src/assets/views/utils/Icon.svelte index b17bd44..5063048 100644 --- a/src/assets/views/utils/Icon.svelte +++ b/src/assets/views/utils/Icon.svelte @@ -1,23 +1,17 @@