Polishing Touches

Author: Ubuntu

public/app.js

@@ -1,12 +1,6 @@
 {
-<<<<<<< HEAD
-    "/app.js": "/app.js?id=fdfd3afa70eeeac74e81",
-    "/light.css": "/light.css?id=bcb03dbf596bfa351064",
-    "/dark.css": "/dark.css?id=c655f9129824b8d032db",
-=======
-    "/app.js": "/app.js?id=a1763873e1bd0b22663f",
-    "/light.css": "/light.css?id=00726a847dc6b2cb132a",
-    "/dark.css": "/dark.css?id=aa5f40a240d2b1df06e2",
->>>>>>> upstream/master
+    "/app.js": "/app.js?id=046923f5b38e64fc7dd8",
+    "/light.css": "/light.css?id=d21f3947f53c6df3990a",
+    "/dark.css": "/dark.css?id=2a6bef4dae7be9601f06",
     "/favicon.png": "/favicon.png?id=b0b34b4095fcdbb8942d"
 }

public/dark.css

@@ -2,19 +2,13 @@
     import _ from 'lodash';
 
     export default {
-        props: ['file'],
+        props: ['file','viewport', 'boundary'],
 
 
         data() {
             return {
                 image: null,
                 cropped: null,
-                images: [
-                    'http://i.imgur.com/fHNtPXX.jpg',
-                    'http://i.imgur.com/ecMUngU.jpg',
-                    'http://i.imgur.com/7oO6zrh.jpg',
-                    'http://i.imgur.com/miVkBH2.jpg'
-                ],
                 uploadProgress: 0,
                 uploading: false
             }
@@ -30,11 +24,15 @@
 
 
         methods: {
+            /**
+             * This method will close() the modal.
+             */
             close() {
                 this.$emit('cancelCroppie');
             },
             /**
-             * This method closes croppie.
+             * This method closes croppie and sends the
+             * cropped image back in the event
              */
             closeCroppie() {
                 this.$emit('closeCroppie', {
@@ -57,7 +55,8 @@
                 // and set the result to this.cropped which is being
                 // used to display the result above.
                 let options = {
-                    format: 'jpeg'
+                    format: 'png',
+                    quality: 1
                 }
                 this.$refs.croppieRef.result(options, (output) => {
                     this.cropped = output;
@@ -115,11 +114,15 @@
 
 <template>
     <modal @close="close">
-        <div style="height: 300px;">
+        <div :style="{'height':viewport}">
             <vue-croppie
                     ref="croppieRef"
-                    :enableOrientation="true"></vue-croppie>
-        </div>
+                    :enableOrientation="true"
+                    :viewport ="viewport"
+                    :boundary="boundary"
+                    :enableResize="true">
+            </vue-croppie>
+            </div>
 
         <div class="mt-10">
             <button class="btn-sm ml-1 btn-light" @click="cancelCroppie()">Cancel</button>

public/light.css

@@ -20,6 +20,6 @@
 
 <template>
     <transition name="modal">
-        <slot/>
+            <slot/>
     </transition>
 </template>

public/mix-manifest.json

@@ -10,9 +10,7 @@
                 file: null,
                 imageUrl: '',
                 uploadProgress: 100,
-
                 selectedUnsplashImage: null,
-
                 unsplashSearchTerm: '',
                 unsplashPage: 1,
                 searchingUnsplash: false,
@@ -202,6 +200,8 @@
         </fullscreen-modal>
         <croppie-modal v-if="croppieModalShown"
                        :file="file"
+                       :viewport ="{ width: 600, height: 400 }"
+                       :boundary="{ width: 600, height: 400 }"
                        @closeCroppie="closeCroppieModal"
                        @cancelCroppie="cancelCroppieModal"></croppie-modal>
     </div>

resources/js/components/CroppieModal.vue

@@ -320,7 +320,7 @@
                 </div>
             </div>
         </div>
-        
+
 
         <!-- SEO & Social Modal -->
         <seo-modal v-if="seoModalShown"
@@ -330,6 +330,8 @@
         <!-- Croppie Modal -->
         <croppie-modal v-if="croppieModalShown"
                    :file="file"
+                   :viewport ="{ width: 200, height: 200 }"
+                   :boundary="{ width: 200, height: 200 }"
                    @closeCroppie="closeCroppieModal"
                    @cancelCroppie="cancelCroppieModal"></croppie-modal>
 

resources/js/components/FullscreenModal.vue

@@ -1,6 +1,21 @@
+/* Begin Croppie Modal Styles */
+
 .cr-image{
   position: relative !important;
 }
+
+.cr-boundary {
+  max-width: 600px;
+  max-height: 400px;
+}
+
+.cr-resizer {
+  max-width: 600px;
+  max-height: 400px;
+}
+
+/* Begin Default Modal Styles */
+
 .modal-mask{
   background: rgba(255, 255, 255, 0.86);
   transition: opacity .3s ease;