ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Replace feather icons with lucide icons, use Icon component everywhere

Browse Source
This commit is contained in:
Alice Gaudon 2021-11-21 12:42:26 +01:00
parent 297bafcdc8
commit da6fda02a9
16 changed files with 49 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

6
src/assets/scss/base.scss
View File

@ -155,7 +155,7 @@ h1 {
a {
text-decoration: none;
.feather.feather-external-link { //todo add js
.icon.feather-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;
}

4
src/assets/scss/panel.scss
View File

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

10
src/assets/ts/featherIcons.ts
View File

@ -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();
}
}

11
src/assets/ts/icons.ts Normal file
View File

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

3
src/assets/views/auth/account/NamePanel.svelte
View File

@ -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 = '';
</script>
{#if hasRoute('change-name')}
<section class="panel">
<h2><i data-feather="key"></i> Change name</h2>
<h2><Icon name="key"/> Change name</h2>
{#if $locals.can_change_name}

3
src/assets/views/auth/account/PasswordPanel.svelte
View File

@ -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;
</script>
{#if hasRoute('remove-password', 'change-password')}
<section class="panel">
<h2><i data-feather="key"></i> {$locals.has_password ? 'Change' : 'Set'} password</h2>
<h2><Icon name="key"/> {$locals.has_password ? 'Change' : 'Set'} password</h2>
{#if removePasswordMode}
<Form action={route('remove-password')}

5
src/assets/views/auth/account/account.svelte
View File

@ -7,6 +7,7 @@
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 || [];
@ -16,7 +17,7 @@
<BaseLayout title="Account" description="Manage your account settings and data.">
<div class="container">
<div class="panel">
<h2><i data-feather="user"></i> Personal information</h2>
<h2><Icon name="user"/> Personal information</h2>
{#if $locals.display_email_warning && $locals.emails.length <= 0}
<Message type="warning" content="To avoid losing access to your account, please add an email address."/>
@ -40,7 +41,7 @@
{/if}
<section class="panel">
<h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>
<h2 id="emails"><Icon name="shield"/> Email addresses</h2>
<div class="data-table-container">
<table class="data-table">

4
src/assets/views/auth/auth.svelte
View File

@ -25,7 +25,7 @@
<div class="container">
{#if hasRoute('login')}
<section class="panel">
<h2><i data-feather="log-in"></i> Log in</h2>
<h2><Icon name="log-in"/> Log in</h2>
<Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
<Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
@ -45,7 +45,7 @@
{#if hasRoute('register')}
<section class="panel">
<h2><i data-feather="user-plus"></i> Register</h2>
<h2><Icon name="user-plus"/> Register</h2>
<Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>

3
src/assets/views/backend/index.svelte
View File

@ -2,6 +2,7 @@
import {locals} from "../../ts/stores.js";
import BaseLayout from "../layouts/BaseLayout.svelte";
import Breadcrumb from "../components/Breadcrumb.svelte";
import Icon from "../utils/Icon.svelte";
const menu = $locals.menu || [];
</script>
@ -19,7 +20,7 @@
<li>
<a href={element.link}>
{#if element.display_icon !== null}
<i data-feather={element.display_icon}></i>
<Icon name={element.display_icon}/>
{/if}
{element.display_string}
</a>

6
src/assets/views/components/Message.svelte
View File

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

2
src/assets/views/components/NavMenu.svelte
View File

@ -96,7 +96,7 @@
border-radius: $headerHeight;
:global(.feather) {
:global(.icon) {
--icon-size: 28px;
margin: 0;
}

2
src/assets/views/components/NavMenuItem.svelte
View File

@ -58,7 +58,7 @@
}
}
:global(.feather) {
:global(.icon) {
--icon-size: 16px;
margin-right: 8px;
}

8
src/assets/views/utils/Field.svelte
View File

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

20
src/assets/views/utils/Icon.svelte
View File

@ -1,23 +1,17 @@
<script lang="ts">
import {replaceIcons} from "../../ts/featherIcons.js";
import {afterUpdate, onMount} from "svelte";
import {replaceIcons} from "../../ts/icons.js";
import {onMount} from "svelte";
export let name: string;
onMount(() => {
replaceIcons();
});
afterUpdate(() => {
replaceIcons(false);
replaceIcons(true);
});
</script>
<style lang="scss">
// ---
// --- Feather
// ---
:global(.feather) {
:global(.icon) {
display: inline-flex;
justify-content: center;
align-items: center;
@ -43,8 +37,8 @@
{#if name}
{#if name.startsWith('fa') }
<i class="{name} feather icon" aria-hidden="true" {...$$restProps}></i>
<i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
{:else}
<i data-feather="{name}" class="feather icon" aria-hidden="true" {...$$restProps}></i>
<i icon-name="{name}" class="icon" aria-hidden="true" {...$$restProps}></i>
{/if}
{/if}

28
yarn.lock
View File

@ -803,11 +803,6 @@
"@types/qs" "*"
"@types/serve-static" "*"
"@types/feather-icons@^4.7.0":
version "4.7.0"
resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
integrity sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==
"@types/formidable@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-2.0.0.tgz#7100d6121871c6300e16c89cf4002f3b66157359"
@ -1843,11 +1838,6 @@ cjs-module-lexer@^1.0.0:
resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
classnames@^2.2.5:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
clean-css@^4.2.1:
version "4.2.4"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@ -2112,11 +2102,6 @@ cookiejar@^2.1.2:
resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.3.tgz#fc7a6216e408e74414b90230050842dacda75acc"
integrity sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==
core-js@^3.1.3:
version "3.19.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
core-util-is@~1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@ -3225,14 +3210,6 @@ fd-slicer@~1.1.0:
dependencies:
pend "~1.2.0"
feather-icons@^4.28.0:
version "4.28.0"
resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
dependencies:
classnames "^2.2.5"
core-js "^3.1.3"
fetch-blob@^3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.1.3.tgz#a7dca4855e39d3e3c5a1da62d4ee335c37d26012"
@ -5105,6 +5082,11 @@ lru-cache@^6.0.0:
dependencies:
yallist "^4.0.0"
lucide@^0.16.17:
version "0.16.17"
resolved "https://registry.yarnpkg.com/lucide/-/lucide-0.16.17.tgz#52466954e97ea3efac0191b2452f42932d41fdf7"
integrity sha512-zAB+aRo6/naheCMQ8AYNAXCnsxCZQb7pI52taqjcfBDPkH3jJnx+b5UnvR4kncVPw4t7/U4GARH/23PleFgnHQ==
magic-string@^0.25.7:
version "0.25.7"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"