Standardise hover and selected states between action buttons and icons in view nav bar

This commit is contained in:
Andrew Kingston 2024-08-23 14:38:08 +01:00
parent f8e68a54cf
commit c694b07ff4
No known key found for this signature in database
4 changed files with 12 additions and 10 deletions

View File

@ -15,6 +15,7 @@
let anchor let anchor
let dropdown let dropdown
let timeout let timeout
let open
// This is needed because display: contents is considered "invisible". // This is needed because display: contents is considered "invisible".
// It should only ever be an action button, so should be fine. // It should only ever be an action button, so should be fine.
@ -63,10 +64,11 @@
on:mouseenter={openOnHover ? show : null} on:mouseenter={openOnHover ? show : null}
on:mouseleave={openOnHover ? queueHide : null} on:mouseleave={openOnHover ? queueHide : null}
> >
<slot name="control" /> <slot name="control" {open} />
</div> </div>
<Popover <Popover
bind:this={dropdown} bind:this={dropdown}
bind:open
{anchor} {anchor}
{align} {align}
{portalTarget} {portalTarget}

View File

@ -60,10 +60,11 @@
.newStyles { .newStyles {
color: var(--spectrum-global-color-gray-700); color: var(--spectrum-global-color-gray-700);
} }
svg {
transition: color var(--spectrum-global-animation-duration-100, 130ms);
}
svg.hoverable { svg.hoverable {
pointer-events: all; pointer-events: all;
transition: color var(--spectrum-global-animation-duration-100, 130ms);
} }
svg.hoverable:hover { svg.hoverable:hover {
color: var(--hover-color) !important; color: var(--hover-color) !important;

View File

@ -88,16 +88,15 @@
display: grid; display: grid;
place-items: center; place-items: center;
transition: background 130ms ease-out; transition: background 130ms ease-out;
cursor: pointer;
} }
.icon:hover,
.icon:active, .icon:active,
.icon.open { .icon.open {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
cursor: pointer;
} }
.icon:hover :global(.spectrum-Icon), .icon:hover :global(svg),
.icon:active :global(.spectrum-Icon), .icon:active :global(svg),
.icon.open :global(.spectrum-Icon) { .icon.open :global(svg) {
color: var(--spectrum-global-color-gray-900) !important; color: var(--spectrum-global-color-gray-900) !important;
} }
</style> </style>

View File

@ -268,8 +268,8 @@
{/if} {/if}
{#if overflowedViews.length} {#if overflowedViews.length}
<ActionMenu align="right" bind:this={overflowMenu}> <ActionMenu align="right" bind:this={overflowMenu}>
<div slot="control"> <div slot="control" let:open>
<ActionButton icon="ChevronDown" quiet selected={viewHidden}> <ActionButton icon="ChevronDown" quiet selected={open || viewHidden}>
{overflowedViews.length} more {overflowedViews.length} more
</ActionButton> </ActionButton>
</div> </div>