webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Changed color picker library and moved color logic to front end

Browse Source 
Since the old library was GPLv3 i changed the color picker to tiny-color-picker which is MIT.
Also extracted the styles to a shared view and move color calculation logic to javascript side.
This commit is contained in:
Dan Brown
2016-03-06 10:52:10 +00:00
parent 0774ecc89c
commit e744d4c82c
10 changed files with 60 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,7 @@ $(function () {
scrollTop.style.display = 'block';
scrollTopShowing = true;
setTimeout(() => {
scrollTop.style.opacity = 1;
scrollTop.style.opacity = 0.4;
}, 1);
} else if (scrollTopShowing && document.body.scrollTop < scrollTopBreakpoint) {
scrollTop.style.opacity = 0;

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

@ -138,7 +138,7 @@ $loadingSize: 10px;
// Back to top link
$btt-size: 40px;
#back-to-top {
background-color: rgba($primary, 0.4);
background-color: $primary;
position: fixed;
bottom: $-m;
right: $-l;
@ -154,7 +154,7 @@ $btt-size: 40px;
overflow: hidden;
&:hover {
width: $btt-size*3.4;
background-color: rgba($primary, 1);
opacity: 1 !important;
span {
display: inline-block;
}

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

@ -17,25 +17,8 @@
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
@yield('head')
@if(Setting::get('app-color'))
<style>
header{
background-color: #{{ Setting::get('app-color') }};
}
.faded-small{
background-color: {{ Setting::get('app-color-rgba') }};
}
.button-base, .button, input[type="button"], input[type="submit"] {
background-color: #{{ Setting::get('app-color') }};
}
.button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
background-color: #{{ Setting::get('app-color') }};
}
p.primary:hover, p .primary:hover, span.primary:hover, .text-primary:hover {
color: #{{ Setting::get('app-color') }};
}
</style>
@endif
@include('partials/custom-styles')
</head>
<body class="@yield('body-class')" ng-app="bookStack">
@ -62,7 +45,7 @@
<div class="float right">
<div class="links text-center">
<a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
@if(isset($currentUser) && $currentUser->can('settings-manage'))
@if(isset($currentUser) && userCan('settings-manage'))
<a href="/settings"><i class="zmdi zmdi-settings"></i>Settings</a>
@endif
@if(!isset($signedIn) || !$signedIn)

22
resources/views/partials/custom-styles.blade.php Normal file
View File

@ -0,0 +1,22 @@
@if(Setting::get('app-color'))
<style>
header, #back-to-top {
background-color: {{ Setting::get('app-color') }};
}
.faded-small {
background-color: {{ Setting::get('app-color-light') }};
}
.button-base, .button, input[type="button"], input[type="submit"] {
background-color: {{ Setting::get('app-color') }};
}
.button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
background-color: {{ Setting::get('app-color') }};
}
.setting-nav a.selected {
border-bottom-color: {{ Setting::get('app-color') }};
}
p.primary:hover, p .primary:hover, span.primary:hover, .text-primary:hover, a, a:hover, a:focus {
color: {{ Setting::get('app-color') }};
}
</style>
@endif

14
resources/views/public.blade.php
View File

@ -15,19 +15,7 @@
<!-- Scripts -->
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
@if(Setting::get('app-color'))
<style>
header {
background-color: #{{ Setting::get('app-color') }};
}
.faded-small {
background-color: {{ Setting::get('app-color-rgba') }}}
}
.button-base, .button, input[type="button"], input[type="submit"] {
background-color: #{{ Setting::get('app-color') }} !IMPORTANT;
}
</style>
@endif
@include('partials/custom-styles')
</head>
<body class="@yield('body-class')" ng-app="bookStack">

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

@ -37,8 +37,9 @@
</div>
<div class="form-group" id="color-control">
<label for="setting-app-color">Application Primary Color</label>
<p class="small">This should be a hex value.</p>
<input class="jscolor" type="text" value="{{ Setting::get('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="0288D1">
<p class="small">This should be a hex value. <br> Leave empty to reset to the default color.</p>
<input type="text" value="{{ Setting::get('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
<input type="hidden" value="{{ Setting::get('app-color-light', '') }}" name="setting-app-color-light" id="setting-app-color-light" placeholder="rgba(21, 101, 192, 0.15)">
</div>
</div>
</div>
@ -96,5 +97,23 @@
@stop
@section('scripts')
<script src="/libs/jscolor/jscolor.min.js?version=2.0.4"></script>
<script src="/libs/jq-color-picker/tiny-color-picker.min.js?version=1.0.0"></script>
<script type="text/javascript">
$('#setting-app-color').colorPicker({
opacity: false,
renderCallback: function($elm, toggled) {
var hexVal = '#' + this.color.colors.HEX;
var rgb = this.color.colors.RND.rgb;
var rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
// Set textbox color to hex color code.
var isEmpty = $.trim($elm.val()).length === 0;
if (!isEmpty) $elm.val(hexVal);
$('#setting-app-color-light').val(isEmpty ? '' : rgbLightVal);
// Set page elements to provide preview
$('#header, .image-picker .button').css('background-color', hexVal);
$('.faded-small').css('background-color', rgbLightVal);
$('.setting-nav a.selected').css('border-bottom-color', hexVal);
}
});
</script>
@stop