From ca735bc14a22d17b4e6c4f333cdc816da113fd2a Mon Sep 17 00:00:00 2001
From: wh1te909 <dcparsi@gmail.com>
Date: Tue, 4 May 2021 06:47:53 +0000
Subject: [PATCH] fix ui for custom fields with very long text

---
 web/src/components/CustomField.vue                          | 6 ++++++
 web/src/components/ScriptManager.vue                        | 3 ---
 .../components/modals/coresettings/CustomFieldsTable.vue    | 5 ++++-
 web/src/components/modals/coresettings/EditCoreSettings.vue | 2 +-
 web/src/mixins/mixins.js                                    | 3 +++
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/components/CustomField.vue b/web/src/components/CustomField.vue
index 48c0f844..0cf10b0f 100644
--- a/web/src/components/CustomField.vue
+++ b/web/src/components/CustomField.vue
@@ -1,5 +1,6 @@
 <template>
   <q-input
+    :class="longTextClass(field)"
     v-if="field.type === 'text' || field.type === 'number'"
     ref="input"
     outlined
@@ -88,6 +89,11 @@ export default {
         return field.default_value_bool ? `Default value: ${field.default_value_bool}` : "";
       else return field.default_value_string ? `Default value: ${field.default_value_string}` : "";
     },
+    longTextClass(field) {
+      return field.hasOwnProperty("default_value_string") && field.default_value_string.length >= 130
+        ? "q-mb-xl q-mt-xl"
+        : "";
+    },
   },
   computed: {
     validationRules() {
diff --git a/web/src/components/ScriptManager.vue b/web/src/components/ScriptManager.vue
index d051ffa2..4b830559 100644
--- a/web/src/components/ScriptManager.vue
+++ b/web/src/components/ScriptManager.vue
@@ -465,9 +465,6 @@ export default {
         })
         .catch(e => {});
     },
-    truncateText(txt) {
-      return txt.length >= 60 ? txt.substring(0, 60) + "..." : txt;
-    },
     isBuiltInScript(pk) {
       try {
         return this.scripts.find(i => i.id === pk).script_type === "builtin" ? true : false;
diff --git a/web/src/components/modals/coresettings/CustomFieldsTable.vue b/web/src/components/modals/coresettings/CustomFieldsTable.vue
index c7ae7309..d8d84e75 100644
--- a/web/src/components/modals/coresettings/CustomFieldsTable.vue
+++ b/web/src/components/modals/coresettings/CustomFieldsTable.vue
@@ -57,7 +57,10 @@
           <span v-if="props.row.default_values_multiple.length > 0">{{ props.row.default_values_multiple }}</span>
         </q-td>
         <q-td v-else>
-          {{ props.row.default_value_string }}
+          {{ truncateText(props.row.default_value_string) }}
+          <q-tooltip v-if="props.row.default_value_string.length >= 60" content-style="font-size: 12px">{{
+            props.row.default_value_string
+          }}</q-tooltip>
         </q-td>
         <!-- required -->
         <q-td>
diff --git a/web/src/components/modals/coresettings/EditCoreSettings.vue b/web/src/components/modals/coresettings/EditCoreSettings.vue
index c7b26e4f..cab1f65e 100644
--- a/web/src/components/modals/coresettings/EditCoreSettings.vue
+++ b/web/src/components/modals/coresettings/EditCoreSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card style="min-width: 85vh">
+  <q-card style="min-width: 60vw">
     <q-splitter v-model="splitterModel">
       <template v-slot:before>
         <q-tabs dense v-model="tab" vertical class="text-primary">
diff --git a/web/src/mixins/mixins.js b/web/src/mixins/mixins.js
index eeb99ff4..f811e4de 100644
--- a/web/src/mixins/mixins.js
+++ b/web/src/mixins/mixins.js
@@ -209,5 +209,8 @@ export default {
       const b = date.formatDate(ret, "h:mm A");
       return `${a} at ${b}`;
     },
+    truncateText(txt) {
+      return txt.length >= 60 ? txt.substring(0, 60) + "..." : txt;
+    },
   }
 }