Polishing the CSS template feature

panoramix/static/panoramix.js

@@ -478,7 +478,7 @@ var px = (function() {
       });
       var data = {
           positions: gridster.serialize(),
-          css: $("#dash_css").val(),
+          css: editor.getValue(),
           expanded_slices: expanded_slices,
       };
       $.ajax({
@@ -489,13 +489,27 @@ var px = (function() {
         error: function() {alert("Error :(")},
       });
     });
+
+    var editor = ace.edit("dash_css");
+    editor.$blockScrolling = Infinity
+
+    editor.setTheme("ace/theme/crimson_editor");
+    editor.setOptions({
+        minLines: 16,
+        maxLines: Infinity,
+    });
+    editor.getSession().setMode("ace/mode/css");
+
     $(".select2").select2({dropdownAutoWidth : true});
     $("#css_template").on("change", function() {
       var css = $(this).find('option:selected').data('css');
+      editor.setValue(css);
       $('#dash_css').val(css);
       $("#user_style").html(css);
-
-    })
+    });
+    $('#filters').click( function(){
+      alert(dashboard.readFilters());
+    });
     $("a.closeslice").click(function() {
       var li = $(this).parents("li");
       gridster.remove_widget(li);
@@ -513,8 +527,9 @@ var px = (function() {
     $("table.slice_header").mouseout(function() {
       $(this).find("td.icons nobr").hide();
     });
-    $("#dash_css").on("keyup", function(){
-      css = $(this).val();
+    editor.on("change", function(){
+      css = editor.getValue();
+      $('#dash_css').val(css);
       $("#user_style").html(css);
     });
   }

panoramix/templates/panoramix/dashboard.html

@@ -23,24 +23,15 @@
         <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
       </div>
       <div class="modal-body">
-        <select id="css_template" class="select2">
+        <select id="css_template" class="select2" style="margin-bottom: 5px;">
+          <option value="" data-css="">-= CSS templates =-</option>
           {% for t in templates %}
             <option value="{{ t.id }}" data-css="{{t.css}}">
               {{ t.template_name }}
             </option>
           {% endfor %}
         </select><br>
-        <textarea id="dash_css" rows="30" cols="60" style="margin-top: 5px;">
-          {%- if dashboard.css %}
-            {{- dashboard.css }}
-          {% else %}
-/*
-body {
-    background: #F00;
-}
-*/
-          {% endif %}
-        </textarea>
+        <textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">
@@ -65,7 +56,7 @@ body {
             <i class="fa fa-filter"></i>
           </button>
           <button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
-            <i class="fa fa-css3"></i>
+            <i class="fa fa-css3" data-toggle="tooltip" title="CSS"></i>
           </button>
           <a id="editdash" class="btn btn-default" href="/dashboardmodelview/edit/{{ dashboard.id }}">
               <i class="fa fa-edit"></i>
@@ -141,6 +132,7 @@ body {
         <script src="{{ url_for('static', filename=js) }}"></script>
     {% endfor %}
     <script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
+    <script src="/static/lib/ace/ace.js"></script>
     <script>
       $(document).ready(function() {
         px.initDashboardView();