Changed color picker library and moved color logic to front end
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
parent
0774ecc89c
commit
e744d4c82c
|
|
@ -1,18 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace BookStack\Http\Controllers;
|
||||
<?php namespace BookStack\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
use BookStack\Http\Requests;
|
||||
use BookStack\Http\Controllers\Controller;
|
||||
use Setting;
|
||||
|
||||
class SettingController extends Controller
|
||||
{
|
||||
/**
|
||||
* Display a listing of the settings.
|
||||
*
|
||||
* @return Response
|
||||
*/
|
||||
public function index()
|
||||
|
|
@ -22,10 +18,8 @@ class SettingController extends Controller
|
|||
return view('settings/index');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Update the specified settings in storage.
|
||||
*
|
||||
* @param Request $request
|
||||
* @return Response
|
||||
*/
|
||||
|
|
@ -38,9 +32,6 @@ class SettingController extends Controller
|
|||
foreach ($request->all() as $name => $value) {
|
||||
if (strpos($name, 'setting-') !== 0) continue;
|
||||
$key = str_replace('setting-', '', trim($name));
|
||||
if($key == 'app-color') {
|
||||
Setting::put('app-color-rgba', $this->hex2rgba($value, 0.15));
|
||||
}
|
||||
Setting::put($key, $value);
|
||||
}
|
||||
|
||||
|
|
@ -48,51 +39,4 @@ class SettingController extends Controller
|
|||
return redirect('/settings');
|
||||
}
|
||||
|
||||
/**
|
||||
* Adapted from http://mekshq.com/how-to-convert-hexadecimal-color-code-to-rgb-or-rgba-using-php/
|
||||
* Converts a hex color code in to an RGBA string.
|
||||
*
|
||||
* @param string $color
|
||||
* @param float|boolean $opacity
|
||||
* @return boolean|string
|
||||
*/
|
||||
protected function hex2rgba($color, $opacity = false)
|
||||
{
|
||||
// Return false if no color provided
|
||||
if(empty($color)) {
|
||||
return false;
|
||||
}
|
||||
// Trim any whitespace
|
||||
$color = trim($color);
|
||||
|
||||
// Sanitize $color if "#" is provided
|
||||
if($color[0] == '#' ) {
|
||||
$color = substr($color, 1);
|
||||
}
|
||||
|
||||
// Check if color has 6 or 3 characters and get values
|
||||
if(strlen($color) == 6) {
|
||||
$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
|
||||
} elseif( strlen( $color ) == 3 ) {
|
||||
$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert hexadec to rgb
|
||||
$rgb = array_map('hexdec', $hex);
|
||||
|
||||
// Check if opacity is set(rgba or rgb)
|
||||
if($opacity) {
|
||||
if(abs($opacity) > 1)
|
||||
$opacity = 1.0;
|
||||
$output = 'rgba('.implode(",",$rgb).','.$opacity.')';
|
||||
} else {
|
||||
$output = 'rgb('.implode(",",$rgb).')';
|
||||
}
|
||||
|
||||
// Return rgb(a) color string
|
||||
return $output;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -175,3 +175,4 @@ These are the great projects used to help build BookStack:
|
|||
* [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/icons.html)
|
||||
* [Dropzone.js](http://www.dropzonejs.com/)
|
||||
* [ZeroClipboard](http://zeroclipboard.org/)
|
||||
* [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue