style(appearance): added built-in color schemes

polonel · Nov 27, 2018 · 074881a · 074881a
1 parent 6ea0ad4
commit 074881a
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/src/public/js/angularjs/controllers/settings.js b/src/public/js/angularjs/controllers/settings.js
@@ -219,6 +219,77 @@ define([
                             });
                         }
 
+                        // Color Scheme Select
+                        var $colorSchemeSelect = $('#colorSchemeSelect');
+                        if ($scope.colorSecondary === '#2f3640')
+                            $colorSchemeSelect[0].selectize.setValue('dark', true);
+                        else if ($scope.colorHeaderBG === '#2e3238')
+                            $colorSchemeSelect[0].selectize.setValue('moonlight', true);
+                        else if ($scope.colorHeaderBG === '#112d4e')
+                            $colorSchemeSelect[0].selectize.setValue('bluejean', true);
+                        else if ($scope.colorHeaderBG === '#625757')
+                            $colorSchemeSelect[0].selectize.setValue('sandstone', true);
+                        else if ($scope.colorHeaderBG === '#404969')
+                            $colorSchemeSelect[0].selectize.setValue('winterfire', true);
+
+                        $colorSchemeSelect.on('change', function(e) {
+                            $scope.$apply(function() {
+                                var val = $colorSchemeSelect.val();
+                                switch (val) {
+                                    case 'light':
+                                        $scope.revertColor('colorHeaderBG', '#42464d');
+                                        $scope.revertColor('colorHeaderPrimary', '#f6f7f8');
+                                        $scope.revertColor('colorPrimary', '#606771');
+                                        $scope.revertColor('colorSecondary', '#f7f8fa');
+                                        $scope.revertColor('colorTertiary', '#e74c3c');
+                                        $scope.revertColor('colorQuaternary', '#e6e7e8');
+                                        break;
+                                    case 'dark':
+                                        $scope.revertColor('colorHeaderBG', '#242a31');
+                                        $scope.revertColor('colorHeaderPrimary', '#f6f7f8');
+                                        $scope.revertColor('colorPrimary', '#f6f7f8');
+                                        $scope.revertColor('colorSecondary', '#2f3640');
+                                        $scope.revertColor('colorTertiary', '#e74c3c');
+                                        $scope.revertColor('colorQuaternary', '#454f5d');
+                                        break;
+                                    case 'bluejean':
+                                        $scope.revertColor('colorHeaderBG', '#112d4e');
+                                        $scope.revertColor('colorHeaderPrimary', '#f9f7f7');
+                                        $scope.revertColor('colorPrimary', '#112d4e');
+                                        $scope.revertColor('colorSecondary', '#f9f7f7');
+                                        $scope.revertColor('colorTertiary', '#3f72af');
+                                        $scope.revertColor('colorQuaternary', '#dbe2ef');
+                                        break;
+                                    case 'moonlight':
+                                        $scope.revertColor('colorHeaderBG', '#2e3238');
+                                        $scope.revertColor('colorHeaderPrimary', '#eeeeee');
+                                        $scope.revertColor('colorPrimary', '#444a54');
+                                        $scope.revertColor('colorSecondary', '#c8c8c8');
+                                        $scope.revertColor('colorTertiary', '#7971ea');
+                                        $scope.revertColor('colorQuaternary', '#444a54');
+                                        break;
+                                    case 'sandstone':
+                                        $scope.revertColor('colorHeaderBG', '#625757');
+                                        $scope.revertColor('colorHeaderPrimary', '#f9f9f9');
+                                        $scope.revertColor('colorPrimary', '#625757');
+                                        $scope.revertColor('colorSecondary', '#dfdfdf');
+                                        $scope.revertColor('colorTertiary', '#ef5a5a');
+                                        $scope.revertColor('colorQuaternary', '#6f6363');
+                                        break;
+                                    case 'winterfire':
+                                        $scope.revertColor('colorHeaderBG', '#404969');
+                                        $scope.revertColor('colorHeaderPrimary', '#ebf0f6');
+                                        $scope.revertColor('colorPrimary', '#404969');
+                                        $scope.revertColor('colorSecondary', '#ebf0f6');
+                                        $scope.revertColor('colorTertiary', '#ff7f50');
+                                        $scope.revertColor('colorQuaternary', '#4a5479');
+                                        break;
+                                }
+
+                                $scope.saveColorScheme(e);
+                            });
+                        });
+
                         // Load MailCheckTicketType from settings
                         var $mailerCheckTicketTypeSelect = $('#mailerCheckTicketType');
                         var $selectizeTicketType = $mailerCheckTicketTypeSelect[0].selectize;

diff --git a/src/views/settings.hbs b/src/views/settings.hbs
@@ -259,6 +259,29 @@
                         </div>
                     </div>
 
+                    <div class="setting-item-wrap uk-margin-medium-bottom">
+                        <div class="panel trupanel nopadding no-hover-shadow" style="min-height: 60px;">
+                            <div class="left">
+                                <h6 style="padding: 0 0 0 15px; margin: 15px 0 0 0; font-size: 16px; line-height: 14px;">Built-in Color Scheme</h6>
+                                <h5 style="padding: 0 0 10px 15px; margin: 2px 0 0 0; font-size: 12px;" class="uk-text-muted">
+                                    Select a predefined color scheme
+                                </h5>
+                            </div>
+                            <div class="right uk-width-1-3 uk-clearfix" style="position:relative; margin-right: 15px; margin-top: 5px;">
+                                <div class="uk-width-2-3 uk-float-right">
+                                    <select name="colorSchemeSelect" id="colorSchemeSelect" data-md-selectize>
+                                        <option value="light">Light (Default)</option>
+                                        <option value="dark">Dark</option>
+                                        <option value="moonlight">Moonlight</option>
+                                        <option value="bluejean">Blue Jean</option>
+                                        <option value="sandstone">Sandstone</option>
+                                        <option value="winterfire">Winter's Fire</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="setting-item-wrap uk-margin-medium-bottom">
                         <div class="panel trupanel nopadding no-hover-shadow uk-overflow-hidden" style="min-height: 60px; height: auto;">
                             <div class="left">