فهرست منبع

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

Enrico Berti 8 سال پیش
والد
کامیت
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>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 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 {

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است