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 logo selector

Browse Source
This commit is contained in:
Dan Brown 2015-10-07 23:17:48 +01:00
parent 3aaab238d0
commit 6b4ec65b03
11 changed files with 93 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
gulpfile.js
View File

@ -1,19 +1,8 @@
var elixir = require('laravel-elixir'); 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) { elixir(function(mix) {
mix.sass('styles.scss'); mix.sass('styles.scss');
mix.scripts('image-manager.js', 'public/js/image-manager.js'); mix.scripts('image-manager.js', 'public/js/image-manager.js');
mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js'); mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js');
mix.scripts(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
}); });

6
package.json
View File

@ -2,10 +2,12 @@
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"gulp": "^3.8.8", "gulp": "^3.8.8",
"laravel-elixir-livereload": "0.0.3" "insert-css": "^0.2.0",
"laravel-elixir-livereload": "1.1.3"
}, },
"dependencies": { "dependencies": {
"bootstrap-sass": "^3.0.0", "bootstrap-sass": "^3.0.0",
"laravel-elixir": "^2.0.0" "laravel-elixir": "^3.3.1",
"vue": "^0.12.16"
} }
} }

32
resources/assets/js/global.js
View File

@ -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'
});

3
resources/assets/js/book-dashboard.js → resources/assets/js/pages/book-show.js
View File

@ -1,4 +1,5 @@
var bookDashboard = new Vue({
new Vue({
el: '#book-dashboard', el: '#book-dashboard',
data: { data: {
searching: false, searching: false,

10
resources/assets/js/templates/image-picker.html Normal file
View 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>

3
resources/assets/sass/_buttons.scss
View File

@ -59,6 +59,9 @@ $button-border-radius: 2px;
&:focus, &:active { &:focus, &:active {
outline: 0; outline: 0;
} }
&.neg {
color: $negative;
}
} }
.button-group { .button-group {

4
resources/assets/sass/_header.scss
View File

@ -91,9 +91,9 @@ form.search-box {
line-height: 1; line-height: 1;
} }
.logo-image { .logo-image {
padding: $-m $-s $-m 0; margin: $-m $-s $-m 0;
vertical-align: top; vertical-align: top;
height: 75px; height: 43px;
} }
.dropdown-container { .dropdown-container {

6
resources/assets/sass/_text.scss
View File

@ -256,6 +256,11 @@ ul {
} }
} }
span.sep {
color: #BBB;
padding: 0 $-xs;
}
.list > * { .list > * {
display: block; display: block;
} }
@ -266,3 +271,4 @@ ul {
i { i {
padding-right: $-xs; padding-right: $-xs;
} }

8
resources/views/base.blade.php
View File

@ -16,13 +16,12 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <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/jquery-sortable/source/js/jquery-sortable.js"></script>
<script src="/bower/dropzone/dist/min/dropzone.min.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/dist/vue.min.js"></script>
<script src="/bower/vue-resource/dist/vue-resource.min.js"></script> <script src="/bower/vue-resource/dist/vue-resource.min.js"></script>
@yield('head') @yield('head')
</head> </head>
<body class="@yield('body-class')"> <body class="@yield('body-class')" id="app">
@if(Session::has('success')) @if(Session::has('success'))
<div class="notification anim pos"> <div class="notification anim pos">
@ -41,7 +40,9 @@
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-3"> <div class="col-md-4 col-sm-3">
<a href="/" class="logo"> <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> <span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span>
</a> </a>
</div> </div>
@ -90,5 +91,6 @@
</section> </section>
@yield('bottom') @yield('bottom')
<script src="/js/common.js"></script>
</body> </body>
</html> </html>

2
resources/views/books/show.blade.php
View File

@ -91,6 +91,4 @@
</div> </div>
</div> </div>
<script src="/js/book-dashboard.js"></script>
@stop @stop

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

@ -12,6 +12,9 @@
{!! csrf_field() !!} {!! csrf_field() !!}
<h3>App Settings</h3> <h3>App Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="setting-app-name">Application name</label> <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"> <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
@ -21,6 +24,17 @@
<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="true"> Yes</label>
<label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label> <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
</div> </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"> <hr class="margin-top">
@ -71,3 +85,8 @@
</div> </div>
@stop @stop
@section('bottom')
@include('pages/image-manager')
<script src="/js/image-manager.js"></script>
@stop