瀏覽代碼

HUE-6438 [jb] Improve CSS for mini jobbrowser mode

Enrico Berti 8 年之前
父節點
當前提交
e7d20bd

+ 16 - 8
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -164,7 +164,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <!-- ko if: $root.isMini -->
                 <ul class="unstyled status-border-container" id="jobsTable" data-bind="foreach: jobs.apps">
                   <li class="status-border pointer" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, click: fetchJob">
-                    <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span><span data-bind="text: status"></span></td>
+                    <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span><span class="muted">&nbsp;-&nbsp;</span><span class="muted" data-bind="text: status"></span></td>
                     <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
                     <div class="clearfix"></div>
                     <strong class="pull-left" data-bind="text: type"></strong>
@@ -467,6 +467,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
 
+      <div class="clearfix"></div>
+
       <div class="tab-content">
         <div class="tab-pane active" id="job-mapreduce-page-logs">
           % for name in ['stdout', 'stderr', 'syslog']:
@@ -774,33 +776,33 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
   <div class="btn-group">
     <!-- ko if: hasResume -->
     <button class="btn" title="${ _('Resume selected') }" data-bind="click: function() { control('resume'); }, enable: resumeEnabled">
-      <i class="fa fa-play"></i> ${ _('Resume') }
+      <i class="fa fa-play"></i> <!-- ko ifnot: $root.isMini -->${ _('Resume') }<!-- /ko -->
     </button>
     <!-- /ko -->
 
     <!-- ko if: hasPause -->
     <button class="btn" title="${ _('Suspend selected') }" data-bind="click: function() { control('suspend'); }, enable: pauseEnabled">
-      <i class="fa fa-pause"></i> ${ _('Suspend') }
+      <i class="fa fa-pause"></i> <!-- ko ifnot: $root.isMini -->${ _('Suspend') }<!-- /ko -->
     </button>
     <!-- /ko -->
 
     <!-- ko if: hasRerun -->
     <button class="btn" title="${ _('Rerun selected') }" data-bind="click: function() { control('rerun'); }, enable: rerunEnabled">
-      <i class="fa fa-repeat"></i> ${ _('Rerun') }
+      <i class="fa fa-repeat"></i> <!-- ko ifnot: $root.isMini -->${ _('Rerun') }<!-- /ko -->
     </button>
     <!-- /ko -->
 
     <!-- ko if: hasKill -->
     <button class="btn btn-danger" title="${_('Stop selected')}" data-bind="click: function() { control('kill'); }, enable: killEnabled">
       ## TODO confirmation
-      <i class="fa fa-times"></i> ${_('Kill')}
+      <i class="fa fa-times"></i> <!-- ko ifnot: $root.isMini -->${_('Kill')}<!-- /ko -->
     </button>
     <!-- /ko -->
 
     <!-- ko if: hasIgnore -->
     <button class="btn btn-danger" title="${_('Ignore selected')}" data-bind="click: function() { control('ignore'); }, enable: ignoreEnabled">
       ## TODO confirmation
-      <i class="fa fa-eraser"></i> ${_('Ignore')}
+      <i class="fa fa-eraser"></i> <!-- ko ifnot: $root.isMini -->${_('Ignore')}<!-- /ko -->
     </button>
     <!-- /ko -->
   </div>
@@ -810,7 +812,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 <script type="text/html" id="workflow-page">
 
   <div class="row-fluid">
-    <div class="span2">
+    <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
@@ -861,7 +863,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         </ul>
       </div>
     </div>
-    <div class="span10">
+    <div data-bind="css:{'span10': !$root.isMini(), 'span12': $root.isMini() }">
 
       <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#workflow-page-graph" data-toggle="tab">${ _('Graph') }</a></li>
@@ -872,6 +874,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
 
+      <div class="clearfix"></div>
+
 
       <div class="tab-content">
         <div class="tab-pane active dashboard-container" id="workflow-page-graph">
@@ -1051,6 +1055,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
 
+      <div class="clearfix"></div>
+
       <div class="tab-content">
         <div class="tab-pane active" id="schedule-page-calendar">
           <!-- ko with: coordinatorActions() -->
@@ -1165,6 +1171,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
 
