UI/UX code review changes
This commit is contained in:
parent
658cf60d3c
commit
bd8b47318d
6 changed files with 66 additions and 38 deletions
|
@ -13,6 +13,7 @@
|
|||
export let icon = undefined
|
||||
export let active = false
|
||||
export let tooltip = undefined
|
||||
export let dataCy
|
||||
|
||||
let showTooltip = false
|
||||
</script>
|
||||
|
@ -27,6 +28,7 @@
|
|||
class:active
|
||||
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
|
||||
{disabled}
|
||||
data-cy={dataCy}
|
||||
on:click|preventDefault
|
||||
on:mouseover={() => (showTooltip = true)}
|
||||
on:focus={() => (showTooltip = true)}
|
||||
|
|
|
@ -37,7 +37,11 @@
|
|||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
|
||||
<div
|
||||
class={overlayEnabled && imageLoaded
|
||||
? "template-thumbnail-action-overlay"
|
||||
: ""}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -52,8 +56,7 @@
|
|||
}
|
||||
|
||||
.template-card:hover .template-thumbnail-action-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.template-thumbnail-action-overlay {
|
||||
|
@ -62,10 +65,13 @@
|
|||
left: 0px;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
display: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
opacity: 0;
|
||||
transition: opacity var(--spectrum-global-animation-duration-100) ease;
|
||||
border-top-right-radius: inherit;
|
||||
border-top-left-radius: inherit;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
<script>
|
||||
import { Layout, Detail, Heading, Button, Modal } from "@budibase/bbui"
|
||||
import {
|
||||
Layout,
|
||||
Detail,
|
||||
Heading,
|
||||
Button,
|
||||
Modal,
|
||||
ActionGroup,
|
||||
ActionButton,
|
||||
} from "@budibase/bbui"
|
||||
import TemplateCard from "components/common/TemplateCard.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
|
||||
|
@ -46,34 +54,30 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="template-category-filters">
|
||||
<div class="template-header">
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="S">Templates</Heading>
|
||||
|
||||
<div class="template-category-filters spectrum-ActionGroup">
|
||||
<button
|
||||
<ActionGroup>
|
||||
<ActionButton
|
||||
selected={!selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = null
|
||||
}}
|
||||
class="template-category-filter-all template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM
|
||||
spectrum-ActionGroup-item {!selectedTemplateCategory ||
|
||||
'is-selected'}"
|
||||
>
|
||||
<span class="spectrum-ActionButton-label">All</span>
|
||||
</button>
|
||||
|
||||
All
|
||||
</ActionButton>
|
||||
{#each templateCategories as templateCategoryKey}
|
||||
<button
|
||||
<ActionButton
|
||||
selected={templateCategoryKey == selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = templateCategoryKey
|
||||
}}
|
||||
class="template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM
|
||||
spectrum-ActionGroup-item {templateCategoryKey ==
|
||||
selectedTemplateCategory || 'is-selected'}"
|
||||
>
|
||||
<span class="spectrum-ActionButton-label">{templateCategoryKey}</span>
|
||||
</button>
|
||||
{templateCategoryKey}
|
||||
</ActionButton>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,6 @@
|
|||
Body,
|
||||
Modal,
|
||||
Divider,
|
||||
Link,
|
||||
} from "@budibase/bbui"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import TemplateDisplay from "components/common/TemplateDisplay.svelte"
|
||||
|
@ -61,15 +60,16 @@
|
|||
<Page wide>
|
||||
<Layout noPadding gap="XL">
|
||||
<span>
|
||||
<Link
|
||||
<Button
|
||||
quiet
|
||||
secondary
|
||||
icon={"ChevronLeft"}
|
||||
on:click={() => {
|
||||
$goto("../")
|
||||
}}
|
||||
>
|
||||
< Back
|
||||
</Link>
|
||||
Back
|
||||
</Button>
|
||||
</span>
|
||||
|
||||
<div class="title">
|
||||
|
@ -82,10 +82,17 @@
|
|||
</Layout>
|
||||
|
||||
<div class="buttons">
|
||||
<Button size="L" icon="Add" cta on:click={initiateAppCreation}>
|
||||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="L"
|
||||
icon="Add"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
{createAppButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
icon="Import"
|
||||
size="L"
|
||||
quiet
|
||||
|
@ -96,9 +103,10 @@
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider size="S" />
|
||||
</div>
|
||||
|
||||
<Divider size="S" />
|
||||
|
||||
{#if loaded && $templates?.length}
|
||||
<TemplateDisplay templates={$templates} />
|
||||
{/if}
|
||||
|
|
|
@ -299,7 +299,13 @@
|
|||
</Layout>
|
||||
|
||||
<div class="buttons">
|
||||
<Button size="L" icon="Add" cta on:click={initiateAppCreation}>
|
||||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="L"
|
||||
icon="Add"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
{createAppButtonText}
|
||||
</Button>
|
||||
{#if $apps?.length > 0}
|
||||
|
@ -315,6 +321,7 @@
|
|||
{/if}
|
||||
{#if !$apps?.length}
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
icon="Import"
|
||||
size="L"
|
||||
quiet
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import { Layout, Page, notifications, Link } from "@budibase/bbui"
|
||||
import { Layout, Page, notifications, Button } from "@budibase/bbui"
|
||||
import TemplateDisplay from "components/common/TemplateDisplay.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import { templates } from "stores/portal"
|
||||
|
@ -25,15 +25,16 @@
|
|||
<Page wide>
|
||||
<Layout noPadding gap="XL">
|
||||
<span>
|
||||
<Link
|
||||
<Button
|
||||
quiet
|
||||
secondary
|
||||
icon={"ChevronLeft"}
|
||||
on:click={() => {
|
||||
$goto("../")
|
||||
}}
|
||||
>
|
||||
< Back
|
||||
</Link>
|
||||
Back
|
||||
</Button>
|
||||
</span>
|
||||
{#if loaded && $templates?.length}
|
||||
<TemplateDisplay templates={$templates} />
|
||||
|
|
Loading…
Reference in a new issue