Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added image selection

Browse Source
This commit is contained in:
Dan Brown 2015-08-15 11:54:46 +01:00
parent 6e4764cde5
commit b0808a1c24
4 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/assets/js/image-manager.js
View File

@ -9,7 +9,8 @@
images: [], images: [],
hasMore: false, hasMore: false,
page: 0, page: 0,
cClickTime: 0 cClickTime: 0,
selectedImage: false
}, },
created: function() { created: function() {
@ -62,7 +63,7 @@
} }
this.hide(); this.hide();
} else { } else {
// Single Click this.selectedImage = (this.selectedImage===image) ? false : image;
} }
this.cClickTime = cTime; this.cClickTime = cTime;
}, },
@ -72,6 +73,12 @@
this.$$.overlay.style.display = 'block'; this.$$.overlay.style.display = 'block';
}, },
overlayClick: function(e) {
if(e.target.className==='overlay') {
this.hide();
}
},
hide: function() { hide: function() {
this.$$.overlay.style.display = 'none'; this.$$.overlay.style.display = 'none';
} }

8
resources/assets/sass/image-manager.scss
View File

@ -12,8 +12,14 @@
.image-manager-list img { .image-manager-list img {
border-radius: 0; border-radius: 0;
float: left; float: left;
margin: 1px; margin: 0;
cursor: pointer; cursor: pointer;
width: 150px;
height: 150px;
border: 1px solid transparent;
&.selected {
border: 3px solid #EEE;
}
} }
position: fixed; position: fixed;
top: 0; top: 0;

2
resources/views/home.blade.php
View File

@ -10,6 +10,6 @@
<div id="image-manager-container"></div> <div id="image-manager-container"></div>
<script src="/js/image-manager.js"></script> <script src="/js/image-manager.js"></script>
<script> <script>
//window.ImageManager.show(); window.ImageManager.show();
</script> </script>
@stop @stop

6
resources/views/pages/image-manager.blade.php
View File

@ -1,6 +1,6 @@
<div id="image-manager"> <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-body">
<div class="image-manager-content"> <div class="image-manager-content">
<div class="dropzone-container" v-el="dropZone"> <div class="dropzone-container" v-el="dropZone">
@ -8,13 +8,13 @@
</div> </div>
<div class="image-manager-list"> <div class="image-manager-list">
<div v-repeat="image: images"> <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>
<div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div> <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
</div> </div>
</div> </div>
<div class="image-manager-sidebar"> <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> <h2>Images</h2>
</div> </div>
</div> </div>