ソースを参照

HUE-8992 [jb] Improve job listing status colors and visibility

Johan Ahlen 6 年 前
コミット
3977b8a40d

ファイルの差分が大きいため隠しています
+ 0 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css


+ 1 - 1
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -323,7 +323,7 @@
         cursor: pointer;
       }
       table.clickable tr:hover {
-        background-color: @cui-purple-gray-050 !important;
+        background-color: @cui-gray-050 !important;
       }
       table tr:nth-child(1) {
         max-width: 107px;

+ 4 - 4
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -193,7 +193,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <td data-bind="text: name"></td>
           <td data-bind="text: user"></td>
           <td data-bind="text: type"></td>
-          <td data-bind="text: status"></td>
+          <td><span class="label job-status-label" data-bind="text: status"></span></td>
           <td data-bind="text: $root.formatProgress(progress)"></td>
           <td data-bind="text: queue"></td>
           <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
@@ -737,7 +737,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <td data-bind="text: id"></td>
                 <td data-bind="text: elapsedTime.toHHMMSS()"></td>
                 <td data-bind="text: progress"></td>
-                <td data-bind="text: state"></td>
+                <td><span class="label job-status-label" data-bind="text: state"></span></td>
                 <td data-bind="moment: {data: startTime, format: 'LLL'}"></td>
                 <td data-bind="text: successfulAttempt"></td>
                 <td data-bind="moment: {data: finishTime, format: 'LLL'}"></td>
@@ -2005,7 +2005,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <td data-bind="click: function() {}, clickBubble: false">
                   <div class="hue-checkbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#schedulesTable', value: $data, hueChecked: $parent.selectedJobs"></div>
                 </td>
-                <td data-bind="text: properties.status"></td>
+                <td><span class="label job-status-label" data-bind="text: properties.status"></span></td>
                 <td data-bind="text: properties.title"></td>
                 <td data-bind="text: properties.type"></td>
                 <td data-bind="text: properties.errorMessage"></td>
@@ -2113,7 +2113,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
             </thead>
             <tbody data-bind="foreach: properties['actions']">
               <tr class="status-border pointer" data-bind="css: {'completed': status() == 'SUCCEEDED', 'running': ['SUCCEEDED', 'FAILED', 'KILLED'].indexOf(status()) != -1, 'failed': status() == 'FAILED' || status() == 'KILLED'}, click: function() { if (id()) { $root.job().id(id()); $root.job().fetchJob();} }">
-                <td data-bind="text: status"></td>
+                <td><span class="label job-status-label" data-bind="text: status"></span></td>
                 <td data-bind="text: name"></td>
                 <td data-bind="text: type"></td>
                 <td data-bind="text: nextMaterializedTime"></td>

ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 2 - 2
desktop/core/src/desktop/static/desktop/less/components/hue-tables.less

@@ -467,7 +467,7 @@ div.box {
 
 .table tbody tr:hover td,
 .table tbody tr:hover th {
-  background-color: @cui-purple-gray-050;
+  background-color: @cui-gray-050;
 }
 
 .table tr.selected,
@@ -516,7 +516,7 @@ div.box {
 }
 
 .fixed-first-col-hover {
-  background-color: @cui-purple-gray-050 !important;
+  background-color: @cui-gray-050 !important;
   border-left: 2px solid @cui-gray-300 !important;
   padding-left: 14px !important;
 }

+ 2 - 0
desktop/core/src/desktop/static/desktop/less/cui/colors.less

@@ -64,6 +64,7 @@
 @cui-gray-800:                    #333e47;
 @cui-gray-900:                    #1b2329;
 
+@cui-blue-010:                    rgba(230, 247, 255, 0.1); // 10% of cui-blue-050
 @cui-blue-050:                    #e6f7ff;
 @cui-blue-100:                    #a3dfff;
 @cui-blue-200:                    #7accff;
@@ -97,6 +98,7 @@
 @cui-yellow-800:                  #4d2b00;
 @cui-yellow-900:                  #331d00;
 
+@cui-orange-010:                  rgba(255, 240, 217, 0.3); // 30% of cui-orange-050
 @cui-orange-050:                  #fff0d9;
 @cui-orange-100:                  #ffd599;
 @cui-orange-200:                  #ffa319;

+ 28 - 5
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -392,7 +392,7 @@ input[type='password']::-ms-reveal {
   }
 
   &.orange {
-    background-color: @cui-orange;
+    background-color: @cui-orange-200;
   }
 
   &.red {
@@ -402,25 +402,48 @@ input[type='password']::-ms-reveal {
 
 .status-border-container {
   tr {
-    border-left: 3px solid @cui-gray-300;
+    border-left: 4px solid @cui-gray-300;
   }
 }
 
 .status-border {
   &.completed {
+    background-color: @cui-white;
     border-color: @cui-green !important;
+
+    .job-status-label {
+      background-color: @cui-green !important;
+    }
   }
 
   &.running {
-    border-color: @cui-orange !important;
+    background-color: @cui-white;
+    border-color: @cui-orange-200 !important;
+
+    .job-status-label {
+      background-color: @cui-orange-200 !important;
+    }
   }
 
   &.failed {
+    background-color: @cui-white;
     border-color: @cui-red !important;
+
+    .job-status-label {
+      background-color: @cui-red !important;
+    }
   }
 
   &.info {
+    > td {
+      background-color: @cui-white !important;
+    }
+
     border-color: @hue-primary-color-dark !important;
+
+    .job-status-label {
+      background-color: @hue-primary-color-dark !important;
+    }
   }
 }
 
@@ -430,7 +453,7 @@ input[type='password']::-ms-reveal {
   }
 
   &.running {
-    background-color: @cui-orange !important;
+    background-color: @cui-orange-200 !important;
   }
 
   &.failed {
@@ -448,7 +471,7 @@ input[type='password']::-ms-reveal {
   }
 
   &.running {
-    color: @cui-orange !important;
+    color: @cui-orange-200 !important;
   }
 
   &.failed {

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません