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

Use more CSS variables and add utils to spreadsheets

This commit is contained in:
Andrew Kingston 2023-02-21 12:05:16 +00:00
parent 3abc2ddbd1
commit 8da1e507b1
6 changed files with 50 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/app/spreadsheet/DateCell.svelte
View File

@ -48,13 +48,13 @@
<style>
.container {
padding: 0 8px;
padding: 0 var(--cell-padding);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
gap: 4px;
gap: var(--cell-spacing);
}
.value {
flex: 1 1 auto;

43
packages/client/src/components/app/spreadsheet/OptionsCell.svelte
View File

@ -1,5 +1,6 @@
<script>
import { Icon } from "@budibase/bbui"
import { getColor } from "./utils"
export let value
export let schema
@ -22,12 +23,9 @@
}
}
const getColor = value => {
const index = options.indexOf(value)
if (!value || index === -1) {
return null
}
return `hsla(${((index + 1) * 222) % 360}, 90%, 75%, 0.3)`
const getOptionColor = value => {
const index = value ? options.indexOf(value) : null
return getColor(index)
}
const toggleOption = option => {
@ -60,7 +58,7 @@
>
<div class="values">
{#each values as val (val)}
{@const color = getColor(val)}
{@const color = getOptionColor(val)}
{#if color}
<div class="badge text" style="--color: {color}">
{val}
@ -80,7 +78,7 @@
{#if open}
<div class="options">
{#each values as val (val)}
{@const color = getColor(val)}
{@const color = getOptionColor(val)}
<div class="option" on:click={() => toggleOption(val)}>
<div class="badge text" style="--color: {color}">
{val}
@ -93,7 +91,7 @@
{/each}
{#each unselectedOptions as option (option)}
<div class="option" on:click={() => toggleOption(option)}>
<div class="badge text" style="--color: {getColor(option)}">
<div class="badge text" style="--color: {getOptionColor(option)}">
{option}
</div>
</div>
@ -121,9 +119,9 @@
align-items: center;
flex: 1 1 auto;
width: 0;
gap: 4px;
gap: var(--cell-spacing);
overflow: hidden;
padding: 0 8px;
padding: 0 var(--cell-padding);
}
.text {
overflow: hidden;
@ -134,9 +132,9 @@
flex: 0 0 auto;
}
.badge {
padding: 2px 8px;
padding: 2px var(--cell-padding);
background: var(--color);
border-radius: 8px;
border-radius: var(--cell-padding);
user-select: none;
}
.arrow {
@ -153,6 +151,13 @@
var(--cell-background) 40%
);
}
:global(.cell.hovered) .arrow {
background: linear-gradient(
to right,
transparent 0%,
var(--cell-background-hover) 40%
);
}
.options {
min-width: 100%;
position: absolute;
@ -168,19 +173,19 @@
z-index: 1;
}
.option {
flex: 0 0 32px;
padding: 0 8px;
flex: 0 0 var(--cell-height);
padding: 0 var(--cell-padding);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 4px;
background-color: var(--spectrum-global-color-gray-50);
gap: var(--cell-spacing);
background-color: var(--cell-background);
}
.option:first-child {
flex: 0 0 31px;
flex: 0 0 calc(var(--cell-height) - 1px);
}
.option:hover {
background-color: var(--spectrum-global-color-gray-100);
background-color: var(--cell-background-hover);
}
</style>

19
packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
View File

@ -1,14 +1,7 @@
<script>
import { getColor } from "./utils"
export let value
$: console.log(value)
const getColor = idx => {
if (!value || idx === -1) {
return null
}
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
}
</script>
<div class="container">
@ -24,17 +17,17 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 0 8px;
padding: 0 var(--cell-padding);
flex: 1 1 auto;
width: 0;
gap: 4px;
gap: var(--cell-spacing);
overflow: hidden;
}
.badge {
flex: 0 0 auto;
padding: 2px 8px;
padding: 2px var(--cell-padding);
background: var(--color);
border-radius: 8px;
border-radius: var(--cell-padding);
user-select: none;
}
</style>

15
packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
View File

@ -369,6 +369,10 @@
/* Variables */
--cell-background: var(--spectrum-global-color-gray-50);
--cell-background-hover: var(--spectrum-global-color-gray-100);
--cell-padding: 8px;
--cell-spacing: 4px;
--cell-height: 32px;
--cell-font-size: 14px;
}
.spreadsheet {
display: grid;
@ -407,7 +411,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 4px;
gap: var(--cell-spacing);
}
.delete {
display: flex;
@ -424,7 +428,7 @@
}
.cell {
height: 32px;
height: var(--cell-height);
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
border-right: 1px solid var(--spectrum-global-color-gray-300);
display: flex;
@ -432,14 +436,13 @@
justify-content: flex-start;
align-items: center;
color: var(--spectrum-global-color-gray-900);
font-size: 14px;
gap: 4px;
font-size: var(--cell-font-size);
gap: var(--cell-spacing);
background: var(--cell-background);
position: relative;
}
.cell.hovered {
background: var(--cell-background-hover);
--cell-background: var(--cell-background-hover);
}
.cell.selected {
box-shadow: inset 0 0 0 2px var(--spectrum-global-color-blue-400);
@ -470,7 +473,7 @@
background: var(--spectrum-global-color-gray-200);
position: sticky;
top: 0;
padding: 0 8px;
padding: 0 var(--cell-padding);
z-index: 3;
border-color: var(--spectrum-global-color-gray-400);
}

6
packages/client/src/components/app/spreadsheet/TextCell.svelte
View File

@ -22,7 +22,7 @@
<style>
.text-cell {
padding: 0 8px;
padding: 0 var(--cell-padding);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -30,12 +30,12 @@
input {
border: none;
padding: 0;
margin: 0 8px;
margin: 0 var(--cell-padding);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: none;
font-size: 14px;
font-size: var(--cell-font-size);
font-family: var(--font-sans);
color: inherit;
}

6
packages/client/src/components/app/spreadsheet/utils.js Normal file
View File

@ -0,0 +1,6 @@
export const getColor = idx => {
if (idx == null || idx === -1) {
return null
}
return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
}