From 53ff560e428cb01c0c562abe0be130fb329c14fd Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 28 May 2020 15:39:29 +0100 Subject: [PATCH 01/29] server side record validation --- packages/server/package.json | 2 +- packages/server/src/api/controllers/record.js | 44 +++- packages/server/src/api/routes/model.js | 5 + .../src/api/routes/tests/couchTestUtils.js | 7 +- .../src/api/routes/tests/record.spec.js | 47 ++++- packages/server/yarn.lock | 197 +++++++++++++++++- 6 files changed, 277 insertions(+), 25 deletions(-) diff --git a/packages/server/package.json b/packages/server/package.json index 156a25aa0b..023ee7c67f 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -44,7 +44,6 @@ "@budibase/client": "^0.0.32", "@budibase/core": "^0.0.32", "@koa/router": "^8.0.0", - "ajv": "^6.12.2", "bcryptjs": "^2.4.3", "dotenv": "^8.2.0", "electron-is-dev": "^1.2.0", @@ -66,6 +65,7 @@ "squirrelly": "^7.5.0", "tar-fs": "^2.0.0", "uuid": "^3.3.2", + "validate.js": "^0.13.1", "yargs": "^13.2.4", "zlib": "^1.0.5" }, diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js index 7a5b045136..2fd81ffd8c 100644 --- a/packages/server/src/api/controllers/record.js +++ b/packages/server/src/api/controllers/record.js @@ -1,9 +1,7 @@ const CouchDB = require("../../db") -const Ajv = require("ajv") +const validateJs = require("validate.js") const newid = require("../../db/newid") -const ajv = new Ajv() - exports.save = async function(ctx) { const db = new CouchDB(ctx.params.instanceId) const record = ctx.request.body @@ -13,18 +11,18 @@ exports.save = async function(ctx) { record._id = newid() } - // validation with ajv const model = await db.get(record.modelId) - const validate = ajv.compile({ - properties: model.schema, - }) - const valid = validate(record) - if (!valid) { + const validateResult = await validate({ + record, + model, + }) + + if (!validateResult.valid) { ctx.status = 400 ctx.body = { status: 400, - errors: validate.errors, + errors: validateResult.errors, } return } @@ -84,3 +82,29 @@ exports.destroy = async function(ctx) { } ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId) } + +exports.validate = async function(ctx) { + const errors = await validate({ + instanceId: ctx.params.instanceId, + modelId: ctx.params.modelId, + record: ctx.request.body, + }) + ctx.status = 200 + ctx.body = errors +} + +async function validate({ instanceId, modelId, record, model }) { + if (!model) { + const db = new CouchDB(instanceId) + model = await db.get(modelId) + } + const errors = {} + for (let fieldName in model.schema) { + const res = validateJs.single( + record[fieldName], + model.schema[fieldName].constraints + ) + if (res) errors[fieldName] = res + } + return { valid: Object.keys(errors).length === 0, errors } +} diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js index d9eb5cf798..831aefd7f6 100644 --- a/packages/server/src/api/routes/model.js +++ b/packages/server/src/api/routes/model.js @@ -28,6 +28,11 @@ router authorized(WRITE_MODEL, ctx => ctx.params.modelId), recordController.save ) + .post( + "/api/:instanceId/:modelId/records/validate", + authorized(WRITE_MODEL, ctx => ctx.params.modelId), + recordController.validate + ) .delete( "/api/:instanceId/:modelId/records/:recordId/:revId", authorized(WRITE_MODEL, ctx => ctx.params.modelId), diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js index de4ed7f87e..1f2017dcf0 100644 --- a/packages/server/src/api/routes/tests/couchTestUtils.js +++ b/packages/server/src/api/routes/tests/couchTestUtils.js @@ -27,7 +27,12 @@ exports.createModel = async (request, instanceId, model) => { type: "model", key: "name", schema: { - name: { type: "string" }, + name: { + type: "text", + constraints: { + type: "string", + }, + }, }, } diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js index 16af0b6031..07e4d3cc4c 100644 --- a/packages/server/src/api/routes/tests/record.spec.js +++ b/packages/server/src/api/routes/tests/record.spec.js @@ -25,17 +25,17 @@ describe("/records", () => { server.close(); }) - describe("save, load, update, delete", () => { + beforeEach(async () => { + instance = await createInstance(request, app._id) + model = await createModel(request, instance._id) + record = { + name: "Test Contact", + status: "new", + modelId: model._id + } + }) - beforeEach(async () => { - instance = await createInstance(request, app._id) - model = await createModel(request, instance._id) - record = { - name: "Test Contact", - status: "new", - modelId: model._id - } - }) + describe("save, load, update, delete", () => { const createRecord = async r => await request @@ -119,4 +119,31 @@ describe("/records", () => { .expect(404) }) }) + + describe("validate", () => { + it("should return no errors on valid record", async () => { + const result = await request + .post(`/api/${instance._id}/${model._id}/records/validate`) + .send({ name: "ivan" }) + .set(defaultHeaders) + .expect('Content-Type', /json/) + .expect(200) + + expect(result.body.valid).toBe(true) + expect(Object.keys(result.body.errors)).toEqual([]) + }) + + it("should errors on invalid record", async () => { + const result = await request + .post(`/api/${instance._id}/${model._id}/records/validate`) + .send({ name: 1 }) + .set(defaultHeaders) + .expect('Content-Type', /json/) + .expect(200) + + expect(result.body.valid).toBe(false) + expect(Object.keys(result.body.errors)).toEqual(["name"]) + + }) + }) }) diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock index 8a64a7cb8a..ce52984cdf 100644 --- a/packages/server/yarn.lock +++ b/packages/server/yarn.lock @@ -194,6 +194,20 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@budibase/client@^0.0.32": + version "0.0.32" + resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496" + integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A== + dependencies: + "@nx-js/compiler-util" "^2.0.0" + bcryptjs "^2.4.3" + deep-equal "^2.0.1" + lodash "^4.17.15" + lunr "^2.3.5" + regexparam "^1.3.0" + shortid "^2.2.8" + svelte "^3.9.2" + "@budibase/core@^0.0.32": version "0.0.32" resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa" @@ -655,7 +669,7 @@ ajv-keywords@^3.4.1: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da" integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ== -ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2: +ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0: version "6.12.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd" integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ== @@ -825,6 +839,11 @@ array-equal@^1.0.0: resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM= +array-filter@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83" + integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM= + array-unique@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" @@ -897,6 +916,13 @@ atomic-sleep@^1.0.0: resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b" integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ== +available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" + integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ== + dependencies: + array-filter "^1.0.0" + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -1612,6 +1638,26 @@ decompress-response@^3.3.0: dependencies: mimic-response "^1.0.0" +deep-equal@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0" + integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA== + dependencies: + es-abstract "^1.17.5" + es-get-iterator "^1.1.0" + is-arguments "^1.0.4" + is-date-object "^1.0.2" + is-regex "^1.0.5" + isarray "^2.0.5" + object-is "^1.1.2" + object-keys "^1.1.1" + object.assign "^4.1.0" + regexp.prototype.flags "^1.3.0" + side-channel "^1.0.2" + which-boxed-primitive "^1.0.1" + which-collection "^1.0.1" + which-typed-array "^1.1.2" + deep-equal@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -1965,7 +2011,7 @@ error-inject@^1.0.0: resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37" integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc= -es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: +es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5: version "1.17.5" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9" integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg== @@ -1982,6 +2028,19 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" +es-get-iterator@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8" + integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ== + dependencies: + es-abstract "^1.17.4" + has-symbols "^1.0.1" + is-arguments "^1.0.4" + is-map "^2.0.1" + is-set "^2.0.1" + is-string "^1.0.5" + isarray "^2.0.5" + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -2967,11 +3026,21 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" +is-arguments@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3" + integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA== + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-bigint@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4" + integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g== + is-binary-path@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" @@ -2979,6 +3048,11 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" +is-boolean-object@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e" + integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ== + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -3015,7 +3089,7 @@ is-data-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-date-object@^1.0.1: +is-date-object@^1.0.1, is-date-object@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== @@ -3090,11 +3164,21 @@ is-installed-globally@^0.3.1: global-dirs "^2.0.1" is-path-inside "^3.0.1" +is-map@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1" + integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw== + is-npm@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d" integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig== +is-number-object@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197" + integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw== + is-number@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195" @@ -3131,11 +3215,21 @@ is-regex@^1.0.5: dependencies: has "^1.0.3" +is-set@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43" + integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA== + is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= +is-string@^1.0.4, is-string@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6" + integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ== + is-symbol@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" @@ -3152,11 +3246,31 @@ is-type-of@^1.0.0: is-class-hotfix "~0.0.6" isstream "~0.1.2" +is-typed-array@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d" + integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ== + dependencies: + available-typed-arrays "^1.0.0" + es-abstract "^1.17.4" + foreach "^2.0.5" + has-symbols "^1.0.1" + is-typedarray@^1.0.0, is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-weakmap@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" + integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== + +is-weakset@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83" + integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -3182,6 +3296,11 @@ isarray@1.0.0, isarray@~1.0.0: resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= +isarray@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + isbinaryfile@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b" @@ -4589,6 +4708,14 @@ object-inspect@^1.7.0: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67" integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw== +object-is@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6" + integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.5" + object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" @@ -5310,6 +5437,19 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" +regexp.prototype.flags@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75" + integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.0-next.1" + +regexparam@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f" + integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g== + regexpp@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f" @@ -5638,6 +5778,14 @@ shortid@^2.2.8: dependencies: nanoid "^2.1.0" +side-channel@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947" + integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA== + dependencies: + es-abstract "^1.17.0-next.1" + object-inspect "^1.7.0" + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" @@ -6046,6 +6194,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svelte@^3.9.2: + version "3.23.0" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f" + integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw== + symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -6458,6 +6611,11 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +validate.js@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a" + integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g== + vary@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -6526,11 +6684,44 @@ whatwg-url@^7.0.0: tr46 "^1.0.1" webidl-conversions "^4.0.2" +which-boxed-primitive@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1" + integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ== + dependencies: + is-bigint "^1.0.0" + is-boolean-object "^1.0.0" + is-number-object "^1.0.3" + is-string "^1.0.4" + is-symbol "^1.0.2" + +which-collection@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" + integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== + dependencies: + is-map "^2.0.1" + is-set "^2.0.1" + is-weakmap "^2.0.1" + is-weakset "^2.0.1" + which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= +which-typed-array@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2" + integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ== + dependencies: + available-typed-arrays "^1.0.2" + es-abstract "^1.17.5" + foreach "^2.0.5" + function-bind "^1.1.1" + has-symbols "^1.0.1" + is-typed-array "^1.1.3" + which@^1.2.9, which@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" From 0d637260beae86996779ca8032275271fe35440b Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 28 May 2020 22:26:32 +0100 Subject: [PATCH 02/29] create model & record - validation hooked up again --- .../modals/CreateEditModel/FieldView.svelte | 52 +++++++++++-------- .../modals/CreateEditRecord.svelte | 25 ++++++--- .../modals/RecordFieldControl.svelte | 26 ++++++++-- 3 files changed, 69 insertions(+), 34 deletions(-) diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte index 65934a032d..ae78405ccb 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte @@ -13,17 +13,33 @@ const FIELD_TYPES = ["string", "number", "boolean"] - export let field = { type: "string" } + export let field = { type: "string", constraints: { type: "string", presence: false } } export let schema export let goBack let errors = [] let draftField = cloneDeep(field) + + let type = field.type + let constraints = field.constraints + let required = field.constraints.presence && !field.constraints.presence.allowEmpty const save = () => { + constraints.presence = required ? { allowEmpty: false } : false + draftField.constraints = constraints + draftField.type = type schema[field.name] = draftField goBack() } + + $: constraints = + type === "string" ? { type: "string", length: {}, presence: false } + : type === "number" ? { type: "number", presence: false, numericality: {} } + : type === "boolean" ? { type: "boolean", presence: false } + : type === "datetime" ? { type: "date", datetime: {}, presence: false } + : type.startsWith('array') ? { type: "array", presence: false } + : { type: "string", presence: false } +
@@ -34,30 +50,22 @@ + + + - {#if field.type === 'string'} - - - {:else if field.type === 'boolean'} + {#if type === 'string'} + + + {:else if type === 'datetime'} - - {:else if field.format === 'datetime'} - - - - {:else if field.type === 'number'} - - - {:else if draftField.type.startsWith('array')} - - - + + + {:else if type === 'number'} + + {/if}
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte index 49749a70a1..d5320eca0d 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -8,10 +8,6 @@ import * as api from "../api" import ErrorsBox from "components/common/ErrorsBox.svelte" - const CLASS_NAME_MAP = { - boolean: "uk-checkbox", - } - export let record = {} export let onClosed @@ -27,14 +23,25 @@ function closed() { onClosed() } - + + const isSelect = meta => + meta.type === "string" + && meta.constraints + && meta.constraints.inclusion + && meta.constraints.inclusion.length > 0 + function determineInputType(meta) { if (meta.type === "datetime") return "date" if (meta.type === "number") return "number" if (meta.type === "boolean") return "checkbox" - + if (isSelect(meta)) return "select" + return "text" } + + function determineOptions(meta) { + return isSelect(meta) ? meta.constraints.inclusion : [] + } async function saveRecord() { const recordResponse = await api.saveRecord( @@ -46,7 +53,9 @@ $backendUiStore.selectedModel._id ) if (recordResponse.errors) { - errors = recordResponse.errors + errors = Object.keys(recordResponse.errors) + .map(k => ({dataPath: k, message: recordResponse.errors[k]})) + .flat() return } @@ -65,8 +74,8 @@ {#each modelSchema as [key, meta]}
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte index 0839180601..b0571a2353 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte @@ -3,10 +3,16 @@ export let value = "" export let label export let errors = [] - export let className = "uk-input" - + export let options = [] + let checked = type === "checkbox" ? value : false - + + const determineClassName = type => { + if (type === "checkbox") return "uk-checkbox" + if (type === "select") return "uk-select" + return "uk-input" + } + const handleInput = event => { if (event.target.type === "checkbox") { value = event.target.checked @@ -23,11 +29,23 @@ + +{#if type === "select"} + +{:else} 0} {checked} {type} {value} on:input={handleInput} on:change={handleInput} /> +{/if} From 17e6bf261bad17e6eb1e87c6f121daef4e9c56d5 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 09:20:29 +0100 Subject: [PATCH 03/29] Font numerical weights added and line decorations added --- .../userInterface/propertyCategories.js | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index dde62f7e5a..831caf0730 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -167,10 +167,16 @@ export const typography = [ key: "font-weight", control: OptionSelect, options: [ - { label: "normal" }, - { label: "bold" }, - { label: "bolder" }, - { label: "lighter" }, + { label: "100", value:"100"}, + { label: "200", value:"200"}, + { label: "300", value:"300"}, + { label: "400", value:"400"}, + { label: "500", value:"500"}, + { label: "600", value:"600"}, + { label: "700", value:"700"}, + { label: "800", value:"800"}, + { label: "900", value:"900"}, + ], }, { label: "size", key: "font-size", defaultValue: "", control: Input }, @@ -186,6 +192,21 @@ export const typography = [ control: OptionSelect, options: ["initial", "left", "right", "center", "justify"], }, //custom + { + label: "Decoration", + key: "text-decoration-line", + control: OptionSelect, + defaultValue: "Underline", + options: [ + {label: "Underline", value: "underline"}, + {label: "None", value: "none"}, + {label: "Overline", value: "overline"}, + {label: "Line-through", value: "line-through"}, + {label: "Under Over", value: "underline overline"}, + + ], + }, + { label: "transform", key: "text-transform", control: Input }, //custom { label: "style", key: "font-style", control: Input }, //custom ] From 69d6109c33c40737e7766c9c23f5af5dd0947c99 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 09:39:47 +0100 Subject: [PATCH 04/29] Update propertyCategories.js --- .../userInterface/propertyCategories.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 831caf0730..eaa2f41245 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -167,16 +167,15 @@ export const typography = [ key: "font-weight", control: OptionSelect, options: [ - { label: "100", value:"100"}, - { label: "200", value:"200"}, - { label: "300", value:"300"}, - { label: "400", value:"400"}, - { label: "500", value:"500"}, - { label: "600", value:"600"}, - { label: "700", value:"700"}, - { label: "800", value:"800"}, - { label: "900", value:"900"}, - + { label: "100", value: "100" }, + { label: "200", value: "200" }, + { label: "300", value: "300" }, + { label: "400", value: "400" }, + { label: "500", value: "500" }, + { label: "600", value: "600" }, + { label: "700", value: "700" }, + { label: "800", value: "800" }, + { label: "900", value: "900" }, ], }, { label: "size", key: "font-size", defaultValue: "", control: Input }, @@ -198,14 +197,13 @@ export const typography = [ control: OptionSelect, defaultValue: "Underline", options: [ - {label: "Underline", value: "underline"}, - {label: "None", value: "none"}, - {label: "Overline", value: "overline"}, - {label: "Line-through", value: "line-through"}, - {label: "Under Over", value: "underline overline"}, - + { label: "Underline", value: "underline" }, + { label: "None", value: "none" }, + { label: "Overline", value: "overline" }, + { label: "Line-through", value: "line-through" }, + { label: "Under Over", value: "underline overline" }, ], - }, + }, { label: "transform", key: "text-transform", control: Input }, //custom { label: "style", key: "font-style", control: Input }, //custom From 71f61d633206b383dc2c9e6c22d03fe7b8f4e0c3 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 10:57:00 +0100 Subject: [PATCH 05/29] Cleaning up the panel UI by removing inner borders --- .../builder/src/components/nav/BackendNav.svelte | 1 - .../userInterface/UserInterfaceRoot.svelte | 16 ++-------------- .../pages/[application]/frontend/_layout.svelte | 3 --- 3 files changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte index 8a7fd6bb90..173e92d98b 100644 --- a/packages/builder/src/components/nav/BackendNav.svelte +++ b/packages/builder/src/components/nav/BackendNav.svelte @@ -45,7 +45,6 @@ -
{#if $backendUiStore.selectedDatabase._id}
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 13d7a7e2a1..f4581286df 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -42,7 +42,6 @@
Navigator -
Pages
@@ -52,11 +51,9 @@
-
-
@@ -114,21 +111,12 @@ .root { display: grid; - grid-template-columns: 275px 1fr 300px; + grid-template-columns: 300px 1fr 300px; height: 100%; width: 100%; - background: #fafafa; + background: #FBFBFB; } - @media only screen and (min-width: 1800px) { - .root { - display: grid; - grid-template-columns: 300px 1fr 300px; - height: 100%; - width: 100%; - background: #fafafa; - } - } .ui-nav { grid-column: 1; diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index c480a75bfa..9042301cd6 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -63,12 +63,9 @@
-
-
-
From 1353e229e8c9592ca2eae8513882e64e53a3d40e Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 13:24:33 +0100 Subject: [PATCH 06/29] Media queries removed --- .../src/pages/[application]/backend/_layout.svelte | 10 +--------- .../src/pages/[application]/frontend/_layout.svelte | 11 +---------- 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 069e720b17..84b09986fa 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -34,16 +34,8 @@ .nav { overflow: auto; flex: 0 1 auto; - width: 275px; + width: 300px; height: 100%; } - @media only screen and (min-width: 1800px) { - .nav { - overflow: auto; - flex: 0 1 auto; - width: 300px; - height: 100%; - } - } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 9042301cd6..9adf71987f 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -123,20 +123,11 @@ .root { display: grid; - grid-template-columns: 275px 1fr 275px; + grid-template-columns: 300px 1fr 300px; width: 100%; background: var(--grey-light); } - @media only screen and (min-width: 1800px) { - .root { - display: grid; - grid-template-columns: 300px 1fr 300px; - width: 100%; - background: var(--grey-light); - } - } - .ui-nav { grid-column: 1; background-color: var(--white); From cc9a6204297b107054d51f650a10876cd0e2b86d Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 13:25:27 +0100 Subject: [PATCH 07/29] formatting --- .../src/components/userInterface/UserInterfaceRoot.svelte | 5 +---- .../builder/src/pages/[application]/backend/_layout.svelte | 1 - .../builder/src/pages/[application]/frontend/_layout.svelte | 1 - 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index f4581286df..8b600047d8 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -51,10 +51,8 @@
- -
@@ -114,10 +112,9 @@ grid-template-columns: 300px 1fr 300px; height: 100%; width: 100%; - background: #FBFBFB; + background: #fbfbfb; } - .ui-nav { grid-column: 1; background-color: var(--white); diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 84b09986fa..0e36980c6c 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -37,5 +37,4 @@ width: 300px; height: 100%; } - diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 9adf71987f..a8cbf56efd 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -63,7 +63,6 @@
-
From 6b00a079d1f25a6d0994c5105fc046595a07138e Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 13:28:12 +0100 Subject: [PATCH 08/29] added common switcher component, and moved add component to left --- .../src/components/common/Switcher.svelte | 74 ++++++++++ .../ComponentSelectionList.svelte | 2 +- .../ComponentsPaneSwitcher.svelte | 81 ----------- .../userInterface/FrontendNavigatePane.svelte | 126 +++++++++++++++++ .../userInterface/ItemTab/Tab.svelte | 1 - .../[application]/frontend/_layout.svelte | 132 +++--------------- 6 files changed, 221 insertions(+), 195 deletions(-) create mode 100644 packages/builder/src/components/common/Switcher.svelte delete mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte create mode 100644 packages/builder/src/components/userInterface/FrontendNavigatePane.svelte diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte new file mode 100644 index 0000000000..cf23e39507 --- /dev/null +++ b/packages/builder/src/components/common/Switcher.svelte @@ -0,0 +1,74 @@ + + +
+ +
+ + {#each tabs as tab} + + {/each} + +
+ +
+ {#if selectedIndex === 0} + + {:else if selectedIndex === 1} + + {:else if selectedIndex === 2} + + {:else if selectedIndex === 3} + + {/if} +
+ +
+ + diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 0bf848e4a8..2a46e5d6f6 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -32,7 +32,7 @@ const onComponentChosen = component => { store.addChildComponent(component._component) - toggleTab() + toggleTab("Navigate") } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte deleted file mode 100644 index de523cd7bf..0000000000 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - -
- {#if $store.currentFrontEndType === 'page' || $store.screens.length} -
- - - - - -
- -
- {#if selected === PROPERTIES_TAB} - - {/if} - - {#if selected === COMPONENT_SELECTION_TAB} - - {/if} - -
- {/if} - -
- - diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte new file mode 100644 index 0000000000..8b4b8e1843 --- /dev/null +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -0,0 +1,126 @@ + + +
+
+ Navigate + Pages +
+ +
+ +
+
+ +
+ + + +
+ +
+
+ + Screens + +
+ +
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte index 80f1733cc1..f811a56670 100644 --- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte +++ b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte @@ -3,7 +3,6 @@ const dispatch = createEventDispatcher() import Item from "./Item.svelte" - import { store } from "builderStore" export let list let category = list diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index c480a75bfa..deea52ce3e 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -2,18 +2,17 @@ import { store, backendUiStore } from "builderStore" import { goto } from "@sveltech/routify" import { onMount } from "svelte" - import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte" - import PageLayout from "components/userInterface/PageLayout.svelte" - import PagesList from "components/userInterface/PagesList.svelte" import IconButton from "components/common/IconButton.svelte" - import NewScreen from "components/userInterface/NewScreen.svelte" import CurrentItemPreview from "components/userInterface/AppPreview" import PageView from "components/userInterface/PageView.svelte" - import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte" + import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte" + import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte" + import Switcher from "components/common/Switcher.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { last } from "lodash/fp" import { AddIcon } from "components/common/Icons" + import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte" $: instances = $store.appInstances @@ -27,13 +26,10 @@ } }) - let newScreenPicker + let confirmDeleteDialog let componentToDelete = "" - const newScreen = () => { - newScreenPicker.show() - } let settingsView const settings = () => { @@ -45,6 +41,8 @@ confirmDeleteDialog.show() } + let leftNavSwitcher + const lastPartOfName = c => (c ? last(c.split("/")) : "") @@ -52,54 +50,32 @@
-
-
- Navigate - Pages + +
+
- -
- -
-
- -
- - - -
- -
-
- - Screens - -
- -
-
-
- -
-
+
+
+ +
+ {#if $store.currentPageName && $store.currentPageName.length > 0} + {/if}
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
- +
{/if}
- + From 1c1d35bc9db9f38bc06dd18b094874ed715bb4ea Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 13:56:57 +0100 Subject: [PATCH 09/29] the alert button ui was off and the red is too serious --- .../components/common/AppNotification.svelte | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte index e4a43247c9..85c6d30a2b 100644 --- a/packages/builder/src/components/common/AppNotification.svelte +++ b/packages/builder/src/components/common/AppNotification.svelte @@ -5,7 +5,7 @@ UIKit.notification({ message: `
- +
🤯
${message} @@ -21,6 +21,7 @@ From cd9f539a0908b79616b1317dbc4fe1497f673cd0 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 14:06:25 +0100 Subject: [PATCH 10/29] configurable logLevel - defaults to error --- packages/server/.env.template | 5 ++++- packages/server/scripts/jestSetup.js | 1 + packages/server/src/app.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/server/.env.template b/packages/server/.env.template index bc2e7954a4..170d391520 100644 --- a/packages/server/.env.template +++ b/packages/server/.env.template @@ -12,4 +12,7 @@ ADMIN_SECRET={{adminSecret}} JWT_SECRET={{cookieKey1}} # port to run http server on -PORT=4001 \ No newline at end of file +PORT=4001 + +# error level for koa-pino +LOG_LEVEL=error \ No newline at end of file diff --git a/packages/server/scripts/jestSetup.js b/packages/server/scripts/jestSetup.js index 5289aef9f4..ab5bc83885 100644 --- a/packages/server/scripts/jestSetup.js +++ b/packages/server/scripts/jestSetup.js @@ -5,3 +5,4 @@ process.env.JWT_SECRET = "test-jwtsecret" process.env.CLIENT_ID = "test-client-id" process.env.BUDIBASE_DIR = tmpdir("budibase-unittests") process.env.ADMIN_SECRET = "test-admin-secret" +process.env.LOG_LEVEL = "silent" diff --git a/packages/server/src/app.js b/packages/server/src/app.js index bec5f8d16e..f23aeca02c 100644 --- a/packages/server/src/app.js +++ b/packages/server/src/app.js @@ -15,7 +15,7 @@ app.use( prettyPrint: { levelFirst: true, }, - level: process.env.NODE_ENV === "jest" ? "silent" : "info", + level: env.LOG_LEVEL || "error", }) ) From 46da102670e7a9ecd81a946b4cc1f27597a1a7c5 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 14:56:21 +0100 Subject: [PATCH 11/29] bugfix: not selecting component after add --- .../userInterface/ComponentSelectionList.svelte | 9 +++++++++ .../src/components/userInterface/PagesList.svelte | 3 ++- .../src/pages/[application]/frontend/_layout.svelte | 3 ++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 2a46e5d6f6..d39acf872a 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -1,4 +1,5 @@ diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte index 562c813865..823f922bb6 100644 --- a/packages/builder/src/components/userInterface/PagesList.svelte +++ b/packages/builder/src/components/userInterface/PagesList.svelte @@ -20,7 +20,8 @@ }, ] - store.setCurrentPage($params.page ? $params.page : "main") + if (!$store.currentPageName) + store.setCurrentPage($params.page ? $params.page : "main") const changePage = id => { store.setCurrentPage(id) diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index deea52ce3e..293623f8d2 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -55,7 +55,8 @@
-
+ +
From cee06067a84593f523d7d65736720a132c5147ff Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 18:31:47 +0100 Subject: [PATCH 12/29] Update to Frontend UI Nav and Component Panel Components moved to the left Nav panel UI updated Props tabs moved up --- packages/builder/src/budibase.css | 14 ++-- .../ComponentPropertiesPanel.svelte | 1 + .../userInterface/ComponentsHierarchy.svelte | 13 ++- .../ComponentsPaneSwitcher.svelte | 81 +++++++++++++++++++ .../userInterface/FrontendNavigatePane.svelte | 80 +++++------------- .../userInterface/ItemTab/Item.svelte | 2 +- .../userInterface/PageLayout.svelte | 36 +++------ .../components/userInterface/PagesList.svelte | 57 ++++--------- .../userInterface/UserInterfaceRoot.svelte | 5 -- .../[application]/frontend/_layout.svelte | 5 -- packages/builder/src/pages/_layout.svelte | 12 +-- 11 files changed, 146 insertions(+), 160 deletions(-) create mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index f433b016da..0d74ed7221 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -57,23 +57,23 @@ .budibase__nav-item { cursor: pointer; - padding: 0 7px 0 3px; + padding: 0 4px 0 2px; height: 35px; - margin: 5px 20px 5px 0px; + margin: 5px 0px 4px 0px; border-radius: 0 5px 5px 0; display: flex; align-items: center; - font-weight: 500; - font-size: 13px; + font-size: 14px; + transition: 0.2s; } .budibase__nav-item.selected { - color: var(--button-text); - background: #f1f4fc; + color: var(--ink); + background: var(--blue-light); } .budibase__nav-item:hover { - background: #fafafa; + background: var(--grey-light); } .budibase__input { diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 726fb35aae..afce0576e1 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -105,6 +105,7 @@ display: flex; flex-direction: column; overflow-x: hidden; + padding: 20px; } .title > div:nth-child(1) { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 26929fcdce..bb6d369956 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -1,7 +1,6 @@ + +
+ {#if $store.currentFrontEndType === 'page' || $store.screens.length} +
+ + + + + +
+ +
+ {#if selected === PROPERTIES_TAB} + + {/if} + + {#if selected === COMPONENT_SELECTION_TAB} + + {/if} + +
+ {/if} + +
+ + diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 8b4b8e1843..565301213d 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -3,7 +3,6 @@ import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" import PageLayout from "components/userInterface/PageLayout.svelte" import PagesList from "components/userInterface/PagesList.svelte" - import { AddIcon } from "components/common/Icons" import NewScreen from "components/userInterface/NewScreen.svelte" const newScreen = () => { @@ -13,64 +12,44 @@ let newScreenPicker -
-
- Navigate - Pages -
+ -
- -
-
- -
+ -
-
-
- - Screens - -
- -
-
-
- -
+
+
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 8b600047d8..3fe67e6482 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -120,7 +120,6 @@ background-color: var(--white); height: calc(100vh - 49px); padding: 0; - overflow: scroll; display: flex; flex-direction: column; } @@ -215,10 +214,6 @@ letter-spacing: 1px; } - .border-line { - border-bottom: 1px solid #d8d8d8; - } - .components-list-container { padding: 20px 0px 0 0; } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 536da887d6..1dfdb82168 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -100,7 +100,6 @@ background-color: var(--white); height: calc(100vh - 49px); padding: 0; - overflow: scroll; display: flex; flex-direction: column; } @@ -117,8 +116,6 @@ background-color: var(--white); } - - .nav-group-header > div:nth-child(1) { padding: 0rem 0.5rem 0rem 0rem; vertical-align: bottom; @@ -126,8 +123,6 @@ margin-right: 5px; } - - .nav-group-header > div:nth-child(3) { vertical-align: bottom; grid-column-start: button; diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte index 363efcf619..001561cae9 100644 --- a/packages/builder/src/pages/_layout.svelte +++ b/packages/builder/src/pages/_layout.svelte @@ -119,22 +119,12 @@ diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte index cf23e39507..b1c84e6eac 100644 --- a/packages/builder/src/components/common/Switcher.svelte +++ b/packages/builder/src/components/common/Switcher.svelte @@ -9,9 +9,6 @@ let selectedIndex = 0 const isSelected = tab => selected === tab - - -
@@ -19,9 +16,7 @@
{#each tabs as tab} - {/each} @@ -30,13 +25,13 @@
{#if selectedIndex === 0} - + {:else if selectedIndex === 1} - + {:else if selectedIndex === 2} - + {:else if selectedIndex === 3} - + {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index d39acf872a..590cf9c985 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -33,15 +33,14 @@ const onComponentChosen = component => { store.addChildComponent(component._component) - + toggleTab("Navigate") - + // Get ID path const path = store.getPathToComponent($store.currentComponentInfo) // Go to correct URL $goto(`./:page/:screen/${path}`) - } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index bb6d369956..714e1c2cc9 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -61,7 +61,7 @@ {/if} - + {screen.title}
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 565301213d..cee63c4cbb 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -4,7 +4,7 @@ import PageLayout from "components/userInterface/PageLayout.svelte" import PagesList from "components/userInterface/PagesList.svelte" import NewScreen from "components/userInterface/NewScreen.svelte" - + const newScreen = () => { newScreenPicker.show() } @@ -14,15 +14,10 @@ - + -
@@ -30,59 +25,25 @@ \ No newline at end of file + diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index f35a080a65..ec32e1cb44 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -55,8 +55,8 @@ class:rotate={$store.currentPreviewItem.name !== _layout.title}> - - Master Screen + + Master Screen
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} @@ -79,7 +79,6 @@ onOk={() => store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 1dfdb82168..e30c11daae 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -26,11 +26,9 @@ } }) - let confirmDeleteDialog let componentToDelete = "" - let settingsView const settings = () => { settingsView.show() @@ -50,21 +48,20 @@
- +
- +
-
{#if $store.currentPageName && $store.currentPageName.length > 0} - + {/if}
@@ -76,8 +73,6 @@
- - div:nth-child(3):hover { color: var(--primary75); } - From 353c9c81951a72d8b0a7737615f10b66936d53ee Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 10:18:45 +0100 Subject: [PATCH 14/29] component nav dropdown menu --- .../builder/src/builderStore/store/index.js | 78 ++++++++++-- .../src/components/common/Icons/More.svelte | 8 ++ .../src/components/common/Icons/index.js | 1 + .../ComponentDropdownMenu.svelte | 116 ++++++++++++++++++ .../ComponentsHierarchyChildren.svelte | 54 +------- .../[application]/frontend/_layout.svelte | 1 + 6 files changed, 197 insertions(+), 61 deletions(-) create mode 100644 packages/builder/src/components/common/Icons/More.svelte create mode 100644 packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index f4d47064be..6755bc0a7c 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -64,11 +64,16 @@ export const getStore = () => { store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) + store.storeComponentForCopy = storeComponentForCopy(store) + store.pasteComponent = pasteComponent(store) return store } export default getStore +export const getComponentDefinition = (state, name) => + name.startsWith("##") ? getBuiltin(name) : state.components[name] + const setPackage = (store, initial) => async pkg => { const [main_screens, unauth_screens] = await Promise.all([ api @@ -317,8 +322,6 @@ const setCurrentPage = store => pageName => { }) } -// const getComponentDefinition = (components, name) => components.find(c => c.name === name) - /** * @param {string} componentToAdd - name of the component to add to the application * @param {string} presetName - name of the component preset if defined @@ -344,9 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => { return state } - const component = componentToAdd.startsWith("##") - ? getBuiltin(componentToAdd) - : state.components[componentToAdd] + const component = getComponentDefinition(componentToAdd) const presetProps = presetName ? component.presets[presetName] : {} @@ -398,14 +399,18 @@ const addTemplatedComponent = store => props => { }) } +const _selectComponent = (state, component) => { + const componentDef = component._component.startsWith("##") + ? component + : state.components[component._component] + state.currentComponentInfo = makePropsSafe(componentDef, component) + state.currentView = "component" + return state +} + const selectComponent = store => component => { store.update(state => { - const componentDef = component._component.startsWith("##") - ? component - : state.components[component._component] - state.currentComponentInfo = makePropsSafe(componentDef, component) - state.currentView = "component" - return state + return _selectComponent(state, component) }) } @@ -534,7 +539,6 @@ const copyComponent = store => component => { p._id = uuid() }) parent._children = [...parent._children, copiedComponent] - s.curren _saveCurrentPreviewItem(s) s.currentComponentInfo = copiedComponent return s @@ -572,10 +576,58 @@ const getPathToComponent = store => component => { return path } +const generateNewIdsForComponent = component => + walkProps(component, p => { + p._id = uuid() + }) + +const storeComponentForCopy = store => (component, cut = false) => { + store.update(s => { + const copiedComponent = cloneDeep(component) + s.componentToPaste = copiedComponent + if (cut) { + const parent = getParent(s.currentPreviewItem.props, component._id) + parent._children = parent._children.filter(c => c._id !== component._id) + _selectComponent(s, parent) + } + + return s + }) +} + +const pasteComponent = store => (targetComponent, mode) => { + store.update(s => { + if (!s.componentToPaste) return s + + const componentToPaste = cloneDeep(s.componentToPaste) + generateNewIdsForComponent(componentToPaste) + delete componentToPaste._cutId + + if (mode === "inside") { + targetComponent._children.push(componentToPaste) + return s + } + + const parent = getParent(s.currentPreviewItem.props, targetComponent) + + const targetIndex = parent._children.indexOf(targetComponent) + const index = mode === "above" ? targetIndex : targetIndex + 1 + parent._children.splice(index, 0, cloneDeep(componentToPaste)) + + _saveCurrentPreviewItem(s) + _selectComponent(s, componentToPaste) + + return s + }) +} + const getParent = (rootProps, child) => { let parent walkProps(rootProps, (p, breakWalk) => { - if (p._children && p._children.includes(child)) { + if ( + p._children && + (p._children.includes(child) || p._children.some(c => c._id === child)) + ) { parent = p breakWalk() } diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte new file mode 100644 index 0000000000..f072c48976 --- /dev/null +++ b/packages/builder/src/components/common/Icons/More.svelte @@ -0,0 +1,8 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js index 69b78421da..4e4b41082d 100644 --- a/packages/builder/src/components/common/Icons/index.js +++ b/packages/builder/src/components/common/Icons/index.js @@ -31,3 +31,4 @@ export { default as EmailIcon } from "./Email.svelte" export { default as TwitterIcon } from "./Twitter.svelte" export { default as InfoIcon } from "./Info.svelte" export { default as CloseIcon } from "./Close.svelte" +export { default as MoreIcon } from "./More.svelte" diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte new file mode 100644 index 0000000000..5a485f9680 --- /dev/null +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -0,0 +1,116 @@ + + +
{}}> + +
    dropdown.hide()} on:click={() => dropdown.hide()}> +
  • confirmDeleteDialog.show()}>Delete
    • +
  • store.moveUpComponent(component)}>Move up
    • +
  • store.moveDownComponent(component)}>Move down
    • +
  • store.copyComponent(component)}>Duplicate
    • +
  • store.storeComponentForCopy(component, true)}>Cut
    • +
  • store.storeComponentForCopy(component)}>Copy
    • +
    +
  • store.pasteComponent(component, "above")}>Paste above
    • +
  • store.pasteComponent(component, "below")}>Paste below
    • +
  • store.pasteComponent(component, "inside")}>Paste inside
    • +
+
+ + + + store.deleteComponent(component)} /> + + \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index eafc1834d0..a61d6960f2 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -3,6 +3,7 @@ import { store } from "builderStore" import { last } from "lodash/fp" import { pipe } from "components/common/core" + import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte" import { XCircleIcon, ChevronUpIcon, @@ -51,30 +52,9 @@ class:selected={currentComponent === component} style="padding-left: {level * 20 + 53}px">
{get_capitalised_name(component._component)}
-
- {#if index > 0} - - {/if} - {#if index < components.length - 1} - - {/if} +
+
- -
{#if component._children} @@ -111,7 +91,7 @@ font-size: 13px; } - .item button { + .actions { display: none; height: 20px; width: 28px; @@ -120,37 +100,15 @@ border-style: none; background: rgba(0, 0, 0, 0); cursor: pointer; - } - - .item button.copy { - width: 26px; + position: relative; } .item:hover { background: #fafafa; cursor: pointer; } - .item:hover button { + .item:hover .actions { display: block; } - .item:hover button:hover { - color: var(--button-text); - } - - .reorder-buttons { - display: flex; - flex-direction: column; - height: 100%; - } - - .reorder-buttons > button { - flex: 1 1 auto; - width: 30px; - height: 15px; - } - - .reorder-buttons > button.solo { - padding-top: 2px; - } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 536da887d6..9b38d64f5d 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -103,6 +103,7 @@ overflow: scroll; display: flex; flex-direction: column; + z-index: 5; } .preview-pane { From b29d39d525873c1a5d987274db868f1df0bfdf85 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 10:25:12 +0100 Subject: [PATCH 15/29] removing old component actions --- .../ComponentDropdownMenu.svelte | 20 ++----------------- .../userInterface/ComponentsHierarchy.svelte | 6 +----- .../ComponentsHierarchyChildren.svelte | 18 ++--------------- .../userInterface/PageLayout.svelte | 6 +----- 4 files changed, 6 insertions(+), 44 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 5a485f9680..e2f8943d9e 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -20,23 +20,6 @@ const showDropdown = () => { dropdown.show() } -/* -{#if index > 0} - - {/if} - {#if index < components.length - 1} - - {/if} -*/ -
{}}> @@ -77,8 +60,9 @@ const showDropdown = () => { border-style: none; border-radius: 2px; padding: 5px; - background: var(--grey); + background: transparent; cursor: pointer; + color: var(--button-text) } .menu { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 26929fcdce..e02874c0dd 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -72,11 +72,7 @@ {#if $store.currentPreviewItem.name === screen.title && screen.component.props._children} + currentComponent={$store.currentComponentInfo} /> {/if} {/each} diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index a61d6960f2..16aab64576 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -15,23 +15,13 @@ export let currentComponent export let onSelect = () => {} export let level = 0 - export let onDeleteComponent - export let onMoveUpComponent - export let onMoveDownComponent - export let onCopyComponent + const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const get_name = s => (!s ? "" : last(s.split("/"))) const get_capitalised_name = name => pipe(name, [get_name, capitalise]) - const moveDownComponent = component => { - const c = component - return () => { - return onMoveDownComponent(c) - } - } - const selectComponent = component => { // Set current component store.selectComponent(component) @@ -62,11 +52,7 @@ components={component._children} {currentComponent} {onSelect} - level={level + 1} - {onDeleteComponent} - {onMoveUpComponent} - {onMoveDownComponent} - {onCopyComponent} /> + level={level + 1} /> {/if} {/each} diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index 2a532f9624..c4b786c5b2 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -68,11 +68,7 @@ + currentComponent={$store.currentComponentInfo} /> {/if}
From 50ecfba39535bd1728db8edcb86dea295e8c6d75 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 11:04:32 +0100 Subject: [PATCH 16/29] few bugfixes --- .../builder/src/builderStore/store/index.js | 2 +- .../userInterface/ComponentDropdownMenu.svelte | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 6755bc0a7c..a034114b02 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -347,7 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => { return state } - const component = getComponentDefinition(componentToAdd) + const component = getComponentDefinition(state, componentToAdd) const presetProps = presetName ? component.presets[presetName] : {} diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index e2f8943d9e..5672ea6f4c 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -11,13 +11,15 @@ export let component let confirmDeleteDialog let dropdownEl -$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right" }); +$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false }); +$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false) $: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false $: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id const lastPartOfName = c => (c ? last(c._component.split("/")) : "") -const showDropdown = () => { - dropdown.show() + +const hideDropdown = () => { + dropdown.hide() } @@ -26,7 +28,7 @@ const showDropdown = () => { -
    dropdown.hide()} on:click={() => dropdown.hide()}> +
    • confirmDeleteDialog.show()}>Delete
    • store.moveUpComponent(component)}>Move up
    • store.moveDownComponent(component)}>Move down
      • @@ -56,13 +58,18 @@ const showDropdown = () => { z-index:9; } +.hidden { + display: none; +} + .root button { border-style: none; border-radius: 2px; padding: 5px; background: transparent; cursor: pointer; - color: var(--button-text) + color: var(--button-text); + outline: none; } .menu { From 8847de2264a610d4cf0c1dab774c4ab763008f4a Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Mon, 1 Jun 2020 11:11:06 +0100 Subject: [PATCH 17/29] Props fix The intial value is not being rendered. Display Flex must be selected. --- .../components/userInterface/propertyCategories.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index eaa2f41245..35d624140a 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -11,8 +11,9 @@ export const layout = [ label: "Display", key: "display", control: OptionSelect, - initialValue: "Flex", + initialValue: "Select Option", options: [ + { label: "Select Option", value: "" }, { label: "Flex", value: "flex" }, { label: "Inline Flex", value: "inline-flex" }, ], @@ -60,10 +61,10 @@ export const layout = [ label: "Wrap", key: "flex-wrap", control: OptionSelect, - initialValue: "Wrap", + initialValue: "NoWrap", options: [ - { label: "Wrap", value: "wrap" }, { label: "No Wrap", value: "nowrap" }, + { label: "Wrap", value: "wrap" }, { label: "Wrap Reverse", value: "wrap-reverse" }, ], }, @@ -195,10 +196,10 @@ export const typography = [ label: "Decoration", key: "text-decoration-line", control: OptionSelect, - defaultValue: "Underline", + defaultValue: "None", options: [ - { label: "Underline", value: "underline" }, { label: "None", value: "none" }, + { label: "Underline", value: "underline" }, { label: "Overline", value: "overline" }, { label: "Line-through", value: "line-through" }, { label: "Under Over", value: "underline overline" }, From 0db37061090bb38aa013b107391f92e32930f264 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 12:12:25 +0100 Subject: [PATCH 18/29] refactor component menu actions inside control --- .../builder/src/builderStore/store/index.js | 186 +----------------- .../builder/src/builderStore/storeUtils.js | 59 ++++++ .../ComponentDropdownMenu.svelte | 139 +++++++++++-- .../userInterface/ComponentsHierarchy.svelte | 12 -- .../userInterface/PageLayout.svelte | 12 -- .../userInterface/UserInterfaceRoot.svelte | 12 -- .../[application]/frontend/_layout.svelte | 12 -- 7 files changed, 193 insertions(+), 239 deletions(-) create mode 100644 packages/builder/src/builderStore/storeUtils.js diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index a034114b02..f94cea2399 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,4 +1,4 @@ -import { cloneDeep, values } from "lodash/fp" +import { values } from "lodash/fp" import { backendUiStore } from "builderStore" import * as backendStoreActions from "./backend" import { writable, get } from "svelte/store" @@ -16,6 +16,14 @@ import { buildCodeForScreens } from "../buildCodeForScreens" import { generate_screen_css } from "../generate_css" import { insertCodeMetadata } from "../insertCodeMetadata" import { uuid } from "../uuid" +import { + selectComponent as _selectComponent, + getParent, + walkProps, + savePage as _savePage, + saveCurrentPreviewItem as _saveCurrentPreviewItem, + saveScreenApi as _saveScreenApi, +} from "../storeUtils" export const getStore = () => { const initial = { @@ -57,15 +65,9 @@ export const getStore = () => { store.setComponentStyle = setComponentStyle(store) store.setComponentCode = setComponentCode(store) store.setScreenType = setScreenType(store) - store.deleteComponent = deleteComponent(store) - store.moveUpComponent = moveUpComponent(store) - store.moveDownComponent = moveDownComponent(store) - store.copyComponent = copyComponent(store) store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) - store.storeComponentForCopy = storeComponentForCopy(store) - store.pasteComponent = pasteComponent(store) return store } @@ -145,12 +147,6 @@ const _saveScreen = async (store, s, screen) => { return s } -const _saveScreenApi = (screen, s) => { - api - .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) - .then(() => _savePage(s)) -} - const createScreen = store => (screenName, route, layoutComponentName) => { store.update(state => { const rootComponent = state.components[layoutComponentName] @@ -282,15 +278,6 @@ const removeStylesheet = store => stylesheet => { }) } -const _savePage = async s => { - const page = s.pages[s.currentPageName] - await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { - page: { componentLibraries: s.pages.componentLibraries, ...page }, - uiFunctions: s.currentPageFunctions, - screens: page._screens, - }) -} - const setCurrentPage = store => pageName => { store.update(state => { const current_screens = state.pages[pageName]._screens @@ -399,15 +386,6 @@ const addTemplatedComponent = store => props => { }) } -const _selectComponent = (state, component) => { - const componentDef = component._component.startsWith("##") - ? component - : state.components[component._component] - state.currentComponentInfo = makePropsSafe(componentDef, component) - state.currentView = "component" - return state -} - const selectComponent = store => component => { store.update(state => { return _selectComponent(state, component) @@ -477,74 +455,6 @@ const setScreenType = store => type => { }) } -const deleteComponent = store => componentName => { - store.update(state => { - const parent = getParent(state.currentPreviewItem.props, componentName) - - if (parent) { - parent._children = parent._children.filter( - component => component !== componentName - ) - } - - _saveCurrentPreviewItem(state) - - return state - }) -} - -const moveUpComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === 0) return s - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex - 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) - - return s - }) -} - -const moveDownComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === parent._children.length - 1) return s - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex + 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) - - return s - }) -} - -const copyComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - const copiedComponent = cloneDeep(component) - walkProps(copiedComponent, p => { - p._id = uuid() - }) - parent._children = [...parent._children, copiedComponent] - _saveCurrentPreviewItem(s) - s.currentComponentInfo = copiedComponent - return s - }) -} - const getPathToComponent = store => component => { // Gets all the components to needed to construct a path. const tempStore = get(store) @@ -576,87 +486,9 @@ const getPathToComponent = store => component => { return path } -const generateNewIdsForComponent = component => - walkProps(component, p => { - p._id = uuid() - }) - -const storeComponentForCopy = store => (component, cut = false) => { - store.update(s => { - const copiedComponent = cloneDeep(component) - s.componentToPaste = copiedComponent - if (cut) { - const parent = getParent(s.currentPreviewItem.props, component._id) - parent._children = parent._children.filter(c => c._id !== component._id) - _selectComponent(s, parent) - } - - return s - }) -} - -const pasteComponent = store => (targetComponent, mode) => { - store.update(s => { - if (!s.componentToPaste) return s - - const componentToPaste = cloneDeep(s.componentToPaste) - generateNewIdsForComponent(componentToPaste) - delete componentToPaste._cutId - - if (mode === "inside") { - targetComponent._children.push(componentToPaste) - return s - } - - const parent = getParent(s.currentPreviewItem.props, targetComponent) - - const targetIndex = parent._children.indexOf(targetComponent) - const index = mode === "above" ? targetIndex : targetIndex + 1 - parent._children.splice(index, 0, cloneDeep(componentToPaste)) - - _saveCurrentPreviewItem(s) - _selectComponent(s, componentToPaste) - - return s - }) -} - -const getParent = (rootProps, child) => { - let parent - walkProps(rootProps, (p, breakWalk) => { - if ( - p._children && - (p._children.includes(child) || p._children.some(c => c._id === child)) - ) { - parent = p - breakWalk() - } - }) - return parent -} - -const walkProps = (props, action, cancelToken = null) => { - cancelToken = cancelToken || { cancelled: false } - action(props, () => { - cancelToken.cancelled = true - }) - - if (props._children) { - for (let child of props._children) { - if (cancelToken.cancelled) return - walkProps(child, action, cancelToken) - } - } -} - const setMetadataProp = store => (name, prop) => { store.update(s => { s.currentPreviewItem[name] = prop return s }) } - -const _saveCurrentPreviewItem = s => - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js new file mode 100644 index 0000000000..c8c0c7211a --- /dev/null +++ b/packages/builder/src/builderStore/storeUtils.js @@ -0,0 +1,59 @@ +import { makePropsSafe } from "components/userInterface/pagesParsing/createProps" +import api from "./api" + +export const selectComponent = (state, component) => { + const componentDef = component._component.startsWith("##") + ? component + : state.components[component._component] + state.currentComponentInfo = makePropsSafe(componentDef, component) + state.currentView = "component" + return state +} + +export const getParent = (rootProps, child) => { + let parent + walkProps(rootProps, (p, breakWalk) => { + if ( + p._children && + (p._children.includes(child) || p._children.some(c => c._id === child)) + ) { + parent = p + breakWalk() + } + }) + return parent +} + +export const saveCurrentPreviewItem = s => + s.currentFrontEndType === "page" + ? savePage(s) + : saveScreenApi(s.currentPreviewItem, s) + +export const savePage = async s => { + const page = s.pages[s.currentPageName] + await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { + page: { componentLibraries: s.pages.componentLibraries, ...page }, + uiFunctions: s.currentPageFunctions, + screens: page._screens, + }) +} + +export const saveScreenApi = (screen, s) => { + api + .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) + .then(() => savePage(s)) +} + +export const walkProps = (props, action, cancelToken = null) => { + cancelToken = cancelToken || { cancelled: false } + action(props, () => { + cancelToken.cancelled = true + }) + + if (props._children) { + for (let child of props._children) { + if (cancelToken.cancelled) return + walkProps(child, action, cancelToken) + } + } +} \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 5672ea6f4c..21ef4b2ab3 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -3,8 +3,10 @@ import { MoreIcon } from "components/common/Icons" import { store } from "builderStore" import { getComponentDefinition } from "builderStore/store" import ConfirmDialog from "components/common/ConfirmDialog.svelte" -import { last } from "lodash/fp" +import { last, cloneDeep } from "lodash/fp" import UIkit from "uikit" +import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils" +import { uuid } from "builderStore/uuid" export let component @@ -22,6 +24,119 @@ const hideDropdown = () => { dropdown.hide() } +const moveUpComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + + if (parent) { + const currentIndex = parent._children.indexOf(component) + if (currentIndex === 0) return s + + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex - 1, 0, component) + parent._children = newChildren + } + s.currentComponentInfo = component + saveCurrentPreviewItem(s) + + return s + }) +} + +const moveDownComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + + if (parent) { + const currentIndex = parent._children.indexOf(component) + if (currentIndex === parent._children.length - 1) return s + + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex + 1, 0, component) + parent._children = newChildren + } + s.currentComponentInfo = component + saveCurrentPreviewItem(s) + + return s + }) +} + +const copyComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + const copiedComponent = cloneDeep(component) + walkProps(copiedComponent, p => { + p._id = uuid() + }) + parent._children = [...parent._children, copiedComponent] + saveCurrentPreviewItem(s) + s.currentComponentInfo = copiedComponent + return s + }) +} + +const deleteComponent = () => { + store.update(state => { + const parent = getParent(state.currentPreviewItem.props, component) + + if (parent) { + parent._children = parent._children.filter( + c => c !== component + ) + } + + saveCurrentPreviewItem(state) + + return state + }) +} + +const generateNewIdsForComponent = c => + walkProps(c, p => { + p._id = uuid() + }) + +const storeComponentForCopy = (cut = false) => { + store.update(s => { + const copiedComponent = cloneDeep(component) + s.componentToPaste = copiedComponent + if (cut) { + const parent = getParent(s.currentPreviewItem.props, component._id) + parent._children = parent._children.filter(c => c._id !== component._id) + selectComponent(s, parent) + } + + return s + }) +} + +const pasteComponent = mode => { + store.update(s => { + if (!s.componentToPaste) return s + + const componentToPaste = cloneDeep(s.componentToPaste) + generateNewIdsForComponent(componentToPaste) + delete componentToPaste._cutId + + if (mode === "inside") { + component._children.push(componentToPaste) + return s + } + + const parent = getParent(s.currentPreviewItem.props, component) + + const targetIndex = parent._children.indexOf(component) + const index = mode === "above" ? targetIndex : targetIndex + 1 + parent._children.splice(index, 0, cloneDeep(componentToPaste)) + + saveCurrentPreviewItem(s) + selectComponent(s, componentToPaste) + + return s + }) +} +
      {}}> @@ -30,15 +145,15 @@ const hideDropdown = () => {
      • confirmDeleteDialog.show()}>Delete
        • -
      • store.moveUpComponent(component)}>Move up
        • -
      • store.moveDownComponent(component)}>Move down
        • -
      • store.copyComponent(component)}>Duplicate
        • -
      • store.storeComponentForCopy(component, true)}>Cut
        • -
      • store.storeComponentForCopy(component)}>Copy
        • +
      • Move up
        • +
      • Move down
        • +
      • Duplicate
        • +
      • storeComponentForCopy(true)}>Cut
        • +
      • storeComponentForCopy(false)}>Copy
        • -
      • store.pasteComponent(component, "above")}>Paste above
        • -
      • store.pasteComponent(component, "below")}>Paste below
        • -
      • store.pasteComponent(component, "inside")}>Paste inside
        • +
      • pasteComponent("above")}>Paste above
        • +
      • pasteComponent("below")}>Paste below
        • +
      • pasteComponent("inside")}>Paste inside
      @@ -49,7 +164,7 @@ const hideDropdown = () => { title="Confirm Delete" body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`} okText="Delete Component" - onOk={() => store.deleteComponent(component)} /> + onOk={deleteComponent} /> \ No newline at end of file + .disabled { + color: var(--grey-dark); + cursor: default; + } + diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 16aab64576..344e02d127 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -16,7 +16,6 @@ export let onSelect = () => {} export let level = 0 - const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const get_name = s => (!s ? "" : last(s.split("/"))) @@ -43,7 +42,7 @@ style="padding-left: {level * 20 + 53}px">
      {get_capitalised_name(component._component)}
      - +
@@ -96,5 +95,4 @@ .item:hover .actions { display: block; } - diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index cee63c4cbb..86804885ff 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -45,5 +45,4 @@ .newscreen:hover { background: var(--grey-light); } - From 4eb637d3bd091b718c53eecf73ef79f198e960ca Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Mon, 1 Jun 2020 15:31:55 +0100 Subject: [PATCH 20/29] UI update for dropdown --- .../ComponentDropdownMenu.svelte | 56 +++++++++++-------- .../ComponentsHierarchyChildren.svelte | 8 +-- .../userInterface/propertyCategories.js | 12 ++-- packages/builder/src/pages/_layout.svelte | 2 +- 4 files changed, 45 insertions(+), 33 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 712031aa3d..a9edabfd16 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -1,4 +1,4 @@ - -
+
{/if} -
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index f567766b50..59fc13bcd1 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -14,7 +14,10 @@ - + diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index d63f8f7dc1..c2ad4b590b 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -40,29 +40,27 @@ } +
+ + + + + Master Screen +
-
- - - - - Master Screen -
- - {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} - - {/if} +{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} + +{/if}