From 867474255142bca2837c3d0a01ca90bb85d2f4fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 7 Feb 2024 15:37:43 +0100
Subject: [PATCH] Move admin logo upload to theming

---
 .../src/components/CUploaderWithPreview.vue   |  10 +-
 .../Settings/UI/CUIBrandingEditor.vue         |  89 +++++++++++++
 .../components/Settings/UI/CUILogoEditor.vue  | 119 ------------------
 client/web/admin/src/views/UI/Index.vue       |   8 --
 .../en/corteza-webapp-admin/ui.settings.yaml  |  34 ++---
 5 files changed, 102 insertions(+), 158 deletions(-)
 delete mode 100644 client/web/admin/src/components/Settings/UI/CUILogoEditor.vue

diff --git a/client/web/admin/src/components/CUploaderWithPreview.vue b/client/web/admin/src/components/CUploaderWithPreview.vue
index c81402579..a0e3eab46 100644
--- a/client/web/admin/src/components/CUploaderWithPreview.vue
+++ b/client/web/admin/src/components/CUploaderWithPreview.vue
@@ -4,11 +4,11 @@
   >
     <div
       v-if="value"
-      class="preview d-flex w-100 mb-2"
+      class="d-flex justify-content-center w-100 mb-2"
     >
       <b-img
         :src="value"
-        class="w-100 h-auto"
+        class="mw-100 h-auto"
       />
     </div>
 
@@ -70,9 +70,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-.preview {
-  height: 300px;
-  background: transparent;
-}
-</style>
diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
index b414b8389..6bcfc29a5 100644
--- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
@@ -62,6 +62,65 @@
             </b-form-group>
           </b-col>
         </b-row>
+
+        <b-row v-else>
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              label-class="d-flex align-items-center text-primary"
+            >
+              <template #label>
+                {{ $t('mainLogo.title') }}
+
+                <c-input-confirm
+                  v-if="uploadedFile('ui.main-logo')"
+                  show-icon
+                  class="ml-auto"
+                  @confirmed="resetAttachment('ui.main-logo')"
+                />
+              </template>
+
+              <c-uploader-with-preview
+                :value="uploadedFile('ui.main-logo')"
+                :endpoint="'/settings/ui.main-logo'"
+                :disabled="!canManage"
+                :labels="$t('mainLogo.uploader', { returnObjects: true })"
+                @upload="onUpload($event)"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              label-class="d-flex align-items-center text-primary h-lg-100"
+            >
+              <template #label>
+                {{ $t('iconLogo.title') }}
+
+                <c-input-confirm
+                  v-if="uploadedFile('ui.icon-logo')"
+                  show-icon
+                  class="ml-auto"
+                  @confirmed="resetAttachment('ui.icon-logo')"
+                />
+              </template>
+
+              <c-uploader-with-preview
+                :value="uploadedFile('ui.icon-logo')"
+                :endpoint="'/settings/ui.icon-logo'"
+                :disabled="!canManage"
+                :labels="$t('iconLogo.uploader', { returnObjects: true })"
+                @upload="onUpload($event)"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
         <b-row>
           <b-col>
             <b-form-group
@@ -121,6 +180,7 @@
 </template>
 
 <script>
+import CUploaderWithPreview from 'corteza-webapp-admin/src/components//CUploaderWithPreview'
 import { components } from '@cortezaproject/corteza-vue'
 const { CInputColorPicker, CAceEditor } = components
 
@@ -133,6 +193,7 @@ export default {
   },
 
   components: {
+    CUploaderWithPreview,
     CInputColorPicker,
     CAceEditor,
   },
@@ -307,6 +368,34 @@ export default {
       this.$set(theme.variables, key, theme.id === 'light' ? this.lightModeVariables[key] : this.darkModeVariables[key])
     },
 
+    onUpload ({ name, value }) {
+      this.$set(this.settings, name, value)
+    },
+
+    resetAttachment (name) {
+      this.$SystemAPI.settingsUpdate({ values: [{ name, value: undefined }], upload: {} })
+        .then(() => {
+          this.$set(this.settings, name, undefined)
+        })
+    },
+
+    uploadedFile (name) {
+      const localAttachment = /^attachment:(\d+)/
+
+      switch (true) {
+        case this.settings[name] && localAttachment.test(this.settings[name]):
+          const [, attachmentID] = localAttachment.exec(this.settings[name])
+
+          return this.$SystemAPI.baseURL +
+            this.$SystemAPI.attachmentOriginalEndpoint({
+              attachmentID,
+              kind: 'settings',
+              name,
+            })
+      }
+
+      return undefined
+    },
   },
 }
 </script>
