Pārlūkot izejas kodu

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

Enrico Berti 8 gadi atpakaļ
vecāks
revīzija
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.
 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>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 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 {

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels