Зуев Егор / 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 ...@@ -38,6 +38,9 @@ class SettingController extends Controller
38 foreach($request->all() as $name => $value) { 38 foreach($request->all() as $name => $value) {
39 if(strpos($name, 'setting-') !== 0) continue; 39 if(strpos($name, 'setting-') !== 0) continue;
40 $key = str_replace('setting-', '', trim($name)); 40 $key = str_replace('setting-', '', trim($name));
41 + if($key == 'app-color') {
42 + Setting::put('app-color-rgba', $this->hex2rgba($value, 0.15));
43 + }
41 Setting::put($key, $value); 44 Setting::put($key, $value);
42 } 45 }
43 46
...@@ -45,4 +48,51 @@ class SettingController extends Controller ...@@ -45,4 +48,51 @@ class SettingController extends Controller
45 return redirect('/settings'); 48 return redirect('/settings');
46 } 49 }
47 50
51 + /**
52 + * Adapted from http://mekshq.com/how-to-convert-hexadecimal-color-code-to-rgb-or-rgba-using-php/
53 + * Converts a hex color code in to an RGBA string.
54 + *
55 + * @param string $color
56 + * @param float|boolean $opacity
57 + * @return boolean|string
58 + */
59 + protected function hex2rgba($color, $opacity = false)
60 + {
61 + // Return false if no color provided
62 + if(empty($color)) {
63 + return false;
64 + }
65 + // Trim any whitespace
66 + $color = trim($color);
67 +
68 + // Sanitize $color if "#" is provided
69 + if($color[0] == '#' ) {
70 + $color = substr($color, 1);
71 + }
72 +
73 + // Check if color has 6 or 3 characters and get values
74 + if(strlen($color) == 6) {
75 + $hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
76 + } elseif( strlen( $color ) == 3 ) {
77 + $hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
78 + } else {
79 + return false;
80 + }
81 +
82 + // Convert hexadec to rgb
83 + $rgb = array_map('hexdec', $hex);
84 +
85 + // Check if opacity is set(rgba or rgb)
86 + if($opacity) {
87 + if(abs($opacity) > 1)
88 + $opacity = 1.0;
89 + $output = 'rgba('.implode(",",$rgb).','.$opacity.')';
90 + } else {
91 + $output = 'rgb('.implode(",",$rgb).')';
92 + }
93 +
94 + // Return rgb(a) color string
95 + return $output;
96 + }
97 +
48 } 98 }
......
...@@ -17,6 +17,25 @@ ...@@ -17,6 +17,25 @@
17 <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script> 17 <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
18 18
19 @yield('head') 19 @yield('head')
20 + @if(Setting::get('app-color'))
21 + <style>
22 + header{
23 + background-color: #{{ Setting::get('app-color') }};
24 + }
25 + .faded-small{
26 + background-color: {{ Setting::get('app-color-rgba') }};
27 + }
28 + .button-base, .button, input[type="button"], input[type="submit"] {
29 + background-color: #{{ Setting::get('app-color') }};
30 + }
31 + .button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
32 + background-color: #{{ Setting::get('app-color') }};
33 + }
34 + p.primary:hover, p .primary:hover, span.primary:hover, .text-primary:hover {
35 + color: #{{ Setting::get('app-color') }};
36 + }
37 + </style>
38 + @endif
20 </head> 39 </head>
21 <body class="@yield('body-class')" ng-app="bookStack"> 40 <body class="@yield('body-class')" ng-app="bookStack">
22 41
......
...@@ -15,7 +15,19 @@ ...@@ -15,7 +15,19 @@
15 15
16 <!-- Scripts --> 16 <!-- Scripts -->
17 <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script> 17 <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
18 - 18 + @if(Setting::get('app-color'))
19 + <style>
20 + header {
21 + background-color: #{{ Setting::get('app-color') }};
22 + }
23 + .faded-small {
24 + background-color: {{ Setting::get('app-color-rgba') }}}
25 + }
26 + .button-base, .button, input[type="button"], input[type="submit"] {
27 + background-color: #{{ Setting::get('app-color') }} !IMPORTANT;
28 + }
29 + </style>
30 + @endif
19 </head> 31 </head>
20 <body class="@yield('body-class')" ng-app="bookStack"> 32 <body class="@yield('body-class')" ng-app="bookStack">
21 33
......
...@@ -35,6 +35,11 @@ ...@@ -35,6 +35,11 @@
35 <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p> 35 <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
36 <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> 36 <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>
37 </div> 37 </div>
38 + <div class="form-group" id="color-control">
39 + <label for="setting-app-color">Application Primary Color</label>
40 + <p class="small">This should be a hex value.</p>
41 + <input class="jscolor" type="text" value="{{ Setting::get('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="0288D1">
42 + </div>
38 </div> 43 </div>
39 </div> 44 </div>
40 45
...@@ -89,3 +94,7 @@ ...@@ -89,3 +94,7 @@
89 @include('partials/image-manager', ['imageType' => 'system']) 94 @include('partials/image-manager', ['imageType' => 'system'])
90 95
91 @stop 96 @stop
97 +
98 +@section('scripts')
99 + <script src="/libs/jscolor/jscolor.min.js?version=2.0.4"></script>
100 +@stop
...\ No newline at end of file ...\ No newline at end of file
......