bugfix(template) established product template (#281)

ergonode · Jan 23, 2020 · 7ce2125 · 7ce2125
1 parent 1b5ef4f
commit 7ce2125
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 14 deletions.
diff --git a/components/Forms/ProductTemplateForm.vue b/components/Forms/ProductTemplateForm.vue
@@ -96,10 +96,10 @@ export default {
             case TYPES.MULTI_SELECT:
                 return ProductTemplateOptions;
             case TYPES.NUMERIC:
-                return ProductTemplateNumeric;
-            case TYPES.TEXT:
             case TYPES.UNIT:
             case TYPES.PRICE:
+                return ProductTemplateNumeric;
+            case TYPES.TEXT:
                 return ProductTemplateSingleLine;
             case 'SECTION TITLE':
                 return ProductTemplateSection;

diff --git a/components/Icon/BaseIcon.vue b/components/Icon/BaseIcon.vue
@@ -7,7 +7,7 @@
         xmlns="http://www.w3.org/2000/svg"
         :width="width"
         :height="height"
-        viewBox="0 0 24 24"
+        :viewBox="`0 0 ${width} ${height}`"
         :aria-label="iconName"
         role="presentation">
         <g :fill="iconColor">

diff --git a/components/Icon/Others/IconResize.vue b/components/Icon/Others/IconResize.vue
@@ -0,0 +1,39 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+<template>
+    <BaseIcon
+        :width="size"
+        :height="size"
+        :icon-color="fillColor">
+        <path :d="drawingCommands" />
+    </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from '~/components/Icon/BaseIcon';
+import { GRAPHITE } from '~/assets/scss/_variables/_colors.scss';
+
+export default {
+    name: 'IconResize',
+    components: {
+        BaseIcon,
+    },
+    props: {
+        fillColor: {
+            type: String,
+            default: GRAPHITE,
+        },
+        size: {
+            type: [String, Number],
+            default: '24',
+        },
+    },
+    data() {
+        return {
+            drawingCommands: 'M7 1H8V2H7V1ZM6 3V2H7V3H6ZM5 4V3H6V4H5ZM4 5V4H5V5H4ZM3 6V5H4V6H3ZM2 7V6H3V7H2ZM2 7V8H1V7H2ZM7 6H6V7H5V8H6V7H7V6ZM7 6V5H8V6H7Z',
+        };
+    },
+};
+</script>
diff --git a/components/Template/Product/ProductTemplateNumeric.vue b/components/Template/Product/ProductTemplateNumeric.vue
@@ -30,7 +30,7 @@ export default {
     },
     computed: {
         inputType() {
-            return { type: 'text' };
+            return { type: 'number' };
         },
     },
     watch: {

diff --git a/components/Template/Product/ProductTemplateSingleLine.vue b/components/Template/Product/ProductTemplateSingleLine.vue
@@ -47,8 +47,11 @@ export default {
         },
     },
     watch: {
-        value() {
-            this.localValue = this.value;
+        value: {
+            immediate: true,
+            handler() {
+                this.localValue = this.value;
+            },
         },
     },
 };

diff --git a/components/Template/ProductDesigner/ElementContentBase.vue b/components/Template/ProductDesigner/ElementContentBase.vue
@@ -28,7 +28,6 @@ export default {
         padding-left: 10px;
         background-color: $WHITESMOKE;
         overflow: hidden;
-        resize: both;
 
         &--disabled {
             resize: none;

diff --git a/components/Template/ProductDesigner/LayoutElement.vue b/components/Template/ProductDesigner/LayoutElement.vue
@@ -10,10 +10,11 @@
         @dragstart="onDragStart"
         @dragend="onDragEnd">
         <slot name="content" />
-        <div
+        <IconResize
             v-if="!disabled"
+            size="8"
             class="layout-element__resizer"
-            @mousedown="initResizeDrag" />
+            @mousedown.native="initResizeDrag" />
     </div>
 </template>
 
@@ -42,12 +43,16 @@ import {
     removeLayoutElementCopyFromDocumentBody,
 } from '~/model/template_designer/layout/LayoutElementCopy';
 import { DRAGGED_ELEMENT } from '~/defaults/grid';
+import IconResize from '~/components/Icon/Others/IconResize';
 
 const registerResizeEventListenersModule = () => import('~/model/resize/registerResizeEventListeners');
 const unregisterResizeEventListenersModule = () => import('~/model/resize/unregisterResizeEventListeners');
 
 export default {
     name: 'LayoutElement',
+    components: {
+        IconResize,
+    },
     props: {
         index: {
             type: Number,
@@ -343,10 +348,8 @@ export default {
 
         &__resizer {
             position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 10px;
-            height: 10px;
+            bottom: 2px;
+            right: 2px;
             cursor: se-resize;
         }
 

diff --git a/core/components/Hints/ErrorHint.vue b/core/components/Hints/ErrorHint.vue
@@ -6,7 +6,7 @@
     <label
         class="info-hint"
         :title="hint">
-        <IconError size="16" />
+        <IconError size="24" />
     </label>
 </template>
 
@@ -34,5 +34,6 @@ export default {
         align-items: center;
         width: 24px;
         height: 24px;
+        transform: scale(0.8);
     }
 </style>