From 037c53d22b53222b61226bf48f8bd3988b6dafa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= Date: Thu, 8 Jun 2023 12:05:24 +0200 Subject: [PATCH] Add runtime CSS customization for webapps --- client/web/admin/public/index.html | 5 +- .../components/Settings/UI/CUICustomCSS.vue | 136 ++++++++++++++++++ client/web/admin/src/views/UI/Index.vue | 30 +++- client/web/compose/public/index.html | 5 +- client/web/discovery/public/index.html | 5 +- client/web/one/public/index.html | 5 +- client/web/privacy/public/index.html | 5 +- client/web/reporter/public/index.html | 5 +- client/web/workflow/public/index.html | 5 +- lib/vue/package.json | 1 + lib/vue/src/components/index.ts | 1 + lib/vue/src/components/input/CAceEditor.vue | 127 ++++++++++++++++ lib/vue/src/components/input/index.ts | 1 + lib/vue/yarn.lock | 12 ++ locale/en/corteza-webapp-admin/general.yaml | 1 + .../en/corteza-webapp-admin/ui.settings.yaml | 5 + server/pkg/webapp/serve.go | 11 ++ server/system/types/app_settings.go | 2 + 18 files changed, 348 insertions(+), 14 deletions(-) create mode 100644 client/web/admin/src/components/Settings/UI/CUICustomCSS.vue create mode 100644 lib/vue/src/components/input/CAceEditor.vue diff --git a/client/web/admin/public/index.html b/client/web/admin/public/index.html index f749418ea..9a9d87ea8 100644 --- a/client/web/admin/public/index.html +++ b/client/web/admin/public/index.html @@ -14,7 +14,7 @@ <%= FLAVOUR %> - +
+ diff --git a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue new file mode 100644 index 000000000..ff23c968f --- /dev/null +++ b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue @@ -0,0 +1,136 @@ + + + diff --git a/client/web/admin/src/views/UI/Index.vue b/client/web/admin/src/views/UI/Index.vue index 8da468934..890fcbb01 100644 --- a/client/web/admin/src/views/UI/Index.vue +++ b/client/web/admin/src/views/UI/Index.vue @@ -11,13 +11,22 @@ :can-manage="canManage" /> + + @@ -25,6 +34,7 @@ diff --git a/client/web/discovery/public/index.html b/client/web/discovery/public/index.html index 7839cd124..1b717b274 100644 --- a/client/web/discovery/public/index.html +++ b/client/web/discovery/public/index.html @@ -13,7 +13,7 @@ <%= FLAVOUR %> - +
+ \ No newline at end of file diff --git a/client/web/one/public/index.html b/client/web/one/public/index.html index f749418ea..aec50e0b3 100644 --- a/client/web/one/public/index.html +++ b/client/web/one/public/index.html @@ -14,7 +14,7 @@ <%= FLAVOUR %> - +
+ diff --git a/client/web/privacy/public/index.html b/client/web/privacy/public/index.html index 19d2aa5c9..5e648e1c4 100644 --- a/client/web/privacy/public/index.html +++ b/client/web/privacy/public/index.html @@ -13,7 +13,7 @@ <%= FLAVOUR %> - +
+ \ No newline at end of file diff --git a/client/web/reporter/public/index.html b/client/web/reporter/public/index.html index 19d2aa5c9..d3922e1b0 100644 --- a/client/web/reporter/public/index.html +++ b/client/web/reporter/public/index.html @@ -13,7 +13,7 @@ <%= FLAVOUR %> - +
+ \ No newline at end of file diff --git a/client/web/workflow/public/index.html b/client/web/workflow/public/index.html index 368a8424d..fadc788c3 100644 --- a/client/web/workflow/public/index.html +++ b/client/web/workflow/public/index.html @@ -23,7 +23,7 @@ } - +
+ diff --git a/lib/vue/package.json b/lib/vue/package.json index 38ba27276..43411fe19 100644 --- a/lib/vue/package.json +++ b/lib/vue/package.json @@ -52,6 +52,7 @@ "vue-echarts": "^6.2.3", "vue-select": "^3.4.0", "vue-swatches": "^1.0.4", + "vue2-ace-editor": "^0.0.15", "vuedraggable": "^2.23.0", "vuex": "^3.6.2", "websocket-extensions": "^0.1.4", diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts index 2a323f893..55f757687 100644 --- a/lib/vue/src/components/index.ts +++ b/lib/vue/src/components/index.ts @@ -18,6 +18,7 @@ export { CRichTextInput, CInputCheckbox, CInputColorPicker, + CAceEditor, } from './input' export { diff --git a/lib/vue/src/components/input/CAceEditor.vue b/lib/vue/src/components/input/CAceEditor.vue new file mode 100644 index 000000000..b66f72ab2 --- /dev/null +++ b/lib/vue/src/components/input/CAceEditor.vue @@ -0,0 +1,127 @@ + + + + + + \ No newline at end of file diff --git a/lib/vue/src/components/input/index.ts b/lib/vue/src/components/input/index.ts index 84d2c5361..2de29dfbf 100644 --- a/lib/vue/src/components/input/index.ts +++ b/lib/vue/src/components/input/index.ts @@ -7,3 +7,4 @@ export { default as CInputSearch } from './CInputSearch.vue' export { default as CRichTextInput } from './CRichTextInput/index.vue' export { default as CInputCheckbox } from './CInputCheckbox.vue' export { default as CInputColorPicker } from './CInputColorPicker.vue' +export { default as CAceEditor } from './CAceEditor.vue' diff --git a/lib/vue/yarn.lock b/lib/vue/yarn.lock index e31574589..ce9e8ab23 100644 --- a/lib/vue/yarn.lock +++ b/lib/vue/yarn.lock @@ -2475,6 +2475,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" +brace@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58" + integrity sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q== + braces@^2.3.1, braces@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729" @@ -11362,6 +11367,13 @@ vue-tour@^2.0.0: jump.js "^1.0.2" vue "^2.6.12" +vue2-ace-editor@^0.0.15: + version "0.0.15" + resolved "https://registry.yarnpkg.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz#569b208e54ae771ae1edd3b8902ac42f0edc74e3" + integrity sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ== + dependencies: + brace "^0.11.0" + vue@^2.6.12: version "2.6.14" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235" diff --git a/locale/en/corteza-webapp-admin/general.yaml b/locale/en/corteza-webapp-admin/general.yaml index d78e90b18..c5900cfba 100644 --- a/locale/en/corteza-webapp-admin/general.yaml +++ b/locale/en/corteza-webapp-admin/general.yaml @@ -43,6 +43,7 @@ label: loadMore: Load more loading: Loading saveAndClose: Save and close + cancel: Cancel submit: Submit delete: Delete undelete: Undelete diff --git a/locale/en/corteza-webapp-admin/ui.settings.yaml b/locale/en/corteza-webapp-admin/ui.settings.yaml index fe20f5fc7..adc59f678 100644 --- a/locale/en/corteza-webapp-admin/ui.settings.yaml +++ b/locale/en/corteza-webapp-admin/ui.settings.yaml @@ -21,6 +21,11 @@ editor: uploader: instructions: 'Click or drop favicon file here to upload' uploading: 'Uploading favicon' + + custom-css: + title: Custom CSS + modal: + editor: Custom CSS editor topbar: title: Topbar diff --git a/server/pkg/webapp/serve.go b/server/pkg/webapp/serve.go index 0a15c0657..6fa449573 100644 --- a/server/pkg/webapp/serve.go +++ b/server/pkg/webapp/serve.go @@ -12,6 +12,8 @@ import ( "github.com/cortezaproject/corteza/server/pkg/logger" "github.com/cortezaproject/corteza/server/pkg/options" + "github.com/cortezaproject/corteza/server/system/service" + "github.com/cortezaproject/corteza/server/system/types" "github.com/go-chi/chi/v5" "go.uber.org/zap" ) @@ -24,6 +26,7 @@ type ( webappBaseUrl string discoveryApiBaseUrl string sentryUrl string + settings *types.AppSettings } ) @@ -68,6 +71,7 @@ func MakeWebappServer(log *zap.Logger, httpSrvOpt options.HttpServerOpt, authOpt webappBaseUrl: httpSrvOpt.BaseUrl, discoveryApiBaseUrl: discoveryApiBaseUrl, sentryUrl: webappSentryUrl, + settings: service.CurrentSettings, }) r.Get(webBaseUrl+"*", serveIndex(httpSrvOpt, appIndexHTMLs[app], fs)) } @@ -80,6 +84,7 @@ func MakeWebappServer(log *zap.Logger, httpSrvOpt options.HttpServerOpt, authOpt webappBaseUrl: httpSrvOpt.BaseUrl, discoveryApiBaseUrl: discoveryApiBaseUrl, sentryUrl: webappSentryUrl, + settings: service.CurrentSettings, }) r.Get(webBaseUrl+"*", serveIndex(httpSrvOpt, appIndexHTMLs[""], fs)) } @@ -139,6 +144,12 @@ func serveConfig(r chi.Router, config webappConfig) { _, _ = fmt.Fprintf(w, line, "SentryDSN", config.sentryUrl) } }) + + r.Get(options.CleanBase(config.appUrl, "custom.css"), func(w http.ResponseWriter, r *http.Request) { + w.Header().Add("Content-Type", "text/css") + + _, _ = fmt.Fprint(w, config.settings.UI.CustomCSS) + }) } // Reads and modifies index HTML for the webapp diff --git a/server/system/types/app_settings.go b/server/system/types/app_settings.go index ee091afb5..a6f977e8c 100644 --- a/server/system/types/app_settings.go +++ b/server/system/types/app_settings.go @@ -248,6 +248,8 @@ type ( Disabled bool `json:"disabled"` } `kv:"sidebar,final" json:"sidebar"` + CustomCSS string `kv:"custom-css" json:"customCSS"` + Topbar struct { HideAppSelector bool `json:"hideAppSelector"` HideHelp bool `json:"hideHelp"`