Files
immich/web/src/lib/components/elements/buttons/circle-icon-button.svelte
Villena Guillaume ca35e5557b feat(web): Improved assets upload (#3850)
* Improved asset upload algorithm.

- Upload Queue: New process algorithm
- Upload Queue: Concurrency correctly respected when dragging / adding multiple group of files to the queue
- Upload Task: Add more information about progress (upload speed and remaining time)
- Upload Panel: Add more information to about the queue status (Remaining, Errors, Duplicated, Uploaded)
- Error recovery: asset information are kept in the queue to give the user a chance to read the error message
- Error recovery: on error allow the user to retry the upload or hide the error / all errors

* Support "live" editing of the upload concurrency

* Fixed some issues

* Reformat

* fix: merge, linting, dark mode, upload to share

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2023-09-01 12:00:51 -04:00

39 lines
1.1 KiB
Svelte

<script lang="ts">
import type Icon from 'svelte-material-icons/AbTesting.svelte';
export let logo: typeof Icon;
export let backgroundColor = 'transparent';
export let hoverColor = '#e2e7e9';
export let padding = '3';
export let size = '24';
export let title = '';
export let isOpacity = false;
export let forceDark = false;
export let hideMobile = false;
</script>
<button
{title}
style:background-color={backgroundColor}
style:--immich-icon-button-hover-color={hoverColor}
class:dark:text-immich-dark-fg={!forceDark}
class="flex place-content-center place-items-center rounded-full p-{padding} transition-all
{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
{forceDark && 'hover:text-black'}
{hideMobile && 'hidden sm:flex'}"
on:click
>
<svelte:component this={logo} {size} />
<slot />
</button>
<style>
:root {
--immich-icon-button-hover-color: #d3d3d3;
}
.immich-circle-icon-button:hover {
background-color: var(--immich-icon-button-hover-color) !important;
}
</style>