Merge pull request #1427 from FlowFuse/1341-text-truncation

Text: Add text truncation/wrap option
FlowFuse · Oct 29, 2024 · a0ccb04 · a0ccb04
2 parents 3e6b804 + 5e6695f
commit a0ccb04
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/nodes/widgets/locales/en-US/ui_text.json b/nodes/widgets/locales/en-US/ui_text.json
@@ -14,7 +14,8 @@
             "font": "Font",
             "textSize": "Text Size",
             "textColor": "Text Color",
-            "enterSampleHere": "Enter Sample Here"
+            "enterSampleHere": "Enter Sample Here",
+            "wrapText": "Wrap Text"
         }
     }
 }
diff --git a/nodes/widgets/ui_text.html b/nodes/widgets/ui_text.html
@@ -97,6 +97,7 @@
                 font: { value: 'Helvetica' },
                 fontSize: { value: 16 },
                 color: { value: '#717171' },
+                wrapText: { value: false },
                 className: { value: '' }
             },
             inputs: 1,
@@ -259,6 +260,10 @@
         <label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
         <input type="text" id="node-input-format" placeholder="{{msg.payload}}">
     </div>-->
+    <div class="form-row">
+        <label for="node-input-wrapText"><i class="fa fa-ellipsis-h"></i> <span data-i18n="ui-text.label.wrapText"></label>
+        <input type="checkbox" id="node-input-wrapText" style="width: auto">
+    </div>
     <div class="form-row">
         <label style="vertical-align: top"><i class="fa fa-th-large"></i> <span data-i18n="ui-text.label.layout"></label>
         <div style="display:inline-block">

diff --git a/ui/src/widgets/ui-text/UIText.vue b/ui/src/widgets/ui-text/UIText.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="nrdb-ui-text" :class="'nrdb-ui-text--' + layout" :style="style">
+    <div class="nrdb-ui-text" :class="['nrdb-ui-text--' + layout, wrapText ? 'nrdb-ui-text--wrap' : '']" :style="style">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <label class="nrdb-ui-text-label" v-html="label" />
         <!-- eslint-disable-next-line vue/no-v-html -->
@@ -36,6 +36,9 @@ export default {
         layout () {
             return this.getProperty('layout')
         },
+        wrapText () {
+            return this.getProperty('wrapText')
+        },
         style () {
             if (this.props.style) {
                 return {
@@ -86,6 +89,9 @@ export default {
     text-overflow: ellipsis;
     line-height: initial;
 }
+.nrdb-ui-text.nrdb-ui-text--wrap .nrdb-ui-text-value {
+    white-space: normal;
+}
 
 /* Layouts */
 .nrdb-ui-text--row-left {