Quellcode durchsuchen

HUE-6254 [jb] Removed status circle from the job list

Enrico Berti vor 9 Jahren
Ursprung
Commit
766b9e7

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

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
- */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}
+ */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}.jobbrowser-components #jobsTable tr{border-left:3px solid #DCDCDC}

+ 6 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -53,4 +53,10 @@
   .app-icon {
     vertical-align: text-top;
   }
+
+  #jobsTable {
+    tr {
+      border-left: 3px solid @cui-gray-300;
+    }
+  }
 }

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

@@ -130,9 +130,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
               ${_('Filter')} <input type="text" class="input-xlarge search-query" data-bind="textInput: jobs.textFilter" placeholder="${_('Filter by id, name, user...')}" />
               <span data-bind="foreach: jobs.statesValuesFilter">
                 <label class="checkbox">
-                  <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
-                  <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
-                  <span data-bind="text: name, attr: {for: name}"></span>
+                  <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
+                  <div class="inline-block" data-bind="text: name, toggle: checked"></div>
                 </label>
               </span>
 
@@ -156,7 +155,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
             <div class="card card-small">
               <!-- ko if: $root.isMini -->
               <ul class="unstyled" id="jobsTable" data-bind="foreach: jobs.apps">
-                <li class="status-border" data-bind="css: {'success': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, attr:{ 'title': status }, click: conditionalFetchJob">
+                <li class="status-border" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, attr:{ 'title': status }, click: conditionalFetchJob">
                   <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span></td>
                   <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
                   <div class="clearfix"></div>
@@ -175,7 +174,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <thead>
                 <tr>
                   <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.apps, selectedValues: jobs.selectedJobs }"></div></th>
-                  <th width="10"></th>
                   <th>${_('Duration')}</th>
                   <th>${_('Started')}</th>
                   <th>${_('Type')}</th>
@@ -186,13 +184,10 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 </tr>
                 </thead>
                 <tbody data-bind="foreach: jobs.apps">
-                  <tr data-bind="click: conditionalFetchJob">
+                  <tr class="status-border" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, attr:{ 'title': status }, click: conditionalFetchJob">
                     <td>
                       <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#jobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div>
                     </td>
-                    <td>
-                      <div class="status-circle" data-bind="attr:{ 'title': status }, css: {'green': apiStatus() == 'SUCCEEDED', 'orange': isRunning(), 'red': apiStatus() == 'FAILED'}"></div>
-                    </td>
                     <td data-bind="text: duration().toHHMMSS()"></td>
                     <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
                     <td data-bind="text: type"></td>
@@ -439,7 +434,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
       <span data-bind="foreach: statesValuesFilter">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>
@@ -447,7 +441,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
       <span data-bind="foreach: typesValuesFilter">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>
@@ -829,7 +822,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
       <span data-bind="foreach: statesValuesFilter">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 19 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -4412,6 +4412,25 @@
     }
   };
 
+  ko.bindingHandlers.hueCheckbox = {
+    after: ['value', 'attr'],
+    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+      var value = valueAccessor();
+      $(element).addClass('hueCheckbox fa');
+
+      var updateCheckedState = function () {
+        ko.utils.toggleDomNodeCssClass(element, 'fa-check', value());
+      };
+
+      ko.utils.registerEventHandler(element, 'click', function () {
+        value(!value());
+      });
+
+      value.subscribe(updateCheckedState);
+      updateCheckedState();
+    }
+  };
+
   ko.bindingHandlers.hueCheckAll = {
     init: function (element, valueAccessor, allBindings) {
       var allValues = ko.utils.unwrapObservable(valueAccessor()).allValues;

+ 14 - 2
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -298,7 +298,7 @@ input[type='password']::-ms-reveal {
 }
 
 .status-border {
-  &.success {
+  &.completed {
     border-color: @cui-green!important;
   }
   &.running {
@@ -310,7 +310,7 @@ input[type='password']::-ms-reveal {
 }
 
 .status-background {
-  &.success {
+  &.completed {
     background-color: @cui-green!important;
   }
   &.running {
@@ -321,6 +321,18 @@ input[type='password']::-ms-reveal {
   }
 }
 
+.status-content {
+  &.completed {
+    color: @cui-green!important;
+  }
+  &.running {
+    color: @cui-orange!important;
+  }
+  &.failed {
+    color: @cui-red!important;
+  }
+}
+
 
 .blue,
 .card-heading-blue {

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.