CSS changes for theme support

app/contexts/settings.py

@@ -8,11 +8,59 @@ logger = logging.getLogger('app.logger')
 def load(request=None):
     return {'SETTINGS': Setting.objects.first()}
 
-# Helper function for libsass
-# Return a theme color from the currently selected theme
+# Helper functions for libsass
+
 def theme(color):
+    """Return a theme color from the currently selected theme"""
     try:
         return getattr(load()['SETTINGS'].theme, color)
     except Exception as e:
         logger.warning("Cannot load configuration from theme(): " + e.message)
-        return "blue" # dah buh dih ah buh daa..
+        return "blue" # dah buh dih ah buh daa..
+
+
+def complementary(hexcolor):
+    """Returns complementary RGB color
+    Example: complementaryColor('#FFFFFF') --> '#000000'
+    """
+    if hexcolor[0] == '#':
+        hexcolor = hexcolor[1:]
+    rgb = (hexcolor[0:2], hexcolor[2:4], hexcolor[4:6])
+    comp = ['%02X' % (255 - int(a, 16)) for a in rgb]
+    return '#' + ''.join(comp)
+
+
+def scaleby(hexcolor, scalefactor):
+    """
+    Scales a hex string by ``scalefactor``. Returns scaled hex string.
+
+    To darken the color, use a float value between 0 and 1.
+    To brighten the color, use a float value greater than 1.
+
+    >>> colorscale("#DF3C3C", .5)
+    #6F1E1E
+    >>> colorscale("#52D24F", 1.6)
+    #83FF7E
+    >>> colorscale("#4F75D2", 1)
+    #4F75D2
+    """
+    def clamp(val, minimum=0, maximum=255):
+        if val < minimum:
+            return minimum
+        if val > maximum:
+            return maximum
+        return int(val)
+
+    hexcolor = hexcolor.strip('#')
+    scalefactor = float(scalefactor.value)
+
+    if scalefactor < 0 or len(hexcolor) != 6:
+        return hexcolor
+
+    r, g, b = int(hexcolor[:2], 16), int(hexcolor[2:4], 16), int(hexcolor[4:], 16)
+
+    r = clamp(r * scalefactor)
+    g = clamp(g * scalefactor)
+    b = clamp(b * scalefactor)
+
+    return "#%02x%02x%02x" % (r, g, b)

app/models/theme.py

@@ -1,6 +1,5 @@
 import logging
 
-from codemirror2.widgets import CodeMirrorEditor
 from django.db import models
 from colorfield.fields import ColorField
 
@@ -17,11 +16,13 @@ class Theme(models.Model):
 
     button_primary = ColorField(default='#2c3e50', help_text="Primary button color.")
     button_default = ColorField(default='#95a5a6', help_text="Default button color.")
-    button_danger = ColorField(default='#95a5a6', help_text="Delete button color.")
+    button_danger = ColorField(default='#e74c3c', help_text="Delete button color.")
 
     header_background = ColorField(default='#18bc9c', help_text="Background color of the site's header.")
     header_primary = ColorField(default='#ffffff', help_text="Text and icons in the site's header.")
-    highlight = ColorField(default='#f7f7f7', help_text="The background color of panels.")
+
+    border = ColorField(default='#e7e7e7', help_text="The color of most borders.")
+    highlight = ColorField(default='#f7f7f7', help_text="The background color of panels and some borders.")
 
     dialog_warning = ColorField(default='#f39c12', help_text="The border color of warning dialogs.")
 

app/static/admin/css/base.css

