Bläddra i källkod

HUE-6077 [frontend] Create button improvements

Johan Ahlen 8 år sedan
förälder
incheckning
155f0ed

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


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

@@ -76,7 +76,7 @@ body {
 }
 }
 
 
 .top-nav-left {
 .top-nav-left {
-  .flex(0 0 300px);
+  .flex(0 0 350px);
 }
 }
 
 
 .top-nav-middle {
 .top-nav-middle {
@@ -88,6 +88,16 @@ body {
   .flex(0 0 300px);
   .flex(0 0 300px);
 }
 }
 
 
+.top-nav-left .btn-group {
+  float: right;
+}
+
+.hue-main-create-dropdown .hi {
+  // To align with fa-icons
+  margin-left: 1px;
+  margin-right: 2px;
+}
+
 .jobs-panel {
 .jobs-panel {
   position: fixed;
   position: fixed;
   z-index: 2999;
   z-index: 2999;

+ 128 - 51
desktop/core/src/desktop/templates/hue.mako

@@ -109,61 +109,37 @@ ${ hueIcons.symbols() }
           <svg style="height: 24px; width: 120px;"><use xlink:href="#hi-logo"></use></svg>
           <svg style="height: 24px; width: 120px;"><use xlink:href="#hi-logo"></use></svg>
         </a>
         </a>
 
 
-        <div class="navbar-dropdown">
-          <button class="btn btn-primary pull-right" title="${ _('Compose') }" data-toggle="dropdown">${ _('NEW') }</button>
-          <ul class="dropdown-menu dropdown-menu-new">
-            % if 'beeswax' in apps or 'impala' in apps or SHOW_NOTEBOOKS.get() or interpreters:
-              <li class="dropdown-submenu">
-                <a data-rel="navigator-tooltip" href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><i class="fa fa-fw fa-edit inline-block"></i> ${ _('Editor') }</a>
-                <ul class="dropdown-menu">
-                  % if 'impala' in apps:
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('impala', true); }"><svg style="display: inline-block;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-impala"></use></svg> ${_('Impala Query')}</a></li>
-                  % endif
-                  % if 'beeswax' in apps:
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-hive"></use></svg> ${_('Hive Query')}</a></li>
-                  % endif
-                  % if SHOW_NOTEBOOKS.get():
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/notebook'); }"><i class="fa fa-fw fa-file-text-o inline-block"></i> ${ _('Notebook') }</a></li>
-                  % endif
-                  % if interpreters:
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a data-rel="navigator-tooltip" href="#"><span class="dropdown-no-icon">${ _('More') }</span></a>
-                    <ul class="dropdown-menu">
-                      % for interpreter in interpreters:
-                        % if interpreter['name'] != 'Hive' and interpreter['name'] != 'Impala':
-                        <li><a  href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('${ interpreter['type'] }', true); }"><span class="dropdown-no-icon">${ interpreter['name'] }</span></a></li>
-                        % endif
-                      % endfor
-                      % if user.is_superuser:
-                        <li class="divider"></li>
-                        <li><a href="http://gethue.com/sql-editor/" target="_blank"><span class="dropdown-no-icon">${ _('Add more...') }</span></a></li>
-                      % endif
-                    </ul>
-                  </li>
-                  % endif
-                </ul>
-              </li>
-            % endif
-            % if IS_DASHBOARD_ENABLED.get():
-              <li><a href="javascript: void(0)" data-bind="click: function(){ page('/dashboard/new_search') }"><i class="fa fa-fw fa-area-chart"></i> ${ _('Dashboard') }</a></li>
-            % endif
-            % if 'oozie' in apps:
-              % if not user.has_hue_permission(action="disable_editor_access", app="oozie") or user.is_superuser:
-              <li class="dropdown-submenu">
-                <a data-rel="navigator-tooltip" href="#"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-oozie"></use></svg> ${ _('Workflow') }</a>
-                <ul class="dropdown-menu">
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/oozie/editor/workflow/new/') }"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-oozie-workflow"></use></svg> ${_('Workflow')}</a></li>
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/oozie/editor/coordinator/new/') }"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-oozie-coordinator"></use></svg> ${_('Schedule')}</a></li>
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/oozie/editor/bundle/new/') }"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-oozie-bundle"></use></svg> ${_('Bundle')}</a></li>
-                </ul>
-              </li>
-              % endif
-            % endif
+
+        <div class="btn-group" data-bind="visible: true" style="display:none;">
+          <!-- ko with: mainQuickCreateAction -->
+          <button class="btn btn-primary" href="javascript: void(0);" data-bind="click: click"><span data-bind="text: displayName"></span></button>
+          <!-- /ko -->
+          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="javascript: void(0);"><!-- ko ifnot: mainQuickCreateAction -->${ _('More') } <!-- /ko --><span class="caret"></span></button>
+          <ul class="dropdown-menu hue-main-create-dropdown" data-bind="foreach: { data: quickCreateActions, as: 'item' }">
+            <!-- ko template: 'quick-create-item-template' --><!-- /ko -->
           </ul>
           </ul>
         </div>
         </div>
+
+        <script type="text/html" id="quick-create-item-template">
+          <!-- ko if: item.dividerAbove -->
+          <li class="divider"></li>
+          <!-- /ko -->
+          <li data-bind="css: { 'dropdown-submenu': item.isCategory }"><a href="javascript: void(0);" data-bind="click: item.click">
+            <!-- ko if: item.icon -->
+            <!-- ko template: { name: 'app-icon-template', data: item } --><!-- /ko -->
+            <!-- /ko -->
+            <span data-bind="css: { 'dropdown-no-icon': !item.icon }, text: item.displayName"></span></a>
+            <!-- ko if: item.isCategory -->
+            <ul class="dropdown-menu" data-bind="foreach: { data: item.children, as: 'item' }">
+              <!-- ko template: 'quick-create-item-template' --><!-- /ko -->
+            </ul>
+            <!-- /ko -->
+          </li>
+        </script>
       </div>
       </div>
 
 
+
+
       <div class="top-nav-middle">
       <div class="top-nav-middle">
         <div class="search-container">
         <div class="search-container">
           <input placeholder="${ _('Search all data and saved documents...') }" type="text"
           <input placeholder="${ _('Search all data and saved documents...') }" type="text"
@@ -964,6 +940,107 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
         self.searchHasFocus = ko.observable(false);
         self.searchHasFocus = ko.observable(false);
         self.searchInput = ko.observable();
         self.searchInput = ko.observable();
 
 
+        self.quickCreateActions = [];
+
+        % if 'impala' in apps:
+          self.mainQuickCreateAction = {
+            displayName: '${ _('Query') }',
+            icon: 'impala',
+            click: function(){
+              page('/editor');
+              onePageViewModel.changeEditorType('impala', true);
+            }
+          };
+        % elif 'beeswax' in apps:
+          self.mainQuickCreateAction = {
+            displayName: '${ _('Query Hive') }',
+            icon: 'hive',
+            click: function(){
+              page('/editor');
+              onePageViewModel.changeEditorType('hive', true);
+            }
+          };
+        % endif
+
+        % if interpreters:
+          var interpreters = [];
+
+          interpreters.push({
+            displayName: '${ _('Notebook') }',
+            icon: 'notebook',
+            click: function(){
+              page('/notebook');
+            }
+          });
+        % for interpreter in interpreters:
+          interpreters.push({
+            displayName: '${ interpreter['name'] }',
+            dividerAbove: interpreters.length === 1,
+            icon: '${ interpreter['type'] }',
+            click: function () {
+              page('/editor');
+              onePageViewModel.changeEditorType('${ interpreter['type'] }', true);
+            }
+          });
+        %endfor
+        % if user.is_superuser:
+          interpreters.push({
+            displayName: '${ _('Add more...') }',
+            dividerAbove: true,
+            click: function () {
+              window.open('http://gethue.com/sql-editor/', '_blank');
+            }
+          });
+        % endif
+
+          self.quickCreateActions.push({
+            displayName: '${ _('Editor') }',
+            icon: 'editor',
+            isCategory: true,
+            children: interpreters
+          });
+        %endif
+
+        % if IS_DASHBOARD_ENABLED.get():
+          self.quickCreateActions.push({
+            displayName: '${ _('Dashboard') }',
+            icon: 'dashboard',
+            click: function () {
+              page('/dashboard/new_search');
+            }
+          });
+        % endif
+
+
+        % if 'oozie' in apps:
+          % if not user.has_hue_permission(action="disable_editor_access", app="oozie") or user.is_superuser:
+            self.quickCreateActions.push({
+              displayName: '${ _('Workflow') }',
+              icon: 'oozie',
+              isCategory: true,
+              children: [{
+                displayName: '${_('New Workflow')}',
+                icon: 'oozie-workflow',
+                click: function() {
+                  page('/oozie/editor/workflow/new/')
+                }
+              }, {
+                displayName: '${_('New Schedule')}',
+                icon: 'oozie-coordinator',
+                click: function() {
+                  page('/oozie/editor/coordinator/new/')
+                }
+              }, {
+                displayName: '${_('New Bundle')}',
+                icon: 'oozie-bundle',
+                click: function() {
+                  page('/oozie/editor/bundle/new/')
+                }
+              }]
+            });
+          % endif
+        % endif
+
         self.searchAutocompleteSource = function (request, callback) {
         self.searchAutocompleteSource = function (request, callback) {
           // TODO: Extract complete contents to common module (shared with nav search autocomplete)
           // TODO: Extract complete contents to common module (shared with nav search autocomplete)
           var facetMatch = request.term.match(/([a-z]+):\s*(\S+)?$/i);
           var facetMatch = request.term.match(/([a-z]+):\s*(\S+)?$/i);

+ 19 - 0
desktop/core/src/desktop/templates/hue_icons.mako

@@ -20,6 +20,9 @@
 <%def name="symbols()">
 <%def name="symbols()">
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;">
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;">
 
 
+    <symbol id="hi-empty" viewBox="0 0 640 640">
+    </symbol>
+
     <symbol id="hi-file" viewBox="0 0 640 640">
     <symbol id="hi-file" viewBox="0 0 640 640">
       <path d="M574.3,143.67L445.74,12.32A41.24,41.24,0,0,0,416.44,0H95A41,41,0,0,0,54,41V599a41,41,0,0,0,41,41H545a41,41,0,0,0,41-41V172.35A40.78,40.78,0,0,0,574.3,143.67ZM422.87,34.7L551.43,166a9,9,0,0,1,2.57,6.3V181H413.51a8.19,8.19,0,0,1-8.51-8.51V32h11.44A9.05,9.05,0,0,1,422.87,34.7ZM545,608H95a9,9,0,0,1-9-9V41a9,9,0,0,1,9-9H373V172.49A40.21,40.21,0,0,0,413.51,213H554V599A9,9,0,0,1,545,608Z"></path>
       <path d="M574.3,143.67L445.74,12.32A41.24,41.24,0,0,0,416.44,0H95A41,41,0,0,0,54,41V599a41,41,0,0,0,41,41H545a41,41,0,0,0,41-41V172.35A40.78,40.78,0,0,0,574.3,143.67ZM422.87,34.7L551.43,166a9,9,0,0,1,2.57,6.3V181H413.51a8.19,8.19,0,0,1-8.51-8.51V32h11.44A9.05,9.05,0,0,1,422.87,34.7ZM545,608H95a9,9,0,0,1-9-9V41a9,9,0,0,1,9-9H373V172.49A40.21,40.21,0,0,0,413.51,213H554V599A9,9,0,0,1,545,608Z"></path>
     </symbol>
     </symbol>
@@ -190,4 +193,20 @@
       <!-- /ko -->
       <!-- /ko -->
     </svg>
     </svg>
   </script>
   </script>
+
+  <script type="text/html" id="app-icon-template">
+    <!-- ko switch: icon -->
+    <!-- ko case: 'editor' --><i class="fa fa-fw fa-edit inline-block"></i><!-- /ko -->
+    <!-- ko case: 'pig' --><svg class="hi"><use xlink:href="#hi-pig"></use></svg><!-- /ko -->
+    <!-- ko case: 'notebook' --><svg class="hi"><use xlink:href="#hi-file-notebook"></use></svg><!-- /ko -->
+    <!-- ko case: 'oozie' --><svg class="hi"><use xlink:href="#hi-oozie"></use></svg><!-- /ko -->
+    <!-- ko case: 'oozie-bundle' --><svg class="hi"><use xlink:href="#hi-oozie-bundle"></use></svg><!-- /ko -->
+    <!-- ko case: 'oozie-coordinator' --><svg class="hi"><use xlink:href="#hi-oozie-coordinator"></use></svg><!-- /ko -->
+    <!-- ko case: 'oozie-workflow' --><svg class="hi"><use xlink:href="#hi-oozie-workflow"></use></svg><!-- /ko -->
+    <!-- ko case: 'hive' --><svg class="hi"><use xlink:href="#hi-hive"></use></svg><!-- /ko -->
+    <!-- ko case: 'impala' --><svg class="hi"><use xlink:href="#hi-impala"></use></svg><!-- /ko -->
+    <!-- ko case: 'dashboard' --><i class="fa fa-fw fa-area-chart"></i><!-- /ko -->
+    <!-- ko case: $else --><svg class="hi"><use xlink:href="#hi-empty"></use></svg><!-- /ko -->
+    <!-- /ko -->
+  </script>
 </%def>
 </%def>

Vissa filer visades inte eftersom för många filer har ändrats