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: [],
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';
}

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

@ -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;

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

@ -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

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

@ -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>