From c28861184b6dfa1143ed8096fd6ec98f903056f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 8 Nov 2024 12:35:37 +0100
Subject: [PATCH] Fix RTE labels not provided in worfklow content configurator

---
 .../components/ModuleFields/Editor/String.vue |  1 -
 .../PageBlocks/ContentConfigurator.vue        |  1 -
 .../DisplayElements/Configurators/Text.vue    |  1 -
 .../src/components/Configurator/Content.vue   |  5 +-
 .../CRichTextInput/RToolbar/TMark/Link.vue    | 35 +++++--------
 .../CRichTextInput/RToolbar/TMark/base.vue    |  2 +-
 .../src/components/navigation/CSidebar.vue    | 52 +++++++++++--------
 lib/vue/src/components/navigation/CTopbar.vue | 40 +++++++-------
 locale/en/corteza-webapp-compose/block.yaml   |  1 -
 .../en/corteza-webapp-workflow/general.yaml   |  1 -
 locale/en/corteza-webapp-workflow/steps.yaml  |  9 +++-
 .../src/scss/main/18201141_custom_webapp.scss |  8 ---
 12 files changed, 75 insertions(+), 81 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
index 51c0e345c..cb736c2cb 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/String.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -71,7 +71,6 @@
         :labels="{
           urlPlaceholder: $t('content.urlPlaceholder'),
           ok: $t('content.ok'),
-          openLinkInNewTab: $t('content.openLinkInNewTab'),
         }"
       />
 
diff --git a/client/web/compose/src/components/PageBlocks/ContentConfigurator.vue b/client/web/compose/src/components/PageBlocks/ContentConfigurator.vue
index a70617d39..d1732cff1 100644
--- a/client/web/compose/src/components/PageBlocks/ContentConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ContentConfigurator.vue
@@ -6,7 +6,6 @@
         :labels="{
           urlPlaceholder: $t('content.urlPlaceholder'),
           ok: $t('content.ok'),
-          openLinkInNewTab: $t('content.openLinkInNewTab'),
         }"
       />
 
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Text.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Text.vue
index 7ccf46c49..2d83f9a15 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Text.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Text.vue
@@ -6,7 +6,6 @@
       :labels="{
         urlPlaceholder: $t('label.urlPlaceholder'),
         ok: $t('label.ok'),
-        openLinkInNewTab: $t('label.openLinkInNewTab'),
       }"
     />
   </b-form-group>
diff --git a/client/web/workflow/src/components/Configurator/Content.vue b/client/web/workflow/src/components/Configurator/Content.vue
index 28f471d2f..70fb0c8f8 100644
--- a/client/web/workflow/src/components/Configurator/Content.vue
+++ b/client/web/workflow/src/components/Configurator/Content.vue
@@ -2,9 +2,8 @@
   <c-rich-text-input
     v-model="label"
     :labels="{
-      urlPlaceholder: $t('content.urlPlaceholder'),
-      ok: $t('content.ok'),
-      openLinkInNewTab: $t('content.openLinkInNewTab'),
+      urlPlaceholder: $t('steps:content.configurator.urlPlaceholder'),
+      ok: $t('steps:content.configurator.ok'),
     }"
     class="m-3"
     @input="$emit('update-value', $event)"
diff --git a/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/Link.vue b/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/Link.vue
index 3ab96841f..d129330f3 100644
--- a/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/Link.vue
+++ b/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/Link.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="link-popover-container">
     <b-button
+      id="link-popover"
       variant="link"
       class="text-dark font-weight-bold text-decoration-none"
-      id="link-popover"
-      @click="showPopover">
-
+      @click="showPopover"
+    >
       <span :class="activeClasses(format.attrs)">
         <font-awesome-icon icon="link" />
       </span>
@@ -13,39 +13,30 @@
 
     <b-popover
       v-if="currentValue"
+      ref="popover"
       triggers="focus"
       target="link-popover"
       placement="auto"
       :show.sync="visible"
       container="link-popover-container"
-      ref="popover">
-
-      <b-input-group>
+    >
+      <b-input-group style="min-width: 250px;">
         <b-form-input
-          type="url"
           v-model="attrs.href"
+          type="url"
           autofocus
-          :state="urlValid ? null : false"
           :placeholder="labels.urlPlaceholder"
-          style="min-width:100px"
           @keydown.enter.prevent.stop="link"
-          @keydown.esc.prevent.stop="close" 
+          @keydown.esc.prevent.stop="close"
         />
         <b-input-group-append>
           <b-button
+            variant="outline-success"
             @click="link"
-            :disabled="!urlValid"
-            variant="outline-success">
+          >
             {{ labels.ok }}
           </b-button>
         </b-input-group-append>
-        <b-checkbox
-          v-model="attrs.target"
-          value="_blank"
-          unchecked-value="_self"
-          class="py-1">
-            {{ labels.openLinkInNewTab }}
-        </b-checkbox>
       </b-input-group>
     </b-popover>
   </div>
