Prechádzať zdrojové kódy

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

Enrico Berti 8 rokov pred
rodič
commit
766b9e720b

+ 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.
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 See the License for the specific language governing permissions and
 limitations under the License.
 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 {
   .app-icon {
     vertical-align: text-top;
     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...')}" />
               ${_('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">
               <span data-bind="foreach: jobs.statesValuesFilter">
                 <label class="checkbox">
                 <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>
                 </label>
               </span>
               </span>
 
 
@@ -156,7 +155,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
             <div class="card card-small">
             <div class="card card-small">
               <!-- ko if: $root.isMini -->
               <!-- ko if: $root.isMini -->
               <ul class="unstyled" id="jobsTable" data-bind="foreach: jobs.apps">
               <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-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span></td>
                   <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
                   <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
                   <div class="clearfix"></div>
                   <div class="clearfix"></div>
@@ -175,7 +174,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <thead>
                 <thead>
                 <tr>
                 <tr>
                   <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.apps, selectedValues: jobs.selectedJobs }"></div></th>
                   <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>${_('Duration')}</th>
                   <th>${_('Started')}</th>
                   <th>${_('Started')}</th>
                   <th>${_('Type')}</th>
                   <th>${_('Type')}</th>
@@ -186,13 +184,10 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 </tr>
                 </tr>
                 </thead>
                 </thead>
                 <tbody data-bind="foreach: jobs.apps">
                 <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>
                     <td>
                       <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#jobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div>
                       <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#jobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div>
                     </td>
                     </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="text: duration().toHHMMSS()"></td>
                     <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
                     <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
                     <td data-bind="text: type"></td>
                     <td data-bind="text: type"></td>
@@ -439,7 +434,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
       <span data-bind="foreach: statesValuesFilter">
       <span data-bind="foreach: statesValuesFilter">
         <label class="checkbox">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>
         </label>
@@ -447,7 +441,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
       <span data-bind="foreach: typesValuesFilter">
       <span data-bind="foreach: typesValuesFilter">
         <label class="checkbox">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>
         </label>
@@ -829,7 +822,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
       <span data-bind="foreach: statesValuesFilter">
       <span data-bind="foreach: statesValuesFilter">
         <label class="checkbox">
         <label class="checkbox">
-          <div data-bind="attr: {'class': 'status-circle ' + klass()}"></div>
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <input type="checkbox" data-bind="checked: checked, attr: {id: name}">
           <span data-bind="text: name, attr: {for: name}"></span>
           <span data-bind="text: name, attr: {for: name}"></span>
         </label>
         </label>

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 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 = {
   ko.bindingHandlers.hueCheckAll = {
     init: function (element, valueAccessor, allBindings) {
     init: function (element, valueAccessor, allBindings) {
       var allValues = ko.utils.unwrapObservable(valueAccessor()).allValues;
       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 {
 .status-border {
-  &.success {
+  &.completed {
     border-color: @cui-green!important;
     border-color: @cui-green!important;
   }
   }
   &.running {
   &.running {
@@ -310,7 +310,7 @@ input[type='password']::-ms-reveal {
 }
 }
 
 
 .status-background {
 .status-background {
-  &.success {
+  &.completed {
     background-color: @cui-green!important;
     background-color: @cui-green!important;
   }
   }
   &.running {
   &.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,
 .blue,
 .card-heading-blue {
 .card-heading-blue {

Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov