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

Cleaned up vuejs components and added image-picker deafult image

Browse Source
This commit is contained in:
Dan Brown 2015-11-09 19:20:44 +00:00
parent 35397f26dc
commit ab6f6a5522
5 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/assets/js/components/image-manager.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="image-manager">
<div class="overlay" v-el:overlay v-on:click="overlayClick">
<div class="overlay" v-el:overlay @click="overlayClick">
<div class="image-manager-body">
<div class="image-manager-content">
<div class="image-manager-list">
@ -8,13 +8,13 @@
<img class="anim fadeIn"
:class="{selected: (image==selectedImage)}"
:src="image.thumbnail" :alt="image.title" :title="image.name"
v-on:click="imageClick(image)"
v-bind:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
@click="imageClick(image)"
:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
</div>
<div class="load-more" v-show="hasMore" v-on:click="fetchData">Load More</div>
<div class="load-more" v-show="hasMore" @click="fetchData">Load More</div>
</div>
</div>
<button class="neg button image-manager-close" v-on:click="hide">x</button>
<button class="neg button image-manager-close" @click="hide">x</button>
<div class="image-manager-sidebar">
<h2 v-el:image-title>Images</h2>
<hr class="even">
@ -23,7 +23,7 @@
</div>
<div class="image-manager-details anim fadeIn" v-show="selectedImage">
<hr class="even">
<form v-on:submit="saveImageDetails" v-el:image-form>
<form @submit="saveImageDetails" v-el:image-form>
<div class="form-group">
<label for="name">Image Name</label>
<input type="text" id="name" name="name" v-model="selectedImage.name">
@ -42,12 +42,12 @@
</ul>
</div>
<form v-on:submit="deleteImage" v-el:image-delete-form>
<form @submit="deleteImage" v-el:image-delete-form>
<button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
</form>
</div>
<div class="image-manager-bottom">
<button class="button pos anim fadeIn" v-show="selectedImage" v-on:click="selectButtonClick"><i
<button class="button pos anim fadeIn" v-show="selectedImage" @click="selectButtonClick"><i
class="zmdi zmdi-square-right"></i>Select Image
</button>
</div>

7
resources/assets/js/components/image-picker.vue
View File

@ -3,17 +3,18 @@
<div class="image-picker">
<div>
<img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
<img v-if="image === '' && defaultImage" :src="defaultImage" :class="imageClass" alt="Image Preview">
</div>
<button class="button" type="button" v-on:click="showImageManager">Select Image</button>
<button class="button" type="button" @click="showImageManager">Select Image</button>
<br>
<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>
<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>
<input type="hidden" :name="name" :id="name" v-model="image">
</div>
</template>
<script>
module.exports = {
props: ['currentImage', 'name', 'imageClass'],
props: ['currentImage', 'name', 'imageClass', 'defaultImage'],
data: function() {
return {
image: this.currentImage

2
resources/assets/js/components/toggle-switch.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="toggle-switch" v-on:click="switch" :class="{'active': isActive}">
<div class="toggle-switch" @click="switch" :class="{'active': isActive}">
<input type="hidden" :name="name" :value="value"/>
<div class="switch-handle"></div>
</div>

2
resources/assets/sass/_pages.scss
View File

@ -44,6 +44,8 @@
}
table {
word-break: break-all;
word-break: break-word;
hyphens: auto;
}
}

2
resources/views/settings/index.blade.php
View File

@ -28,7 +28,7 @@
<div class="form-group" id="logo-control">
<label for="setting-app-logo">Application Logo</label>
<p class="small">This image should be 43px in height. </p>
<image-picker current-image="{{ Setting::get('app-logo', '') }}" name="setting-app-logo" image-class="logo-image"></image-picker>
<image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
</div>
</div>
</div>