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

Merge pull request #260 from Budibase/WIP---Frontend-Components-Blocks-UI 

Component items ui updated
This commit is contained in:
Joe 2020-05-27 15:41:25 +01:00 committed by GitHub
parent 9070fa76f3 789e51e123
commit 87e272dcc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -109,7 +109,7 @@
.title > div:nth-child(1) {
grid-column-start: name;
color: var(--secondary100);
color: var(--ink);
}
.title > div:nth-child(2) {

29
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View File

@ -52,32 +52,9 @@
</div>
<style>
.tabs {
display: flex;
justify-content: center;
list-style: none;
margin: 0 auto;
padding: 0 30px;
border-bottom: 1px solid #d8d8d8;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14px;
}
li {
color: #808192;
margin: 0 5px;
padding: 0 8px;
cursor: pointer;
}
.panel {
padding: 20px;
}
.active {
border-bottom: solid 3px #0055ff;
color: #393c44;
padding: 20px 0px;
display: flex;
flex-wrap: wrap;
}
</style>

2
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View File

@ -55,7 +55,7 @@
display: flex;
flex-direction: column;
padding: 20px 20px;
border-left: solid 1px #e8e8ef;
border-left: solid 1px var(--grey);
}
.switcher {

43
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View File

@ -8,59 +8,48 @@
</div>
<div class="item-text">
<div class="item-name">{item.name}</div>
<div class="item-description">
<p>{item.description}</p>
</div>
</div>
</div>
<style>
.item-item {
display: flex;
flex-direction: row;
padding: 10px 0px 8px 10px;
align-items: center;
flex-direction: column;
cursor: pointer;
margin-bottom: 8px;
padding: 8px 0px 16px 0px;
width: 120px;
height: 80px;
justify-content: center;
align-items: center;
margin-right: 8px;
background-color: var(--grey-light);
border-radius: 3px;
}
.item-item:hover {
background: #fbfbfb;
border-radius: 5px;
background: var(--grey);
border-radius: 3px;
transition: all 0.2s;
}
.item-icon {
flex: 0 0 40px;
background: #f1f4fc;
height: 40px;
border-radius: 5px;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.item-text {
display: flex;
padding-left: 16px;
padding-top: 8px;
flex-direction: column;
}
.item-name {
font-size: 14px;
font-weight: 500;
}
.item-description {
font-size: 12px;
color: #808192;
}
p {
line-height: 15px;
font-weight: 400;
}
i {
font-size: 24px;
color: #808192;
color: var(--ink-light);
}
</style>

80
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -10,15 +10,6 @@ export default {
name: "Basic",
isCategory: true,
children: [
{
_component: "##builtin/screenslot",
name: "Screenslot",
description:
"This component is a placeholder for the rendering of a screen within a page.",
icon: "ri-crop-2-line",
commonProps: {},
children: [],
},
{
_component: "@budibase/standard-components/container",
name: "Container",
@ -119,7 +110,7 @@ export default {
{
name: "Input",
description: "These components handle user input.",
icon: "ri-edit-box-line",
icon: "ri-edit-box-fill",
commonProps: {},
children: [
{
@ -127,7 +118,7 @@ export default {
name: "Textfield",
description:
"A textfield component that allows the user to input text.",
icon: "ri-edit-box-line",
icon: "ri-edit-box-fill",
properties: {
design: { ...all },
settings: [
@ -145,7 +136,7 @@ export default {
_component: "@budibase/standard-components/checkbox",
name: "Checkbox",
description: "A selectable checkbox component",
icon: "ri-checkbox-line",
icon: "ri-checkbox-fill",
properties: {
design: { ...all },
settings: [{ label: "Label", key: "label", control: Input }],
@ -166,7 +157,7 @@ export default {
name: "Select",
description:
"A select component for choosing from different options",
icon: "ri-file-list-line",
icon: "ri-file-list-fill",
properties: {
design: { ...all },
settings: [],
@ -236,7 +227,7 @@ export default {
name: "Card",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-bottom-line",
icon: "ri-layout-bottom-fill",
children: [],
properties: { design: { ...all } },
},
@ -248,21 +239,6 @@ export default {
children: [],
properties: { design: { ...all } },
},
{
name: "Navigation Bar",
_component: "@budibase/standard-components/Navigation",
description:
"A component for handling the navigation within your app.",
icon: "ri-navigation-fill",
children: [],
properties: { design: { ...all } },
},
],
},
{
name: "Data",
isCategory: true,
children: [
{
name: "Table",
description: "A component that generates a table from your data.",
@ -283,27 +259,11 @@ export default {
},
children: [],
},
{
_component: "@budibase/standard-components/datatable",
name: "DataTable",
description: "A table for displaying data from the backend.",
icon: "ri-archive-drawer-fill",
properties: { design: { ...all } },
children: [],
},
{
_component: "@budibase/standard-components/dataform",
name: "DataForm",
description: "Form stuff",
icon: "ri-file-edit-fill",
properties: { design: { ...all } },
children: [],
},
{
name: "Chart",
_component: "@budibase/standard-components/datachart",
description: "Shiny chart",
icon: "ri-bar-chart-line",
icon: "ri-bar-chart-fill",
properties: { design: { ...all } },
children: [],
},
@ -311,7 +271,7 @@ export default {
name: "List",
_component: "@budibase/standard-components/datalist",
description: "Shiny list",
icon: "ri-file-list-line",
icon: "ri-file-list-fill",
properties: { design: { ...all } },
children: [],
},
@ -319,11 +279,35 @@ export default {
name: "Map",
_component: "@budibase/standard-components/datamap",
description: "Shiny map",
icon: "ri-map-pin-line",
icon: "ri-map-pin-fill",
properties: { design: { ...all } },
children: [],
},
],
},
{
name: "Layouts",
isCategory: true,
children: [
{
_component: "##builtin/screenslot",
name: "Screenslot",
description:
"This component is a placeholder for the rendering of a screen within a page.",
icon: "ri-crop-2-fill",
commonProps: {},
children: [],
},
{
name: "Nav Bar",
_component: "@budibase/standard-components/Navigation",
description:
"A component for handling the navigation within your app.",
icon: "ri-navigation-fill",
children: [],
properties: { design: { ...all } },
},
],
},
],
}

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

@ -150,7 +150,7 @@
}
.topnavitemright:hover {
color: rgb(255, 255, 255, 0.8);
color: var(--ink);
font-weight: 500;
}