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