Showing
11 changed files
with
84 additions
and
22 deletions
| 1 | var elixir = require('laravel-elixir'); | 1 | var elixir = require('laravel-elixir'); |
| 2 | 2 | ||
| 3 | -/* | ||
| 4 | - |-------------------------------------------------------------------------- | ||
| 5 | - | Elixir Asset Management | ||
| 6 | - |-------------------------------------------------------------------------- | ||
| 7 | - | | ||
| 8 | - | Elixir provides a clean, fluent API for defining some basic Gulp tasks | ||
| 9 | - | for your Laravel application. By default, we are compiling the Sass | ||
| 10 | - | file for our application, as well as publishing vendor resources. | ||
| 11 | - | | ||
| 12 | - */ | ||
| 13 | 3 | ||
| 14 | elixir(function(mix) { | 4 | elixir(function(mix) { |
| 15 | mix.sass('styles.scss'); | 5 | mix.sass('styles.scss'); |
| 16 | mix.scripts('image-manager.js', 'public/js/image-manager.js'); | 6 | mix.scripts('image-manager.js', 'public/js/image-manager.js'); |
| 17 | - mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js'); | 7 | + mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js'); |
| 18 | - mix.scripts(['jquery-extensions.js', 'global.js'], 'public/js/common.js'); | ||
| 19 | }); | 8 | }); | ... | ... |
| ... | @@ -2,10 +2,12 @@ | ... | @@ -2,10 +2,12 @@ |
| 2 | "private": true, | 2 | "private": true, |
| 3 | "devDependencies": { | 3 | "devDependencies": { |
| 4 | "gulp": "^3.8.8", | 4 | "gulp": "^3.8.8", |
| 5 | - "laravel-elixir-livereload": "0.0.3" | 5 | + "insert-css": "^0.2.0", |
| 6 | + "laravel-elixir-livereload": "1.1.3" | ||
| 6 | }, | 7 | }, |
| 7 | "dependencies": { | 8 | "dependencies": { |
| 8 | "bootstrap-sass": "^3.0.0", | 9 | "bootstrap-sass": "^3.0.0", |
| 9 | - "laravel-elixir": "^2.0.0" | 10 | + "laravel-elixir": "^3.3.1", |
| 11 | + "vue": "^0.12.16" | ||
| 10 | } | 12 | } |
| 11 | } | 13 | } | ... | ... |
| ... | @@ -17,3 +17,35 @@ $(function () { | ... | @@ -17,3 +17,35 @@ $(function () { |
| 17 | }); | 17 | }); |
| 18 | 18 | ||
| 19 | }); | 19 | }); |
| 20 | + | ||
| 21 | + | ||
| 22 | +// Vue Components | ||
| 23 | + | ||
| 24 | +Vue.component('image-picker', { | ||
| 25 | + template: require('./templates/image-picker.html'), | ||
| 26 | + props: ['currentImage', 'name', 'imageClass'], | ||
| 27 | + data: function() { | ||
| 28 | + return { | ||
| 29 | + image: this.currentImage | ||
| 30 | + } | ||
| 31 | + }, | ||
| 32 | + methods: { | ||
| 33 | + showImageManager: function(e) { | ||
| 34 | + var _this = this; | ||
| 35 | + ImageManager.show(function(image) { | ||
| 36 | + _this.image = image.url; | ||
| 37 | + }); | ||
| 38 | + }, | ||
| 39 | + reset: function() { | ||
| 40 | + this.image = ''; | ||
| 41 | + }, | ||
| 42 | + remove: function() { | ||
| 43 | + this.image = 'none'; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | +}); | ||
| 47 | + | ||
| 48 | +// Global Vue Instance | ||
| 49 | +var app = new Vue({ | ||
| 50 | + el: '#app' | ||
| 51 | +}); | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | + | ||
| 2 | +<div class="image-picker"> | ||
| 3 | + <div> | ||
| 4 | + <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview"> | ||
| 5 | + </div> | ||
| 6 | + <button class="button" type="button" v-on="click: showImageManager">Select Image</button> | ||
| 7 | + <br> | ||
| 8 | + <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> | ||
| 9 | + <input type="hidden" v-attr="name: name, id: name" v-model="image"> | ||
| 10 | +</div> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -91,9 +91,9 @@ form.search-box { | ... | @@ -91,9 +91,9 @@ form.search-box { |
| 91 | line-height: 1; | 91 | line-height: 1; |
| 92 | } | 92 | } |
| 93 | .logo-image { | 93 | .logo-image { |
| 94 | - padding: $-m $-s $-m 0; | 94 | + margin: $-m $-s $-m 0; |
| 95 | vertical-align: top; | 95 | vertical-align: top; |
| 96 | - height: 75px; | 96 | + height: 43px; |
| 97 | } | 97 | } |
| 98 | 98 | ||
| 99 | .dropdown-container { | 99 | .dropdown-container { | ... | ... |
| ... | @@ -256,6 +256,11 @@ ul { | ... | @@ -256,6 +256,11 @@ ul { |
| 256 | } | 256 | } |
| 257 | } | 257 | } |
| 258 | 258 | ||
| 259 | +span.sep { | ||
| 260 | + color: #BBB; | ||
| 261 | + padding: 0 $-xs; | ||
| 262 | +} | ||
| 263 | + | ||
| 259 | .list > * { | 264 | .list > * { |
| 260 | display: block; | 265 | display: block; |
| 261 | } | 266 | } |
| ... | @@ -266,3 +271,4 @@ ul { | ... | @@ -266,3 +271,4 @@ ul { |
| 266 | i { | 271 | i { |
| 267 | padding-right: $-xs; | 272 | padding-right: $-xs; |
| 268 | } | 273 | } |
| 274 | + | ... | ... |
| ... | @@ -16,13 +16,12 @@ | ... | @@ -16,13 +16,12 @@ |
| 16 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | 16 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
| 17 | <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script> | 17 | <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script> |
| 18 | <script src="/bower/dropzone/dist/min/dropzone.min.js"></script> | 18 | <script src="/bower/dropzone/dist/min/dropzone.min.js"></script> |
| 19 | - <script src="/js/common.js"></script> | ||
| 20 | <script src="/bower/vue/dist/vue.min.js"></script> | 19 | <script src="/bower/vue/dist/vue.min.js"></script> |
| 21 | <script src="/bower/vue-resource/dist/vue-resource.min.js"></script> | 20 | <script src="/bower/vue-resource/dist/vue-resource.min.js"></script> |
| 22 | 21 | ||
| 23 | @yield('head') | 22 | @yield('head') |
| 24 | </head> | 23 | </head> |
| 25 | -<body class="@yield('body-class')"> | 24 | +<body class="@yield('body-class')" id="app"> |
| 26 | 25 | ||
| 27 | @if(Session::has('success')) | 26 | @if(Session::has('success')) |
| 28 | <div class="notification anim pos"> | 27 | <div class="notification anim pos"> |
| ... | @@ -41,7 +40,9 @@ | ... | @@ -41,7 +40,9 @@ |
| 41 | <div class="row"> | 40 | <div class="row"> |
| 42 | <div class="col-md-4 col-sm-3"> | 41 | <div class="col-md-4 col-sm-3"> |
| 43 | <a href="/" class="logo"> | 42 | <a href="/" class="logo"> |
| 44 | - <img class="logo-image" src="/logo.png" alt="Logo"> | 43 | + @if(Setting::get('app-logo', '') !== 'none') |
| 44 | + <img class="logo-image" src="{{ Setting::get('app-logo', '') === '' ? '/logo.png' : Setting::get('app-logo', '') }}" alt="Logo"> | ||
| 45 | + @endif | ||
| 45 | <span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span> | 46 | <span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span> |
| 46 | </a> | 47 | </a> |
| 47 | </div> | 48 | </div> |
| ... | @@ -90,5 +91,6 @@ | ... | @@ -90,5 +91,6 @@ |
| 90 | </section> | 91 | </section> |
| 91 | 92 | ||
| 92 | @yield('bottom') | 93 | @yield('bottom') |
| 94 | +<script src="/js/common.js"></script> | ||
| 93 | </body> | 95 | </body> |
| 94 | </html> | 96 | </html> | ... | ... |
| ... | @@ -12,6 +12,9 @@ | ... | @@ -12,6 +12,9 @@ |
| 12 | {!! csrf_field() !!} | 12 | {!! csrf_field() !!} |
| 13 | 13 | ||
| 14 | <h3>App Settings</h3> | 14 | <h3>App Settings</h3> |
| 15 | + | ||
| 16 | + <div class="row"> | ||
| 17 | + <div class="col-md-6"> | ||
| 15 | <div class="form-group"> | 18 | <div class="form-group"> |
| 16 | <label for="setting-app-name">Application name</label> | 19 | <label for="setting-app-name">Application name</label> |
| 17 | <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name"> | 20 | <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name"> |
| ... | @@ -21,6 +24,17 @@ | ... | @@ -21,6 +24,17 @@ |
| 21 | <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label> | 24 | <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label> |
| 22 | <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label> | 25 | <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label> |
| 23 | </div> | 26 | </div> |
| 27 | + </div> | ||
| 28 | + <div class="col-md-6"> | ||
| 29 | + <div class="form-group" id="logo-control"> | ||
| 30 | + <label for="setting-app-logo">Application Logo</label> | ||
| 31 | + <p class="small">This image should be 43px in height. </p> | ||
| 32 | + <image-picker current-image="{{ Setting::get('app-logo', '') }}" name="setting-app-logo" image-class="logo-image"></image-picker> | ||
| 33 | + </div> | ||
| 34 | + </div> | ||
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + | ||
| 24 | 38 | ||
| 25 | <hr class="margin-top"> | 39 | <hr class="margin-top"> |
| 26 | 40 | ||
| ... | @@ -71,3 +85,8 @@ | ... | @@ -71,3 +85,8 @@ |
| 71 | </div> | 85 | </div> |
| 72 | 86 | ||
| 73 | @stop | 87 | @stop |
| 88 | + | ||
| 89 | +@section('bottom') | ||
| 90 | + @include('pages/image-manager') | ||
| 91 | + <script src="/js/image-manager.js"></script> | ||
| 92 | +@stop | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment