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

Merge pull request #2354 from Budibase/joe-tweaks 

Some tweaks for Joe
This commit is contained in:
Andrew Kingston 2021-08-13 14:08:56 +01:00 committed by GitHub
parent 1edd6d934e 706ba47e61
commit 2b6fa5cfbf
6 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/bbui/src/ColorPicker/ColorPicker.svelte
View File

@ -19,7 +19,7 @@
const dispatch = createEventDispatcher()
const categories = [
{
label: "Grays",
label: "Theme",
colors: [
"gray-50",
"gray-75",
@ -72,6 +72,9 @@
"blue-700",
"indigo-700",
"magenta-700",
"static-white",
"static-black",
],
},
]
@ -101,10 +104,20 @@
}
const getCheckColor = value => {
return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
// Use dynamic color for theme grays
if (value?.includes("gray")) {
return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
? "var(--spectrum-global-color-gray-900)"
: "var(--spectrum-global-color-gray-50)"
}
// Use black check for static white
if (value?.includes("static-black")) {
return "var(--spectrum-global-color-static-gray-50)"
}
return "var(--spectrum-global-color-static-gray-900)"
}
</script>
<div class="container">

8
packages/builder/src/components/design/PropertiesPanel/componentStyles.js
View File

@ -14,6 +14,7 @@ export const margin = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -34,6 +35,7 @@ export const margin = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -54,6 +56,7 @@ export const margin = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -74,6 +77,7 @@ export const margin = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -101,6 +105,7 @@ export const padding = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -121,6 +126,7 @@ export const padding = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -141,6 +147,7 @@ export const padding = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
@ -161,6 +168,7 @@ export const padding = {
options: [
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "12px", value: "12px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },

28
packages/standard-components/manifest.json
View File

@ -268,6 +268,10 @@
{
"label": "Warning",
"value": "warning"
},
{
"label": "Over Background",
"value": "overBackground"
}
],
"defaultValue": "primary"
@ -596,6 +600,9 @@
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Extra Small",
"value": "XS"
}, {
"label": "Small",
"value": "S"
}, {
@ -604,6 +611,15 @@
}, {
"label": "Large",
"value": "L"
}, {
"label": "Extra Large",
"value": "XL"
}, {
"label": "2XL",
"value": "XXL"
}, {
"label": "3XL",
"value": "XXXL"
}]
},
{
@ -690,6 +706,9 @@
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Extra Small",
"value": "XS"
}, {
"label": "Small",
"value": "S"
}, {
@ -698,6 +717,15 @@
}, {
"label": "Large",
"value": "L"
}, {
"label": "Extra Large",
"value": "XL"
}, {
"label": "2XL",
"value": "XXL"
}, {
"label": "3XL",
"value": "XXXL"
}]
},
{

1
packages/standard-components/package.json
View File

@ -34,6 +34,7 @@
"gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
"dependencies": {
"@budibase/bbui": "^0.9.105-alpha.8",
"@spectrum-css/button": "^3.0.3",
"@spectrum-css/card": "^3.0.3",
"@spectrum-css/divider": "^1.0.3",
"@spectrum-css/link": "^3.1.3",

4
packages/standard-components/src/Button.svelte
View File

@ -1,5 +1,6 @@
<script>
import { getContext } from "svelte"
import "@spectrum-css/button/dist/index-vars.css"
const { styleable } = getContext("sdk")
const component = getContext("component")
@ -27,4 +28,7 @@
width: fit-content;
width: -moz-fit-content;
}
.spectrum-Button--overBackground:hover {
color: #555;
}
</style>

13
packages/standard-components/src/Text.svelte
View File

@ -16,6 +16,8 @@
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
$: sizeClass = `spectrum-Body--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
@ -41,7 +43,7 @@
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
class="spectrum-Body {sizeClass} {alignClass}"
>
{componentText}
</p>
@ -65,15 +67,6 @@
.underline {
text-decoration: underline;
}
.size--S {
font-size: 14px;
}
.size--M {
font-size: 16px;
}
.size--L {
font-size: 18px;
}
.align--left {
text-align: left;
}