diff --git a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue b/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
deleted file mode 100644
index 5fe47be92..000000000
--- a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <b-row>
-    <b-col
-      cols="12"
-      lg="6"
-    >
-      <b-card
-        header-class="d-flex align-items-center justify-content-between pr-2 border-bottom"
-        class="shadow-sm mb-3"
-      >
-        <template #header>
-          <h4 class="mb-0">
-            {{ $t('mainLogo.title') }}
-          </h4>
-
-          <c-input-confirm
-            v-if="uploadedFile('ui.main-logo')"
-            show-icon
-            @confirmed="resetAttachment('ui.main-logo')"
-          />
-        </template>
-
-        <c-uploader-with-preview
-          :value="uploadedFile('ui.main-logo')"
-          :endpoint="'/settings/ui.main-logo'"
-          :disabled="!canManage"
-          :labels="$t('mainLogo.uploader', { returnObjects: true })"
-          @upload="onUpload($event)"
-        />
-      </b-card>
-    </b-col>
-
-    <b-col
-      cols="12"
-      lg="6"
-    >
-      <b-card
-        header-class="d-flex align-items-center justify-content-between pr-2 border-bottom"
-        class="shadow-sm mb-3"
-      >
-        <template #header>
-          <h4 class="mb-0">
-            {{ $t('iconLogo.title') }}
-          </h4>
-
-          <c-input-confirm
-            v-if="uploadedFile('ui.icon-logo')"
-            show-icon
-            @confirmed="resetAttachment('ui.icon-logo')"
-          />
-        </template>
-
-        <c-uploader-with-preview
-          :value="uploadedFile('ui.icon-logo')"
-          :endpoint="'/settings/ui.icon-logo'"
-          :disabled="!canManage"
-          :labels="$t('iconLogo.uploader', { returnObjects: true })"
-          @upload="onUpload($event)"
-          @clear="resetAttachment('ui.icon-logo')"
-        />
-      </b-card>
-    </b-col>
-  </b-row>
-</template>
-
-<script>
-import CUploaderWithPreview from 'corteza-webapp-admin/src/components//CUploaderWithPreview'
-
-export default {
-  name: 'CUILogoEditor',
-
-  components: {
-    CUploaderWithPreview,
-  },
-
-  props: {
-    settings: {
-      type: Object,
-      required: true,
-    },
-
-    canManage: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  methods: {
-    onUpload ({ name, value }) {
-      this.$set(this.settings, name, value)
-    },
-
-    resetAttachment (name) {
-      this.$SystemAPI.settingsUpdate({ values: [{ name, value: undefined }], upload: {} })
-        .then(() => {
-          this.$set(this.settings, name, undefined)
-        })
-    },
-
-    uploadedFile (name) {
-      const localAttachment = /^attachment:(\d+)/
-
-      switch (true) {
-        case this.settings[name] && localAttachment.test(this.settings[name]):
-          const [, attachmentID] = localAttachment.exec(this.settings[name])
-
-          return this.$SystemAPI.baseURL +
-            this.$SystemAPI.attachmentOriginalEndpoint({
-              attachmentID,
-              kind: 'settings',
-              name,
-            })
-      }
-
-      return undefined
-    },
-  },
-}
-</script>
diff --git a/client/web/admin/src/views/UI/Index.vue b/client/web/admin/src/views/UI/Index.vue
index 5104e460d..d101c97c5 100644
--- a/client/web/admin/src/views/UI/Index.vue
+++ b/client/web/admin/src/views/UI/Index.vue
@@ -6,12 +6,6 @@
       :title="$t('title')"
     />
 
-    <c-ui-logo-editor
-      v-if="settings"
-      :settings="settings"
-      :can-manage="canManage"
-    />
-
     <c-ui-branding-editor
       v-if="settings"
       :settings="settings"
@@ -35,7 +29,6 @@
 
 <script>
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
-import CUILogoEditor from 'corteza-webapp-admin/src/components/Settings/UI/CUILogoEditor'
 import CUIBrandingEditor from '../../components/Settings/UI/CUIBrandingEditor.vue'
 import CUITopbarSettings from 'corteza-webapp-admin/src/components/Settings/UI/CUITopbarSettings'
 import { mapGetters } from 'vuex'
@@ -49,7 +42,6 @@ export default {
   },
 
   components: {
-    'c-ui-logo-editor': CUILogoEditor,
     'c-ui-branding-editor': CUIBrandingEditor,
     'c-ui-topbar-settings': CUITopbarSettings,
   },
diff --git a/locale/en/corteza-webapp-admin/ui.settings.yaml b/locale/en/corteza-webapp-admin/ui.settings.yaml
index 9e0ba942b..dbab4782f 100644
--- a/locale/en/corteza-webapp-admin/ui.settings.yaml
+++ b/locale/en/corteza-webapp-admin/ui.settings.yaml
@@ -1,26 +1,5 @@
 editor:
-  title: 'User Interface Settings'
-
-  mainLogo:
-    title: 'Main logo'
-
-    uploader:
-      instructions: 'Click or drop main logo here to upload'
-      uploading: 'Uploading main logo'
-
-  iconLogo:
-    title: 'Icon logo'
-
-    uploader:
-      instructions: 'Click or drop icon logo image here to upload'
-      uploading: 'Uploading icon logo'
-
-  favicon:
-    title: 'Favicon'
-
-    uploader:
-      instructions: 'Click or drop favicon file here to upload'
-      uploading: 'Uploading favicon'
+  title: User Interface Settings
 
   corteza-studio:
     title: Theming
@@ -28,6 +7,16 @@ editor:
     sassNotInstalled: No dart-sass binaries were detected. For guidance on how to set it up, refer to
     installSassDocs: docs here
     custom-css: Custom CSS
+    mainLogo:
+      title: Main logo
+      uploader:
+        instructions: Click or drop main logo here to upload
+        uploading: Uploading main logo
+    iconLogo:
+      title: Icon logo
+      uploader:
+        instructions: Click or drop icon logo image here to upload
+        uploading: Uploading icon logo
     label:
       default: Default
     tabs:
@@ -51,7 +40,6 @@ editor:
 
   topbar:
     title: Topbar
-
     general: General
 
     app-selector: