cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-15 18:08:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): remove flowbite (#4178)

Browse Source 
* chore(web): remove flowbite

* Added confirmation prompt for deletion
This commit is contained in:
Alex 2023-09-23 11:50:21 +07:00 committed by GitHub
parent e050121dbf
commit 9a7e48eaa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 113 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/.prettierrc
View File

@ -4,6 +4,6 @@
"printWidth": 120,
"semi": true,
"organizeImportsSkipDestructiveCodeActions": true,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": false
}

183
web/package-lock.json generated
View File

@ -50,16 +50,12 @@
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-svelte": "^2.30.0",
"factory.ts": "^1.3.0",
"flowbite": "^1.8.1",
"flowbite-svelte": "^0.43.1",
"flowbite-svelte-icons": "^0.3.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.10.1",
"prettier-plugin-tailwindcss": "^0.4.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-jester": "^2.3.2",
@ -3204,16 +3200,6 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/plugin-commonjs": {
"version": "24.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
@ -6236,45 +6222,6 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"dev": true
},
"node_modules/flowbite": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz",
"integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==",
"dev": true,
"dependencies": {
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"node_modules/flowbite-svelte": {
"version": "0.43.1",
"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.43.1.tgz",
"integrity": "sha512-01ofjsHi7YRNx/MvmjpULQ5L6ar8El7yqWD3aJJupyaXRvTyPb5CHPUP5fT1rOJA11oeZDnPRTdJ27aDuTXpZQ==",
"dev": true,
"dependencies": {
"@floating-ui/dom": "^1.5.1",
"flowbite": "^1.8.1",
"tailwind-merge": "^1.14.0"
},
"engines": {
"node": ">=16.0.0",
"npm": ">=7.0.0"
},
"peerDependencies": {
"svelte": "^3.55.1 || ^4.0.0"
}
},
"node_modules/flowbite-svelte-icons": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.3.6.tgz",
"integrity": "sha512-4YEq++cbD36KF+zGgLqfkmQgfWGMAP7tjDbesuieROx6UgbMBTtj7f4n49iO+g1cMLelGsCkyZiwelCXDbIJ2w==",
"dev": true,
"peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0",
"tailwind-merge": "^1.13.2",
"tailwindcss": "^3.3.2"
}
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@ -9629,15 +9576,6 @@
"node": ">=4"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"dev": true,
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -10288,80 +10226,6 @@
"svelte": "^3.2.0 || ^4.0.0-next.0"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz",
"integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==",
"dev": true,
"engines": {
"node": ">=12.17.0"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@shufo/prettier-plugin-blade": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"prettier": "^2.2 || ^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-marko": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*",
"prettier-plugin-twig-melody": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@shufo/prettier-plugin-blade": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
},
"prettier-plugin-twig-melody": {
"optional": true
}
}
},
"node_modules/pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@ -14414,12 +14278,6 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
"@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true
},
"@rollup/plugin-commonjs": {
"version": "24.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
@ -16653,34 +16511,6 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"dev": true
},
"flowbite": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz",
"integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==",
"dev": true,
"requires": {
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"flowbite-svelte": {
"version": "0.43.1",
"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.43.1.tgz",
"integrity": "sha512-01ofjsHi7YRNx/MvmjpULQ5L6ar8El7yqWD3aJJupyaXRvTyPb5CHPUP5fT1rOJA11oeZDnPRTdJ27aDuTXpZQ==",
"dev": true,
"requires": {
"@floating-ui/dom": "^1.5.1",
"flowbite": "^1.8.1",
"tailwind-merge": "^1.14.0"
}
},
"flowbite-svelte-icons": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.3.6.tgz",
"integrity": "sha512-4YEq++cbD36KF+zGgLqfkmQgfWGMAP7tjDbesuieROx6UgbMBTtj7f4n49iO+g1cMLelGsCkyZiwelCXDbIJ2w==",
"dev": true,
"requires": {}
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@ -19150,12 +18980,6 @@
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
"dev": true
},
"mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"dev": true
},
"minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -19595,13 +19419,6 @@
"dev": true,
"requires": {}
},
"prettier-plugin-tailwindcss": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz",
"integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==",
"dev": true,
"requires": {}
},
"pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",

