Browse Source

color without spectra dep

Guénaël Muller 5 years ago
parent
commit
038334e5bd

+ 0 - 1
backend/setup.py View File

@@ -43,7 +43,6 @@ requires = [
43 43
     'rq',
44 44
     # frontend file serve
45 45
     'pyramid_mako',
46
-    'spectra',
47 46
 ]
48 47
 
49 48
 tests_require = [

+ 59 - 0
backend/tracim_backend/lib/utils/utils.py View File

@@ -3,6 +3,7 @@ import datetime
3 3
 import random
4 4
 import string
5 5
 from enum import Enum
6
+import colorsys
6 7
 
7 8
 from redis import Redis
8 9
 from rq import Queue
@@ -124,3 +125,61 @@ def password_generator(
124 125
     """
125 126
     return ''.join(random.choice(chars) for char_number in range(length))
126 127
 
128
+
129
+def clamp(val: float, minimum: float = 0.0, maximum: float= 255.0) -> int:
130
+    """ Fix value between min an max"""
131
+    if val < minimum:
132
+        return minimum
133
+    if val > maximum:
134
+        return maximum
135
+    return int(val)
136
+
137
+
138
+COLOR_DARKEN_SCALE_FACTOR = 0.85
139
+COLOR_LIGHTEN_SCALE_FACTOR = 1.15
140
+
141
+class Color(object):
142
+    def __init__(self, base_hex_code: str):
143
+        """
144
+        :param base_hex_code: hex color like '#FFFFFF'
145
+        """
146
+
147
+        assert len(base_hex_code) == 7
148
+        self._base_hex_code = base_hex_code
149
+
150
+    # INFO - G.M - 2018-08-10 - get_hexcolor, inspired by
151
+    # https://thadeusb.com/weblog/2010/10/10/python_scale_hex_color/
152
+
153
+    def get_hexcolor(self, scalefactor: float) -> str:
154
+        """
155
+
156
+        :param scalefactor: factor of scaling,
157
+        value between 0 and 1 darken the color,
158
+        value >1 lighten the color.
159
+        :return: new hex_color
160
+        """
161
+
162
+        hex_color = self._base_hex_code.strip('#')
163
+        assert scalefactor > 0
164
+
165
+        r = int(hex_color[:2], 16)
166
+        g = int(hex_color[2:4], 16)
167
+        b = int(hex_color[4:], 16)
168
+
169
+        h, l, s = colorsys.rgb_to_hls(r, g, b)
170
+        l = scalefactor * l
171
+        r, g, b = colorsys.hls_to_rgb(h, l, s)
172
+
173
+        return "#%02x%02x%02x" % (clamp(r), clamp(g), clamp(b))
174
+
175
+    @property
176
+    def normal(self):
177
+        return self._base_hex_code
178
+
179
+    @property
180
+    def darken(self):
181
+        return self.get_hexcolor(COLOR_DARKEN_SCALE_FACTOR)
182
+
183
+    @property
184
+    def lighten(self):
185
+        return self.get_hexcolor(COLOR_LIGHTEN_SCALE_FACTOR)

+ 2 - 1
backend/tracim_backend/views/frontend.py View File

@@ -5,6 +5,7 @@ from pyramid.config import Configurator
5 5
 from tracim_backend.extensions import APP_LIST
6 6
 from tracim_backend.exceptions import PageNotFound
7 7
 from tracim_backend.lib.core.application import ApplicationApi
8
+from tracim_backend.lib.utils.utils import Color
8 9
 from tracim_backend.views import BASE_API_V2
9 10
 from tracim_backend.lib.utils.request import TracimRequest
10 11
 from tracim_backend.views.controllers import Controller
@@ -51,7 +52,7 @@ class FrontendController(Controller):
51 52
             self._get_index_file_path(),
52 53
             {
53 54
                 'colors': {
54
-                    'primary': spectra.html(app_config.APPS_COLORS['primary']),
55
+                    'primary': Color(app_config.APPS_COLORS['primary']),
55 56
                 },
56 57
                 'applications': frontend_apps,
57 58
             }

+ 3 - 3
color.json.sample View File

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "primary": "#7d4e24",
3
-  "html-document": "#3f52e3",
4
-  "thread": "#ad4cf9",
5
-  "file": "#ff9900"
3
+  "contents/html-document": "#3f52e3",
4
+  "contents/thread": "#ad4cf9",
5
+  "contents/file": "#ff9900"
6 6
 }

+ 18 - 18
frontend/dist/index.mak View File

@@ -21,37 +21,37 @@
21 21
         param = 'color'
22 22
         color_change_value = 15
23 23
       %>
24
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
25
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
26
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
24
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
25
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
26
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
27 27
       <% html_class = '.primaryColorFont{state}Hover:hover' %>
28
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
29
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
30
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
28
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
29
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
30
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
31 31
 
32 32
       <%
33 33
         html_class = '.primaryColorBg{state}'
34 34
         param = 'background-color'
35 35
       %>
36
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
37
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
38
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
36
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
37
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
38
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
39 39
       <% html_class = '.primaryColorBg{state}Hover:hover'%>
40
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
41
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
42
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
40
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
41
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
42
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
43 43
 
44 44
       <%
45 45
         param = 'border-color'
46 46
         html_class = '.primaryColorBorder{state}'
47 47
       %>
48
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
49
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
50
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
48
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
49
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
50
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
51 51
       <% html_class = '.primaryColorBorder{state}Hover:hover' %>
52
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
53
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
54
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
52
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
53
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
54
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
55 55
     </style>
56 56
   </head>
57 57