Browse Source

color without spectra dep

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

+ 0 - 1
backend/setup.py View File

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

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

3
 import random
3
 import random
4
 import string
4
 import string
5
 from enum import Enum
5
 from enum import Enum
6
+import colorsys
6
 
7
 
7
 from redis import Redis
8
 from redis import Redis
8
 from rq import Queue
9
 from rq import Queue
124
     """
125
     """
125
     return ''.join(random.choice(chars) for char_number in range(length))
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
 from tracim_backend.extensions import APP_LIST
5
 from tracim_backend.extensions import APP_LIST
6
 from tracim_backend.exceptions import PageNotFound
6
 from tracim_backend.exceptions import PageNotFound
7
 from tracim_backend.lib.core.application import ApplicationApi
7
 from tracim_backend.lib.core.application import ApplicationApi
8
+from tracim_backend.lib.utils.utils import Color
8
 from tracim_backend.views import BASE_API_V2
9
 from tracim_backend.views import BASE_API_V2
9
 from tracim_backend.lib.utils.request import TracimRequest
10
 from tracim_backend.lib.utils.request import TracimRequest
10
 from tracim_backend.views.controllers import Controller
11
 from tracim_backend.views.controllers import Controller
51
             self._get_index_file_path(),
52
             self._get_index_file_path(),
52
             {
53
             {
53
                 'colors': {
54
                 'colors': {
54
-                    'primary': spectra.html(app_config.APPS_COLORS['primary']),
55
+                    'primary': Color(app_config.APPS_COLORS['primary']),
55
                 },
56
                 },
56
                 'applications': frontend_apps,
57
                 'applications': frontend_apps,
57
             }
58
             }

+ 3 - 3
color.json.sample View File

1
 {
1
 {
2
   "primary": "#7d4e24",
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
         param = 'color'
21
         param = 'color'
22
         color_change_value = 15
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
       <% html_class = '.primaryColorFont{state}Hover:hover' %>
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
         html_class = '.primaryColorBg{state}'
33
         html_class = '.primaryColorBg{state}'
34
         param = 'background-color'
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
       <% html_class = '.primaryColorBg{state}Hover:hover'%>
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
         param = 'border-color'
45
         param = 'border-color'
46
         html_class = '.primaryColorBorder{state}'
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
       <% html_class = '.primaryColorBorder{state}Hover:hover' %>
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
     </style>
55
     </style>
56
   </head>
56
   </head>
57
 
57