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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
6b4ec65b 1 parent 3aaab238

Added logo selector

Inline Side-by-side
Showing 11 changed files with 93 additions and 31 deletions
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"
}
}
......
......@@ -16,4 +16,36 @@ $(function () {
$(this).closest('.chapter').find('.inset-list').slideToggle(180);
});
});
// 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'
});
\ No newline at end of file
......
var bookDashboard = new Vue({
new Vue({
el: '#book-dashboard',
data: {
searching: false,
......
<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>
\ No newline at end of file
......@@ -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;
}
......@@ -265,4 +270,5 @@ ul {
*/
i {
padding-right: $-xs;
}
\ No newline at end of file
}
......
......@@ -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
\ No newline at end of file
......
......@@ -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>
......@@ -70,4 +84,9 @@
</div>
@stop
@section('bottom')
@include('pages/image-manager')
<script src="/js/image-manager.js"></script>
@stop
\ No newline at end of file
......