Added image selection

diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js
index 3fa72c5bd85d75cf9a03e4749b63fe363ec976bd..27deed51ee11a1ee2ad266875900b2b12f7782cc 100644 (file)
--- a/resources/assets/js/image-manager.js
+++ b/resources/assets/js/image-manager.js
@@ -9,7 +9,8 @@
             images: [],
             hasMore: false,
             page: 0,
-            cClickTime: 0
+            cClickTime: 0,
+            selectedImage: false
         },
 
         created: function() {
@@ -62,7 +63,7 @@
                     }
                     this.hide();
                 } else {
-                    // Single Click
+                    this.selectedImage = (this.selectedImage===image) ? false : image;
                 }
                 this.cClickTime = cTime;
             },
@@ -72,6 +73,12 @@
                 this.$$.overlay.style.display = 'block';
             },
 
+            overlayClick: function(e) {
+              if(e.target.className==='overlay') {
+                  this.hide();
+              }
+            },
+
             hide: function() {
               this.$$.overlay.style.display = 'none';
             }

diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/image-manager.scss
index 456a7a8c3df64575a876ca006273da9a931d3b27..15976e733278bb637a841675dabdecb4d0eca2c9 100644 (file)
--- a/resources/assets/sass/image-manager.scss
+++ b/resources/assets/sass/image-manager.scss
@@ -12,8 +12,14 @@
   .image-manager-list img {
     border-radius: 0;
     float: left;
-    margin: 1px;
+    margin: 0;
     cursor: pointer;
+    width: 150px;
+    height: 150px;
+    border: 1px solid transparent;
+    &.selected {
+      border: 3px solid #EEE;
+    }
   }
   position: fixed;
   top: 0;

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index a2e283482fb9b8b88dbe43f16d6fe5030c8714e3..f3195b059add681a9026cc09dc8ba6fe8d13b855 100644 (file)
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -10,6 +10,6 @@
     <div id="image-manager-container"></div>
     <script src="/js/image-manager.js"></script>
     <script>
-        //window.ImageManager.show();
+        window.ImageManager.show();
     </script>
 @stop
\ No newline at end of file

diff --git a/resources/views/pages/image-manager.blade.php b/resources/views/pages/image-manager.blade.php
index 5a8dc20ae924c016164d9c983592105650cdedd1..c68434d7b13558dc5aba44269c29010a86cbd748 100644 (file)
--- a/resources/views/pages/image-manager.blade.php
+++ b/resources/views/pages/image-manager.blade.php
@@ -1,6 +1,6 @@
 
 <div id="image-manager">
-    <div class="overlay" v-el="overlay" style="display:none;">
+    <div class="overlay" v-el="overlay" v-on="click: overlayClick" style="display:none;">
         <div class="image-manager-body">
             <div class="image-manager-content">
                 <div class="dropzone-container" v-el="dropZone">
@@ -8,13 +8,13 @@
                 </div>
                 <div class="image-manager-list">
                     <div v-repeat="image: images">
-                        <img v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
+                        <img v-class="selected: (image==selectedImage)" v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
                     </div>
                     <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
                 </div>
             </div>
             <div class="image-manager-sidebar">
-                <button class="neg button image-manager-close">x</button>
+                <button class="neg button image-manager-close" v-on="click: hide()">x</button>
                 <h2>Images</h2>
             </div>
         </div>