[galaxy-commits] commit/galaxy-central: carlfeberhard: History panel, style: use font awesome icons for dataset states, use lessc more effectively; pack scripts

30 Oct 2013

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/51dc1b788582/
Changeset:   51dc1b788582
User:        carlfeberhard
Date:        2013-10-30 22:38:37
Summary:     History panel, style: use font awesome icons for dataset states, use lessc more effectively; pack scripts
Affected #:  4 files

diff -r f6eb9dc06cdd17664342569a4dd2bd1383eac0c1 -r 51dc1b78858287d5fd376bccd9a88ba4b91b1cc2 static/scripts/mvc/base-mvc.js

--- a/static/scripts/mvc/base-mvc.js
+++ b/static/scripts/mvc/base-mvc.js
@@ -233,7 +233,7 @@
 
         return $( html ).css( options.css || {
             'position'          : 'fixed',
-            'margin'            : '6px 0px 0px 10px',
+            'margin'            : '12px 0px 0px 10px',
             'opacity'           : '0.85'
         }).hide();
     }

diff -r f6eb9dc06cdd17664342569a4dd2bd1383eac0c1 -r 51dc1b78858287d5fd376bccd9a88ba4b91b1cc2 static/scripts/packed/mvc/base-mvc.js
--- a/static/scripts/packed/mvc/base-mvc.js
+++ b/static/scripts/packed/mvc/base-mvc.js
@@ -1,1 +1,1 @@
-var BaseModel=Backbone.RelationalModel.extend({defaults:{name:null,hidden:false},show:function(){this.set("hidden",false)},hide:function(){this.set("hidden",true)},is_visible:function(){return !this.attributes.hidden}});var BaseView=Backbone.View.extend({initialize:function(){this.model.on("change:hidden",this.update_visible,this);this.update_visible()},update_visible:function(){if(this.model.attributes.hidden){this.$el.hide()}else{this.$el.show()}}});var LoggableMixin={logger:null,log:function(){if(this.logger){var a=this.logger.log;if(typeof this.logger.log==="object"){a=Function.prototype.bind.call(this.logger.log,this.logger)}return a.apply(this.logger,arguments)}return undefined}};var PersistentStorage=function(k,g){if(!k){throw ("PersistentStorage needs storageKey argument")}g=g||{};var i=sessionStorage,c=function j(m){var n=this.getItem(m);return(n!==null)?(JSON.parse(this.getItem(m))):(null)},b=function e(m,n){return this.setItem(m,JSON.stringify(n))},d=function f(m){return this.removeItem(m)};function a(n,m){n=n||{};m=m||null;return{get:function(o){if(o===undefined){return n}else{if(n.hasOwnProperty(o)){return(jQuery.type(n[o])==="object")?(new a(n[o],this)):(n[o])}}return undefined},set:function(o,p){n[o]=p;this._save();return this},deleteKey:function(o){delete n[o];this._save();return this},_save:function(){return m._save()},toString:function(){return("StorageRecursionHelper("+n+")")}}}var l={},h=c.call(i,k);if(h===null||h===undefined){h=jQuery.extend(true,{},g);b.call(i,k,h)}l=new a(h);jQuery.extend(l,{_save:function(m){return b.call(i,k,l.get())},destroy:function(){return d.call(i,k)},toString:function(){return"PersistentStorage("+k+")"}});return l};function LoadingIndicator(a,c){c=c||{};var b=this;function d(){var e=['<div class="loading-indicator">','<span class="fa fa-spinner fa-spin fa-lg" style="color: grey"></span>','<span style="margin-left: 8px; color: grey"><i>loading...</i></span>',"</div>"].join("\n");return $(e).css(c.css||{position:"fixed",margin:"6px 0px 0px 10px",opacity:"0.85"}).hide()}b.show=function(f,e,g){f=f||"loading...";e=e||"fast";b.$indicator=d().insertBefore(a);b.message(f);b.$indicator.fadeIn(e,g);return b};b.message=function(e){b.$indicator.find("i").text(e)};b.hide=function(e,f){e=e||"fast";if(b.$indicator&&b.$indicator.size()){b.$indicator.fadeOut(e,function(){b.$indicator.remove();if(f){f()}})}else{if(f){f()}}return b};return b};
\ No newline at end of file
+var BaseModel=Backbone.RelationalModel.extend({defaults:{name:null,hidden:false},show:function(){this.set("hidden",false)},hide:function(){this.set("hidden",true)},is_visible:function(){return !this.attributes.hidden}});var BaseView=Backbone.View.extend({initialize:function(){this.model.on("change:hidden",this.update_visible,this);this.update_visible()},update_visible:function(){if(this.model.attributes.hidden){this.$el.hide()}else{this.$el.show()}}});var LoggableMixin={logger:null,log:function(){if(this.logger){var a=this.logger.log;if(typeof this.logger.log==="object"){a=Function.prototype.bind.call(this.logger.log,this.logger)}return a.apply(this.logger,arguments)}return undefined}};var PersistentStorage=function(k,g){if(!k){throw ("PersistentStorage needs storageKey argument")}g=g||{};var i=sessionStorage,c=function j(m){var n=this.getItem(m);return(n!==null)?(JSON.parse(this.getItem(m))):(null)},b=function e(m,n){return this.setItem(m,JSON.stringify(n))},d=function f(m){return this.removeItem(m)};function a(n,m){n=n||{};m=m||null;return{get:function(o){if(o===undefined){return n}else{if(n.hasOwnProperty(o)){return(jQuery.type(n[o])==="object")?(new a(n[o],this)):(n[o])}}return undefined},set:function(o,p){n[o]=p;this._save();return this},deleteKey:function(o){delete n[o];this._save();return this},_save:function(){return m._save()},toString:function(){return("StorageRecursionHelper("+n+")")}}}var l={},h=c.call(i,k);if(h===null||h===undefined){h=jQuery.extend(true,{},g);b.call(i,k,h)}l=new a(h);jQuery.extend(l,{_save:function(m){return b.call(i,k,l.get())},destroy:function(){return d.call(i,k)},toString:function(){return"PersistentStorage("+k+")"}});return l};function LoadingIndicator(a,c){c=c||{};var b=this;function d(){var e=['<div class="loading-indicator">','<span class="fa fa-spinner fa-spin fa-lg" style="color: grey"></span>','<span style="margin-left: 8px; color: grey"><i>loading...</i></span>',"</div>"].join("\n");return $(e).css(c.css||{position:"fixed",margin:"12px 0px 0px 10px",opacity:"0.85"}).hide()}b.show=function(f,e,g){f=f||"loading...";e=e||"fast";b.$indicator=d().insertBefore(a);b.message(f);b.$indicator.fadeIn(e,g);return b};b.message=function(e){b.$indicator.find("i").text(e)};b.hide=function(e,f){e=e||"fast";if(b.$indicator&&b.$indicator.size()){b.$indicator.fadeOut(e,function(){b.$indicator.remove();if(f){f()}})}else{if(f){f()}}return b};return b};
\ No newline at end of file

