Merge branch 'master' of github.com:Microsoft/nni into dev-retiarii

ts/webui/src/static/style/overview/overview.scss

@@ -4,8 +4,8 @@ $boxGapPadding: 10px;
 
 .wrapper {
     display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-auto-rows: 97px;
+    grid-template-columns: repeat(8, 1fr);
+    grid-auto-rows: 93px;
 
     > div {
         background: #fff;
@@ -14,61 +14,63 @@ $boxGapPadding: 10px;
         box-sizing: border-box;
     }
 
-    .overviewProgress {
-        grid-column: 2 / 6;
-        grid-row: 1 / 5;
-        display: grid;
-        grid-auto-rows: 70px;
-        margin: 0 $boxGapPadding;
-        padding: 0;
-        background: transparent;
-
-        .duration,
-        .trialCount {
-            background: #fff;
-            padding: $boxPadding;
-            border-radius: $boxBorderRadius;
-            box-sizing: border-box;
-
-            /* for alert message tooltip position */
-            position: relative;
-        }
+    .duration,
+    .trialCount {
+        grid-column: 1 / 5;
+        background: #fff;
+        padding: $boxPadding;
+        border-radius: $boxBorderRadius;
+        box-sizing: border-box;
+        margin-top: $boxGapPadding;
 
-        .duration {
-            // grid-row: 1 / 3;
-            height: 139px;
-        }
+        /* for alert message tooltip position */
+        position: relative;
+    }
 
-        .trialCount {
-            margin-top: 79px;
-            height: 239px;
-        }
+    .duration {
+        grid-row: 3 / 5;
+        height: 138px;
+    }
+
+    .trialCount {
+        grid-row: 4 / 6;
+        margin-top: 65px;
+        height: 239px;
     }
 
     .overviewCommand1,
     .overviewCommand2 {
+        grid-row-start: 8;
+        margin-top: -59px;
+        margin-right: $boxGapPadding;
         border-radius: 0;
     }
 
     .overviewCommand1 {
-        grid-column-start: 1;
+        grid-column: 1 / 5;
         border-radius: $boxBorderRadius 0 0 $boxBorderRadius;
     }
 
     .overviewCommand2 {
-        grid-column: 2 / 6;
-        margin-right: 10px;
+        grid-column: 2 / 5;
+        margin-right: $boxGapPadding;
         padding-left: 30px;
         border-radius: 0 $boxBorderRadius $boxBorderRadius 0;
     }
 }
 
 .overviewBasicInfo {
-    grid-column-start: 1;
-    grid-row: 1 / 5;
+    grid-column: 1 / 5;
+    grid-row: 1 / 3;
     z-index: 2;
 }
 
+.overviewBasicInfo,
+.duration,
+.trialCount {
+    margin-right: $boxGapPadding;
+}
+
 .basic {
     line-height: 21px;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -96,9 +98,10 @@ $boxGapPadding: 10px;
     }
 }
 
