From 1d67e906a3ea0114426600f64ea5fab160672c8d Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Tue, 28 Mar 2023 17:16:32 +0300
Subject: [PATCH] Apply preview styles from file page block to module field

---
 .../ModuleFields/Configurator/File.vue        | 113 +++++++-----------
 .../PageBlocks/FileConfigurator.vue           |   8 +-
 lib/js/src/compose/types/module-field/file.ts |  30 ++---
 locale/en/corteza-webapp-compose/field.yaml   |   1 +
 4 files changed, 58 insertions(+), 94 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
index 5aec75e43..9a70c1291 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
@@ -54,6 +54,8 @@
         {{ $t('kind.file.view.previewStyle') }}
       </h5>
 
+      <small>{{ $t('kind.file.view.description' ) }}</small>
+
       <b-row
         align-v="center"
         class="mb-2 mt-2"
@@ -64,17 +66,11 @@
         >
           <b-form-group
             :label="$t('kind.file.view.height')"
+            label-class="text-primary"
           >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.height"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.height')"
-              />
-            </b-input-group>
+            <b-form-input
+              v-model="f.options.height"
+            />
           </b-form-group>
         </b-col>
 
@@ -84,17 +80,11 @@
         >
           <b-form-group
             :label="$t('kind.file.view.width')"
+            label-class="text-primary"
           >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.width"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.width')"
-              />
-            </b-input-group>
+            <b-form-input
+              v-model="f.options.width"
+            />
           </b-form-group>
         </b-col>
 
@@ -104,17 +94,11 @@
         >
           <b-form-group
             :label="$t('kind.file.view.maxHeight')"
+            label-class="text-primary"
           >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.maxHeight"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.maxHeight')"
-              />
-            </b-input-group>
+            <b-form-input
+              v-model="f.options.maxHeight"
+            />
           </b-form-group>
         </b-col>
 
@@ -124,17 +108,11 @@
         >
           <b-form-group
             :label="$t('kind.file.view.maxWidth')"
+            label-class="text-primary"
           >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.maxWidth"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.maxWidth')"
-              />
-            </b-input-group>
+            <b-form-input
+              v-model="f.options.maxWidth"
+            />
           </b-form-group>
         </b-col>
 
@@ -144,31 +122,10 @@
         >
           <b-form-group
             :label="$t('kind.file.view.borderRadius')"
-          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.borderRadius"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.borderRadius')"
-              />
-            </b-input-group>
-          </b-form-group>
-        </b-col>
-
-        <b-col
-          sm="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('kind.file.view.background')"
+            label-class="text-primary"
           >
             <b-form-input
-              v-model="f.options.backgroundColor"
-              type="color"
-              debounce="300"
+              v-model="f.options.borderRadius"
             />
           </b-form-group>
         </b-col>
@@ -179,17 +136,27 @@
         >
           <b-form-group
             :label="$t('kind.file.view.margin')"
+            label-class="text-primary"
           >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
-              <b-form-input
-                v-model="f.options.margin"
-                type="number"
-                number
-                :placeholder="$t('kind.file.view.margin')"
-              />
-            </b-input-group>
+            <b-form-input
+              v-model="f.options.margin"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.background')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="f.options.backgroundColor"
+              type="color"
+              debounce="300"
+            />
           </b-form-group>
         </b-col>
       </b-row>
diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
index c5c2d7467..ce3818ec2 100644
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -58,6 +58,8 @@
         {{ $t('kind.file.view.previewStyle') }}
       </h5>
 
+      <small>{{ $t('kind.file.view.description' ) }}</small>
+
       <b-row
         align-v="center"
         class="mb-2 mt-2"
@@ -73,7 +75,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.height"
-                :placeholder="$t('kind.file.view.height')"
               />
             </b-input-group>
           </b-form-group>
@@ -90,7 +91,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.width"
-                :placeholder="$t('kind.file.view.width')"
               />
             </b-input-group>
           </b-form-group>
@@ -107,7 +107,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.maxHeight"
-                :placeholder="$t('kind.file.view.maxHeight')"
               />
             </b-input-group>
           </b-form-group>
@@ -124,7 +123,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.maxWidth"
-                :placeholder="$t('kind.file.view.maxWidth')"
               />
             </b-input-group>
           </b-form-group>
@@ -141,7 +139,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.borderRadius"
-                :placeholder="$t('kind.file.view.borderRadius')"
               />
             </b-input-group>
           </b-form-group>
@@ -158,7 +155,6 @@
             <b-input-group>
               <b-form-input
                 v-model="options.margin"
-                :placeholder="$t('kind.file.view.margin')"
               />
             </b-input-group>
           </b-form-group>
diff --git a/lib/js/src/compose/types/module-field/file.ts b/lib/js/src/compose/types/module-field/file.ts
index d57166ec5..29759a7ba 100644
--- a/lib/js/src/compose/types/module-field/file.ts
+++ b/lib/js/src/compose/types/module-field/file.ts
@@ -22,12 +22,12 @@ interface FileOptions extends Options {
   inline: boolean;
   hideFileName: boolean;
   mimetypes?: string;
-  height?: number;
-  width?: number;
-  maxHeight?: number;
-  maxWidth?: number;
-  borderRadius?: number;
-  margin?: number;
+  height?: string;
+  width?: string;
+  maxHeight?: string;
+  maxWidth?: string;
+  borderRadius?: string;
+  margin?: string;
   backgroundColor?: string;
 }
 
@@ -40,13 +40,13 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
   inline: true,
   hideFileName: false,
   mimetypes: '',
-  height: undefined,
-  width: undefined,
-  maxHeight: undefined,
-  maxWidth: undefined,
-  borderRadius: undefined,
-  margin: undefined,
-  backgroundColor: undefined,
+  height: '',
+  width: '',
+  maxHeight: '',
+  maxWidth: '',
+  borderRadius: '',
+  margin: 'auto',
+  backgroundColor: '',
 })
 
 export class ModuleFieldFile extends ModuleField {
@@ -63,9 +63,9 @@ export class ModuleFieldFile extends ModuleField {
     if (!o) return
     super.applyOptions(o)
 
-    Apply(this.options, o, Number, 'maxSize', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
+    Apply(this.options, o, Number, 'maxSize')
     Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
-    Apply(this.options, o, String, 'mimetypes', 'backgroundColor')
+    Apply(this.options, o, String, 'mimetypes', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor')
     ApplyWhitelisted(this.options, o, modes, 'mode')
   }
 }
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index 06072d89e..952143d6c 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -50,6 +50,7 @@ kind:
       px: px
       enableDownload: Enable download
       clickToView: Click to view file
+      description: 'Add unit after value to set it. For example: 50px or 50%'
   number:
     exampleFormat: Format
     exampleInput: Input