orleans: add recolored category icons

Makefile

@@ -28,6 +28,7 @@ icons:
 	# grandlyon
 	cd src/ && python render-imgs-dashboard.py ../static/grandlyon/img/ --normal 333333 --selected DA0000 --title FFFFFF --title-width 80
 	# orleans
+	cd src/ && python render-imgs-categories.py ../static/orleans/img/
 	cd src/ && python render-imgs-dashboard.py ../static/orleans/img/ --normal FFFFFF --normal-width 30 --selected f05923 --selected-width 30 --title FFFFFF --title-width 80
 	# publik
 	cd src/ && python render-imgs-categories.py ../static/publik/img/

src/render-imgs-categories.py

@@ -16,17 +16,13 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import argparse
 import subprocess
 import os
 import re
 import xml.etree.ElementTree as ET
 import sys
 
-path_out = sys.argv[1]
-
-if not os.path.exists(path_out):
-    os.makedirs(path_out)
-
 names = {
         '02': 'famille',
         '03': 'papiers',
@@ -89,13 +85,28 @@ blacklist = [
         'M81.853,95.268c0,', # "
         ]
 
-generate_png = True
+
+parser = argparse.ArgumentParser()
+parser.add_argument('path', help='out path')
+parser.add_argument('--primary', default='E0037A')
+parser.add_argument('--secondary', default='6D1F80')
+
+args = parser.parse_args()
+path_out = args.path
+
+if not os.path.exists(path_out):
+    os.makedirs(path_out)
 
 for filename in filenames:
     outname = names.get(re.search(r'\d+', filename).group())
-    if generate_png:
-        subprocess.call(['inkscape', '--without-gui',
-            '--file', os.path.join('pictos', filename),
+
+    fd = open('tmp-%s.svg' % outname, 'w')
+    fd.write(open(os.path.join('pictos', filename)).read().replace(
+        'E0037A', args.primary).replace(
+        '6D1F80', args.secondary))
+    fd.close()
+    subprocess.call(['inkscape', '--without-gui',
+            '--file', 'tmp-%s.svg' % outname,
             '--export-area-page',
             '--export-png', os.path.join(path_out, '%s.png' % outname),
             '--export-width', '128'])
@@ -168,9 +179,8 @@ for filename in filenames:
             node.attrib['fill'] = 'none'
             node.attrib['stroke'] = '#FFFFFF'
     tree.write('tmp-%s.svg' % outname)
-    if generate_png:
-        subprocess.call(['inkscape', '--without-gui',
-            '--file', 'tmp-%s.svg' % outname,
-            '--export-area-page',
-            '--export-png', os.path.join(path_out, '%s-on.png' % outname),
-            '--export-width', '128'])
+    subprocess.call(['inkscape', '--without-gui',
+        '--file', 'tmp-%s.svg' % outname,
+        '--export-area-page',
+        '--export-png', os.path.join(path_out, '%s-on.png' % outname),
+        '--export-width', '128'])

static/includes/_categories.scss

@@ -8,8 +8,10 @@
 
 $category-toggled-background: #888 !default;
 $category-toggled-link-hover-color: white !default;
+$category-toggled-title-background: $category-toggled-background !default;
 $category-togglable: true !default;
-
+$category-color: #DF017A !default;
+$category-link-color: white !default;
 
 $_category_selector_class: if($category-togglable, 'toggled', 'cell');
 
@@ -17,7 +19,7 @@ $_category_selector_class: if($category-togglable, 'toggled', 'cell');
 	border: 2px solid #fafafa;
 
 	h2:first-child {
-		color: #DF017A;
+		color: $category-color;
 		text-transform: uppercase;
 		background: white linear-gradient(to right, #A2DEEE 0%, #B8E3EF 100px, white 100px) no-repeat top left;
 		height: 100px;
@@ -36,11 +38,14 @@ $_category_selector_class: if($category-togglable, 'toggled', 'cell');
 		}
 	}
 
+	div.intro {
+		display: none;
+	}
 
 	&.#{$_category_selector_class} {
 		h2:first-child {
 			color: white;
-			background-color: $category-toggled-background;
+			background-color: $category-toggled-title-background;
 			background-image: none;
 		}
 
@@ -51,7 +56,7 @@ $_category_selector_class: if($category-togglable, 'toggled', 'cell');
 			padding: 0 10% 1ex 10%;
 
 			a {
-				color: white;
+				color: $category-link-color;
 				padding: 1em 0;
 				&:hover {
 					font-weight: bold;

static/orleans/extra.js

@@ -0,0 +1,5 @@
+$(function() {
+  $('div.wcsformsofcategorycell').delegate('h2', 'click', function() {
+    $(this).parents('div.wcsformsofcategorycell').toggleClass('toggled');
+  });
+});

static/orleans/style.scss

@@ -25,6 +25,12 @@ $title-background: $primary-color;
 $title-color: white;
 $footer-background: #162C35;
 $dashboard-selected-color: $primary-color;
+$category-color: $primary-color;
+$category-toggled-title-background: $primary-color;
+$category-toggled-background: transparent;
+$link-color: #028;
+$category-link-color: $link-color;
+$category-toggled-link-hover-color: $primary-color;
 
 @import '../includes/utils';
 @import '../includes/general';
@@ -37,6 +43,7 @@ $dashboard-selected-color: $primary-color;
 @import '../includes/wcs';
 @import '../includes/misc';
 @import '../includes/a11y';
+@import '../includes/categories';
 @import '../includes/dashboard';
 
 @import 'custom';