@@ -59,14 +50,14 @@ import base from './base.vue'
  * input the URL that should be applied.
  */
 export default {
-  name: 't-mark-link',
+  name: 'TMarkLink',
   extends: base,
 
   props: {
     labels: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
 
   data () {
diff --git a/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/base.vue b/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/base.vue
index 76ed9aade..647d2460e 100644
--- a/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/base.vue
+++ b/lib/vue/src/components/input/CRichTextInput/RToolbar/TMark/base.vue
@@ -21,7 +21,7 @@ export default {
     },
     currentValue: {
       type: String,
-      required: false,
+      default: '',
     },
   },
   methods: {
diff --git a/lib/vue/src/components/navigation/CSidebar.vue b/lib/vue/src/components/navigation/CSidebar.vue
index 18f9b4ab9..1d1f4da0f 100644
--- a/lib/vue/src/components/navigation/CSidebar.vue
+++ b/lib/vue/src/components/navigation/CSidebar.vue
@@ -81,7 +81,6 @@
             />
           </div>
 
-
           <hr
             v-if="!isExpanded"
             class="my-2"
@@ -173,12 +172,12 @@ export default {
 
     icon: {
       type: String,
-      default: () => ''
+      default: () => '',
     },
 
     logo: {
       type: String,
-      default: () => ''
+      default: () => '',
     },
 
     right: {
@@ -189,7 +188,7 @@ export default {
 
   data () {
     return {
-      sidebarSettings : {},
+      sidebarSettings: {},
       isMobile: false,
     }
   },
@@ -202,6 +201,10 @@ export default {
 
       set (expanded) {
         this.$emit('update:expanded', expanded)
+
+        if (!expanded) {
+          this.isPinned = false
+        }
       },
     },
 
@@ -216,18 +219,6 @@ export default {
     },
   },
 
-  created () {
-    this.checkIfMobile()
-
-    this.$root.$on('close-sidebar', this.closeSidebar)
-    window.addEventListener('resize', this.checkIfMobile)
-  },
-
-  beforeDestroy () {
-    this.$root.$off('close-sidebar', this.closeSidebar)
-    window.removeEventListener('resize', this.checkIfMobile)
-  },
-
   watch: {
     '$route.name': {
       immediate: true,
@@ -243,6 +234,18 @@ export default {
     },
   },
 
+  created () {
+    this.checkIfMobile()
+
+    this.$root.$on('close-sidebar', this.closeSidebar)
+    window.addEventListener('resize', this.checkIfMobile)
+  },
+
+  beforeDestroy () {
+    this.$root.$off('close-sidebar', this.closeSidebar)
+    window.removeEventListener('resize', this.checkIfMobile)
+  },
+
   methods: {
     checkIfMobile: throttle(function () {
       this.isMobile = window.innerWidth < 1024 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
@@ -272,15 +275,18 @@ export default {
     },
 
     defaultSidebarAppearance () {
-      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebarSettings'))
-      if (localstorage_settings) {
-        this.sidebarSettings = localstorage_settings
+      const localStorageSettings = JSON.parse(window.localStorage.getItem('sidebarSettings'))
+
+      if (localStorageSettings) {
+        this.sidebarSettings = localStorageSettings
       }
-      const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]
+
+      const appSidebar = (localStorageSettings || {})[this.$root.$options.name]
+
       if (!this.isMobile) {
-        if (app_sidebar) {
-          this.isExpanded = app_sidebar.pinned
-          this.isPinned = app_sidebar.pinned
+        if (appSidebar) {
+          this.isExpanded = appSidebar.pinned
+          this.isPinned = appSidebar.pinned
         } else {
           this.openSidebar()
         }
diff --git a/lib/vue/src/components/navigation/CTopbar.vue b/lib/vue/src/components/navigation/CTopbar.vue
index 704369a36..fab6d6866 100644
--- a/lib/vue/src/components/navigation/CTopbar.vue
+++ b/lib/vue/src/components/navigation/CTopbar.vue
@@ -2,9 +2,7 @@
   <div class="header-navigation d-flex flex-wrap align-items-center py-2 px-3 gap-2">
     <div
       class="sidebar-spacer"
-      :class="{
-        'expanded': sidebarPinned,
-      }"
+      :class="{ 'expanded': sidebarPinned }"
     />
 
     <h2 class="title mb-0">
@@ -115,7 +113,7 @@
             v-if="avatarExists"
             class="avatar d-flex h-100"
             :style="{
-              'background-image': avatarExists  ? `url(${profileAvatarUrl})` : 'none',
+              'background-image': avatarExists ? `url(${profileAvatarUrl})` : 'none',
             }"
           />
 
@@ -172,7 +170,7 @@
         </b-dropdown-item>
 
         <b-dropdown
-        v-if="!settings.hideThemeSelector"
+          v-if="!settings.hideThemeSelector"
           id="theme-dropleft"
           variant="link"
           text="Theme"
@@ -199,8 +197,8 @@
         <b-dropdown-item
           data-test-id="dropdown-profile-logout"
           href=""
-          @click="$auth.logout()"
           class="mt-2"
+          @click="$auth.logout()"
         >
           {{ labels.userSettingsLogout }}
         </b-dropdown-item>
@@ -211,17 +209,11 @@
 
 <script>
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faMoon, faSun} from '@fortawesome/free-solid-svg-icons'
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faMoon, faSun)
 
 export default {
-  data() {
-    return {
-      currentTheme: 'light',
-      isThemeDropdownVisible: false,
-    }
-  },
 
   props: {
     sidebarPinned: {
@@ -238,7 +230,7 @@ export default {
 
     appSelectorURL: {
       type: String,
-      default: '../'
+      default: '../',
     },
 
     settings: {
@@ -251,6 +243,12 @@ export default {
       required: true,
     },
   },
+  data () {
+    return {
+      currentTheme: 'light',
+      isThemeDropdownVisible: false,
+    }
+  },
 
   computed: {
     userProfileURL () {
@@ -296,7 +294,7 @@ export default {
     },
 
     avatarExists () {
-      return this.$auth.user.meta.avatarID !== "0" && this.$auth.user.meta.avatarID
+      return this.$auth.user.meta.avatarID !== '0' && this.$auth.user.meta.avatarID
     },
 
     themes () {
@@ -360,8 +358,13 @@ $nav-user-icon-size: calc(var(--topbar-height) - 16px);
   min-height: var(--topbar-height);
   background-color: var(--topbar-bg);
 
-  .sidebar-spacer.expanded {
-    min-width: calc(var(--sidebar-width) - 50px);
+  .sidebar-spacer {
+    display: none;
+    min-width: calc(var(--sidebar-width) - 60px);
+
+    &.expanded {
+      display: block;
+    }
   }
 }
 
@@ -383,13 +386,14 @@ $nav-user-icon-size: calc(var(--topbar-height) - 16px);
   display: flex;
   align-items: center;
   min-height: $nav-user-icon-size;
-  padding-left: 42px;
+  padding-left: 47px;
 
   .vue-portal-target {
     display: -webkit-box; /* For Safari and old versions of Chrome */
     display: -ms-flexbox; /* For old versions of IE */
     -webkit-box-orient: vertical; /* For Safari and old versions of Chrome */
     -webkit-line-clamp: 3; /* Maximum number of lines to display */
+    line-clamp: 3; /* Maximum number of lines to display */
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index c1016b34e..0d1374803 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -140,7 +140,6 @@ chart:
 content:
   ok: Ok
   label: Content
-  openLinkInNewTab: Open link in a new tab
   urlPlaceholder: https://example.tld
 file:
   label: File
diff --git a/locale/en/corteza-webapp-workflow/general.yaml b/locale/en/corteza-webapp-workflow/general.yaml
index a9a47340e..cf7f5cc52 100644
--- a/locale/en/corteza-webapp-workflow/general.yaml
+++ b/locale/en/corteza-webapp-workflow/general.yaml
@@ -21,7 +21,6 @@ name: Name
 new-workflow: New Workflow
 none: None
 now: Now
-
 offset: Offset
 offset-expression: Offset (expression)
 permissions: Permissions
diff --git a/locale/en/corteza-webapp-workflow/steps.yaml b/locale/en/corteza-webapp-workflow/steps.yaml
index b0d3a5634..9c63923b9 100644
--- a/locale/en/corteza-webapp-workflow/steps.yaml
+++ b/locale/en/corteza-webapp-workflow/steps.yaml
@@ -2,6 +2,13 @@ break:
   label: Break
   short: Break
   tooltip: Stop iterator execution and continue with workflow
+content:
+  label: Content
+  short: Content
+  tooltip: Content block used for text annotations
+  configurator:
+    ok: Ok
+    urlPlaceholder: https://example.tld
 continue:
   label: Continue
   short: Continue
@@ -115,4 +122,4 @@ content:
   tooltip: Content block used for text annotations
 path:
   label: Path
-  short: Path
\ No newline at end of file
+  short: Path
diff --git a/server/assets/src/scss/main/18201141_custom_webapp.scss b/server/assets/src/scss/main/18201141_custom_webapp.scss
index 0652b1118..bd2077cb3 100644
--- a/server/assets/src/scss/main/18201141_custom_webapp.scss
+++ b/server/assets/src/scss/main/18201141_custom_webapp.scss
@@ -280,17 +280,9 @@ fieldset.required {
 
 .sidebar-spacer {
   min-width: 0px;
-  -webkit-transition: min-width 0.15s ease-in-out;
-  -moz-transition: min-width 0.15s ease-in-out;
-  -o-transition: min-width 0.15s ease-in-out;
-  transition: min-width 0.15s ease-in-out;
 
   &.expanded {
     min-width: calc(var(--sidebar-width));
-    -webkit-transition: min-width 0.2s ease-in-out;
-    -moz-transition: min-width 0.2s ease-in-out;
-    -o-transition: min-width 0.2s ease-in-out;
-    transition: min-width 0.2s ease-in-out;
   }
 }