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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
ab6f6a55 1 parent 35397f26

Cleaned up vuejs components and added image-picker deafult image

Inline Side-by-side
Showing 5 changed files with 16 additions and 13 deletions
1 <template> 1 <template>
2 <div id="image-manager"> 2 <div id="image-manager">
3 - <div class="overlay" v-el:overlay v-on:click="overlayClick"> 3 + <div class="overlay" v-el:overlay @click="overlayClick">
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="image-manager-list"> 6 <div class="image-manager-list">
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
8 <img class="anim fadeIn" 8 <img class="anim fadeIn"
9 :class="{selected: (image==selectedImage)}" 9 :class="{selected: (image==selectedImage)}"
10 :src="image.thumbnail" :alt="image.title" :title="image.name" 10 :src="image.thumbnail" :alt="image.title" :title="image.name"
11 - v-on:click="imageClick(image)" 11 + @click="imageClick(image)"
12 - v-bind:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"> 12 + :style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
13 </div> 13 </div>
14 - <div class="load-more" v-show="hasMore" v-on:click="fetchData">Load More</div> 14 + <div class="load-more" v-show="hasMore" @click="fetchData">Load More</div>
15 </div> 15 </div>
16 </div> 16 </div>
17 - <button class="neg button image-manager-close" v-on:click="hide">x</button> 17 + <button class="neg button image-manager-close" @click="hide">x</button>
18 <div class="image-manager-sidebar"> 18 <div class="image-manager-sidebar">
19 <h2 v-el:image-title>Images</h2> 19 <h2 v-el:image-title>Images</h2>
20 <hr class="even"> 20 <hr class="even">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 </div> 23 </div>
24 <div class="image-manager-details anim fadeIn" v-show="selectedImage"> 24 <div class="image-manager-details anim fadeIn" v-show="selectedImage">
25 <hr class="even"> 25 <hr class="even">
26 - <form v-on:submit="saveImageDetails" v-el:image-form> 26 + <form @submit="saveImageDetails" v-el:image-form>
27 <div class="form-group"> 27 <div class="form-group">
28 <label for="name">Image Name</label> 28 <label for="name">Image Name</label>
29 <input type="text" id="name" name="name" v-model="selectedImage.name"> 29 <input type="text" id="name" name="name" v-model="selectedImage.name">
...@@ -42,12 +42,12 @@ ...@@ -42,12 +42,12 @@
42 </ul> 42 </ul>
43 </div> 43 </div>
44 44
45 - <form v-on:submit="deleteImage" v-el:image-delete-form> 45 + <form @submit="deleteImage" v-el:image-delete-form>
46 <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button> 46 <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
47 </form> 47 </form>
48 </div> 48 </div>
49 <div class="image-manager-bottom"> 49 <div class="image-manager-bottom">
50 - <button class="button pos anim fadeIn" v-show="selectedImage" v-on:click="selectButtonClick"><i 50 + <button class="button pos anim fadeIn" v-show="selectedImage" @click="selectButtonClick"><i
51 class="zmdi zmdi-square-right"></i>Select Image 51 class="zmdi zmdi-square-right"></i>Select Image
52 </button> 52 </button>
53 </div> 53 </div>
......
...@@ -3,17 +3,18 @@ ...@@ -3,17 +3,18 @@
3 <div class="image-picker"> 3 <div class="image-picker">
4 <div> 4 <div>
5 <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview"> 5 <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
6 + <img v-if="image === '' && defaultImage" :src="defaultImage" :class="imageClass" alt="Image Preview">
6 </div> 7 </div>
7 - <button class="button" type="button" v-on:click="showImageManager">Select Image</button> 8 + <button class="button" type="button" @click="showImageManager">Select Image</button>
8 <br> 9 <br>
9 - <button class="text-button" v-on:click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button> 10 + <button class="text-button" @click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
10 <input type="hidden" :name="name" :id="name" v-model="image"> 11 <input type="hidden" :name="name" :id="name" v-model="image">
11 </div> 12 </div>
12 </template> 13 </template>
13 14
14 <script> 15 <script>
15 module.exports = { 16 module.exports = {
16 - props: ['currentImage', 'name', 'imageClass'], 17 + props: ['currentImage', 'name', 'imageClass', 'defaultImage'],
17 data: function() { 18 data: function() {
18 return { 19 return {
19 image: this.currentImage 20 image: this.currentImage
......
1 1
2 <template> 2 <template>
3 - <div class="toggle-switch" v-on:click="switch" :class="{'active': isActive}"> 3 + <div class="toggle-switch" @click="switch" :class="{'active': isActive}">
4 <input type="hidden" :name="name" :value="value"/> 4 <input type="hidden" :name="name" :value="value"/>
5 <div class="switch-handle"></div> 5 <div class="switch-handle"></div>
6 </div> 6 </div>
......
...@@ -44,6 +44,8 @@ ...@@ -44,6 +44,8 @@
44 } 44 }
45 table { 45 table {
46 word-break: break-all; 46 word-break: break-all;
47 + word-break: break-word;
48 + hyphens: auto;
47 } 49 }
48 } 50 }
49 51
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <div class="form-group" id="logo-control"> 28 <div class="form-group" id="logo-control">
29 <label for="setting-app-logo">Application Logo</label> 29 <label for="setting-app-logo">Application Logo</label>
30 <p class="small">This image should be 43px in height. </p> 30 <p class="small">This image should be 43px in height. </p>
31 - <image-picker current-image="{{ Setting::get('app-logo', '') }}" name="setting-app-logo" image-class="logo-image"></image-picker> 31 + <image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
......