MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update lots of font sizes, padding and other UI improvements

This commit is contained in:
Andrew Kingston 2021-04-23 10:48:19 +01:00
parent 41740621a5
commit f859ad5210
25 changed files with 191 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/bbui/src/Button/Button.svelte
View File

@ -3,11 +3,11 @@
export let disabled = false export let disabled = false
export let size = "M" export let size = "M"
export let cta = false; export let cta = false
export let primary = false; export let primary = false
export let secondary = false; export let secondary = false
export let warning = false export let warning = false
export let overBackground = false; export let overBackground = false
export let quiet = false export let quiet = false
export let icon = undefined export let icon = undefined
export let active = false export let active = false
@ -44,8 +44,4 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
button.active {
color: var(--spectrum-semantic-cta-color-background-default);
}
</style> </style>

5
packages/bbui/src/DetailSummary/DetailSummary.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import Icon from '../Icon/Icon.svelte' import Icon from "../Icon/Icon.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -58,9 +58,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: capitalize; text-transform: capitalize;
white-space: nowrap; white-space: nowrap;
user-select: none;
} }
.name.thin { .name.thin {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.icon { .icon {

3
packages/bbui/src/Modal/Modal.svelte
View File

@ -99,5 +99,8 @@
max-height: none; max-height: none;
margin: 40px 0; margin: 40px 0;
transform: none; transform: none;
--spectrum-dialog-confirm-border-radius: var(
--spectrum-global-dimension-size-100
);
} }
</style> </style>

6
packages/bbui/src/Popover/Popover.svelte
View File

@ -42,3 +42,9 @@
</div> </div>
</Portal> </Portal>
{/if} {/if}
<style>
.spectrum-Popover {
min-width: var(--spectrum-global-dimension-size-2000) !important;
}
</style>

4
packages/bbui/src/Table/Table.svelte
View File

@ -303,7 +303,7 @@
<style> <style>
.wrapper { .wrapper {
background-color: var(--spectrum-alias-background-color-default); background-color: var(--spectrum-alias-background-color-secondary);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -364,7 +364,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
background-color: var(--spectrum-alias-background-color-default); background-color: var(--spectrum-alias-background-color-secondary);
border-bottom: 1px solid border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
} }

22
packages/bbui/src/Tabs/Tab.svelte
View File

@ -1,11 +1,11 @@
<script> <script>
import { getContext, onMount } from 'svelte' import { getContext, onMount } from "svelte"
import Portal from "svelte-portal" import Portal from "svelte-portal"
export let title export let title
export let icon = ''; export let icon = ""
const selected = getContext('tab') const selected = getContext("tab")
let tab; let tab
let tabInfo let tabInfo
const setTabInfo = () => { const setTabInfo = () => {
tabInfo = tab.getBoundingClientRect() tabInfo = tab.getBoundingClientRect()
@ -17,12 +17,20 @@
onMount(() => { onMount(() => {
setTabInfo() setTabInfo()
}) })
</script> </script>
<div bind:this={tab} on:click={() => $selected = {...$selected, title, info: tab.getBoundingClientRect()} } class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0"> <div
bind:this={tab}
on:click={() => ($selected = { ...$selected, title, info: tab.getBoundingClientRect() })}
class:is-selected={$selected.title === title}
class="spectrum-Tabs-item"
tabindex="0">
{#if icon} {#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder"> <svg
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Folder">
<use xlink:href="#spectrum-icon-18-{icon}" /> <use xlink:href="#spectrum-icon-18-{icon}" />
</svg> </svg>
{/if} {/if}

39
packages/bbui/src/Tabs/Tabs.svelte
View File

@ -1,41 +1,41 @@
<script> <script>
import "@spectrum-css/tabs/dist/index-vars.css" import "@spectrum-css/tabs/dist/index-vars.css"
import { writable } from 'svelte/store' import { writable } from "svelte/store"
import { onMount, setContext, createEventDispatcher } from 'svelte' import { onMount, setContext, createEventDispatcher } from "svelte"
export let selected; export let selected
export let vertical = false export let vertical = false
let _id = id() let _id = id()
const tab = writable({ title: selected, id: _id }) const tab = writable({ title: selected, id: _id })
setContext('tab', tab) setContext("tab", tab)
let container; let container
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
$: selected = $tab.title $: selected = $tab.title
$: selected = dispatch('select', selected) $: selected = dispatch("select", selected)
let top, left, width, height; let top, left, width, height
$: calculateIndicatorLength($tab) $: calculateIndicatorLength($tab)
$: calculateIndicatorOffset($tab) $: calculateIndicatorOffset($tab)
function calculateIndicatorLength() { function calculateIndicatorLength() {
if (!vertical) { if (!vertical) {
width = $tab.info?.width + 24 + 'px' width = $tab.info?.width + "px"
height = $tab.info?.height height = $tab.info?.height
} else { } else {
height = $tab.info?.height + 4 + 'px' height = $tab.info?.height + 4 + "px"
width = $tab.info?.width width = $tab.info?.width
} }
} }
function calculateIndicatorOffset() { function calculateIndicatorOffset() {
if (!vertical) { if (!vertical) {
left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px' left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
top = $tab.info?.top top = $tab.info?.top
} else { } else {
top = $tab.info?.top - container?.getBoundingClientRect().top + 'px' top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
left = $tab.info?.left left = $tab.info?.left
} }
} }
@ -54,18 +54,29 @@
) )
} }
</script> </script>
<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
<div
bind:this={container}
class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
<slot /> <slot />
<div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div> {#if $tab.info}
<div
class="spectrum-Tabs-selectionIndicator indicator-transition"
style="width: {width}; height: {height}; left: {left}; top: {top};" />
{/if}
</div> </div>
<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" /> <div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
<style> <style>
.spectrum-Tabs {
padding-left: var(--spacing-xl);
padding-right: var(--spacing-xl);
}
.spectrum-Tabs-content { .spectrum-Tabs-content {
margin-top: var(--spectrum-global-dimension-static-size-150); margin-top: var(--spectrum-global-dimension-static-size-150);
} }
.indicator-transition { .indicator-transition {
transition: all 200ms transition: all 200ms;
} }
</style> </style>

63
packages/bbui/src/bbui.css
View File

@ -45,7 +45,7 @@
--font-bold: "Inter Bold"; --font-bold: "Inter Bold";
--font-medium: "Inter Medium"; --font-medium: "Inter Medium";
--font-light: "Inter Light"; --font-light: "Inter Light";
--font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
@ -96,67 +96,6 @@
--border-transparent: 2px transparent solid; --border-transparent: 2px transparent solid;
} }
h1 {
font-size: 3rem;
font-weight: 700;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h2 {
font-size: 2.25rem;
font-weight: 600;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h3 {
font-size: 1.7rem;
font-weight: 600;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h4 {
font-size: var(--font-size-xl);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h5 {
font-size: var(--font-size-l);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h6 {
font-size: var(--font-size-m);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
p {
font-size: var(--font-size);
font-family: var(--font-sans);
font-weight: 400;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
a { a {
text-decoration: none; text-decoration: none;
} }
.spectrum {
--spectrum-alias-body-text-font-family: "Inter", sans-serif;
}

4
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -24,14 +24,14 @@
<style> <style>
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-xl);
} }
i { i {
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
top: var(--spacing-l); top: var(--spacing-l);
right: var(--spacing-l); right: var(--spacing-xl);
} }
.title { .title {

6
packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
View File

@ -1,9 +1,8 @@
<script> <script>
import { Button, Input } from "@budibase/bbui" import { Button, Input, notifications, Heading } from "@budibase/bbui"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend" import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { notifications } from "@budibase/bbui"
import analytics from "analytics" import analytics from "analytics"
export let onClosed export let onClosed
@ -31,7 +30,7 @@
</script> </script>
<div class="actions"> <div class="actions">
<h5>Create View</h5> <Heading s>Create View</Heading>
<Input label="View Name" thin bind:value={name} /> <Input label="View Name" thin bind:value={name} />
<div class="footer"> <div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button> <Button secondary on:click={onClosed}>Cancel</Button>
@ -49,6 +48,7 @@
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
padding: var(--spacing-xl); padding: var(--spacing-xl);
width: 240px;
} }
.footer { .footer {

5
packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Button, Select } from "@budibase/bbui" import { Button, Select, Heading } from "@budibase/bbui"
import download from "downloadjs" import download from "downloadjs"
const FORMATS = [ const FORMATS = [
@ -29,7 +29,7 @@
</script> </script>
<div class="popover"> <div class="popover">
<h5>Export Data</h5> <Heading s>Export Data</Heading>
<Select <Select
label="Format" label="Format"
bind:value={exportFormat} bind:value={exportFormat}
@ -47,6 +47,7 @@
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
padding: var(--spacing-xl); padding: var(--spacing-xl);
width: 240px;
} }
h5 { h5 {

20
packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
View File

@ -1,7 +1,15 @@
<script> <script>
import { roles, permissions as permissionsStore } from "stores/backend" import { roles, permissions as permissionsStore } from "stores/backend"
import { notifications } from "@budibase/bbui" import {
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui" Button,
Label,
Input,
Select,
Spacer,
notifications,
Heading,
Body,
} from "@budibase/bbui"
import { capitalise } from "../../../../helpers" import { capitalise } from "../../../../helpers"
export let resourceId export let resourceId
@ -24,11 +32,9 @@
</script> </script>
<div class="popover"> <div class="popover">
<h5>Who Can Access This Data?</h5> <Heading s>Who Can Access This Data?</Heading>
<div class="note"> <div class="note">
<Label extraSmall grey> <Body s>Specify the minimum access level role for this data.</Body>
Specify the minimum access level role for this data.
</Label>
</div> </div>
<Spacer large /> <Spacer large />
<div class="row"> <div class="row">
@ -74,7 +80,7 @@
.row { .row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-s);
} }
.note { .note {

2
packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
View File

@ -221,7 +221,7 @@
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
align-items: center; align-items: center;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.display-column { .display-column {

2
packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
View File

@ -44,7 +44,7 @@
.title, .title,
.subtitle { .subtitle {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.title { .title {

2
packages/builder/src/components/common/NavItem.svelte
View File

@ -97,7 +97,7 @@
.text { .text {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: 500; font-weight: 500;
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

4
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -102,8 +102,8 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-s);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.category span { .category span {
font-weight: 500; font-weight: 500;

23
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View File

@ -118,7 +118,7 @@
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
top: var(--spacing-l); top: var(--spacing-l);
right: var(--spacing-l); right: var(--spacing-xl);
} }
.title i:hover { .title i:hover {
cursor: pointer; cursor: pointer;
@ -135,25 +135,6 @@
} }
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-xl);
}
.search-screens {
position: relative;
}
.search-screens i {
right: 2px;
bottom: 2px;
position: absolute;
box-sizing: border-box;
padding: var(--spacing-s);
border-left: 1px solid var(--grey-4);
background-color: var(--grey-2);
border-top-right-radius: var(--border-radius-m);
border-bottom-right-radius: var(--border-radius-m);
color: var(--grey-7);
font-size: 14px;
line-height: 15px;
top: auto;
} }
</style> </style>

10
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { get } from "svelte/store" import { get } from "svelte/store"
import { store, selectedComponent, currentAsset } from "builderStore" import { store, selectedComponent, currentAsset } from "builderStore"
import { Tabs, Tab } from '@budibase/bbui' import { Tabs, Tab } from "@budibase/bbui"
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
import CategoryTab from "./CategoryTab.svelte" import CategoryTab from "./CategoryTab.svelte"
import DesignView from "./DesignView.svelte" import DesignView from "./DesignView.svelte"
@ -77,14 +77,14 @@
</Tabs> </Tabs>
<style> <style>
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-xl);
} }
.instance-name { .instance-name {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
margin-bottom: var(--spacing-l); margin-bottom: var(--spacing-m);
margin-top: var(--spacing-xs);
font-weight: 500; font-weight: 500;
color: var(--grey-7); color: var(--grey-7);
} }

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
View File

@ -29,7 +29,7 @@
background: var(--background); background: var(--background);
color: var(--grey-7); color: var(--grey-7);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
font-weight: 500; font-weight: 500;
transition: all 0.3s; transition: all 0.3s;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;

4
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
View File

@ -179,8 +179,8 @@
gap: var(--spacing-s); gap: var(--spacing-s);
} }
.empty { .empty {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
color: var(--grey-5); color: var(--grey-6);
} }
</style> </style>

6
packages/builder/src/components/start/AppCard.svelte
View File

@ -26,7 +26,7 @@
</script> </script>
<div class="apps-card"> <div class="apps-card">
<Heading s h3>{name}</Heading> <Heading s>{name}</Heading>
<Spacer medium /> <Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}> <div class="card-footer" data-cy={`app-${name}`}>
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}> <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
@ -36,7 +36,9 @@
</ActionButton> </ActionButton>
{#if appExportLoading} {#if appExportLoading}
<Spinner size="10" /> <Spinner size="10" />
{:else}<ActionButton icon="Download" quiet />{/if} {:else}
<ActionButton icon="Download" quiet />
{/if}
</div> </div>
</div> </div>

11
packages/builder/src/components/start/AppList.svelte
View File

@ -19,8 +19,8 @@
</script> </script>
<div class="root"> <div class="root">
<Heading m h2>Your Apps</Heading> <Heading m>Your Apps</Heading>
<Divider s /> <Divider m />
{#await promise} {#await promise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -37,11 +37,14 @@
</div> </div>
<style> <style>
.root {
margin-top: 10px;
}
.apps { .apps {
margin-top: var(--spectrum-global-dimension-static-size-150); margin-top: var(--layout-m);
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: var(--layout-m); grid-gap: var(--layout-s);
justify-content: start; justify-content: start;
} }
</style> </style>

6
packages/builder/src/global.css
View File

@ -6,6 +6,10 @@ html, body {
min-height: 100%; min-height: 100%;
} }
.spectrum--light {
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
}
body { body {
--background: var(--spectrum-alias-background-color-primary); --background: var(--spectrum-alias-background-color-primary);
--background-alt: var(--spectrum-alias-background-color-secondary); --background-alt: var(--spectrum-alias-background-color-secondary);
@ -24,7 +28,7 @@ body {
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--ink); color: var(--ink);
background-color: var(--background); background-color: var(--background-alt);
} }
#app { #app {

2
packages/builder/src/pages/builder/[application]/automate/_layout.svelte
View File

@ -33,6 +33,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
border-right: var(--border-light); border-right: var(--border-light);
background-color: var(--background);
} }
.content { .content {
@ -54,5 +55,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
background-color: var(--background);
} }
</style> </style>

6
packages/builder/src/pages/builder/[application]/data/_layout.svelte
View File

@ -69,7 +69,6 @@
height: calc(100vh - 60px); height: calc(100vh - 60px);
display: grid; display: grid;
grid-template-columns: 260px minmax(0, 1fr); grid-template-columns: 260px minmax(0, 1fr);
background: var(--grey-2);
} }
.content { .content {
@ -81,13 +80,12 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
background: var(--background);
} }
.content :global(> span) { .content :global(> span) {
display: contents; display: contents;
} }
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-xl);
} }
.nav { .nav {
@ -105,7 +103,7 @@
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
top: var(--spacing-l); top: var(--spacing-l);
right: var(--spacing-l); right: var(--spacing-xl);
} }
i:hover { i:hover {