mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
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.
This commit is contained in:
parent
54e3122540
commit
e3bdc391cd
@ -38,6 +38,9 @@ class SettingController extends Controller
|
|||||||
foreach($request->all() as $name => $value) {
|
foreach($request->all() as $name => $value) {
|
||||||
if(strpos($name, 'setting-') !== 0) continue;
|
if(strpos($name, 'setting-') !== 0) continue;
|
||||||
$key = str_replace('setting-', '', trim($name));
|
$key = str_replace('setting-', '', trim($name));
|
||||||
|
if($key == 'app-color') {
|
||||||
|
Setting::put('app-color-rgba', $this->hex2rgba($value, 0.15));
|
||||||
|
}
|
||||||
Setting::put($key, $value);
|
Setting::put($key, $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -45,4 +48,51 @@ class SettingController extends Controller
|
|||||||
return redirect('/settings');
|
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
10
public/libs/jscolor/jscolor.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -17,6 +17,25 @@
|
|||||||
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
|
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
|
||||||
|
|
||||||
@yield('head')
|
@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>
|
</head>
|
||||||
<body class="@yield('body-class')" ng-app="bookStack">
|
<body class="@yield('body-class')" ng-app="bookStack">
|
||||||
|
|
||||||
|
@ -15,7 +15,19 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
|
<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>
|
</head>
|
||||||
<body class="@yield('body-class')" ng-app="bookStack">
|
<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>
|
<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>
|
<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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -89,3 +94,7 @@
|
|||||||
@include('partials/image-manager', ['imageType' => 'system'])
|
@include('partials/image-manager', ['imageType' => 'system'])
|
||||||
|
|
||||||
@stop
|
@stop
|
||||||
|
|
||||||
|
@section('scripts')
|
||||||
|
<script src="/libs/jscolor/jscolor.min.js?version=2.0.4"></script>
|
||||||
|
@stop
|
Loading…
Reference in New Issue
Block a user