From fca1b588291461350cd918137bd90cef48b81b98 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 20 Jan 2020 12:28:05 +0000 Subject: [PATCH 01/23] Ensure only props are passed to propControl --- .../builder/src/userInterface/PropsView.svelte | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/userInterface/PropsView.svelte b/packages/builder/src/userInterface/PropsView.svelte index 89d03e71e4..80e742e220 100644 --- a/packages/builder/src/userInterface/PropsView.svelte +++ b/packages/builder/src/userInterface/PropsView.svelte @@ -30,11 +30,11 @@ $: { if(componentInfo) { isInstance = !!instanceProps; - props = isInstance + props = isInstance ? getInstanceProps(componentInfo, instanceProps) : cloneDeep(componentInfo.fullProps); - propsDefinitions = pipe(componentInfo.propsDefinition, [ + propsDefinitions = pipe(componentInfo.propsDefinition.props, [ keys, map(k => ({...componentInfo.propsDefinition[k], ____name:k})), sortBy("____name") @@ -64,16 +64,16 @@ let setProp = (name, value) => { props = newProps; if(validate(finalProps)) onPropsChanged(finalProps); - + } - + const validate = (finalProps) => { errors = validateProps(componentInfo.rootComponent, finalProps, [], false); onValidate(errors); return errors.length === 0; } -const fieldHasError = (propName) => +const fieldHasError = (propName) => some(e => e.propName === propName)(errors); @@ -82,7 +82,7 @@ const fieldHasError = (propName) =>
{#each propsDefinitions as propDef, index} - +
disabled={false} />
- + {/each}
- + @@ -121,4 +121,4 @@ const fieldHasError = (propName) => min-width: 250px; } - \ No newline at end of file + From e978e38ae9cef9d95a63ebd1034d4aaf8cde054b Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 20 Jan 2020 13:45:00 +0000 Subject: [PATCH 02/23] Implement refreshed design for the top nav. --- packages/builder/src/PackageRoot.svelte | 50 ++++++++++++++++++++----- packages/builder/src/global.css | 10 ++--- 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte index cd424156cf..dc208a7de3 100644 --- a/packages/builder/src/PackageRoot.svelte +++ b/packages/builder/src/PackageRoot.svelte @@ -11,9 +11,10 @@ import { fade } from "svelte/transition";
-
{/if}
- + \ No newline at end of file +.home-logo img { + height: 100%; +} + + diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 0541eb03a1..08f4174ec8 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,12 +1,12 @@ :root { - --primary100: #454CA0FF; + --primary100: #173157FF; --primary75: #454CA0BF; --primary50: #454CA080; --primary25: #454CA040; --primary10: #454CA01A; --primary5: #454ca00c; --primarydark: #3F448A; - + --secondary100: #162B4DFF; --secondary75: #162B4DBF; --secondary50: #162B4D80; @@ -16,14 +16,14 @@ --secondarydark: #3F448A; --tertiary: #F2F5F7; - + --success100: #49C39EFF; --success75: #49C39EBF; --success50: #49C39E80; --success25: #49C39E40; --success10: #49C39E1A; --successdark: #44B492; - + --deletion100: #F2545BFF; --deletion75: #F2545BBF; --deletion50: #F2545B80; @@ -97,4 +97,4 @@ h5 { font-family: var(--fontblack); font-size: 12pt; color: var(--darkslate); -} \ No newline at end of file +} From 8abe5b4df74429254966723593d5bec7c898ac08 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 20 Jan 2020 14:12:29 +0000 Subject: [PATCH 03/23] Implement basic layout for frontend view. --- packages/builder/src/PackageRoot.svelte | 2 ++ packages/builder/src/global.css | 2 +- .../userInterface/UserInterfaceRoot.svelte | 24 ++++++++++++------- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte index dc208a7de3..218dfa5e44 100644 --- a/packages/builder/src/PackageRoot.svelte +++ b/packages/builder/src/PackageRoot.svelte @@ -48,6 +48,7 @@ import { fade } from "svelte/transition"; width:100%; display: flex; flex-direction: column; + } .top-nav { @@ -70,6 +71,7 @@ import { fade } from "svelte/transition"; .content > div { height:100%; width:100%; + } .topnavitem { diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 08f4174ec8..b790c1f242 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -12,7 +12,7 @@ --secondary50: #162B4D80; --secondary25: #162B4D40; --secondary10: #162B4D1A; - --secondary5: rgba(22, 43, 77, 0.068); + --secondary5:#fff; --secondarydark: #3F448A; --tertiary: #F2F5F7; diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index aa8d7304c4..c4a12a139a 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -13,7 +13,7 @@ import SettingsView from "./SettingsView.svelte"; import PageView from "./PageView.svelte"; import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"; -let newComponentPicker; +let newComponentPicker; const newComponent = () => { newComponentPicker.show(); } @@ -26,7 +26,7 @@ const settings = () => {
- +
@@ -34,10 +34,10 @@ const settings = () => {
{@html getIcon("sidebar","18")}
Screens
- -
@@ -63,7 +63,7 @@ const settings = () => { {:else if $store.currentFrontEndType === "page"} - {/if} + {/if}
{#if $store.currentFrontEndType === "screen"} @@ -83,19 +83,25 @@ const settings = () => { .root { display: grid; - grid-template-columns: 250px 1fr 300px; + grid-template-columns: 290px 1fr 300px; height: 100%; width: 100%; + background: #fafafa; } .ui-nav { grid-column: 1; background-color: var(--secondary5); height: 100%; + padding: 0 1.5rem 0rem 1.5rem } .preview-pane { grid-column: 2; + margin: 80px 60px; + background: #fff; + border-radius: 5px; + box-shadow: 0 0px 6px rgba(0,0,0,0.05) } .components-pane { @@ -125,7 +131,7 @@ const settings = () => { .nav-group-header { display:grid; grid-template-columns: [icon] auto [title] 1fr [button] auto; - padding: 2rem 1rem 0rem 1rem; + padding: 2rem 0 0 0; font-size: .9rem; font-weight: bold; } @@ -152,7 +158,7 @@ const settings = () => { } .nav-group-header>div:nth-child(3):hover { - color: var(--primary75); + color: var(--primary75); } - \ No newline at end of file + From 3bae85c50380be469ebb0805008548fd14938ff6 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 20 Jan 2020 15:41:40 +0000 Subject: [PATCH 04/23] Implement new pages dropdown design in sidebar --- .../src/userInterface/PagesList.svelte | 76 +++++++++++-------- .../userInterface/UserInterfaceRoot.svelte | 32 ++++---- 2 files changed, 63 insertions(+), 45 deletions(-) diff --git a/packages/builder/src/userInterface/PagesList.svelte b/packages/builder/src/userInterface/PagesList.svelte index 4944f750f3..9fb9148f86 100644 --- a/packages/builder/src/userInterface/PagesList.svelte +++ b/packages/builder/src/userInterface/PagesList.svelte @@ -7,54 +7,70 @@ const getPage = (s, name) => { return ({name, props}); } +const pages = [{ + title: 'Main', + id: 'main' +}, { + title: 'Login', + id: 'unauthenticated' +}] + +store.setCurrentPage('main') +
-
store.setCurrentPage("main")}> - {@html getIcon("circle", "7")} - Main -
+ + {@html getIcon("chevron-down","24")}
\ No newline at end of file + diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index c4a12a139a..3c9896a022 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -29,6 +29,16 @@ const settings = () => {
+
+ + +
+
-
- - -
-
@@ -111,10 +111,6 @@ const settings = () => { overflow-y: hidden; } -.pages-list-container { - padding-top: 2rem; -} - .components-nav-header { font-size: .9rem; } @@ -125,7 +121,7 @@ const settings = () => { } .nav-items-container { - padding: 1rem 1rem 0rem 1rem; + padding: 1rem 0rem 0rem 0rem; } .nav-group-header { @@ -161,4 +157,10 @@ const settings = () => { color: var(--primary75); } +.navigator-title { + text-transform: uppercase; + font-weight: 400; + color: #999; +} + From 240a5b74db9dc54c0a520c20c0c862e4cf1e27d4 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 20 Jan 2020 16:47:35 +0000 Subject: [PATCH 05/23] Basic implementation of sidebar design. --- packages/builder/src/global.css | 5 +- .../userInterface/ComponentsHierarchy.svelte | 60 ++++++++++--------- .../userInterface/UserInterfaceRoot.svelte | 39 +++++++++--- 3 files changed, 66 insertions(+), 38 deletions(-) diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index b790c1f242..2418fffa21 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -7,7 +7,7 @@ --primary5: #454ca00c; --primarydark: #3F448A; - --secondary100: #162B4DFF; + --secondary100:#828fa5; --secondary75: #162B4DBF; --secondary50: #162B4D80; --secondary25: #162B4D40; @@ -52,6 +52,9 @@ --heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt; --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt; --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt; + + --background-button: #e6eeff; + --button-text: #0055ff; } html, body { diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte index add1165f60..6afcd68477 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte @@ -1,9 +1,9 @@ -
- +
+ {#each subfolders as folder}
expandFolder(folder)}> {@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")} {folder.name} {#if folder.isExpanded} - {/if}
@@ -137,7 +137,7 @@ $: { {#each componentsThisLevel as component}
store.setCurrentScreen(component.component.name)}> - {@html getIcon("circle", "7")} + {component.title}
{/each} @@ -147,31 +147,33 @@ $: { \ No newline at end of file + diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 3c9896a022..deadd829e6 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -41,14 +41,15 @@ const settings = () => {