commit/galaxy-central: carlfeberhard: UI, History: first pass at making display_structured a bit more useful and clean up the styling; CSS: move hda styling out of history scope
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/b2cf571d0b63/ Changeset: b2cf571d0b63 User: carlfeberhard Date: 2014-04-23 21:25:25 Summary: UI, History: first pass at making display_structured a bit more useful and clean up the styling; CSS: move hda styling out of history scope Affected #: 5 files diff -r 54695d3fa468250b1ee13a90facc753dc3d9831d -r b2cf571d0b63948a7252fc703200b854f964bad6 lib/galaxy/webapps/galaxy/controllers/history.py --- a/lib/galaxy/webapps/galaxy/controllers/history.py +++ b/lib/galaxy/webapps/galaxy/controllers/history.py @@ -502,7 +502,7 @@ # Sort items by age items.sort( key=( lambda x: x[0].create_time ), reverse=True ) # - return trans.fill_template( "history/display_structured.mako", items=items ) + return trans.fill_template( "history/display_structured.mako", items=items, history=history ) @web.expose def delete_hidden_datasets( self, trans ): diff -r 54695d3fa468250b1ee13a90facc753dc3d9831d -r b2cf571d0b63948a7252fc703200b854f964bad6 static/style/blue/base.css --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -1621,50 +1621,50 @@ .search-input .search-clear,.search-input .search-loading{position:relative;display:inline-block;float:right;margin-top:-23px;margin-right:4px;font-size:1.4em;line-height:23px;color:grey} .search-input .search-clear:hover{color:#303030} #history-refresh-button,#history-options-button{display:inline-block;height:22px;width:22px;text-align:center;line-height:19px;font-size:1.2em;padding:0px} -.history-panel .dataset{border:1px solid #bfbfbf}.history-panel .dataset .vertical-spacing{margin-bottom:8px} -.history-panel .dataset .info-section{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px} -.history-panel .dataset .dataset-padding{padding:6px 10px 6px 8px} -.history-panel .dataset [class$=messagesmall]{margin:6px 10px 2px 8px;font-size:90%} -.history-panel .dataset .help-text{font-weight:normal;color:#555} -.history-panel .dataset .dataset-selector{float:left;display:none;width:32px;height:32px;margin:0 0 -6px 0;padding:8px 0 2px 7px;font-size:80%;color:#333;cursor:pointer;vertical-align:middle} -.history-panel .dataset .dataset-selector:hover{color:maroon} -.history-panel .dataset .dataset-title-bar{cursor:pointer;outline:none;padding:6px 10px 6px 8px} -.history-panel .dataset .dataset-title-bar .dataset-title{display:inline;font-weight:bold;text-decoration:underline;word-wrap:break-word;word-break:break-all;line-height:16px} -.history-panel .dataset .dataset-primary-actions{display:inline-block;float:right;margin:6px 10px 0}.history-panel .dataset .dataset-primary-actions .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} -.history-panel .dataset .dataset-primary-actions .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} -.history-panel .dataset .dataset-primary-actions .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} -.history-panel .dataset .dataset-primary-actions .icon-btn:only-child{margin:0px;border-radius:3px} -.history-panel .dataset .dataset-primary-actions .icon-btn{margin-left:2px} -.history-panel .dataset .dataset-body{display:none;padding:0 10px 6px 8px}.history-panel .dataset .dataset-body [class$=messagesmall]{margin:0px 0px 8px 0px} -.history-panel .dataset .dataset-body label{margin:0px;padding:0px;font-weight:normal} -.history-panel .dataset .dataset-body .prompt{font-weight:normal;color:#555} -.history-panel .dataset .dataset-body .prompt:after{content:':';margin-right:4px} -.history-panel .dataset .dataset-body .dataset-summary{margin-bottom:8px}.history-panel .dataset .dataset-body .dataset-summary .dataset-blurb{margin-bottom:2px} -.history-panel .dataset .dataset-body .dataset-summary .dataset-datatype,.history-panel .dataset .dataset-body .dataset-summary .dataset-dbkey{display:inline}.history-panel .dataset .dataset-body .dataset-summary .dataset-datatype .value,.history-panel .dataset .dataset-body .dataset-summary .dataset-dbkey .value{font-weight:bold} -.history-panel .dataset .dataset-body .dataset-summary .dataset-datatype .value:after{content:',';font-weight:normal;color:#555;margin-right:4px} -.history-panel .dataset .dataset-body .dataset-summary .dataset-dbkey:after{content:' ';display:block;margin-bottom:8px} -.history-panel .dataset .dataset-body .dataset-summary .dataset-info{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;overflow:auto}.history-panel .dataset .dataset-body .dataset-summary .dataset-info .value{white-space:pre-line} -.history-panel .dataset .dataset-body .dataset-summary .job-error-text{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;overflow:auto;white-space:pre} -.history-panel .dataset .dataset-body .dataset-actions .left{display:inline-block;float:left}.history-panel .dataset .dataset-body .dataset-actions .left .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} -.history-panel .dataset .dataset-body .dataset-actions .left .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} -.history-panel .dataset .dataset-body .dataset-actions .left .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} -.history-panel .dataset .dataset-body .dataset-actions .left .icon-btn:only-child{margin:0px;border-radius:3px} -.history-panel .dataset .dataset-body .dataset-actions .left .icon-btn{margin-right:2px} -.history-panel .dataset .dataset-body .dataset-actions .left:not(:empty){margin-bottom:8px} -.history-panel .dataset .dataset-body .dataset-actions .right{display:inline-block;float:right}.history-panel .dataset .dataset-body .dataset-actions .right .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} -.history-panel .dataset .dataset-body .dataset-actions .right .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} -.history-panel .dataset .dataset-body .dataset-actions .right .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} -.history-panel .dataset .dataset-body .dataset-actions .right .icon-btn:only-child{margin:0px;border-radius:3px} -.history-panel .dataset .dataset-body .dataset-actions .right .icon-btn{margin-left:2px} -.history-panel .dataset .dataset-body .tags-display{display:none;margin-bottom:8px}.history-panel .dataset .dataset-body .tags-display .select2-container{min-width:0px}.history-panel .dataset .dataset-body .tags-display .select2-container .select2-choices{border-radius:3px} -.history-panel .dataset .dataset-body .annotation-display{display:none;margin-bottom:8px}.history-panel .dataset .dataset-body .annotation-display .annotation{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;white-space:pre-line} -.history-panel .dataset .dataset-body .annotation-display .annotation:empty{height:22px} -.history-panel .dataset .dataset-body .annotation-display .annotation:empty:after{position:relative;top:-4px;font-size:10px;font-style:italic;color:grey;content:'Click here to edit annotation'} -.history-panel .dataset .dataset-body .annotation-display textarea{margin:0px 0px 2px 0px;display:block;border-radius:3px;width:100%} -.history-panel .dataset .dataset-body .dataset-display-applications .display-application:last-child{margin-bottom:8px} -.history-panel .dataset .dataset-body .dataset-peek{margin-bottom:8px}.history-panel .dataset .dataset-body .dataset-peek pre.peek{width:100%;margin:0px;border-radius:3px;background:white;color:black;font-size:10px;overflow:auto}.history-panel .dataset .dataset-body .dataset-peek pre.peek th{color:white;background:#5f6990} -.history-panel .dataset .dataset-body .dataset-peek pre.peek table,.history-panel .dataset .dataset-body .dataset-peek pre.peek th,.history-panel .dataset .dataset-body .dataset-peek pre.peek tr,.history-panel .dataset .dataset-body .dataset-peek pre.peek td{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:10px} -.history-panel .dataset .state-icon{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:4px;vertical-align:middle;width:16px;height:16px;line-height:16px;text-align:center;font-size:16px} +.hda.dataset{border:1px solid #bfbfbf}.hda.dataset .vertical-spacing{margin-bottom:8px} +.hda.dataset .info-section{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px} +.hda.dataset .dataset-padding{padding:6px 10px 6px 8px} +.hda.dataset [class$=messagesmall]{margin:6px 10px 2px 8px;font-size:90%} +.hda.dataset .help-text{font-weight:normal;color:#555} +.hda.dataset .dataset-selector{float:left;display:none;width:32px;height:32px;margin:0 0 -6px 0;padding:8px 0 2px 7px;font-size:80%;color:#333;cursor:pointer;vertical-align:middle} +.hda.dataset .dataset-selector:hover{color:maroon} +.hda.dataset .dataset-title-bar{cursor:pointer;outline:none;padding:6px 10px 6px 8px} +.hda.dataset .dataset-title-bar .dataset-title{display:inline;font-weight:bold;text-decoration:underline;word-wrap:break-word;word-break:break-all;line-height:16px} +.hda.dataset .dataset-primary-actions{display:inline-block;float:right;margin:6px 10px 0}.hda.dataset .dataset-primary-actions .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} +.hda.dataset .dataset-primary-actions .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} +.hda.dataset .dataset-primary-actions .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} +.hda.dataset .dataset-primary-actions .icon-btn:only-child{margin:0px;border-radius:3px} +.hda.dataset .dataset-primary-actions .icon-btn{margin-left:2px} +.hda.dataset .dataset-body{display:none;padding:0 10px 6px 8px}.hda.dataset .dataset-body [class$=messagesmall]{margin:0px 0px 8px 0px} +.hda.dataset .dataset-body label{margin:0px;padding:0px;font-weight:normal} +.hda.dataset .dataset-body .prompt{font-weight:normal;color:#555} +.hda.dataset .dataset-body .prompt:after{content:':';margin-right:4px} +.hda.dataset .dataset-body .dataset-summary{margin-bottom:8px}.hda.dataset .dataset-body .dataset-summary .dataset-blurb{margin-bottom:2px} +.hda.dataset .dataset-body .dataset-summary .dataset-datatype,.hda.dataset .dataset-body .dataset-summary .dataset-dbkey{display:inline}.hda.dataset .dataset-body .dataset-summary .dataset-datatype .value,.hda.dataset .dataset-body .dataset-summary .dataset-dbkey .value{font-weight:bold} +.hda.dataset .dataset-body .dataset-summary .dataset-datatype .value:after{content:',';font-weight:normal;color:#555;margin-right:4px} +.hda.dataset .dataset-body .dataset-summary .dataset-dbkey:after{content:' ';display:block;margin-bottom:8px} +.hda.dataset .dataset-body .dataset-summary .dataset-info{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;overflow:auto}.hda.dataset .dataset-body .dataset-summary .dataset-info .value{white-space:pre-line} +.hda.dataset .dataset-body .dataset-summary .job-error-text{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;overflow:auto;white-space:pre} +.hda.dataset .dataset-body .dataset-actions .left{display:inline-block;float:left}.hda.dataset .dataset-body .dataset-actions .left .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} +.hda.dataset .dataset-body .dataset-actions .left .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} +.hda.dataset .dataset-body .dataset-actions .left .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} +.hda.dataset .dataset-body .dataset-actions .left .icon-btn:only-child{margin:0px;border-radius:3px} +.hda.dataset .dataset-body .dataset-actions .left .icon-btn{margin-right:2px} +.hda.dataset .dataset-body .dataset-actions .left:not(:empty){margin-bottom:8px} +.hda.dataset .dataset-body .dataset-actions .right{display:inline-block;float:right}.hda.dataset .dataset-body .dataset-actions .right .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none} +.hda.dataset .dataset-body .dataset-actions .right .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px} +.hda.dataset .dataset-body .dataset-actions .right .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px} +.hda.dataset .dataset-body .dataset-actions .right .icon-btn:only-child{margin:0px;border-radius:3px} +.hda.dataset .dataset-body .dataset-actions .right .icon-btn{margin-left:2px} +.hda.dataset .dataset-body .tags-display{display:none;margin-bottom:8px}.hda.dataset .dataset-body .tags-display .select2-container{min-width:0px}.hda.dataset .dataset-body .tags-display .select2-container .select2-choices{border-radius:3px} +.hda.dataset .dataset-body .annotation-display{display:none;margin-bottom:8px}.hda.dataset .dataset-body .annotation-display .annotation{border-radius:3px;border:1px solid rgba(153,153,153,0.30000000000000004);padding:4px;white-space:pre-line} +.hda.dataset .dataset-body .annotation-display .annotation:empty{height:22px} +.hda.dataset .dataset-body .annotation-display .annotation:empty:after{position:relative;top:-4px;font-size:10px;font-style:italic;color:grey;content:'Click here to edit annotation'} +.hda.dataset .dataset-body .annotation-display textarea{margin:0px 0px 2px 0px;display:block;border-radius:3px;width:100%} +.hda.dataset .dataset-body .dataset-display-applications .display-application:last-child{margin-bottom:8px} +.hda.dataset .dataset-body .dataset-peek{margin-bottom:8px}.hda.dataset .dataset-body .dataset-peek pre.peek{width:100%;margin:0px;border-radius:3px;background:white;color:black;font-size:10px;overflow:auto}.hda.dataset .dataset-body .dataset-peek pre.peek th{color:white;background:#5f6990} +.hda.dataset .dataset-body .dataset-peek pre.peek table,.hda.dataset .dataset-body .dataset-peek pre.peek th,.hda.dataset .dataset-body .dataset-peek pre.peek tr,.hda.dataset .dataset-body .dataset-peek pre.peek td{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:10px} +.hda.dataset .state-icon{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:4px;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"} .history-panel [class$="messagesmall"]{margin:0px} .history-panel .editable-text{border:solid transparent 1px} diff -r 54695d3fa468250b1ee13a90facc753dc3d9831d -r b2cf571d0b63948a7252fc703200b854f964bad6 static/style/src/less/history.less --- a/static/style/src/less/history.less +++ b/static/style/src/less/history.less @@ -125,254 +125,251 @@ // ---------------------------------------------------------------------------- datasets -//TODO: scope to history panels until embedded item .dataset is changed -.history-panel { - .dataset { - border: 1px solid @border-default-color; +.hda.dataset { + border: 1px solid @border-default-color; - // body mixins - @vertical-gap: 8px; - .vertical-spacing { - margin-bottom: @vertical-gap; + // 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: @spacing-top @spacing-right ( @spacing-bottom - 4 ) @spacing-left; + font-size: 90%; + } + + .help-text { + font-weight: normal; + // font-style: italic; + // font-size: 90%; + color: #555; + } + + .dataset-selector { + float: left; + // always initially hidden and zero width + display: none; + width: 32px; + height: 32px; + //HACK: neg. on the bottom due to padding-bottom in title-bar - very tweakish + margin: 0px 0px -( @spacing-bottom ) 0px; + padding: ( @spacing-top + 2 ) 0px 2px ( @spacing-left - 1 ); + font-size: 80%; + color: @btn-default-color; + cursor: pointer; + vertical-align: middle; + } + .dataset-selector:hover { + color: maroon; + } + + .dataset-title-bar { + cursor: pointer; + outline: none; + .dataset-padding; + + .dataset-state-icon { } - .info-section { - border-radius: 3px; - border: 1px solid fadeout( @layout-border-color, 70% ); - //background-color: fadeout( white, 60% ); - padding: 4px; + .dataset-title { + display: inline; + font-weight: bold; + text-decoration: underline; + word-wrap: break-word; + word-break: break-all; + line-height: 16px; } - @spacing-top : 6px; - @spacing-right : 10px; - @spacing-bottom : 6px; - @spacing-left : 8px; - .dataset-padding { - padding: @spacing-top @spacing-right @spacing-bottom @spacing-left; + } + + .dataset-primary-actions { + .icon-btn-group(); + float: right; + margin: @spacing-top @spacing-right 0; + .icon-btn { + margin-left: @icon-btn-margin; + } + } + + .dataset-body { + display: none; + // background-color: fadeout( white, 70% ); + //.dataset-padding; + padding: 0px @spacing-right @spacing-bottom @spacing-left; + + [class$=messagesmall] { + margin: 0px 0px 8px 0px; } - [class$=messagesmall] { - margin: @spacing-top @spacing-right ( @spacing-bottom - 4 ) @spacing-left; - font-size: 90%; + label { + margin: 0px; + padding: 0px; + font-weight: normal; + } + .prompt { + .help-text; + } + .prompt:after { + content: ':'; + margin-right: 4px; } - .help-text { - font-weight: normal; - // font-style: italic; - // font-size: 90%; - color: #555; - } - - .dataset-selector { - float: left; - // always initially hidden and zero width - display: none; - width: 32px; - height: 32px; - //HACK: neg. on the bottom due to padding-bottom in title-bar - very tweakish - margin: 0px 0px -( @spacing-bottom ) 0px; - padding: ( @spacing-top + 2 ) 0px 2px ( @spacing-left - 1 ); - font-size: 80%; - color: @btn-default-color; - cursor: pointer; - vertical-align: middle; - } - .dataset-selector:hover { - color: maroon; - } - - .dataset-title-bar { - cursor: pointer; - outline: none; - .dataset-padding; - - .dataset-state-icon { + .dataset-summary { + .dataset-blurb { + margin-bottom: 2px; } - .dataset-title { + .dataset-datatype, .dataset-dbkey { display: inline; - font-weight: bold; - text-decoration: underline; - word-wrap: break-word; - word-break: break-all; - line-height: 16px; + .value { + font-weight: bold; + } } - } - - .dataset-primary-actions { - .icon-btn-group(); - float: right; - margin: @spacing-top @spacing-right 0; - .icon-btn { - margin-left: @icon-btn-margin; - } - } - - .dataset-body { - display: none; - // background-color: fadeout( white, 70% ); - //.dataset-padding; - padding: 0px @spacing-right @spacing-bottom @spacing-left; - - [class$=messagesmall] { - margin: 0px 0px 8px 0px; - } - - label { - margin: 0px; - padding: 0px; - font-weight: normal; - } - .prompt { + .dataset-datatype .value:after { + content: ','; .help-text; - } - .prompt:after { - content: ':'; margin-right: 4px; } - - .dataset-summary { - .dataset-blurb { - margin-bottom: 2px; - } - .dataset-datatype, .dataset-dbkey { - display: inline; - .value { - font-weight: bold; - } - } - .dataset-datatype .value:after { - content: ','; - .help-text; - margin-right: 4px; - } - .dataset-dbkey:after { - content: ' '; - display: block; - .vertical-spacing; - } - .dataset-info { - .info-section; - overflow: auto; - .value { - white-space: pre-line; - } - } - - .job-error-text { - .info-section; - overflow: auto; - white-space: pre; - } - - // handle the last vertical gap in the parent as summary is used in other states as well (w/o info) + .dataset-dbkey:after { + content: ' '; + display: block; .vertical-spacing; } - - .dataset-actions { - .left { - .icon-btn-group(); - float: left; - .icon-btn { - margin-right: @icon-btn-margin; - } - //.icon-btn-group { - // margin-right: @icon-btn-margin; - // .icon-btn { - // 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 { - .icon-btn-group(); - float: right; - .icon-btn { - margin-left: @icon-btn-margin; - } + .dataset-info { + .info-section; + overflow: auto; + .value { + white-space: pre-line; } } - //TODO: move these out - .tags-display { - display: none; - .vertical-spacing; - .select2-container { - min-width: 0px; - .select2-choices { - border-radius: 3px; - } - } - } - .annotation-display { - display: none; - .vertical-spacing; - .annotation { - .info-section; - white-space: pre-line; - } - .annotation:empty { - height: @icon-btn-size; - } - // fake placeholder for editable text annotation - .annotation:empty:after { - position: relative; - top: -4px; - font-size: 10px; - font-style: italic; - color: grey; - content : 'Click here to edit annotation'; - } - textarea { - margin: 0px 0px 2px 0px; - display: block; - border-radius: 3px; - width: 100%; - } + .job-error-text { + .info-section; + overflow: auto; + white-space: pre; } - .dataset-display-applications { - .display-application:last-child { + // handle the last vertical gap in the parent as summary is used in other states as well (w/o info) + .vertical-spacing; + } + + .dataset-actions { + .left { + .icon-btn-group(); + float: left; + .icon-btn { + margin-right: @icon-btn-margin; + } + //.icon-btn-group { + // margin-right: @icon-btn-margin; + // .icon-btn { + // 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; } } - - .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; - } + .right { + .icon-btn-group(); + float: right; + .icon-btn { + margin-left: @icon-btn-margin; } } } + //TODO: move these out + .tags-display { + display: none; + .vertical-spacing; + .select2-container { + min-width: 0px; + .select2-choices { + border-radius: 3px; + } + } + } + .annotation-display { + display: none; + .vertical-spacing; + .annotation { + .info-section; + white-space: pre-line; + } + .annotation:empty { + height: @icon-btn-size; + } + // fake placeholder for editable text annotation + .annotation:empty:after { + position: relative; + top: -4px; + font-size: 10px; + font-style: italic; + color: grey; + content : 'Click here to edit annotation'; + } + textarea { + margin: 0px 0px 2px 0px; + display: block; + border-radius: 3px; + width: 100%; + } + } + + .dataset-display-applications { + .display-application:last-child { + .vertical-spacing; + } + } + + .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; + } + } + } } - .dataset .state-icon { - .fa-icon; - display: inline-block; - margin-right: 4px; - vertical-align: middle; - width: 16px; - height: 16px; - line-height: 16px; - text-align: center; - font-size: 16px; - } +} + +.hda.dataset .state-icon { + .fa-icon; + display: inline-block; + margin-right: 4px; + vertical-align: middle; + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; + font-size: 16px; } .state-icon-error { diff -r 54695d3fa468250b1ee13a90facc753dc3d9831d -r b2cf571d0b63948a7252fc703200b854f964bad6 templates/webapps/galaxy/history/display_structured.mako --- a/templates/webapps/galaxy/history/display_structured.mako +++ b/templates/webapps/galaxy/history/display_structured.mako @@ -1,83 +1,167 @@ <%inherit file="/base.mako"/> -<%namespace file="/root/history_common.mako" import="render_dataset" /> +<%namespace file="/show_params.mako" name="show_params" /> +## ---------------------------------------------------------------------------- +<%def name="title()">${ history.name } | ${ _( 'Structure' ) }</%def><%def name="stylesheets()"> ${parent.stylesheets()} - ${h.css( "history" )} <style type="text/css"> body { - background: white; padding: 5px; } - + body > .workflow, body > .toolForm { + /*width : 80%;*/ + margin-bottom : 8px; + /*margin-left : auto;*/ + /*margin-right : auto;*/ + } + .bold { + font-weight: bold; + } + .light { + font-weight: lighter; + color: grey; + } + .right-aligned { + text-align: right; + } + .clickable { cursor: pointer; } - + .workflow { border: solid gray 1px; - margin: 5px 0; - border-left-width: 5px; } - .workflow > .header { background: lightgray; padding: 5px 10px; - - font-weight: bold; } - + .workflow > .light { + color: gray; + } .workflow > .body { border-top: solid gray 1px; - padding: 5px; } - + .workflow > .body > .toolForm { + border: 0px; + } + div.toolForm { - margin: 5px 0; - border-left-width: 5px; + border-width : 1px; + border-radius : 0px; } - div.toolFormBody { - padding: 5px 5px; + .toolForm > .header { + background-color: #EBD9B2; + padding: 5px 10px; } + .workflow div.toolForm:not(:first-child) .header { + border-top: 1px solid #D6B161; + } + div.toolFormTitle { + padding: 0px 0px 4px 0px; + margin: 0px 0px 4px 0px; + border: 0px; + background-color: transparent; + border-bottom: 1px solid #D6B161; + } + /* down from EBD9B2 --> 90743A */ + .toolFormTitle > .light { + color: #90743A; + } + .toolForm em { + color: #90743A; + } + + .job-inputs { + margin: 0px 6px 0px 6px; + text-align: left; + } + .job-inputs td:nth-child(1) { + text-align: right; + font-weight: lighter; + color: #90743A; + } + .job-inputs td:nth-child(1):after { + content : ':' + } + .job-inputs td:nth-child(2) { + padding-left: 4px; + } + .job-inputs em { + } + + .job-inputs-show { + float: right; + } + + .dataset.hda { + min-height : 37px; + border-width: 0px 0px 1px 0px; + } + .toolFormBody > .dataset.hda:last-child { + border-bottom-width: 0px; + } + .dataset.hda:first-child { + border-top: 1px solid #D6B161; + } + .dataset.hda .dataset-title-bar { + padding-top: 8px; + padding-left: 10px; + } + </style></%def><%def name="javascripts()"> +<% + self.js_app = 'display-structured' + + controller = trans.webapp.controllers[ 'history' ] + hda_dicts = [] + id_hda_dict_map = {} + for hda in history.active_datasets: + hda_dict = controller.get_hda_dict( trans, hda ) + id_hda_dict_map[ hda_dict[ 'id' ] ] = hda_dict + hda_dicts.append( hda_dict ) +%> ${parent.javascripts()} + + ## load edit views for each of the hdas <script type="text/javascript"> + define( 'display-structured', function(){ + require([ 'mvc/dataset/hda-edit' ], function( hdaEdit ){ + var hdaModel = require( 'mvc/dataset/hda-model' ), + hdaJSON = ${ h.to_json_string( hda_dicts, indent=( 2 if trans.debug else 0 ) ) }; + + window.hdas = hdaJSON.map( function( hda ){ + return new hdaEdit.HDAEditView({ + model : new hdaModel.HistoryDatasetAssociation( hda ), + el : $( '#hda-' + hda.id ), + linkTarget : '_self', + purgeAllowed : Galaxy.config.allow_user_dataset_purge, + logger : Galaxy.logger + }).render( false ); + }); + }); + }); + $(function(){ - - $(".workflow, .tool").each( function() { - var body = $(this).children( ".body" ); - $(this).children( ".header" ).click( function() { + $( ".workflow, .tool" ).each( function(){ + var body = $( this ).children( ".body" ); + $( this ).children( ".header" ).click( function(){ body.toggle(); }).addClass( "clickable" ); - // body.hide(); }); - - $(".historyItem").each( function() { - var id = this.id; - var body = $(this).children( "div.historyItemBody" ); - var peek = body.find( "pre.peek" ) - $(this).children( ".historyItemTitleBar" ).find( ".historyItemTitle" ).wrap( "<a href='#'></a>" ).click( function() { - if ( body.is(":visible") ) { - // Hiding stuff here - if ( $.browser.mozilla ) { peek.css( "overflow", "hidden" ) } - body.slideUp( "fast" ); - } else { - // Showing stuff here - body.slideDown( "fast", function() { - if ( $.browser.mozilla ) { peek.css( "overflow", "auto" ); } - }); - } - return false; - }); - body.hide(); - }); - }); + //$( ".job-inputs-show" ).click( function( ev ){ + // ev.stopPropagation(); + // $( this ).parent().siblings( '.job-inputs' ).toggle(); + //}); + }); </script></%def> +## ---------------------------------------------------------------------------- <%def name="render_item( entity, children )"><% entity_name = entity.__class__.__name__ @@ -91,42 +175,68 @@ </%def><%def name="render_item_hda( hda, children )"> - ${render_dataset( hda, hda.hid, display_structured=True )} +## render hdas as a id'd stub for js to fill later + <% id = trans.security.encode_id( hda.id ) %> + <div id="hda-${id}" class="dataset hda state-${hda.state}"></div></%def><%def name="render_item_job( job, children )"> - +## render a job (as a toolForm) and its children (hdas) <div class="tool toolForm"><% tool = trans.app.toolbox.get_tool( job.tool_id ) if tool: tool_name = tool.name + tool_desc = tool.description else: - tool_name = "Unknown tool with id '%s'" % job.tool_id + tool_name = "Unknown tool with id '%s'" % job.tool_id + tool_desc = '' + + params_object = None + try: + params_object = job.get_param_values( trans.app, ignore_errors=True ) + except Exception, exc: + pass %> - <div class="header toolFormTitle">Tool: ${tool_name}</div> + <div class="header"> + <div class="toolFormTitle"> + <span class="bold">${tool_name}</span> + <span class="light">- ${tool_desc}</span> + ##<a class="job-inputs-show" href="javascript:void(0)">${ _( "parameters" )}</a> + </div> + %if tool and params_object: + <table class="job-inputs"> + ${ show_params.inputs_recursive( tool.inputs, params_object, depth=1 ) } + </table> + %else: + <em>(${ _( 'No parameter data available' ) })</em> + %endif + </div><div class="body toolFormBody"> %for e, c in reversed( children ): ${render_item( e, c )} %endfor </div></div> - </%def><%def name="render_item_wf( wf, children )"> - +## render a workflow and its children (jobs/toolForms) <div class="workflow"> - <div class="header">Workflow: ${wf.workflow.name}</div> + <div class="header"> + <span class="bold">${wf.workflow.name}</span> + <span class="light">- Workflow</span> + </div><div class="body"> %for e, c in reversed( children ): ${render_item( e, c )} %endfor </div></div> - </%def> +## ---------------------------------------------------------------------------- +## render all items from a dictionary prov. by history/display_structured %for entity, children in items: ${render_item( entity, children )} -%endfor \ No newline at end of file +%endfor diff -r 54695d3fa468250b1ee13a90facc753dc3d9831d -r b2cf571d0b63948a7252fc703200b854f964bad6 templates/webapps/galaxy/history/view.mako --- a/templates/webapps/galaxy/history/view.mako +++ b/templates/webapps/galaxy/history/view.mako @@ -18,9 +18,6 @@ %></%def> -<%def name="center_panel()"> -</%def> - ## ---------------------------------------------------------------------------- <%def name="body()"> ${center_panel()} @@ -70,12 +67,6 @@ <%def name="javascripts()"> ${parent.javascripts()} -%if not use_panels: -<script type="text/javascript"> -window.Galaxy = {}; -</script> -%endif - </%def> ## ---------------------------------------------------------------------------- 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