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.

app/Http/Controllers/SettingController.php

@@ -1,18 +1,14 @@
-<?php
+<?php namespace BookStack\Http\Controllers;
-
-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) {
+        foreach ($request->all() as $name => $value) {
-            if(strpos($name, 'setting-') !== 0) continue;
+            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;
-    }
-
 }

readme.md

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

resources/assets/js/global.js

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

resources/assets/sass/styles.scss

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

resources/views/base.blade.php

@@ -17,25 +17,8 @@
     <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
 
     @yield('head')
-    @if(Setting::get('app-color'))
+
-        <style>
+    @include('partials/custom-styles')
-            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">
 
@@ -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)

resources/views/partials/custom-styles.blade.php

@@ -0,0 +1,22 @@
+@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

resources/views/public.blade.php

@@ -15,19 +15,7 @@
 
     <!-- Scripts -->
     <script src="/libs/jquery/jquery.min.js?version=2.1.4"></script>
-    @if(Setting::get('app-color'))
+    @include('partials/custom-styles')
-        <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">
 

resources/views/settings/index.blade.php

@@ -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>
+                    <p class="small">This should be a hex value. <br> Leave empty to reset to the default color.</p>
-                    <input class="jscolor" type="text" value="{{ Setting::get('app-color', '') }}" name="setting-app-color" id="setting-app-color" placeholder="0288D1">
+                    <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