WIP

cortezaproject · Jul 5, 2023 · fc6dbe8 · fc6dbe8
1 parent 7c67a80
commit fc6dbe8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 32 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/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.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/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -23,24 +23,26 @@
           v-if="canDisplay(field)"
         >
           <label
-            class="text-primary mb-0 d-flex align-items-center"
-            :class="{ 'mb-0': !!(field.options.description || {}).view || false }"
+            class="d-flex align-items-center text-primary mb-0"
           >
-            {{ field.label || field.name }}
+            <span class="d-inline-block text-truncate mw-100 py-1">
+              {{ field.label || field.name }}
+            </span>
+
             <hint
               :id="field.fieldID"
               :text="((field.options.hint || {}).view || '')"
-              class="d-inline-block"
             />
 
             <div
-              v-if="options.inlineRecordEditEnabled && isFieldEditable(field) && !editable"
+              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
               class="inline-actions ml-2"
             >
               <b-button
                 :title="$t('field.inlineEdit.button.title')"
                 variant="outline-light"
                 size="sm"
+                :disabled="editable"
                 class="text-secondary border-0"
                 @click="editInlineField(fieldRecord, field)"
               >
@@ -51,14 +53,16 @@
             </div>
           </label>
 
-          <small
-            class="text-muted"
+          <div
+            class="small text-muted"
+            :class="{ 'mb-1': !!(field.options.description || {}).view }"
           >
             {{ (field.options.description || {}).view }}
-          </small>
+          </div>
+
           <div
             v-if="field.canReadRecordValue"
-            class="value mt-2"
+            class="value mt-1"
           >
             <field-viewer
               v-bind="{ ...$props, field }"

diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -13,12 +13,12 @@
 
     <div
       v-else-if="module"
-      class="mt-3 px-3"
+      class="mt-3"
     >
       <div
         v-for="field in fields"
         :key="field.id"
-        :class="{ 'd-flex flex-column': canDisplay(field) }"
+        :class="{ 'd-flex flex-column mb-3 px-3': canDisplay(field) }"
       >
         <template
           v-if="canDisplay(field)"