-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1247 configure/review page redesign (#1252)
## Description This PR introduces some updates to the `configure` and `review` pages, tweaking the section header components. To accomplish this, two new complex components were introduced: - `Tooltip` - powered by [Floating UI](https://floating-ui.com/) (popperJS 3.0) In addition to the above, there are some refactoring on how theming works across Zarf UI, with the introduction of using the `html` `data-theme` property until such time that Unicorn UI's theming is fully mature. ## Related Issue Fixes #1247 ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist before merging - [ ] Test, docs, adr added or updated as needed - [x] [Contributor Guide Steps](https://github.com/defenseunicorns/zarf/blob/main/CONTRIBUTING.md#developer-workflow) followed
- Loading branch information
Showing
15 changed files
with
339 additions
and
131 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!-- | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| // SPDX-FileCopyrightText: 2021-Present The Zarf Authors | ||
| --> | ||
| <script lang="ts"> | ||
| import { Dialog, Typography, Button } from '@ui'; | ||
| import bigZarf from '@images/zarf-bubbles-right.png'; | ||
| export let pkgName: string; | ||
| </script> | ||
|
|
||
| <Dialog open clickAway={false}> | ||
| <div slot="content" class="dialog-content"> | ||
| <!-- @Noxsios TODO: replace w/ sad zarf --> | ||
| <img class="zarf-logo" width={60} height={60} src={bigZarf} alt="zarf-logo" /> | ||
| <Typography variant="h6">Package Not Found</Typography> | ||
| <Typography variant="body2"> | ||
| Make sure the following package is in the current working directory: | ||
| </Typography> | ||
| <Typography variant="code"><code>{pkgName}</code></Typography> | ||
| <div class="actions"> | ||
| <Button href="/" color="secondary" variant="flat" | ||
| >Return Home</Button | ||
| > | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
|
|
||
| <style> | ||
| .dialog-content { | ||
| display: flex; | ||
| gap: 1rem; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
| .actions { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: flex-end; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!-- | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| // SPDX-FileCopyrightText: 2021-Present The Zarf Authors | ||
| --> | ||
| <script lang="ts"> | ||
| import Icon from './icon.svelte'; | ||
| import Tooltip from './tooltip.svelte'; | ||
| import type { IconVariant } from './icon.svelte'; | ||
| export let icon: IconVariant = 'package'; | ||
| </script> | ||
|
|
||
| <div class="pkg-section-header"> | ||
| <div class="pkg-section-header-title"> | ||
| <Icon variant={icon} /> | ||
| <slot name="title" /> | ||
| {#if $$slots.tooltip} | ||
| <div class="tooltip-container"><Tooltip><slot name="tooltip" /></Tooltip></div> | ||
| {/if} | ||
| </div> | ||
| {#if $$slots.actions} | ||
| <div class="pkg-section-header-actions"> | ||
| <slot name="actions" /> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style> | ||
| .pkg-section-header-title { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.75rem; | ||
| } | ||
| .pkg-section-header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| background-color: var(--mdc-theme-paper); | ||
| color: var(--mdc-theme-on-secondary); | ||
| stroke: var(--mdc-theme-on-secondary); | ||
| padding: 0.75rem 2rem; | ||
| } | ||
| :global(:root[data-theme='dark']) .pkg-section-header { | ||
| background-color: var(--mdc-theme-surface); | ||
| } | ||
| .pkg-section-header-actions { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .tooltip-container { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| } | ||
| :global(.tooltip-container .tooltip-trigger) { | ||
| color: rgba(255, 255, 255, 0.56); | ||
| } | ||
| :global(.tooltip-container .tooltip) { | ||
| color: var(--mdc-theme-on-primary); | ||
| } | ||
| :global(:root[data-theme='dark'] .tooltip-container .tooltip) { | ||
| color: var(--mdc-theme-on-secondary); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <!-- | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| // SPDX-FileCopyrightText: 2021-Present The Zarf Authors | ||
| --> | ||
| <script lang="ts"> | ||
| import Icon from './icon.svelte'; | ||
| import { computePosition, flip, shift, offset, arrow, autoUpdate } from '@floating-ui/dom'; | ||
| import { onDestroy, onMount } from 'svelte'; | ||
| let tooltip: HTMLElement; | ||
| let icon: HTMLElement; | ||
| let arrowRef: HTMLElement; | ||
| type Placement = | ||
| | 'top' | ||
| | 'bottom' | ||
| | 'left' | ||
| | 'right' | ||
| | 'top-start' | ||
| | 'top-end' | ||
| | 'bottom-start' | ||
| | 'bottom-end' | ||
| | 'left-start' | ||
| | 'left-end' | ||
| | 'right-start' | ||
| | 'right-end'; | ||
| export let placement: Placement = 'top'; | ||
| function update() { | ||
| computePosition(icon, tooltip, { | ||
| placement, | ||
| middleware: [offset(6), flip(), shift(), arrow({ element: arrowRef })] | ||
| }).then(({ x, y, placement, middlewareData }) => { | ||
| Object.assign(tooltip.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| const arrowX = middlewareData.arrow?.x; | ||
| const arrowY = middlewareData.arrow?.y; | ||
| const staticSide: any = { | ||
| top: 'bottom', | ||
| right: 'left', | ||
| bottom: 'top', | ||
| left: 'right' | ||
| }[placement.split('-')[0]]; | ||
| Object.assign(arrowRef.style, { | ||
| left: arrowX != undefined ? `${arrowX}px` : '', | ||
| top: arrowY != undefined ? `${arrowY}px` : '', | ||
| right: '', | ||
| bottom: '', | ||
| [staticSide]: '-4px' | ||
| }); | ||
| }); | ||
| } | ||
| function showTooltip() { | ||
| tooltip.style.display = 'block'; | ||
| update(); | ||
| } | ||
| function hideTooltip() { | ||
| tooltip.style.display = ''; | ||
| } | ||
| let cleanup: () => void; | ||
| onMount(() => { | ||
| cleanup = autoUpdate(icon, tooltip, update); | ||
| }); | ||
| onDestroy(() => { | ||
| cleanup(); | ||
| }); | ||
| </script> | ||
|
|
||
| <button | ||
| aria-describedby="tooltip" | ||
| bind:this={icon} | ||
| on:mouseenter={showTooltip} | ||
| on:mouseleave={hideTooltip} | ||
| on:focus={showTooltip} | ||
| on:blur={hideTooltip} | ||
| class="tooltip-trigger" | ||
| > | ||
| <Icon variant="info" /></button | ||
| > | ||
| <div role="tooltip" bind:this={tooltip} class="tooltip"> | ||
| <slot /> | ||
| <div bind:this={arrowRef} class="arrow" /> | ||
| </div> | ||
|
|
||
| <style> | ||
| .tooltip { | ||
| display: none; | ||
| width: max-content; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| background: var(--mdc-theme-surface); | ||
| border: 1px solid var(--mdc-theme-on-surface); | ||
| font-weight: bold; | ||
| padding: 5px; | ||
| border-radius: 4px; | ||
| font-size: 90%; | ||
| } | ||
| .arrow { | ||
| position: absolute; | ||
| background: var(--mdc-theme-surface); | ||
| border-bottom: 1px solid var(--mdc-theme-on-surface); | ||
| border-right: 1px solid var(--mdc-theme-on-surface); | ||
| width: 8px; | ||
| height: 8px; | ||
| transform: rotate(45deg); | ||
| } | ||
| .tooltip-trigger { | ||
| background: inherit; | ||
| border: none; | ||
| padding: 0; | ||
| } | ||
| </style> |
Oops, something went wrong.