commit/galaxy-central: carlfeberhard: History panel, style: use font awesome icons for dataset states, use lessc more effectively; pack scripts
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.
participants (1)
-
commits-noreply＠bitbucket.org