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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
e744d4c8 1 parent 0774ecc8

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.
Expand all
Inline Side-by-side
Showing 10 changed files with 56 additions and 99 deletions
<?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,11 +18,9 @@ class SettingController extends Controller
return view('settings/index');
}
/**
* Update the specified settings in storage.
*
* @param Request $request
* @param Request $request
* @return Response
*/
public function update(Request $request)
......@@ -35,12 +29,9 @@ class SettingController extends Controller
$this->checkPermission('settings-manage');
// Cycles through posted settings and update them
foreach($request->all() as $name => $value) {
if(strpos($name, 'setting-') !== 0) continue;
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;
}
}
......
......@@ -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)
......
@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
\ No newline at end of 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">
......
......@@ -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
\ No newline at end of file
......