diff -r f6eb9dc06cdd17664342569a4dd2bd1383eac0c1 -r 51dc1b78858287d5fd376bccd9a88ba4b91b1cc2 static/style/blue/base.css
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -1530,43 +1530,48 @@
 .history-panel .dataset:last-child{border-width:1px 0px 1px 0px}
 .history-panel .empty-history-message{display:none;margin:0px 10px 0px 10px}
 .history-panel .tag-button{display:inline-block;height:20px;margin:2px 2px 0px 0px;border:1px solid grey;border-radius:3px 10px 10px 3px;padding:2px 4px 2px 4px;background-color:#EEE;line-height:13px}.history-panel .tag-button .tag-name{margin-right:2px}
-.dataset{border:1px solid #bfbfbf}.dataset [class$=messagesmall]{margin:8px 10px 4px 8px;font-size:90%}
-.dataset .dataset-title-bar{cursor:pointer;padding:6px 10px 6px 8px}.dataset .dataset-title-bar .dataset-state-icon{display:inline-block;vertical-align:middle;line-height:16px;width:16px;height:16px;background-position:0 1px;background-repeat:no-repeat}
+.dataset{border:1px solid #bfbfbf}.dataset .vertical-spacing{margin-bottom:8px}
+.dataset .info-section{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px}
+.dataset .dataset-padding{padding:6px 10px 6px 8px}
+.dataset [class$=messagesmall]{margin:6px 10px 2px 8px;font-size:90%}
+.dataset .dataset-title-bar{cursor:pointer;padding:6px 10px 6px 8px}
 .dataset .dataset-title-bar .dataset-title{display:inline;font-weight:bold;text-decoration:underline;word-break:normal;line-height:16px}
-.dataset .dataset-primary-actions{float:right;margin:6px 10px 0px 0px}.dataset .dataset-primary-actions .icon-btn{margin-left:2px}
-.dataset .vertical-padding{padding-bottom:8px}
+.dataset .dataset-primary-actions{float:right;margin:6px 10px 0}.dataset .dataset-primary-actions .icon-btn{margin-left:2px}
 .dataset .dataset-body{display:none;background-color:rgba(255,255,255,0.30000000000000004);padding:6px 10px 6px 8px}.dataset .dataset-body [class$=messagesmall]{margin:0px 0px 8px 0px}
-.dataset .dataset-body .dataset-summary{padding-bottom:8px}
 .dataset .dataset-body label{margin:0px;padding:0px;font-weight:normal}
 .dataset .dataset-body .prompt{font-weight:normal;font-style:italic;font-size:90%;color:#555}
 .dataset .dataset-body .prompt:after{content:':'}
-.dataset .dataset-body .dataset-datatype,.dataset .dataset-body .dataset-dbkey{display:inline}.dataset .dataset-body .dataset-datatype .value,.dataset .dataset-body .dataset-dbkey .value{font-weight:bold}
-.dataset .dataset-body .dataset-datatype .value:after{content:','}
-.dataset .dataset-body .dataset-dbkey:after{content:' ';display:none;margin-bottom:32px}
-.dataset .dataset-body .dataset-info{margin-top:4px;border-radius:3px;border:1px solid rgba(153,153,153,0.5);padding:4px}.dataset .dataset-body .dataset-info .value{white-space:pre-line}
-.dataset .dataset-body .dataset-actions{margin-bottom:4px}.dataset .dataset-body .dataset-actions .left{float:left}.dataset .dataset-body .dataset-actions .left .icon-btn{margin-right:2px}
+.dataset .dataset-body .dataset-summary{margin-bottom:8px}.dataset .dataset-body .dataset-summary .dataset-blurb{margin-bottom:2px}
+.dataset .dataset-body .dataset-summary .dataset-datatype,.dataset .dataset-body .dataset-summary .dataset-dbkey{display:inline}.dataset .dataset-body .dataset-summary .dataset-datatype .value,.dataset .dataset-body .dataset-summary .dataset-dbkey .value{font-weight:bold}
+.dataset .dataset-body .dataset-summary .dataset-datatype .value:after{content:','}
+.dataset .dataset-body .dataset-summary .dataset-dbkey:after{content:' ';display:block;margin-bottom:8px}
+.dataset .dataset-body .dataset-summary .dataset-info{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px}.dataset .dataset-body .dataset-summary .dataset-info .value{white-space:pre-line}
+.dataset .dataset-body .dataset-actions .left{float:left}.dataset .dataset-body .dataset-actions .left .icon-btn{margin-right:2px}
 .dataset .dataset-body .dataset-actions .left .icon-btn-group{margin-right:2px}.dataset .dataset-body .dataset-actions .left .icon-btn-group .icon-btn{margin-right:0}
+.dataset .dataset-body .dataset-actions .left:not(:empty){margin-bottom:8px}
 .dataset .dataset-body .dataset-actions .right{float:right}.dataset .dataset-body .dataset-actions .right .icon-btn{margin-left:2px}
-.dataset .dataset-body .tags-display{display:none;padding-bottom:8px}
-.dataset .dataset-body .annotation-display{display:none;padding-bottom:8px}.dataset .dataset-body .annotation-display .annotation{border-radius:3px;border:1px solid rgba(153,153,153,0.5);padding:4px;white-space:pre-line}
+.dataset .dataset-body .tags-display{display:none;margin-bottom:8px}
+.dataset .dataset-body .annotation-display{display:none;margin-bottom:8px}.dataset .dataset-body .annotation-display .annotation{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;white-space:pre-line}
 .dataset .dataset-body .annotation-display textarea{margin:0px 0px 2px 0px;display:block;border-radius:3px;width:100%}
-.dataset .dataset-body .dataset-peek pre.peek{width:100%;margin-top:8px;border-radius:3px;background:white;color:black;font-size:10px;overflow:auto}.dataset .dataset-body .dataset-peek pre.peek th{color:white;background:#5f6990}
+.dataset .dataset-body .dataset-display-applications .display-application:last-child{margin-bottom:8px}
+.dataset .dataset-body .dataset-peek{margin-bottom:8px}.dataset .dataset-body .dataset-peek pre.peek{width:100%;margin:0px;border-radius:3px;background:white;color:black;font-size:10px;overflow:auto}.dataset .dataset-body .dataset-peek pre.peek th{color:white;background:#5f6990}
 .dataset .dataset-body .dataset-peek pre.peek table,.dataset .dataset-body .dataset-peek pre.peek th,.dataset .dataset-body .dataset-peek pre.peek tr,.dataset .dataset-body .dataset-peek pre.peek td{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:10px}
 .dataset .icon-btn-group{display:inline-block}.dataset .icon-btn-group .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none}
 .dataset .icon-btn-group .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px}
 .dataset .icon-btn-group .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px}
-.dataset.state-new{background:#eee}.dataset.state-new .state-icon{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dataset.state-new .state-icon:before{content:"\f071"}
+.dataset .state-icon{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;vertical-align:middle;width:16px;height:16px;line-height:16px;text-align:center;font-size:16px}
+.state-icon-error{background-color:white;border-radius:8px}.state-icon-error:before{font-size:20px;line-height:16px;color:red;content:"\f057"}
+.state-icon-running{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.state-icon-running:before{content:"\f110"}
+.state-icon-upload{overflow:hidden}.state-icon-upload:before{display:inline-block;-webkit-animation:eclipse 2s infinite linear;-moz-animation:eclipse 2s infinite linear;-o-animation:eclipse 2s infinite linear;animation:eclipse 2s infinite linear;content:"\f062"}@-moz-keyframes eclipse{0%{-moz-transform:translate(0, 16px)} 100%{-moz-transform:translate(0, -16px)}}@-webkit-keyframes eclipse{0%{-webkit-transform:translate(0, 16px)} 100%{-webkit-transform:translate(0, -16px)}}@-o-keyframes eclipse{0%{-o-transform:translate(0, 16px)} 100%{-o-transform:translate(0, -16px)}}@-ms-keyframes eclipse{0%{-ms-transform:translate(0, 16px)} 100%{-ms-transform:translate(0, -16px)}}@keyframes eclipse{0%{transform:translate(0, 16px)} 100%{transform:translate(0, -16px)}}
 .dataset.state-ok,.dataset.state-failed_metadata{background:#aff1af}.dataset.state-ok .state-icon,.dataset.state-failed_metadata .state-icon{display:none}
-.dataset.state-error{background:#f9c7c5}.dataset.state-error .state-icon{background-image:url(sprite-history-states.png);background-position:0px -15px;width:15px;height:15px;height:15px}
-.dataset.state-empty{background:#f9c7c5}.dataset.state-empty .state-icon{background-image:url(sprite-history-states.png);background-position:0px 0px;width:15px;height:15px;height:15px}
-.dataset.state-running{background:#ffc}.dataset.state-running .state-icon{background-image:url(data_running.gif)}
-.dataset.state-running .dataset-title-bar.spinner .state-icon{background:url(data_running.gif) 0 1px no-repeat !important}
-.dataset.state-setting_metadata{background:#ffc}.dataset.state-setting_metadata .state-icon{background-image:url(data_running.gif)}
-.dataset.state-upload{background:#a6e4f7}.dataset.state-upload .state-icon{background-image:url(data_upload.gif)}
-.dataset.state-queued{background:#eee}.dataset.state-queued .state-icon{background-image:url(sprite-history-states.png);background-position:0px -45px;width:15px;height:15px;height:15px}
-.dataset.state-discarded{background:#eee}.dataset.state-discarded .state-icon{line-height:16px;font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dataset.state-discarded .state-icon:before{content:"\f05e"}
-.dataset.state-noPermission{background:#eee;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60}.dataset.state-noPermission .state-icon{line-height:16px;font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dataset.state-noPermission .state-icon:before{content:"\f05e"}
+.dataset.state-error,.dataset.state-empty{background:#f9c7c5}.dataset.state-error .state-icon,.dataset.state-empty .state-icon{background-color:white;border-radius:8px}.dataset.state-error .state-icon:before,.dataset.state-empty .state-icon:before{font-size:20px;line-height:16px;color:red;content:"\f057"}
+.dataset.state-upload{background:#a6e4f7}.dataset.state-upload .state-icon{overflow:hidden}.dataset.state-upload .state-icon:before{display:inline-block;-webkit-animation:eclipse 2s infinite linear;-moz-animation:eclipse 2s infinite linear;-o-animation:eclipse 2s infinite linear;animation:eclipse 2s infinite linear;content:"\f062"}@-moz-keyframes eclipse{0%{-moz-transform:translate(0, 16px)} 100%{-moz-transform:translate(0, -16px)}}@-webkit-keyframes eclipse{0%{-webkit-transform:translate(0, 16px)} 100%{-webkit-transform:translate(0, -16px)}}@-o-keyframes eclipse{0%{-o-transform:translate(0, 16px)} 100%{-o-transform:translate(0, -16px)}}@-ms-keyframes eclipse{0%{-ms-transform:translate(0, 16px)} 100%{-ms-transform:translate(0, -16px)}}@keyframes eclipse{0%{transform:translate(0, 16px)} 100%{transform:translate(0, -16px)}}
+.dataset.state-queued{background:#eee}.dataset.state-queued .state-icon:before{content:"\f017"}
+.dataset.state-running,.dataset.state-setting_metadata{background:#ffc}.dataset.state-running .state-icon,.dataset.state-setting_metadata .state-icon{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.dataset.state-running .state-icon:before,.dataset.state-setting_metadata .state-icon:before{content:"\f110"}
 .dataset.state-paused{background:#d9edf7}.dataset.state-paused .state-icon:before{content:"\f04c"}
+.dataset.state-discarded{background:#eee}.dataset.state-discarded .state-icon:before{content:"\f014"}
+.dataset.state-noPermission{background:#eee;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60}.dataset.state-noPermission .state-icon{font-size:20px}.dataset.state-noPermission .state-icon:before{content:"\f023"}
+.dataset.state-new{background:#eee}.dataset.state-new .state-icon:before{content:"\f06a"}
 .hda .hda-hid:after{content:':'}
 body.historyPage{background:#dfe5f9;color:#000;margin:5px;border:0;padding:0}
 div.historyLinks{margin:5px 5px}

diff -r f6eb9dc06cdd17664342569a4dd2bd1383eac0c1 -r 51dc1b78858287d5fd376bccd9a88ba4b91b1cc2 static/style/src/less/history.less
--- a/static/style/src/less/history.less
+++ b/static/style/src/less/history.less
@@ -186,21 +186,41 @@
 .dataset {
     border: 1px solid @border-default-color;
 
+    // body mixins
+    @vertical-gap: 8px;
+    .vertical-spacing {
+        margin-bottom: @vertical-gap;
+    }
+    .info-section {
+        border-radius: 3px;
+        border: 1px solid fadeout( @layout-border-color, 70% );
+        //background-color: fadeout( white, 60% );
+        padding: 4px;
+    }
+    @spacing-top     : 6px;
+    @spacing-right   : 10px;
+    @spacing-bottom  : 6px;
+    @spacing-left    : 8px;
+    .dataset-padding {
+        padding: @spacing-top @spacing-right @spacing-bottom @spacing-left;
+    }
+
     [class$=messagesmall] {
-        margin: 8px 10px 4px 8px;
+        margin: @spacing-top @spacing-right ( @spacing-bottom - 4 ) @spacing-left;
         font-size: 90%;
     }
+
     .dataset-title-bar {
         cursor: pointer;
-        padding: 6px 10px 6px 8px;
+        .dataset-padding;
         .dataset-state-icon {
-            display: inline-block;
-            vertical-align: middle;
-            line-height: 16px;
-            width: 16px;
-            height: 16px;
-            background-position: 0 1px;
-            background-repeat: no-repeat;
+            //display: inline-block;
+            //vertical-align: middle;
+            //line-height: 16px;
+            //width: 16px;
+            //height: 16px;
+            //background-position: 0 1px;
+            //background-repeat: no-repeat;
         }
         .dataset-title {
             display: inline;
@@ -213,27 +233,20 @@
 
     .dataset-primary-actions {
         float: right;
-        margin: 6px 10px 0px 0px;
+        margin: @spacing-top @spacing-right 0;
         .icon-btn {
             margin-left: @icon-btn-margin;
         }
     }
 
-    //TODO: use :empty or :not(:empty)
-    .vertical-padding {
-        padding-bottom: 8px;
-    }
     .dataset-body {
         display: none;
         background-color: fadeout( white, 70% );
-        padding: 6px 10px 6px 8px;
+        .dataset-padding;
 
         [class$=messagesmall] {
             margin: 0px 0px 8px 0px;
         }
-        .dataset-summary {
-            .vertical-padding;
-        }
 
         label {
             margin: 0px;
@@ -246,38 +259,39 @@
             font-size: 90%;
             color: #555;
         }
-
         .prompt:after {
             content: ':';
         }
-        .dataset-datatype, .dataset-dbkey {
-            display: inline;
-            .value {
-                font-weight: bold;
+
+        .dataset-summary {
+            .dataset-blurb {
+                margin-bottom: 2px;
             }
-        }
-        .dataset-datatype .value:after {
-            content: ',';
-        }
-        .dataset-dbkey:after {
-            content: ' ';
-            display: none;
-            margin-bottom: 32px;
-        }
-
-        .dataset-info {
-            margin-top: 4px;
-            border-radius: 3px;
-            border: 1px solid fadeout( @layout-border-color, 50% );
-            //background-color: fadeout( white, 60% );
-            padding: 4px;
-            .value {
-                white-space: pre-line;
+            .dataset-datatype, .dataset-dbkey {
+                display: inline;
+                .value {
+                    font-weight: bold;
+                }
             }
+            .dataset-datatype .value:after {
+                content: ',';
+            }
+            .dataset-dbkey:after {
+                content: ' ';
+                display: block;
+                .vertical-spacing;
+            }
+            .dataset-info {
+                .info-section;
+                .value {
+                    white-space: pre-line;
+                }
+            }
+            // handle the last vertical gap in the parent as summary is used in other states as well (w/o info)
+            .vertical-spacing;
         }
 
         .dataset-actions {
-            margin-bottom: 4px;
             .left {
                 float: left;
                 .icon-btn {
@@ -289,6 +303,11 @@
                         margin-right: 0;
                     }
                 }
+                &:not(:empty) {
+                    // can't use :empty on dataset-actions - will always have left & right, so
+                    //  add gap to left (more likely to have children)
+                    .vertical-spacing;
+                }
             }
             .right {
                 float: right;
@@ -301,16 +320,13 @@
         //TODO: move these out
         .tags-display {
             display: none;
-            .vertical-padding;
+            .vertical-spacing;
         }
         .annotation-display {
             display: none;
-            .vertical-padding;
+            .vertical-spacing;
             .annotation {
-                border-radius: 3px;
-                border: 1px solid fadeout( @layout-border-color, 50% );
-                //background-color: fadeout( white, 60% );
-                padding: 4px;
+                .info-section;
                 white-space: pre-line;
             }
             textarea {
@@ -321,21 +337,30 @@
             }
         }
 
-        .dataset-peek pre.peek {
-            width: 100%;
-            margin-top: 8px;
-            border-radius: 3px;
-            background: white;
-            color: black;
-            font-size: 10px;
-            overflow: auto;
-            th {
-                color: white;
-                background: @panel-primary-heading-bg;
+        .dataset-display-applications {
+            .display-application:last-child {
+                .vertical-spacing;
             }
-            table, th, tr, td {
-                font-family: @font-family-monospace;
+        }
+
+        .dataset-peek {
+            .vertical-spacing;
+            pre.peek {
+                width: 100%;
+                margin: 0px;
+                border-radius: 3px;
+                background: white;
+                color: black;
                 font-size: 10px;
+                overflow: auto;
+                th {
+                    color: white;
+                    background: @panel-primary-heading-bg;
+                }
+                table, th, tr, td {
+                    font-family: @font-family-monospace;
+                    font-size: 10px;
+                }
             }
         }
     }
@@ -360,18 +385,95 @@
 
 }
 
-// Default history item appearance
-// Change background/border color depending on state
-.dataset.state-new {
-    background: @state-default-bg;
-    .state-icon {
-        .fa-icon;
-        &:before {
-            content: "\f071";
-        }
+.dataset .state-icon {
+    .fa-icon;
+    display: inline-block;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    font-size: 16px;
+}
+
+.state-icon-error {
+    background-color: white;
+    border-radius: 8px;
+    &:before {
+        font-size: 20px;
+        line-height: 16px;
+        color: red;
+        content: @fa-var-times-circle;
     }
 }
 
+.state-icon-running {
+    //TODO: couldn't find a way to do this with fa/spinning.less as mixin
+    -webkit-animation: spin 2s infinite linear;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
+
+    @-moz-keyframes spin {
+        0% { -moz-transform: rotate(0deg); }
+        100% { -moz-transform: rotate(359deg); }
+    }
+    @-webkit-keyframes spin {
+        0% { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(359deg); }
+    }
+    @-o-keyframes spin {
+        0% { -o-transform: rotate(0deg); }
+        100% { -o-transform: rotate(359deg); }
+    }
+    @-ms-keyframes spin {
+        0% { -ms-transform: rotate(0deg); }
+        100% { -ms-transform: rotate(359deg); }
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(359deg); }
+    }
+    &:before {
+        content: @fa-var-spinner;
+    }
+}
+
+.state-icon-upload {
+    overflow: hidden;
+
+    &:before {
+        display: inline-block;
+        -webkit-animation: eclipse 2s infinite linear;
+        -moz-animation: eclipse 2s infinite linear;
+        -o-animation: eclipse 2s infinite linear;
+        animation: eclipse 2s infinite linear;
+
+        @-moz-keyframes eclipse {
+            0% { -moz-transform: translate(0px,16px); }
+            100% { -moz-transform: translate(0px,-16px); }
+        }
+        @-webkit-keyframes eclipse {
+            0% { -webkit-transform: translate(0px,16px); }
+            100% { -webkit-transform: translate(0px,-16px); }
+        }
+        @-o-keyframes eclipse {
+            0% { -o-transform: translate(0px,16px); }
+            100% { -o-transform: translate(0px,-16px); }
+        }
+        @-ms-keyframes eclipse {
+            0% { -ms-transform: translate(0px,16px); }
+            100% { -ms-transform: translate(0px,-16px); }
+        }
+        @keyframes eclipse {
+            0% { transform: translate(0px,16px); }
+            100% { transform: translate(0px,-16px); }
+        }
+        content: @fa-var-arrow-up;
+    }
+}
+
+// Change background/border color depending on state
 .dataset.state-ok, .dataset.state-failed_metadata {
     background: @state-success-bg;
     .state-icon {
@@ -379,59 +481,52 @@
     }
 }
 
-.dataset.state-error {
-    background: @state-danger-bg;
-    .state-icon {
-        .sprite(@data_error);
-    }
-}
-
+.dataset.state-error,
 .dataset.state-empty {
     background: @state-danger-bg;
     .state-icon {
-        .sprite(@data_empty);
-    }
-}
-
-.dataset.state-running {
-    background: @state-running-bg;
-    .state-icon {
-        background-image: url(data_running.gif);
-    }
-}
-// Special case for showing the spinner but not changing the background
-.dataset.state-running .dataset-title-bar.spinner .state-icon {
-    background: url(data_running.gif) 0 1px no-repeat !important;
-}
-
-.dataset.state-setting_metadata {
-    background: @state-running-bg;
-    .state-icon {
-        background-image: url(data_running.gif);
+        .state-icon-error;
     }
 }
 
 .dataset.state-upload {
     background: @state-info-bg;
     .state-icon {
-        background-image: url(data_upload.gif);
+        .state-icon-upload;
     }
 }
 
 .dataset.state-queued {
     background: @state-default-bg;
     .state-icon {
-        .sprite(@data_queued);
+        &:before {
+            content: @fa-var-clock-o;
+        }
+    }
+}
+
+.dataset.state-running,
+.dataset.state-setting_metadata {
+    background: @state-running-bg;
+    .state-icon {
+        .state-icon-running;
+    }
+}
+
+.dataset.state-paused {
+    background: @state-paused-bg;
+    .state-icon {
+        &:before {
+            content: @fa-var-pause;
+        }
     }
 }
 
 .dataset.state-discarded {
     background: @state-default-bg;
     .state-icon {
-        line-height: 16px;
-        .fa-icon;
         &:before {
-            content: "\f05e";
+            content: @fa-var-trash-o;
         }
     }
 }
@@ -442,24 +537,23 @@
     -moz-opacity: .60;
     opacity: .60;
     .state-icon {
-        line-height: 16px;
-        .fa-icon;
+        font-size: 20px;
         &:before {
-            content: "\f05e";
+            content: @fa-var-lock;
         }
     }
 }
 
-.dataset.state-paused {
-    background: @state-paused-bg;
+.dataset.state-new {
+    background: @state-default-bg;
     .state-icon {
-        //.@fa-css-prefix;
         &:before {
-            content: "\f04c";
+            content: @fa-var-exclamation-circle;
         }
     }
 }
 
+
 // ---------------------------------------------------------------------------- hdas
 .hda .hda-hid:after {
     content: ':';

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: carlfeberhard: History panel, style: use font awesome icons for dataset states, use lessc more effectively; pack scripts

commits-noreply＠bitbucket.org