浏览代码

[spark] Styled more progress bar

Enrico Berti 10 年之前
父节点
当前提交
d9de4d9
共有 3 个文件被更改,包括 19 次插入11 次删除
  1. 7 7
      apps/spark/src/spark/templates/editor.mako
  2. 8 4
      apps/spark/static/css/spark.css
  3. 4 0
      apps/spark/static/js/spark.ko.js

+ 7 - 7
apps/spark/src/spark/templates/editor.mako

@@ -317,8 +317,8 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
               ${ _('Go!') }
               ${ _('Go!') }
             </a>
             </a>
             <a data-bind="click: cancel, visible: status() == 'running'" class="btn codeMirror-overlaybtn pointer">${ _('Cancel') }</a>
             <a data-bind="click: cancel, visible: status() == 'running'" class="btn codeMirror-overlaybtn pointer">${ _('Cancel') }</a>
-            <div class="progress" data-bind="css: {'progress-neutral': progress() == 0, 'progress-warning': progress() > 0 && progress() < 100, 'progress-success': progress() == 100}" style="height: 1px">
-              <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
+            <div class="progress progress-striped active" data-bind="css: {'progress-neutral': progress() == 0 && result.errors().length == 0, 'progress-warning': progress() > 0 && progress() < 100, 'progress-success': progress() == 100, 'progress-danger': progress() == 0 && result.errors().length > 0}" style="height: 1px">
+              <div class="bar" data-bind="style: {'width': (result.errors().length > 0 ? 100 : progress()) + '%'}"></div>
             </div>
             </div>
             <div class="resize-panel center"><a href="javascript:void(0)"><i class="fa fa-ellipsis-h"></i></a></div>
             <div class="resize-panel center"><a href="javascript:void(0)"><i class="fa fa-ellipsis-h"></i></a></div>
           </div>
           </div>
@@ -379,7 +379,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
             
             
             &nbsp;
             &nbsp;
             
             
-            <a data-bind="visible: status() != 'ready' && status() != 'loading', click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'active': $data.showLogs}" href="javascript:void(0)" class="btn" title="${ _('Show Logs') }">
+            <a data-bind="visible: status() != 'ready' && status() != 'loading' && result.errors().length == 0, click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'active': $data.showLogs}" href="javascript:void(0)" class="btn" title="${ _('Show Logs') }">
               <i class="fa fa-file-text-o"></i>
               <i class="fa fa-file-text-o"></i>
             </a>
             </a>
 
 
@@ -419,7 +419,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           <pre data-bind="visible: result.logs().length > 0, text: result.logs" class="logs"></pre>
           <pre data-bind="visible: result.logs().length > 0, text: result.logs" class="logs"></pre>
         </div>
         </div>
 
 
-        <div data-bind="visible: result.errors().length > 0, css: resultsKlass">
+        <div data-bind="visible: result.errors().length > 0, css: errorsKlass" style="margin-top: 5px">
           <span data-bind="text: result.errors"></span>
           <span data-bind="text: result.errors"></span>
         </div>
         </div>
         
         
@@ -1486,13 +1486,13 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
   $(document).ready(function () {
   $(document).ready(function () {
     resizeAssist();
     resizeAssist();
 
 
-    var INITIAL_RESIZE_POSITION = 100;
+    var initialResizePosition = 100;
 
 
     function getDraggableOptions(minY) {
     function getDraggableOptions(minY) {
       return {
       return {
         axis: "y",
         axis: "y",
         start: function(e, ui) {
         start: function(e, ui) {
-          INITIAL_RESIZE_POSITION = ui.offset.top;
+          initialResizePosition = ui.offset.top;
         },
         },
         drag: function(e, ui) {
         drag: function(e, ui) {
           draggableHelper($(this), e, ui);
           draggableHelper($(this), e, ui);
@@ -1514,7 +1514,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
     function draggableHelper(el, e, ui, setSize) {
     function draggableHelper(el, e, ui, setSize) {
       var _snippet = ko.dataFor(el.parents(".snippet")[0]);
       var _snippet = ko.dataFor(el.parents(".snippet")[0]);
       var _cm = $("#snippet_" + _snippet.id()).data("editor");
       var _cm = $("#snippet_" + _snippet.id()).data("editor");
-      var _newSize = _snippet.codemirrorSize() + (ui.offset.top - INITIAL_RESIZE_POSITION);
+      var _newSize = _snippet.codemirrorSize() + (ui.offset.top - initialResizePosition);
       _cm.setSize("99%", _newSize);
       _cm.setSize("99%", _newSize);
       if (setSize) {
       if (setSize) {
         _snippet.codemirrorSize(_newSize);
         _snippet.codemirrorSize(_newSize);

+ 8 - 4
apps/spark/static/css/spark.css

@@ -167,10 +167,6 @@
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 
 
-.progress, .progress-neutral .bar {
-  background-color: #DDD;
-}
-
 [contenteditable] {
 [contenteditable] {
   min-height: 200px;
   min-height: 200px;
   border: 1px solid #DDD;
   border: 1px solid #DDD;
@@ -239,3 +235,11 @@ h1.empty {
   color: #666;
   color: #666;
   position: absolute;
   position: absolute;
 }
 }
+
+.progress .bar {
+  background-repeat: repeat-x;
+}
+
+.progress, .progress-neutral .bar {
+  background-color: #DDD;
+}

+ 4 - 0
apps/spark/static/js/spark.ko.js

@@ -203,6 +203,10 @@ var Snippet = function (vm, notebook, snippet) {
     return "results " + self.type();
     return "results " + self.type();
   });
   });
 
 
+  self.errorsKlass = ko.computed(function(){
+    return self.resultsKlass + " alert alert-error";
+  });
+
   self.chartType = ko.observable(typeof snippet.chartType != "undefined" && snippet.chartType != null ? snippet.chartType : ko.HUE_CHARTS.TYPES.BARCHART);
   self.chartType = ko.observable(typeof snippet.chartType != "undefined" && snippet.chartType != null ? snippet.chartType : ko.HUE_CHARTS.TYPES.BARCHART);
   self.chartSorting = ko.observable(typeof snippet.chartSorting != "undefined" && snippet.chartSorting != null ? snippet.chartSorting : "none");
   self.chartSorting = ko.observable(typeof snippet.chartSorting != "undefined" && snippet.chartSorting != null ? snippet.chartSorting : "none");
   self.chartScatterGroup = ko.observable(typeof snippet.chartScatterGroup != "undefined" && snippet.chartScatterGroup != null ? snippet.chartScatterGroup : null);
   self.chartScatterGroup = ko.observable(typeof snippet.chartScatterGroup != "undefined" && snippet.chartScatterGroup != null ? snippet.chartScatterGroup : null);