Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
b0808a1c 1 parent 6e4764cd

Added image selection

Inline Side-by-side
Showing 4 changed files with 20 additions and 7 deletions
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
9 images: [], 9 images: [],
10 hasMore: false, 10 hasMore: false,
11 page: 0, 11 page: 0,
12 - cClickTime: 0 12 + cClickTime: 0,
13 + selectedImage: false
13 }, 14 },
14 15
15 created: function() { 16 created: function() {
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
62 } 63 }
63 this.hide(); 64 this.hide();
64 } else { 65 } else {
65 - // Single Click 66 + this.selectedImage = (this.selectedImage===image) ? false : image;
66 } 67 }
67 this.cClickTime = cTime; 68 this.cClickTime = cTime;
68 }, 69 },
...@@ -72,6 +73,12 @@ ...@@ -72,6 +73,12 @@
72 this.$$.overlay.style.display = 'block'; 73 this.$$.overlay.style.display = 'block';
73 }, 74 },
74 75
76 + overlayClick: function(e) {
77 + if(e.target.className==='overlay') {
78 + this.hide();
79 + }
80 + },
81 +
75 hide: function() { 82 hide: function() {
76 this.$$.overlay.style.display = 'none'; 83 this.$$.overlay.style.display = 'none';
77 } 84 }
......
...@@ -12,8 +12,14 @@ ...@@ -12,8 +12,14 @@
12 .image-manager-list img { 12 .image-manager-list img {
13 border-radius: 0; 13 border-radius: 0;
14 float: left; 14 float: left;
15 - margin: 1px; 15 + margin: 0;
16 cursor: pointer; 16 cursor: pointer;
17 + width: 150px;
18 + height: 150px;
19 + border: 1px solid transparent;
20 + &.selected {
21 + border: 3px solid #EEE;
22 + }
17 } 23 }
18 position: fixed; 24 position: fixed;
19 top: 0; 25 top: 0;
......
...@@ -10,6 +10,6 @@ ...@@ -10,6 +10,6 @@
10 <div id="image-manager-container"></div> 10 <div id="image-manager-container"></div>
11 <script src="/js/image-manager.js"></script> 11 <script src="/js/image-manager.js"></script>
12 <script> 12 <script>
13 - //window.ImageManager.show(); 13 + window.ImageManager.show();
14 </script> 14 </script>
15 @stop 15 @stop
...\ No newline at end of file ...\ No newline at end of file
......
1 1
2 <div id="image-manager"> 2 <div id="image-manager">
3 - <div class="overlay" v-el="overlay" style="display:none;"> 3 + <div class="overlay" v-el="overlay" v-on="click: overlayClick" style="display:none;">
4 <div class="image-manager-body"> 4 <div class="image-manager-body">
5 <div class="image-manager-content"> 5 <div class="image-manager-content">
6 <div class="dropzone-container" v-el="dropZone"> 6 <div class="dropzone-container" v-el="dropZone">
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
8 </div> 8 </div>
9 <div class="image-manager-list"> 9 <div class="image-manager-list">
10 <div v-repeat="image: images"> 10 <div v-repeat="image: images">
11 - <img v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}"> 11 + <img v-class="selected: (image==selectedImage)" v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
12 </div> 12 </div>
13 <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div> 13 <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="image-manager-sidebar"> 16 <div class="image-manager-sidebar">
17 - <button class="neg button image-manager-close">x</button> 17 + <button class="neg button image-manager-close" v-on="click: hide()">x</button>
18 <h2>Images</h2> 18 <h2>Images</h2>
19 </div> 19 </div>
20 </div> 20 </div>
......