From 8a15c07b2371d2dedaf04254924b182487c36e58 Mon Sep 17 00:00:00 2001 From: Sky French Date: Tue, 12 Nov 2019 10:13:40 +0000 Subject: [PATCH 01/67] fix height of main app --- src/App.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 2941e203..135b7183 100644 --- a/src/App.css +++ b/src/App.css @@ -2,7 +2,8 @@ text-align: center; background-color: var(--colour-background); position: absolute; - height: 100%; + height: auto; + min-height: 100vh; width: 100%; } From 79ad9a8683aac14de5975492650ea624941a4626 Mon Sep 17 00:00:00 2001 From: Sky French Date: Wed, 13 Nov 2019 08:04:37 +0000 Subject: [PATCH 02/67] shapes page more shapes --- public/shapesPage.json | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/public/shapesPage.json b/public/shapesPage.json index b53c1bab..b8ff6d71 100644 --- a/public/shapesPage.json +++ b/public/shapesPage.json @@ -4,23 +4,37 @@ "position": "absolute", "x": "0px", "y": "0px", - "width": "1000px", - "height": "168px" + "width": "100px", + "height": "100px" }, "children": [ { "type": "shape", "containerStyling": { "position": "absolute", - "x": "70px", + "x": "0px", "y": "0px", "width": "100px", "height": "100px" }, "shapeWidth": "100px", - "shapeHeight": "70px", + "shapeHeight": "50px", "shapeRadius": "50%", "shapeColour": "red" + }, + { + "type": "shape", + "containerStyling": { + "position": "absolute", + "x": "100px", + "y": "0px", + "width": "100px", + "height": "100px" + }, + "shapeWidth": "50px", + "shapeHeight": "100px", + "shapeRadius": "50%", + "shapeColour": "green" } ] } From 53f02b4ca10d5d30c0379030beaebd33cf3f0620 Mon Sep 17 00:00:00 2001 From: Sky French Date: Wed, 13 Nov 2019 08:04:55 +0000 Subject: [PATCH 03/67] example layout for testing router --- src/App.css | 95 ++++++++++++++++++++------------------------ src/App.tsx | 34 ++++++++++------ src/themeContext.tsx | 6 ++- 3 files changed, 69 insertions(+), 66 deletions(-) diff --git a/src/App.css b/src/App.css index 135b7183..bfde68bc 100644 --- a/src/App.css +++ b/src/App.css @@ -1,55 +1,48 @@ +* { + box-sizing: border-box; +} +html, +body { + margin: 0; + padding: 0; + background: var(--colour-background); + color: var(--color-text); + font-family: "Open sans"; + font-size: 16px; +} .App { - text-align: center; - background-color: var(--colour-background); - position: absolute; - height: auto; - min-height: 100vh; + width: 1200px; + float: left; + position: relative; + left: 50%; + margin-left: -600px; + background: var(--colour-background); + padding: 10px; +} +.header { + float: left; width: 100%; + padding: 10px; + background: var(--colour-secondary-background); + text-align: right; + height: 100px; } - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -.Input { - color: blue; -} - -.Label { - color: var(--colour-text); -} - -.Readback { - font-weight: bold; - color: #2fdb04; -} - -.Slider { - cursor: grab; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.left { + text-align: center; + width: 24%; + margin-right: 1%; + border: 1px solid #ccc; + margin: 5px; + float: left; + padding: 10px; +} +.right { + width: 74%; + float: left; + padding: 10px; + border: 1px solid #ccc; + margin: 5px; +} +.last { + margin-right: 0; } diff --git a/src/App.tsx b/src/App.tsx index 3df9bdb2..4aaf51d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,6 +25,8 @@ import { DynamicPage } from "./pages/dynamicPage"; import { ConiqlPlugin } from "./connection/coniql"; import { ConnectionForwarder } from "./connection/forwarder"; +import { WidgetFromJson } from "./components/FromJson/fromJson"; + var settings: any; try { // Use require so that we can catch this error @@ -74,8 +76,19 @@ const App: React.FC = (): JSX.Element => { -

CS Web Proto

-
left - + {
right diff --git a/src/pages/readbacksPage.tsx b/src/pages/readbacksPage.tsx index b25a83f3..27d1756a 100644 --- a/src/pages/readbacksPage.tsx +++ b/src/pages/readbacksPage.tsx @@ -2,6 +2,7 @@ import React from "react"; +import { BrowserRouter, Link, Route } from "react-router-dom"; import { WidgetFromJson } from "../components/FromJson/fromJson"; export const ReadbacksPage = (): JSX.Element => ( From 8dabce44e93cf7d83f5100b25343f2716287cd9b Mon Sep 17 00:00:00 2001 From: Sky French Date: Wed, 13 Nov 2019 08:26:35 +0000 Subject: [PATCH 05/67] tidy up --- src/App.css | 6 +++--- src/App.tsx | 12 +++--------- src/themeContext.tsx | 4 ++-- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index bfde68bc..348f366c 100644 --- a/src/App.css +++ b/src/App.css @@ -25,11 +25,11 @@ body { padding: 10px; background: var(--colour-secondary-background); text-align: right; - height: 100px; + height: 200px; } .left { text-align: center; - width: 24%; + width: 49%; margin-right: 1%; border: 1px solid #ccc; margin: 5px; @@ -37,7 +37,7 @@ body { padding: 10px; } .right { - width: 74%; + width: 49%; float: left; padding: 10px; border: 1px solid #ccc; diff --git a/src/App.tsx b/src/App.tsx index 0fe3ecb0..ffd220e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -77,8 +77,6 @@ const App: React.FC = (): JSX.Element => { Toggle Theme
- left + - Left - @@ -146,12 +144,8 @@ const App: React.FC = (): JSX.Element => {
- right - + - Right - +
diff --git a/src/themeContext.tsx b/src/themeContext.tsx index af37304b..72278cb0 100644 --- a/src/themeContext.tsx +++ b/src/themeContext.tsx @@ -4,14 +4,14 @@ export const lightTheme = { "--colour-text": "#000000", "--colour-secondary-text": "#000000", "--colour-background": "#DDDDDD", - "--colour-secondary-background": "#DDFFDD" + "--colour-secondary-background": "#DDDDFF" }; export const darkTheme = { "--colour-text": "#FFFFFF", "--colour-secondary-text": "#FFFF00", "--colour-background": "#535353", - "--colour-secondary-background": "#545454" + "--colour-secondary-background": "#555555" }; const initialState = { From 851935d4b3d566281c655faf49496e40192cff81 Mon Sep 17 00:00:00 2001 From: Sky French Date: Wed, 13 Nov 2019 08:49:53 +0000 Subject: [PATCH 06/67] layout tweaks --- public/ionpExample.json | 5 ++--- public/shapesPage.json | 4 +--- src/App.css | 8 +++++--- src/App.tsx | 4 ++-- src/themeContext.tsx | 10 +++++----- 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/public/ionpExample.json b/public/ionpExample.json index ef85b759..1d60f152 100644 --- a/public/ionpExample.json +++ b/public/ionpExample.json @@ -1,9 +1,8 @@ { "type": "display", "containerStyling": { - "position": "absolute", - "x": "136px", - "y": "100px", + "position": "relative", + "width": "328px", "height": "468px" }, diff --git a/public/shapesPage.json b/public/shapesPage.json index b8ff6d71..5734cac9 100644 --- a/public/shapesPage.json +++ b/public/shapesPage.json @@ -1,9 +1,7 @@ { "type": "display", "containerStyling": { - "position": "absolute", - "x": "0px", - "y": "0px", + "position": "relative", "width": "100px", "height": "100px" }, diff --git a/src/App.css b/src/App.css index 348f366c..2a12697a 100644 --- a/src/App.css +++ b/src/App.css @@ -19,7 +19,7 @@ body { background: var(--colour-background); padding: 10px; } -.header { +.top { float: left; width: 100%; padding: 10px; @@ -37,11 +37,13 @@ body { padding: 10px; } .right { + text-align: center; width: 49%; - float: left; - padding: 10px; + margin-right: 1%; border: 1px solid #ccc; margin: 5px; + float: left; + padding: 10px; } .last { margin-right: 0; diff --git a/src/App.tsx b/src/App.tsx index ffd220e9..4e7a33bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -65,7 +65,6 @@ const App: React.FC = (): JSX.Element => { applyTheme(dark ? darkTheme : lightTheme); const styleLinkButton = { - backgroundColor: "#eeeeee", margin: "10px 10px" }; @@ -76,7 +75,8 @@ const App: React.FC = (): JSX.Element => { -