@@ -2,6 +2,7 @@
     DJANGO Admin styles
 */
 .admin-area {
+  background-color: #fff;
   /* GLOBAL DEFAULTS */
   /* TEXT STYLES & MODIFIERS */
   /* TABLES */

app/static/admin/css/base.scss

@@ -3,6 +3,8 @@
 */
 
 .admin-area{
+    background-color: #fff;
+    
     .CodeMirror-scroll, .CodeMirror{
         height: 150px !important;
     }

app/static/app/css/main.scss

@@ -94,8 +94,12 @@ ul#side-menu.nav{
     background-color: #fff;
     border-width: 2px;
     color: #000;
+    .close{
+        opacity: 0.6;
+    }
     .close:hover, .close:focus{
         color: #000;
+        opacity: 1;
     }
 }
 
@@ -221,5 +225,8 @@ footer{
     border-top: 1px solid #efefef;
     text-align: center;
     padding: 8px;
-    background-color: white;
+}
+
+.list-group-item{
+    background-color: inherit;
 }

app/static/app/css/sb-admin-2.css

@@ -15,7 +15,6 @@ body {
 #page-wrapper {
     padding: 0 15px;
     min-height: 568px;
-    background-color: #fff;
 }
 
 @media(min-width:768px) {

app/static/app/css/theme.scss

@@ -1,3 +1,107 @@
-*{
+/* Primary */
+body,
+ul#side-menu.nav a,
+.console,
+.alert,
+.dropdown-menu > li > a,
+.form-control
+{
     color: theme("primary");
-}
+}
+
+/* Secondary */
+body,
+.navbar-default,
+.console,
+.alert,
+.modal-content,
+.form-control
+{
+	background-color: theme("secondary");
+}
+
+.alert{
+    .close:hover, .close:focus{
+        color: complementary(theme("secondary"));
+    }
+}
+
+/* Button primary */
+#navbar-top .navbar-top-links,{
+	a:hover,a:focus,.open > a{
+		background-color: theme("button_primary");
+		color: theme("secondary");
+	}
+}
+
+#navbar-top ul#side-menu a:hover, #navbar-top ul#side-menu a:focus{
+	background-color: theme("button_primary");
+	color: theme("secondary");
+}
+
+.btn-primary, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary{
+	background-color: theme("button_primary");
+	border-color: theme("button_primary");
+	color: theme("secondary");
+
+	&:hover, &:active, &:focus{
+		background-color: scaleby(theme("button_primary"), 0.90);
+		border-color: scaleby(theme("button_primary"), 0.90);
+		color: theme("secondary");
+	}
+}
+
+/* Button default */
+.btn-default, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default{
+	background-color: theme("button_default");
+	border-color: theme("button_default");
+	color: theme("secondary");
+
+	&:hover, &:active, &:focus{
+		background-color: scaleby(theme("button_default"), 0.90);
+		border-color: scaleby(theme("button_default"), 0.90);
+		color: theme("secondary");
+	}
+}
+
+/* Header background */
+#navbar-top{
+	background-color: theme("header_background");
+}
+
+/* Header primary */
+.navbar-default .navbar-link,
+#navbar-top .navbar-top-links a.dropdown-toggle{
+	color: theme("header_primary");
+
+	&:hover{
+		color: theme("secondary");
+	}
+}
+
+/* Border */
+.sidebar ul li,
+.project-list-item,
+#page-wrapper,
+table-bordered>thead>tr>th, .table-bordered>thead>tr>th, table-bordered>tbody>tr>th, .table-bordered>tbody>tr>th, table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>th, table-bordered>thead>tr>td, .table-bordered>thead>tr>td, table-bordered>tbody>tr>td, .table-bordered>tbody>tr>td, table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>td,
+footer,
+.modal-content,
+.modal-header,
+.modal-footer{
+	border-color: theme("border");
+}
+
+/* Highlight */
+.task-list-item:nth-child(odd),
+.table-striped>tbody>tr:nth-of-type(odd){
+	background-color: theme("highlight");
+}
+pre.prettyprint,
+.form-control{
+	border-color: theme('highlight');
+}
+
+/* Dialog warning */
+.alert-warning{
+	border-color: theme("dialog_warning");
+}

app/static/app/js/css/Console.scss

@@ -1,4 +0,0 @@
-.console{
-    background: #fbfbfb;
-    color: black;
-}

app/templates/app/base.html

@@ -25,7 +25,7 @@
     <title>{{title|default:"Login"}} - {{ SETTINGS.app_name }}</title>
 
     {% compress css %}
-        <link rel="stylesheet" type="text/x-scss" href="{% static 'app/css/theme.scss' %}" />
+    <link rel="stylesheet" type="text/x-scss" href="{% static 'app/css/theme.scss' %}" />
     {% endcompress %}
 
     <style type="text/css">

webodm/settings.py

@@ -287,10 +287,25 @@ COMPRESS_PRECOMPILERS = (
 
 # Sass
 def theme(color):
-    from app.contexts.settings import theme as settings_theme
-    return settings_theme(color)
+    from app.contexts.settings import theme as f
+    return f(color)
 
-LIBSASS_CUSTOM_FUNCTIONS = {'theme': theme}
+
+def complementary(color):
+    from app.contexts.settings import complementary as f
+    return f(color)
+
+
+def scaleby(color, n):
+    from app.contexts.settings import scaleby as f
+    return f(color, n)
+
+
+LIBSASS_CUSTOM_FUNCTIONS = {
+    'theme': theme,
+    'complementary': complementary,
+    'scaleby': scaleby,
+}
 
 if TESTING:
     MEDIA_ROOT = os.path.join(BASE_DIR, 'app', 'media_test')