From fc6fd025b791b8cab56541ebb4a6420181042857 Mon Sep 17 00:00:00 2001 From: MattIPv4 Date: Tue, 28 Apr 2020 19:53:59 +0100 Subject: [PATCH] Server section all done --- package-lock.json | 13 ++ package.json | 1 + src/nginxconfig/scss/style.scss | 93 +++++++++++++ src/nginxconfig/templates/app.vue | 3 +- src/nginxconfig/templates/domain.vue | 3 +- .../templates/domain_sections/server.vue | 129 +++++++++++++++++- .../util/computed_from_defaults.js | 15 ++ 7 files changed, 253 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 02fd0a6..0612de5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6254,6 +6254,19 @@ "dev": true, "optional": true }, + "pretty-checkbox": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pretty-checkbox/-/pretty-checkbox-3.0.3.tgz", + "integrity": "sha1-1JyAE6j8CO4MLW695FNGS/28Qo4=" + }, + "pretty-checkbox-vue": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/pretty-checkbox-vue/-/pretty-checkbox-vue-1.1.9.tgz", + "integrity": "sha512-45HOanzF+BUTD5prwCoNrtEFYVzWtASTIIPtPQxGCajC097pFD/9mbyjEjoTsu8Tk4/rSyA7RNk6JpFWVHpLag==", + "requires": { + "pretty-checkbox": "^3.0.3" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", diff --git a/package.json b/package.json index ec8c060..f255318 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "do-bulma": "git+https://github.com/do-community/do-bulma.git", "do-vue": "git+https://github.com/do-community/do-vue.git", "parcel-bundler": "^1.12.4", + "pretty-checkbox-vue": "^1.1.9", "vue": "^2.6.11", "vue-hot-reload-api": "^2.3.3", "vuex": "^3.3.0" diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss index cc339ce..f1be658 100644 --- a/src/nginxconfig/scss/style.scss +++ b/src/nginxconfig/scss/style.scss @@ -15,9 +15,14 @@ limitations under the License. */ $header: #0071fe; +$highlight: #f2c94c; @import "~do-bulma/src/style"; .do-bulma { + $pretty--color-dark: $primary; + $pretty--color-default: $primary; + @import "~pretty-checkbox/src/pretty-checkbox"; + .tabs { ul { li { @@ -63,4 +68,92 @@ $header: #0071fe; flex-direction: row; justify-content: space-between; } + + .field-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 -.5rem; + + .field { + flex-grow: 1; + margin: 0 .5rem; + text-align: left; + } + + + .field-row, + + .field { + margin-top: 1rem; + } + } + + .field { + &.is-horizontal { + align-items: center; + } + + &.is-changed { + input { + &, + &:focus { + background: rgba($highlight, .35); + } + } + + .checkbox { + background: rgba($highlight, .35); + } + } + + label { + @include sailec-medium; + + color: $dark-blue; + font-size: 1rem; + } + + .button { + &.is-static { + background: $panel; + border-color: $border; + border-style: solid; + border-width: 1px 0 1px 1px; + color: $dark-grey; + padding: 0 ($margin * 1.5); + } + } + } + + .checkbox { + border-radius: $border-radius; + padding: .25rem .5rem; + + .pretty { + &.p-icon { + font-size: 18px; + margin: 0; + + .state { + .icon { + &::before { + color: $panel; + font-size: 14px; + } + } + + label { + color: $dark-grey; + font-size: 14px; + padding-left: calc(#{$margin / 2} + 1.5em); + text-indent: initial; + + &::before, + &::after { + font-size: 18px; + } + } + } + } + } + } } diff --git a/src/nginxconfig/templates/app.vue b/src/nginxconfig/templates/app.vue index bd60e48..c56d4a3 100644 --- a/src/nginxconfig/templates/app.vue +++ b/src/nginxconfig/templates/app.vue @@ -76,7 +76,8 @@ limitations under the License. const data = this.$data.domains[index]; const changes = Object.entries(data).reduce((prev, current) => { if (current[0] === 'presets') return prev; // Ignore changes from presets - prev += Object.values(current[1]).filter(d => d.default !== d.computed).length; + prev += Object.values(current[1]) + .filter(d => d.enabled && d.default !== d.value).length; return prev; }, 0); if (changes) return ` (${changes.toLocaleString()})`; diff --git a/src/nginxconfig/templates/domain.vue b/src/nginxconfig/templates/domain.vue index 891b25d..80365bd 100644 --- a/src/nginxconfig/templates/domain.vue +++ b/src/nginxconfig/templates/domain.vue @@ -58,7 +58,8 @@ limitations under the License. methods: { changes(tab) { if (tab === 'presets') return ''; // Ignore changes from presets - const changes = Object.values(this.$props.data[tab]).filter(d => d.default !== d.computed).length; + const changes = Object.values(this.$props.data[tab]) + .filter(d => d.enabled && d.default !== d.value).length; if (changes) return ` (${changes.toLocaleString()})`; return ''; }, diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue index 723efb1..dd098e3 100644 --- a/src/nginxconfig/templates/domain_sections/server.vue +++ b/src/nginxconfig/templates/domain_sections/server.vue @@ -1,11 +1,116 @@ diff --git a/src/nginxconfig/util/computed_from_defaults.js b/src/nginxconfig/util/computed_from_defaults.js index 3db4a33..2a73c5d 100644 --- a/src/nginxconfig/util/computed_from_defaults.js +++ b/src/nginxconfig/util/computed_from_defaults.js @@ -9,6 +9,21 @@ export default (defaults) => { this.$props.data[key].computed = value; }, }; + prev[key + 'Default'] = { + get() { + return this.$props.data[key].default; + }, + }; + prev[key + 'Enabled'] = { + get() { + return this.$props.data[key].enabled; + }, + }; + prev[key + 'Changed'] = { + get() { + return this.$props.data[key].enabled && this.$props.data[key].value !== this.$props.data[key].default; + }, + }; return prev; }, {}); };