Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: light mode for delete button, remove drop down #709

Merged
merged 1 commit into from
Aug 6, 2024
Merged

chore: light mode for delete button, remove drop down #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 0 additions & 27 deletions packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
View file
Open in desktop

This file was deleted.

51 changes: 22 additions & 29 deletions packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
import DropdownMenuItem from './DropDownMenuItem.svelte';
import Fa from 'svelte-fa';
import { onMount } from 'svelte';

Expand All @@ -10,7 +9,6 @@ export let fontAwesomeIcon: IconDefinition | undefined = undefined;
export let hidden = false;
export let enabled: boolean = true;
export let onClick: () => void = () => {};
export let menu = false;
export let detailed = false;
export let inProgress = false;
export let iconOffset = '';
Expand All @@ -27,13 +25,13 @@ onMount(() => {
});

const buttonDetailedClass =
'text-gray-400 bg-charcoal-800 hover:text-violet-600 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
'text-[var(--pd-action-button-details-text)] bg-[var(--pd-action-button-details-bg)] hover:text-[var(--pd-action-button-details-hover-text)] font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
const buttonDetailedDisabledClass =
'text-gray-900 bg-charcoal-800 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
'text-[var(--pd-action-button-details-disabled-text)] bg-[var(--pd-action-button-details-disabled-bg)] font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
const buttonClass =
'm-0.5 text-gray-400 hover:bg-charcoal-600 hover:text-violet-600 font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
'text-[var(--pd-action-button-text)] hover:bg-[var(--pd-action-button-hover-bg)] hover:text-[var(--pd-action-button-hover-text)] font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
const buttonDisabledClass =
'm-0.5 text-gray-900 font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
'text-[var(--pd-action-button-disabled-text)] font-medium rounded-full inline-flex items-center px-2 py-2 text-center';

$: styleClass = detailed
? enabled && !inProgress
Expand All @@ -45,27 +43,22 @@ $: styleClass = detailed
</script>

<!-- If menu = true, use the menu, otherwise implement the button -->
{#if menu}
<!-- enabled menu -->
<DropdownMenuItem title={title} icon={icon} enabled={enabled} hidden={hidden} onClick={onClick} />
{:else}
<!-- enabled button -->
<button
title={title}
aria-label={title}
on:click={onClick}
class="{styleClass} relative"
class:disabled={inProgress}
class:hidden={hidden}
disabled={!enabled}>
{#if fontAwesomeIcon}
<Fa class="h-4 w-4 {iconOffset}" icon={fontAwesomeIcon} />
{/if}
<!-- enabled button -->
<button
title={title}
aria-label={title}
on:click={onClick}
class="{styleClass} relative"
class:disabled={inProgress}
class:hidden={hidden}
disabled={!enabled}>
{#if fontAwesomeIcon}
<Fa class="h-4 w-4 {iconOffset}" icon={fontAwesomeIcon} />
{/if}

<div
aria-label="spinner"
class="w-6 h-6 rounded-full animate-spin border border-solid border-violet-500 border-t-transparent absolute {positionTopClass} {positionLeftClass}"
class:hidden={!inProgress}>
</div>
</button>
{/if}
<div
aria-label="spinner"
class="w-6 h-6 rounded-full animate-spin border border-solid border-[var(--pd-action-button-spinner)] border-t-transparent absolute {positionTopClass} {positionLeftClass}"
class:hidden={!inProgress}>
</div>
</button>
Loading