浏览代码

HUE-3294 [core] Add skeleton for jobs dropdown

Johan Ahlen 9 年之前
父节点
当前提交
8982c5ddd9

+ 15 - 1
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -84,7 +84,6 @@ body {
   flex: 0 0 300px;
 }
 
-
 .top-nav-right .compose-action {
   float: right;
   margin-right: 15px;
@@ -94,6 +93,21 @@ body {
   margin-left: -80px;
 }
 
+.jobs-panel {
+  position: fixed;
+  z-index: 999999;
+  top: 45px;
+  padding: 10px;
+  height: 300px;
+  width: 400px;
+  right: 10px;
+  font-size: 13px;
+  border-radius: 2px;
+  background-color: #FFF;
+  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+}
+
 .compose-action {
   float: right;
   margin-top: 10px;

+ 7 - 1
desktop/core/src/desktop/templates/responsive.mako

@@ -177,6 +177,12 @@ ${ hueIcons.symbols() }
 
         <div class="compose-action btn-group">
           <button class="btn" title="${_('Running jobs and workflows')}" >${ _('Jobs') } <div class="jobs-badge">20</div></button>
+          <button class="btn dropdown-toggle" data-bind="toggle: jobsPanelVisible">
+            <span class="caret"></span>
+          </button>
+        </div>
+        <div class="jobs-panel" data-bind="visible: jobsPanelVisible" style="display: none;">
+          <span style="font-size: 15px; font-weight: 300">${_('Workflows')} (20)</span>
         </div>
       % endif
     </div>
@@ -419,7 +425,7 @@ ${ assist.assistPanel() }
         self.searchActive = ko.observable(false);
         self.searchHasFocus = ko.observable(false);
         self.searchInput = ko.observable();
-
+        self.jobsPanelVisible = ko.observable(false);
 
         // TODO: Extract to common module (shared with nav search autocomplete)
         var SEARCH_FACET_ICON = 'fa-tags';