Add runtime CSS customization for webapps

cortezaproject · Jun 27, 2023 · 037c53d · 037c53d
1 parent a974019
commit 037c53d
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 14 deletions.
diff --git a/client/web/admin/public/index.html b/client/web/admin/public/index.html
@@ -14,7 +14,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="admin">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -26,6 +26,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
@@ -0,0 +1,136 @@
+<template>
+  <b-card
+    class="shadow-sm"
+    header-bg-variant="white"
+    footer-bg-variant="white"
+  >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
+    <c-ace-editor
+      v-model="customCSS"
+      lang="css"
+      height="300px"
+      font-size="14px"
+      show-line-numbers
+      :border="false"
+      :show-popout="true"
+      @open="openEditorModal"
+    />
+
+    <b-modal
+      id="custom-css-editor"
+      v-model="showEditorModal"
+      :title="$t('modal.editor')"
+      cancel-variant="link"
+      size="lg"
+      :ok-title="$t('general:label.saveAndClose')"
+      :cancel-title="$t('general:label.cancel')"
+      body-class="p-0"
+      @ok="saveCustomCSSInput"
+      @hidden="resetCustomCSSInput"
+    >
+      <c-ace-editor
+        v-model="modalCSSInput"
+        lang="css"
+        height="500px"
+        font-size="14px"
+        show-line-numbers
+        :border="false"
+        :show-popout="false"
+      />
+    </b-modal>
+
+    <template #footer>
+      <c-submit-button
+        :disabled="!canManage"
+        :processing="processing"
+        :success="success"
+        class="float-right mt-2"
+        @submit="onSubmit"
+      />
+    </template>
+  </b-card>
+</template>
+
+<script>
+import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CAceEditor } = components
+
+export default {
+  name: 'CUIEditorCustomCSS',
+
+  i18nOptions: {
+    namespaces: 'ui.settings',
+    keyPrefix: 'editor.custom-css',
+  },
+
+  components: {
+    CSubmitButton,
+    CAceEditor,
+  },
+
+  props: {
+    settings: {
+      type: Object,
+      required: true,
+    },
+
+    processing: {
+      type: Boolean,
+      value: false,
+    },
+
+    success: {
+      type: Boolean,
+      value: false,
+    },
+
+    canManage: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  data () {
+    return {
+      customCSS: '',
+      modalCSSInput: undefined,
+      showEditorModal: false,
+    }
+  },
+
+  watch: {
+    settings: {
+      immediate: true,
+      handler (settings) {
+        this.customCSS = settings['ui.custom-css'] || ''
+      },
+    },
+  },
+
+  methods: {
+    onSubmit () {
+      this.$emit('submit', { 'ui.custom-css': this.customCSS })
+    },
+
+    openEditorModal () {
+      this.modalCSSInput = this.customCSS
+      this.showEditorModal = true
+    },
+
+    saveCustomCSSInput () {
+      this.customCSS = this.modalCSSInput
+    },
+
+    resetCustomCSSInput () {
+      this.modalCSSInput = undefined
+    },
+  },
+
+}
+</script>
diff --git a/client/web/admin/src/views/UI/Index.vue b/client/web/admin/src/views/UI/Index.vue
@@ -11,20 +11,30 @@
       :can-manage="canManage"
     />
 
+    <c-ui-custom-css
+      :settings="settings"
+      :processing="customCSS.processing"
+      :success="customCSS.success"
+      :can-manage="canManage"
+      class="mt-3"
+      @submit="onSubmit($event, 'customCSS')"
+    />
+
     <c-ui-topbar-settings
       :settings="settings"
       :processing="topbar.processing"
       :success="topbar.success"
       :can-manage="canManage"
       class="mt-3"
-      @submit="onTopbarSubmit"
+      @submit="onSubmit($event, 'topbar')"
     />
   </b-container>
 </template>
 
 <script>
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CUILogoEditor from 'corteza-webapp-admin/src/components/Settings/UI/CUILogoEditor'
+import CUICustomCSS from 'corteza-webapp-admin/src/components/Settings/UI/CUICustomCSS.vue'
 import CUITopbarSettings from 'corteza-webapp-admin/src/components/Settings/UI/CUITopbarSettings'
 import { mapGetters } from 'vuex'
 
@@ -38,6 +48,7 @@ export default {
 
   components: {
     'c-ui-logo-editor': CUILogoEditor,
+    'c-ui-custom-css': CUICustomCSS,
     'c-ui-topbar-settings': CUITopbarSettings,
   },
 
@@ -53,6 +64,11 @@ export default {
         processing: false,
         success: false,
       },
+
+      customCSS: {
+        processing: false,
+        success: false,
+      },
     }
   },
 
@@ -85,22 +101,22 @@ export default {
         })
     },
 
-    onTopbarSubmit (settings) {
-      this.topbar.processing = true
+    onSubmit (settings, type) {
+      this[type].processing = true
 
       const values = Object.entries(settings).map(([name, value]) => {
         return { name, value }
       })
 
       this.$SystemAPI.settingsUpdate({ values })
         .then(() => {
-          this.animateSuccess('topbar')
-          this.toastSuccess(this.$t('notification:settings.compose.update.success'))
+          this.animateSuccess(type)
+          this.toastSuccess(this.$t('notification:settings.ui.update.success'))
           this.$Settings.fetch()
         })
-        .catch(this.toastErrorHandler(this.$t('notification:settings.compose.update.error')))
+        .catch(this.toastErrorHandler(this.$t('notification:settings.ui.update.error')))
         .finally(() => {
-          this.topbar.processing = false
+          this[type].processing = false
         })
     },
   },

diff --git a/client/web/compose/public/index.html b/client/web/compose/public/index.html
@@ -14,7 +14,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="compose">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -26,6 +26,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/discovery/public/index.html b/client/web/discovery/public/index.html
@@ -13,7 +13,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="discovery">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -25,6 +25,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/one/public/index.html b/client/web/one/public/index.html
@@ -14,7 +14,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="one">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -26,6 +26,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/privacy/public/index.html b/client/web/privacy/public/index.html
@@ -13,7 +13,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="privacy">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -25,6 +25,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/reporter/public/index.html b/client/web/reporter/public/index.html
@@ -13,7 +13,7 @@
     <link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
     <title><%= FLAVOUR %></title>
   </head>
-  <body>
+  <body id="reporter">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -25,6 +25,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/client/web/workflow/public/index.html b/client/web/workflow/public/index.html
@@ -23,7 +23,7 @@
       }
     </style>
   </head>
-  <body>
+  <body id="workflow">
     <noscript>
       <strong>
         JavaScript is disabled in your browser!
@@ -35,6 +35,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <style>
+      @import url("<%= BASE_URL %>custom.css");
+    </style>
     <script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
   </body>
 </html>
diff --git 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
@@ -18,6 +18,7 @@ export {
   CRichTextInput,
   CInputCheckbox,
   CInputColorPicker,
+  CAceEditor,
 } from './input'
 
 export {