Fix RTE labels not provided in worfklow content configurator

2024-12-11 15:35:18 +01:00
parent 11834331b4
commit c28861184b
12 changed files with 75 additions and 81 deletions
@@ -71,7 +71,6 @@
        :labels="{
          urlPlaceholder: $t('content.urlPlaceholder'),
          ok: $t('content.ok'),
-          openLinkInNewTab: $t('content.openLinkInNewTab'),
        }"
      />

@@ -6,7 +6,6 @@
        :labels="{
          urlPlaceholder: $t('content.urlPlaceholder'),
          ok: $t('content.ok'),
-          openLinkInNewTab: $t('content.openLinkInNewTab'),
        }"
      />

@@ -6,7 +6,6 @@
      :labels="{
        urlPlaceholder: $t('label.urlPlaceholder'),
        ok: $t('label.ok'),
-        openLinkInNewTab: $t('label.openLinkInNewTab'),
      }"
    />
  </b-form-group>
@@ -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)"
@@ -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 () {
@@ -21,7 +21,7 @@ export default {
    },
    currentValue: {
      type: String,
-      required: false,
+      default: '',
    },
  },
  methods: {
@@ -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()
        }
@@ -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;
  }
@@ -140,7 +140,6 @@ chart:
 content:
  ok: Ok
  label: Content
-  openLinkInNewTab: Open link in a new tab
  urlPlaceholder: https://example.tld
 file:
  label: File
@@ -21,7 +21,6 @@ name: Name
 new-workflow: New Workflow
 none: None
 now: Now
-
 offset: Offset
 offset-expression: Offset (expression)
 permissions: Permissions
@@ -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
+  short: Path
@@ -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;
  }
 }