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

Go to a project
Toggle navigation
Toggle navigation pinning
Nick Walke
e3bdc391 1 parent 54e31225

Closes #55. Allows you to set the primary color. 

This certainly should not be seen as the final implementation of this.
I imagine that requests like this will happen for many other colors in
the system, it might be good at some point to allow them to upload their
own stylesheet to be used.
Expand all
Inline Side-by-side
Showing 5 changed files with 91 additions and 1 deletions
......@@ -38,6 +38,9 @@ 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);
}
......@@ -45,4 +48,51 @@ 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;
}
}
......
......@@ -17,6 +17,25 @@
<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
</head>
<body class="@yield('body-class')" ng-app="bookStack">
......
......@@ -15,7 +15,19 @@
<!-- 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
</head>
<body class="@yield('body-class')" ng-app="bookStack">
......
......@@ -35,6 +35,11 @@
<p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
<image-picker resize-height="43" show-remove="true" resize-width="200" current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
</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">
</div>
</div>
</div>
......@@ -89,3 +94,7 @@
@include('partials/image-manager', ['imageType' => 'system'])
@stop
@section('scripts')
<script src="/libs/jscolor/jscolor.min.js?version=2.0.4"></script>
@stop
\ No newline at end of file
......