-.overviewTable {
-    grid-column: 6 / 10;
-    grid-row: 1 / 11;
+.overviewBestMetric {
+    grid-column: 5 / 9;
+    grid-row: 1 / 9;
+    max-height: 736px;
     overflow: hidden;
 
     .topTrialTitle {
@@ -114,43 +117,33 @@ $boxGapPadding: 10px;
     }
 
     .mincenter {
-        margin: 0 13px 0 10px;
+        margin: 0 13px 0 $boxGapPadding;
     }
 
     .chooseEntry {
-        margin-right: 10px;
+        margin-right: $boxGapPadding;
         line-height: 30px;
     }
 }
 
 .overviewCommand1,
 .overviewCommand2 {
+    grid-row: 7 / 9;
     height: 144px;
     overflow: hidden;
-    margin-top: 10px;
+    margin-top: $boxGapPadding;
 }
 
-$circle: 10px;
-$bgblue: #0071bc;
-
 .overviewChart {
-    grid-column: 1 / 6;
-    grid-row: 7 / 11;
-    margin-right: $boxGapPadding;
-    margin-top: -29px;
-
-    .circle {
-        width: $circle;
-        height: $circle;
-        border-radius: 50%;
-        background-color: $bgblue;
-        margin-top: 6px;
-        margin-right: 18px;
-    }
+    margin-top: 20px;
 }
 
-.showMess {
-    position: absolute;
-    top: 42%;
-    left: 48%;
+.defaultMetricContainer {
+    position: relative;
+
+    .showMess {
+        position: absolute;
+        top: 42%;
+        left: 48%;
+    }
 }

ts/webui/src/static/style/overview/overviewTitle.scss

-$iconPaddingVal: 20px;
+$iconPaddingVal: 10px;
 
 .panelTitle {
     span {
@@ -9,7 +9,7 @@ $iconPaddingVal: 20px;
 
     i {
         font-size: 24px;
-        margin-right: 20px;
+        margin-right: $iconPaddingVal;
         color: #545454;
     }
 }
@@ -18,22 +18,3 @@ $iconPaddingVal: 20px;
 #tabsty .anticon {
     margin-right: 0;
 }
-
-.top10bg {
-    .top10Title {
-        width: 160px;
-    }
-
-    .title {
-        border-left: 2px solid #fff;
-    }
-
-    .minTitle {
-        // margin-right: $iconPaddingVal;
-        border-right: 2px solid #fff;
-    }
-
-    .title:hover {
-        cursor: pointer;
-    }
-}

ts/webui/src/static/style/overview/config.scss → ts/webui/src/static/style/overview/panel.scss

+$buttonBorderRadius: 23px;
+
 .config {
     position: fixed;
     right: 0;
@@ -5,10 +7,10 @@
 
     .ms-Button--default {
         padding: 0 8px;
-        margin: 0 0 12px 0;
+        margin-bottom: 12px;
         border: none;
         box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-        border-radius: 18px 0 0 18px;
+        border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
         font-size: 12px;
         text-align: left;
 
@@ -17,9 +19,41 @@
         }
     }
 
-    .ms-Button--default:hover {
-        background-color: #0071bc;
-        color: #fff;
+    .integralBtn {
+        display: none;
+    }
+
+    .margin {
+        margin-left: 10px;
+    }
+}
+
+.container {
+    text-align: right;
+
+    .icon {
+        min-width: 50px;
+
+        i {
+            font-size: 16px;
+        }
+    }
+
+    &:hover {
+        .icon {
+            display: none;
+        }
+
+        .integralBtn {
+            display: block;
+            color: #fff;
+            border: 1px solid blue;
+            background-color: #0071bc;
+
+            i {
+                font-size: 14px;
+            }
+        }
     }
 }
 

ts/webui/src/static/style/overview/topTrial.scss

+$circle: 10px;
+$bgblue: #0071bc;
+
+.maxmin {
+    margin-top: 40px;
+
+    .circle {
+        width: $circle;
+        height: $circle;
+        border-radius: 50%;
+        background-color: $bgblue;
+        margin-top: 6px;
+        margin-right: 18px;
+    }
+}

ts/webui/src/static/style/progress/progress.scss

@@ -6,7 +6,10 @@
 
     .status-text {
         display: inline-block;
-        line-height: 30px;
+    }
+
+    .color {
+        color: #333;
     }
 }
 
@@ -60,10 +63,4 @@
 /* office-fabric-ui progressIndicator */
 .ms-ProgressIndicator-itemProgress {
     padding: 0;
-    border: 2px solid #e6e6e6;
-}
-
-.cursor,
-.cursor:hover {
-    cursor: pointer;
 }

ts/webui/src/static/style/succTable.scss

+$tableHeight: 381px;
+
+.scrollPanel {
+    height: $tableHeight;
+}
+
 #succTable {
-    min-height: 400px;
-    max-height: 1000px;
-    overflow-y: auto;
+    height: $tableHeight;
     position: relative;
+    top: -10px;
+
+    .ms-DetailsHeader {
+        padding-top: 0;
+    }
 
     .succTable-tooltip {
         width: 90%;
@@ -21,4 +30,4 @@
         padding-left: 6px;
         box-sizing: border-box;
     }
-}
+}
\ No newline at end of file