4
web/package.json
View File

@ -43,16 +43,12 @@
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-svelte": "^2.30.0",
"factory.ts": "^1.3.0",
"flowbite": "^1.8.1",
"flowbite-svelte": "^0.43.1",
"flowbite-svelte-icons": "^0.3.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.10.1",
"prettier-plugin-tailwindcss": "^0.4.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-jester": "^2.3.2",

7
web/src/lib/components/shared-components/context-menu/menu-option.svelte
View File

@ -1,5 +1,6 @@
<script>
export let text = '';
export let subtitle = '';
</script>
<button
@ -12,4 +13,10 @@
{:else}
<slot />
{/if}
<slot name="subtitle">
<p class="text-xs text-gray-500">
{subtitle}
</p>
</slot>
</button>

184
web/src/lib/components/user-settings-page/library-list.svelte
View File

@ -10,14 +10,14 @@
import Database from 'svelte-material-icons/Database.svelte';
import Upload from 'svelte-material-icons/Upload.svelte';
import Pulse from 'svelte-loading-spinners/Pulse.svelte';
import { slide } from 'svelte/transition';
import { Dropdown, DropdownDivider, DropdownItem, Helper } from 'flowbite-svelte';
import { Icon } from 'flowbite-svelte-icons';
import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
import LibraryScanSettingsForm from '../forms/library-scan-settings-form.svelte';
import LibraryRenameForm from '../forms/library-rename-form.svelte';
import { getBytesWithUnit } from '$lib/utils/byte-units';
import Portal from '../shared-components/portal/portal.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
let libraries: LibraryResponseDto[] = [];
@ -40,6 +40,9 @@
let deleteAssetCount = 0;
let dropdownOpen: boolean[] = [];
let showContextMenu = false;
let contextMenuPosition = { x: 0, y: 0 };
let libraryType: LibraryType;
onMount(() => {
readLibraryList();
@ -50,12 +53,22 @@
editScanSettings = null;
renameLibrary = null;
updateLibraryIndex = null;
showContextMenu = false;
for (let i = 0; i < dropdownOpen.length; i++) {
dropdownOpen[i] = false;
}
};
const showMenu = ({ x, y }: MouseEvent, type: LibraryType) => {
contextMenuPosition = { x, y };
showContextMenu = !showContextMenu;
libraryType = type;
};
const onMenuExit = () => {
showContextMenu = false;
};
const refreshStats = async (listIndex: number) => {
const { data } = await api.libraryApi.getLibraryStatistics({ id: libraries[listIndex].id });
stats[listIndex] = data;
@ -201,6 +214,59 @@
handleError(error, 'Unable to remove offline files');
}
};
const onRenameClicked = (index: number) => {
closeAll();
renameLibrary = index;
updateLibraryIndex = index;
};
const onEditImportPathClicked = (index: number) => {
closeAll();
editImportPaths = index;
updateLibraryIndex = index;
};
const onScanNewLibraryClicked = (libraryId: string) => {
closeAll();
handleScan(libraryId);
};
const onScanSettingClicked = (index: number) => {
closeAll();
editScanSettings = index;
updateLibraryIndex = index;
};
const onScanAllLibraryFilesClicked = (libraryId: string) => {
closeAll();
handleScanChanges(libraryId);
};
const onForceScanAllLibraryFilesClicked = (libraryId: string) => {
closeAll();
handleForceScan(libraryId);
};
const onRemoveOfflineFilesClicked = (libraryId: string) => {
closeAll();
handleRemoveOffline(libraryId);
};
const onDeleteLibraryClicked = (index: number, library: LibraryResponseDto) => {
closeAll();
if (confirm(`Are you sure you want to delete ${library.name} library?`) == true) {
refreshStats(index);
if (totalCount[index] > 0) {
deleteAssetCount = totalCount[index];
confirmDeleteLibrary = library;
} else {
deleteLibrary = library;
handleDelete();
}
}
};
</script>
{#if confirmDeleteLibrary}
@ -260,88 +326,46 @@
<td class="w-1/6 text-ellipsis px-4 text-sm">
<button
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
on:click|stopPropagation|preventDefault={(e) => showMenu(e, library.type)}
>
<DotsVertical size="16" />
</button>
<Dropdown bind:open={dropdownOpen[index]}>
<DropdownItem
on:click={() => {
closeAll();
renameLibrary = index;
updateLibraryIndex = index;
}}>Rename</DropdownItem
>
{#if library.type === LibraryType.External}
<DropdownItem
on:click={function () {
closeAll();
handleScan(library.id);
}}
>
Scan Library Files
<Helper>Looks for new files</Helper>
</DropdownItem>
<DropdownItem
on:click={() => {
closeAll();
editImportPaths = index;
updateLibraryIndex = index;
}}>Edit Import Paths</DropdownItem
>
<DropdownItem class="flex items-center justify-between">
Manage<Icon name="chevron-right-solid" class="ml-2 h-3 w-3 text-primary-700 dark:text-white" />
</DropdownItem>
<Dropdown slot="footer" class="w-60" placement="right-start">
<DropdownItem
on:click={() => {
closeAll();
editScanSettings = index;
updateLibraryIndex = index;
}}>Scan Settings</DropdownItem
>
<DropdownDivider />
<DropdownItem
on:click={function () {
closeAll();
handleScanChanges(library.id);
}}
>Scan All Library Files
<Helper>Rescan, but also refreshes modified files</Helper>
</DropdownItem>
<DropdownItem
on:click={function () {
closeAll();
handleForceScan(library.id);
}}
>Force Scan All Library Files
<Helper>Rescan, but refreshes every file</Helper>
</DropdownItem>
<DropdownItem
on:click={function () {
closeAll();
handleRemoveOffline(library.id);
}}
>Remove Offline Files
<Helper>Any offline files are removed from Immich</Helper>
</DropdownItem>
<DropdownItem
on:click={function () {
closeAll();
refreshStats(index);
{#if showContextMenu}
<Portal target="body">
<ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
<MenuOption on:click={() => onRenameClicked(index)} text="Rename" />
if (totalCount[index] > 0) {
deleteAssetCount = totalCount[index];
confirmDeleteLibrary = library;
} else {
deleteLibrary = library;
handleDelete();
}
}}>Delete Library</DropdownItem
>
</Dropdown>
{/if}
</Dropdown>
{#if libraryType === LibraryType.External}
<MenuOption on:click={() => onEditImportPathClicked(index)} text="Edit Import Paths" />
<MenuOption on:click={() => onScanSettingClicked(index)} text="Scan Settings" />
<hr />
<MenuOption
on:click={() => onScanNewLibraryClicked(library.id)}
text="Scan New Library Files"
/>
<MenuOption
on:click={() => onScanAllLibraryFilesClicked(library.id)}
text="Re-scan All Library Files"
subtitle={'Only refreshes modified files'}
/>
<MenuOption
on:click={() => onForceScanAllLibraryFilesClicked(library.id)}
text="Force Re-scan All Library Files"
subtitle={'Refreshes every file'}
/>
<hr />
<MenuOption
on:click={() => onRemoveOfflineFilesClicked(library.id)}
text="Remove Offline Files"
/>
<MenuOption on:click={() => onDeleteLibraryClicked(index, library)}>
<p class="text-red-600">Delete library</p>
</MenuOption>
{/if}
</ContextMenu>
</Portal>
{/if}
</td>
</tr>
{#if renameLibrary === index}

17
web/tailwind.config.cjs
View File

@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
content: ['./src/**/*.{html,js,svelte,ts}'],
darkMode: 'class',
theme: {
extend: {
@ -22,20 +22,6 @@ module.exports = {
'immich-dark-error': '#d32f2f',
'immich-dark-success': '#388e3c',
'immich-dark-warning': '#f57c00',
// flowbite-svelte
primary: {
50: '#FFF5F2',
100: '#FFF1EE',
200: '#FFE4DE',
300: '#FFD5CC',
400: '#FFBCAD',
500: '#FE795D',
600: '#EF562F',
700: '#EB4F27',
800: '#CC4522',
900: '#A5371B',
},
},
fontFamily: {
'immich-title': ['Snowburst One', 'cursive'],
@ -45,5 +31,4 @@ module.exports = {
},
},
},
plugins: [require('flowbite/plugin')],
};