github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-26 18:30:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Nick Walke 2016-03-03 12:01:14 -06:00
parent 54e3122540
commit e3bdc391cd
5 changed files with 101 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/Http/Controllers/SettingController.php
View File

@ -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;
}
}

10
public/libs/jscolor/jscolor.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -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">

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

@ -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">

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

@ -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