Merge pull request #6967 from guerler/workflow_style_1

Refactor workflow editor styles and move from mako to css
galaxyproject · Nov 7, 2018 · f0df34e · f0df34e
2 parents be87d24 + 3fc6191
commit f0df34e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 128 deletions.
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
@@ -560,13 +560,6 @@ div.metadataHelpBody {
     overflow: auto;
 }
 
-div.titleRow {
-    font-weight: bold;
-    border-bottom: dotted gray 1px;
-    margin-bottom: 0.5em;
-    padding-bottom: 0.25em;
-}
-
 // Forms
 
 div.toolFormBody div.toolFormTitle {
@@ -596,22 +589,76 @@ div.toolHelpBody {
 }
 
 // In workflow
+div.toolTitleDisabled {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-left: 16px;
+    margin-right: 10px;
+    display: list-item;
+    list-style: square outside;
+    font-style: italic;
+    color: gray;
+}
+
+div.toolTitleNoSectionDisabled {
+      padding-bottom: 0px;
+      font-style: italic;
+      color: gray;
+}
+
+div.toolFormRow {
+    position: relative;
+}
+
+.callout {
+    position: absolute;
+    z-index: 10000;
+    div.buttons img {
+        border: none;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+    }
+}
 
 .toolForm.toolFormInCanvas {
+    z-index: 100;
+    position: absolute;
     border: solid $form-border 1px;
     @include border-radius(2px);
     background: $white;
     margin: 0px;
     &.toolForm-active {
+        z-index: 1001;
         box-shadow: 0 0 0 3px $brand-primary;
         @include border-radius(1px);
     }
     .toolFormTitle {
         font-size: $font-size-base;
         line-height: $line-height-base;
+        cursor: move;
+        min-height: 16px;
+    }
+    .toolFormBody {
+        padding: 0;
+        margin-left: 6px;
+        margin-right: 6px;
+        .rule {
+            height: 0;
+            border: none;
+            border-bottom: dotted black 1px;
+            margin: 0 5px;
+        }
     }
 }
 
+.toolForm.toolFormInCanvas.tool-node-error {
+    border-color: #AA6666;
+    .toolFormTitle {
+        background: #FFCCCC;
+        border-color: #AA6666;
+    }
+}
 div.form,
 div.toolForm {
     border: solid $form-border 1px;
@@ -633,6 +680,7 @@ div.form-body {
 }
 
 div.form-row {
+    position: relative;
     padding: 5px 10px;
 }
 
@@ -698,6 +746,10 @@ div.form-row-error-message {
     background: white;
 }
 
+.workflow-right .right-content {
+    margin: 3px;
+}
+
 .workflow-right .right-content .section-row {
     margin-bottom: 10px;
 }

diff --git a/templates/webapps/galaxy/workflow/editor.mako b/templates/webapps/galaxy/workflow/editor.mako
@@ -54,129 +54,8 @@
     ${parent.stylesheets()}
 
     <style type="text/css">
-    body { margin: 0; padding: 0; overflow: hidden; }
-
-    div.toolTitleDisabled {
-        padding-top: 5px;
-        padding-bottom: 5px;
-        margin-left: 16px;
-        margin-right: 10px;
-        display: list-item;
-        list-style: square outside;
-        font-style: italic;
-        color: gray;
-    }
-    div.toolTitleNoSectionDisabled {
-      padding-bottom: 0px;
-      font-style: italic;
-      color: gray;
-    }
-    div.toolFormRow {
-        position: relative;
-    }
-
-    .right-content {
-        margin: 3px;
-    }
-
     canvas { position: absolute; z-index: 10; }
     canvas.dragging { position: absolute; z-index: 1000; }
-    ## .input-terminal-hover { background: yellow; border: solid black 1px; }
-    .unselectable { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
-    img { border: 0; }
-
-    div.buttons img {
-    width: 16px; height: 16px;
-    cursor: pointer;
-    }
-
-    ## Extra styles for the representation of a tool on the canvas (looks like
-    ## a tiny tool form)
-    div.toolFormInCanvas {
-        z-index: 100;
-        position: absolute;
-        ## min-width: 130px;
-        margin: 6px;
-    }
-
-    div.toolForm-active {
-        z-index: 1001;
-        border: solid #8080FF 4px;
-        margin: 3px;
-    }
-
-    div.toolFormTitle {
-        cursor: move;
-        min-height: 16px;
-    }
-
-    div.titleRow {
-        font-weight: bold;
-        border-bottom: dotted gray 1px;
-        margin-bottom: 0.5em;
-        padding-bottom: 0.25em;
-    }
-    div.form-row {
-      position: relative;
-    }
-
-    div.tool-node-error div.toolFormTitle {
-        background: #FFCCCC;
-        border-color: #AA6666;
-    }
-    div.tool-node-error {
-        border-color: #AA6666;
-    }
-
-    #canvas-area {
-        position: absolute;
-        top: 0; left: 305px; bottom: 0; right: 0;
-        border: solid red 1px;
-        overflow: none;
-    }
-
-    .form-row {
-    }
-
-    div.toolFormInCanvas div.toolFormBody {
-        padding: 0;
-        margin-left: 6px;
-        margin-right: 6px;
-    }
-    .form-row-clear {
-        clear: both;
-    }
-
-    div.rule {
-        height: 0;
-        border: none;
-        border-bottom: dotted black 1px;
-        margin: 0 5px;
-    }
-
-    .callout {
-        position: absolute;
-        z-index: 10000;
-    }
-
-    .pjaForm {
-        margin-bottom:10px;
-    }
-
-    .pjaForm .toolFormBody{
-        padding:10px;
-    }
-
-    .pjaForm .toolParamHelp{
-        padding:5px;
-    }
-
-    .panel-header-button-group {
-        margin-right: 5px;
-        padding-right: 5px;
-        border-right: solid gray 1px;
-    }
-
     </style>
 </%def>