+      <div class="clearfix"></div>
+
       <div class="tab-content">
         <div class="tab-pane active" id="bundle-page-coordinators">
           <input type="text" class="input-xlarge search-query"  placeholder="${_('Filter by id, name, user...')}" />

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -798,7 +798,7 @@ a:visited {
   input.search-query {
     width: 70px;
   }
-  li {
+  .status-border-container li {
     padding: 7px;
     margin-top: 10px;
     border-left: 3px solid @cui-white;

+ 11 - 1
desktop/core/src/desktop/templates/hue.mako

@@ -223,12 +223,22 @@ ${ hueIcons.symbols() }
 
         <!-- ko component: 'hue-history-panel' --><!-- /ko -->
         <!-- ko if: hasJobBrowser -->
-          <!-- ko component: { name: 'hue-job-browser-panel', params: { onePageViewModel: onePageViewModel }} --><!-- /ko -->
+          <!-- ko component: { name: 'hue-job-browser-links', params: { onePageViewModel: onePageViewModel }} --><!-- /ko -->
         <!-- /ko -->
       </div>
     </div>
   </nav>
 
+  <div id="jobsPanel" class="jobs-panel" style="display: none;">
+    <a class="pointer inactive-action pull-right" onclick="huePubSub.publish('hide.jobs.panel')"><i class="fa fa-fw fa-times"></i></a>
+    <ul class="nav nav-pills" class="inline">
+      <li><a href="javascript:void(0)" onclick="huePubSub.publish('mini.jb.navigate', 'jobs')">${_('Jobs')}</a></li>
+      <li><a href="javascript:void(0)" onclick="huePubSub.publish('mini.jb.navigate', 'workflows')" data-bind="click: ">${_('Workflows')}</a></li>
+      <li><a href="javascript:void(0)" onclick="huePubSub.publish('mini.jb.navigate', 'schedules')" data-bind="click: ">${_('Schedules')}</a></li>
+    </ul>
+    <div id="mini_jobbrowser"></div>
+  </div>
+
   <div class="content-wrapper">
 
     <script type="text/html" id="tmpl-sidebar-link">

+ 21 - 24
desktop/core/src/desktop/templates/ko_components.mako

@@ -382,25 +382,20 @@ from desktop.views import _ko
     })();
   </script>
 
-  <script type="text/html" id="hue-job-browser-panel-template">
+  <script type="text/html" id="hue-job-browser-links-template">
     <div class="btn-group pull-right">
-      <button class="btn btn-flat" style="padding-right: 2px" title="${_('Job browser')}" data-bind="hueLink: '/jobbrowser', click: function(){ jobsPanelVisible(false); }">
+      <button class="btn btn-flat" style="padding-right: 2px" title="${_('Job browser')}" data-bind="hueLink: '/jobbrowser', click: function(){ huePubSub.publish('hide.jobs.panel'); }">
         <span>${ _('Jobs') }</span>
       </button>
+<<<<<<< HEAD
       <button class="btn btn-flat btn-toggle-jobs-panel" title="${_('Mini job browser')}" data-bind="toggle: jobsPanelVisible, style: {'paddingLeft': jobCount() > 0 ? '0': '4px'}">
+=======
+      <button class="btn btn-flat btn-toggle-jobs-panel" title="${_('Min job browser')}" data-bind="click: function() { huePubSub.publish('toggle.jobs.panel'); }, style: {'paddingLeft': jobCount() > 0 ? '0': '4px'}">
+>>>>>>> HUE-6438 [jb] Improve CSS for mini jobbrowser mode
         <span class="jobs-badge" data-bind="visible: jobCount() > 0, text: jobCount"></span>
         <i class="fa fa-sliders"></i>
       </button>
     </div>
-    <div class="jobs-panel" data-bind="visible: jobsPanelVisible" style="display: none;">
-      <a class="pointer inactive-action pull-right" data-bind="click: function(){ jobsPanelVisible(false); }"><i class="fa fa-fw fa-times"></i></a>
-      <ul class="inline">
-        <li><a href="javascript:void(0)" data-bind="click: function(){ huePubSub.publish('mini.jb.navigate', 'jobs') }">${_('Jobs')}</a></li>
-        <li><a href="javascript:void(0)" data-bind="click: function(){ huePubSub.publish('mini.jb.navigate', 'workflows') }">${_('Workflows')}</a></li>
-        <li><a href="javascript:void(0)" data-bind="click: function(){ huePubSub.publish('mini.jb.navigate', 'schedules') }">${_('Schedules')}</a></li>
-      </ul>
-      <div id="mini_jobbrowser"></div>
-    </div>
   </script>
 
   <script type="text/javascript">
@@ -410,21 +405,23 @@ from desktop.views import _ko
       var JobBrowserPanel = function (params) {
         var self = this;
 
-        self.jobsPanelVisible = ko.observable(false);
-
-        self.jobsPanelVisible.subscribe(function (newVal) {
-          if (newVal) {
-            huePubSub.publish('hide.history.panel');
-            huePubSub.publish('mini.jb.navigate');
-          }
-        });
-
         huePubSub.subscribe('hide.jobs.panel', function () {
-          self.jobsPanelVisible(false);
+          $('#jobsPanel').hide();
         });
 
         huePubSub.subscribe('show.jobs.panel', function () {
-          self.jobsPanelVisible(true);
+          huePubSub.publish('hide.history.panel');
+          $('#jobsPanel').show();
+          huePubSub.publish('mini.jb.navigate');
+        });
+
+        huePubSub.subscribe('toggle.jobs.panel', function () {
+          if ($('#jobsPanel').is(':visible')){
+            huePubSub.publish('hide.jobs.panel');
+          }
+          else {
+            huePubSub.publish('show.jobs.panel');
+          }
         });
 
         self.jobCount = ko.observable(0);
@@ -471,9 +468,9 @@ from desktop.views import _ko
         huePubSub.subscribe('check.job.browser', checkJobBrowserStatus);
       };
 
-      ko.components.register('hue-job-browser-panel', {
+      ko.components.register('hue-job-browser-links', {
         viewModel: JobBrowserPanel,
-        template: { element: 'hue-job-browser-panel-template' }
+        template: { element: 'hue-job-browser-links-template' }
       });
     })();
   </script>

部分文件因文件數量過多而無法顯示