Handle path styling options

See https://github.com/yohanboniface/Leaflet.Storage/issues/26

umap/static/umap/umap.css

@@ -80,6 +80,32 @@ input:-moz-placeholder, :-moz-placeholder {
     background-color: #970b0e;
 }
 
+#style_options > * {
+    display: none;
+}
+
+#style_options .more_style_options,
+#style_options legend {
+    display: block;
+    cursor: pointer;
+}
+#style_options .more_style_options:before {
+    content: "…";
+}
+#style_options legend:before {
+    content: "▶";
+    padding-right: 5px;
+}
+#style_options.on legend:before {
+    content: "▼";
+}
+#style_options.on > * {
+    display: block;
+}
+#style_options.on .more_style_options {
+    display: none;
+}
+
 /* Map infos */
 .category_color {
     display: inline-block;

umap/templates/base.html

@@ -45,6 +45,19 @@
     {% endcompress js %}
     {% block bottom_js %}
         <script src="{{ STATIC_URL }}storage/contrib/js/storage.ui.default.js"></script>
+        <script type="text/javascript">
+            function fn (e) {
+                var styleDiv = L.DomUtil.get("style_options");
+                if (L.DomUtil.hasClass(styleDiv, "on")) {
+                    L.DomUtil.removeClass(styleDiv, "on");
+                }
+                else {
+                    L.DomUtil.addClass(styleDiv, "on");
+                }
+            }
+            $(document).on('click', '#style_options_toggle', fn);
+            $(document).on('click', '.more_style_options', fn);
+        </script>
     {% endblock %}
     <div id="storage-ui-container"></div>
     <div id="storage-alert-container"></div>

umap/templates/umap/styles_fieldset.html

@@ -1,7 +1,8 @@
 {% load umap_tags i18n %}
-<fieldset>
+<fieldset id="style_options">
-    <legend>{% trans "Styles" %}</legend>
+    <legend id="style_options_toggle">{% trans "Styles options" %}</legend>
-    {% foundation_field form.color %}
+    <label class="more_style_options"></label>
+    {% foundation_field form.options_color %}
     {% if form.icon_class and form.pictogram %}
     <div class="formbox columns twelve">
         <div class="six columns">
@@ -12,4 +13,22 @@
         </div>
     </div>
     {% endif %}
-</fieldset>
+    {% foundation_field form.options_weight %}
+    {% if form.options_stroke %}
+    <div class="formbox">
+        <span>{{ form.options_stroke.label }}</span>{{ form.options_stroke }}
+    </div>
+    <small class="help-text">{{ form.options_stroke.help_text }}</small>
+    {% endif %}
+    {% foundation_field form.options_smoothFactor %}
+    {% foundation_field form.options_opacity %}
+    {% if form.options_fill %}
+    <div class="formbox">
+        <span>{{ form.options_fill.label }}</span>{{ form.options_fill }}
+    </div>
+    <small class="help-text">{{ form.options_fill.help_text }}</small>
+    {% endif %}
+    {% foundation_field form.options_fillOpacity %}
+    {% foundation_field form.options_fillColor %}
+    {% foundation_field form.options_dashArray %}
+</fieldset>