Add inline editing to record block

cortezaproject · Jul 10, 2023 · 0b9ccdb · 0b9ccdb
1 parent 1e82fc0
commit 0b9ccdb
Show file tree

Hide file tree

Showing 16 changed files with 292 additions and 217 deletions.
diff --git a/client/web/compose/src/components/Common/Hint.vue b/client/web/compose/src/components/Common/Hint.vue
@@ -2,7 +2,7 @@
   <div
     v-if="text"
     :id="id"
-    class="ml-1"
+    class="d-flex align-items-center ml-2"
   >
     <font-awesome-icon
       :icon="['far', 'question-circle']"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
@@ -1,34 +1,29 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
 
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <multi
       v-if="field.isMulti"
       v-slot="ctx"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Email.vue b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
@@ -1,35 +1,30 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :state="state"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
 
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <multi
       v-if="field.isMulti"
       v-slot="ctx"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/File.vue b/client/web/compose/src/components/ModuleFields/Editor/File.vue
@@ -1,34 +1,29 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
-
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
+
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <uploader
       :endpoint="endpoint"
       :accepted-files="mimetypes"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue b/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
@@ -1,35 +1,30 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :state="state"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
-
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
+
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <div class="d-flex w-100">
       <b-button
         v-if="field.isMulti"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Number.vue b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
@@ -1,34 +1,29 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
-
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
 
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <multi
       v-if="field.isMulti"
       v-slot="ctx"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -1,34 +1,29 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
-
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
+
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <multi
       v-if="field.isMulti"
       :value.sync="value"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -1,34 +1,29 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :class="formGroupStyleClasses"
   >
     <template
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
-
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
 
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <template v-if="field.isMulti">
       <multi
         :value.sync="value"