mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Added logo selector
This commit is contained in:
Dan Brown
parent
3aaab238d0
commit
6b4ec65b03
13
gulpfile.js
13
gulpfile.js
@ -1,19 +1,8 @@
|
||||
var elixir = require('laravel-elixir');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Elixir Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
|
||||
| for your Laravel application. By default, we are compiling the Sass
|
||||
| file for our application, as well as publishing vendor resources.
|
||||
|
|
||||
*/
|
||||
|
||||
elixir(function(mix) {
|
||||
mix.sass('styles.scss');
|
||||
mix.scripts('image-manager.js', 'public/js/image-manager.js');
|
||||
mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js');
|
||||
mix.scripts(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
|
||||
mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js');
|
||||
});
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"gulp": "^3.8.8",
|
||||
"laravel-elixir-livereload": "0.0.3"
|
||||
"insert-css": "^0.2.0",
|
||||
"laravel-elixir-livereload": "1.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap-sass": "^3.0.0",
|
||||
"laravel-elixir": "^2.0.0"
|
||||
"laravel-elixir": "^3.3.1",
|
||||
"vue": "^0.12.16"
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,3 +17,35 @@ $(function () {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Vue Components
|
||||
|
||||
Vue.component('image-picker', {
|
||||
template: require('./templates/image-picker.html'),
|
||||
props: ['currentImage', 'name', 'imageClass'],
|
||||
data: function() {
|
||||
return {
|
||||
image: this.currentImage
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImageManager: function(e) {
|
||||
var _this = this;
|
||||
ImageManager.show(function(image) {
|
||||
_this.image = image.url;
|
||||
});
|
||||
},
|
||||
reset: function() {
|
||||
this.image = '';
|
||||
},
|
||||
remove: function() {
|
||||
this.image = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Global Vue Instance
|
||||
var app = new Vue({
|
||||
el: '#app'
|
||||
});
|
||||
@ -1,4 +1,5 @@
|
||||
var bookDashboard = new Vue({
|
||||
|
||||
new Vue({
|
||||
el: '#book-dashboard',
|
||||
data: {
|
||||
searching: false,
|
||||
10
resources/assets/js/templates/image-picker.html
Normal file
10
resources/assets/js/templates/image-picker.html
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
<div class="image-picker">
|
||||
<div>
|
||||
<img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview">
|
||||
</div>
|
||||
<button class="button" type="button" v-on="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>
|
||||
<input type="hidden" v-attr="name: name, id: name" v-model="image">
|
||||
</div>
|
||||
@ -59,6 +59,9 @@ $button-border-radius: 2px;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
}
|
||||
&.neg {
|
||||
color: $negative;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
|
||||
@ -91,9 +91,9 @@ form.search-box {
|
||||
line-height: 1;
|
||||
}
|
||||
.logo-image {
|
||||
padding: $-m $-s $-m 0;
|
||||
margin: $-m $-s $-m 0;
|
||||
vertical-align: top;
|
||||
height: 75px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
|
||||
@ -256,6 +256,11 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
span.sep {
|
||||
color: #BBB;
|
||||
padding: 0 $-xs;
|
||||
}
|
||||
|
||||
.list > * {
|
||||
display: block;
|
||||
}
|
||||
@ -266,3 +271,4 @@ ul {
|
||||
i {
|
||||
padding-right: $-xs;
|
||||
}
|
||||
|
||||
|
||||
@ -16,13 +16,12 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
|
||||
<script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
|
||||
<script src="/js/common.js"></script>
|
||||
<script src="/bower/vue/dist/vue.min.js"></script>
|
||||
<script src="/bower/vue-resource/dist/vue-resource.min.js"></script>
|
||||
|
||||
@yield('head')
|
||||
</head>
|
||||
<body class="@yield('body-class')">
|
||||
<body class="@yield('body-class')" id="app">
|
||||
|
||||
@if(Session::has('success'))
|
||||
<div class="notification anim pos">
|
||||
@ -41,7 +40,9 @@
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-3">
|
||||
<a href="/" class="logo">
|
||||
<img class="logo-image" src="/logo.png" alt="Logo">
|
||||
@if(Setting::get('app-logo', '') !== 'none')
|
||||
<img class="logo-image" src="{{ Setting::get('app-logo', '') === '' ? '/logo.png' : Setting::get('app-logo', '') }}" alt="Logo">
|
||||
@endif
|
||||
<span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -90,5 +91,6 @@
|
||||
</section>
|
||||
|
||||
@yield('bottom')
|
||||
<script src="/js/common.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -91,6 +91,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/book-dashboard.js"></script>
|
||||
|
||||
@stop
|
||||
@ -12,16 +12,30 @@
|
||||
{!! csrf_field() !!}
|
||||
|
||||
<h3>App Settings</h3>
|
||||
<div class="form-group">
|
||||
<label for="setting-app-name">Application name</label>
|
||||
<input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="setting-app-public">Allow public viewing?</label>
|
||||
<label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
|
||||
<label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="setting-app-name">Application name</label>
|
||||
<input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="setting-app-public">Allow public viewing?</label>
|
||||
<label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
|
||||
<label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr class="margin-top">
|
||||
|
||||
<h3>Registration Settings</h3>
|
||||
@ -71,3 +85,8 @@
|
||||
</div>
|
||||
|
||||
@stop
|
||||
|
||||
@section('bottom')
|
||||
@include('pages/image-manager')
|
||||
<script src="/js/image-manager.js"></script>
|
||||
@stop
|
||||
Loading…
Reference in New Issue
Block a user