From f1b86d0fc7d48c3c73b52adea3aec9dbd0faa2da Mon Sep 17 00:00:00 2001
From: gzbender <gzbender74@gmail.com>
Date: Wed, 25 Jul 2018 01:47:34 +0500
Subject: [PATCH] =?UTF-8?q?LIL-588=20=D0=9F=D1=80=D0=B8=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B8=20=D0=BA=D1=83=D1=80=D1=81?=
 =?UTF-8?q?=D0=B0=20=D0=B2=D0=B8=D1=81=D0=B8=D1=82=20=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D1=83=D0=B7=D0=B5=D1=80=20=D0=B8=D0=B7-=D0=B7=D0=B0=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8=20=D0=B1=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=8C=D1=88=D0=B8=D1=85=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/blocks/Image.vue | 44 ++++++++++++++++++++---------
 web/src/sass/_common.sass           | 18 ++++++++++++
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/web/src/components/blocks/Image.vue b/web/src/components/blocks/Image.vue
index 47841ec8..11968d70 100644
--- a/web/src/components/blocks/Image.vue
+++ b/web/src/components/blocks/Image.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="kit__photo">
+  <div class="kit__photo" :class="{'loading': loading}">
     <svg class="icon icon-add-plus" v-if="!imageUrl">
       <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
     </svg>
@@ -23,21 +23,37 @@
         methods: {
             onImageAdded(event) {
                 this.loading = true;
+                const maxSize = 1600;
                 let file = event.target.files[0];
-                let reader = new FileReader();
+                const reader = new FileReader();
                 reader.onload = () => {
-                    downscale(reader.result, 2000, 2000).then((dataURL) => {
-                        api.uploadImage(dataURL, this.accessToken)
-                            .then((response) => {
-                                this.loading = false;
-                                this.$emit('update:imageId', response.data.id);
-                                this.$emit('update:imageUrl', response.data.image);
-                            })
-                            .catch((error) => {
-                                this.loading = false;
-                                console.log('error', error);
-                            });
-                    });
+                    let img = document.createElement('img');
+                    img.onload = () => {
+                        let w = 0;
+                        let h = 0;
+                        if(img.width > img.height) {
+                            w = maxSize;
+                            h = 0;
+                        }
+                        else {
+                            w = 0;
+                            h = maxSize;
+                        }
+                        downscale(img.src, w, h).then((dataURL) => {
+                            img = null;
+                            api.uploadImage(dataURL, this.accessToken)
+                                .then((response) => {
+                                    this.loading = false;
+                                    this.$emit('update:imageId', response.data.id);
+                                    this.$emit('update:imageUrl', response.data.image);
+                                })
+                                .catch((error) => {
+                                    this.loading = false;
+                                    console.log('error', error);
+                                });
+                        });
+                    }
+                    img.src = reader.result;
                 };
                 if (file) {
                     reader.readAsDataURL(file);
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index 8386a037..f82ee0c8 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -3463,6 +3463,24 @@ a.grey-link
     .icon
       font-size: 20px
       fill: #B5B5B5
+
+    &.loading &-image
+      visibility: hidden
+    &.loading
+      .icon
+        visibility: hidden
+      &:after
+        content: ''
+        position: absolute
+        top: 50%
+        left: 50%
+        width: 24px
+        height: 24px
+        margin: -12px 0 0 -12px
+        border: 3px solid #B5B5B5
+        border-left: 3px solid transparent
+        border-radius: 50%
+        animation: loading .6s infinite linear
   &__file
     position: absolute
     top: 0