ソースを参照

HUE-1252 [core] Correct alignment of toolbar buttons across Hue

Fixed alignment on Chrome, Safari and IE for Oozie and Jobsub
Enrico Berti 12 年 前
コミット
2fd2ea23b1

+ 8 - 4
apps/jobsub/src/jobsub/templates/designs.mako

@@ -44,13 +44,14 @@ ${ commonheader(None, "jobsub", user, "60px") | n,unicode }
 
   <%actionbar:render>
     <%def name="actions()">
-      <button id="home" class="btn" title="${_('Home')}"><i class="icon-share"></i> ${_('Home')}</button>
-      &nbsp;
+      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+        <button id="home" class="btn" title="${_('Home')}"><i class="icon-share"></i> ${_('Home')}</button>
+        &nbsp;
       <!-- ko ifnot: inTrash -->
         <button id="submit-design" class="btn" title="${_('Submit')}" data-bind="enable: selectedDesignObjects().length == 1"><i class="icon-play"></i> ${_('Submit')}</button>
         <button id="edit-design" class="btn" title="${_('Edit')}" data-bind="enable: selectedDesignObjects().length == 1"><i class="icon-pencil"></i> ${_('Edit')}</button>
         <button id="copy-designs" class="btn" title="${_('Copy')}" data-bind="enable: selectedDesignObjects().length > 0"><i class="icon-retweet"></i> ${_('Copy')}</button>
-        <div id="delete-dropdown" class="btn-group" style="display: inline">
+        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle">
           <button id="delete-btn" class="btn toolbarBtn dropdown-toggle" title="${_('Delete')}" data-toggle="dropdown" data-bind="enable: selectedDesignObjects().length > 0">
             <i class="icon-remove"></i> ${_('Delete')}
             <span class="caret"></span>
@@ -65,11 +66,13 @@ ${ commonheader(None, "jobsub", user, "60px") | n,unicode }
         <button id="restore-designs" class="btn" title="${_('Restore')}" data-bind="enable: selectedDesignObjects().length > 0"><i class="icon-cloud-upload"></i> ${_('Restore')}</button>
         <button id="destroy-designs" class="btn" title="${_('Delete forever')}" data-bind="enable: selectedDesignObjects().length > 0"><i class="icon-bolt"></i> ${_('Delete forever')}</button>
       <!-- /ko -->
+      </div>
     </%def>
 
     <%def name="creation()">
+      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
       <!-- ko ifnot: inTrash -->
-        <div id="new-action-dropdown" class="btn-group" style="display: inline">
+        <div id="new-action-dropdown" class="btn-group" style="vertical-align: middle">
           <a href="#" class="btn new-action-link dropdown-toggle" title="${_('New action')}" data-toggle="dropdown">
             <i class="icon-plus-sign"></i> ${_('New action')}
             <span class="caret"></span>
@@ -116,6 +119,7 @@ ${ commonheader(None, "jobsub", user, "60px") | n,unicode }
       <!-- ko if: inTrash -->
         <button type="button" id="purge-trashed-designs" class="btn" title="${ _('Delete all the designs') }"><i class="icon-fire"></i> ${ _('Empty') }</button>
       <!-- /ko -->
+      </div>
     </%def>
   </%actionbar:render>
 

+ 5 - 0
apps/jobsub/static/css/jobsub.css

@@ -1,7 +1,12 @@
 li.error {
   list-style: none;
 }
+
 a.advanced, a.advanced:link, a.advanced:hover {
   color: black;
   text-decoration: none;
+}
+
+input.search-query {
+  vertical-align: top;
 }

+ 8 - 1
apps/oozie/src/oozie/templates/editor/list_bundles.mako

@@ -27,15 +27,21 @@
 ${ commonheader(_("Bundles"), "oozie", user, "100px") | n,unicode }
 ${ layout.menubar(section='bundles') }
 
+<style type="text/css">
+  input.search-query {
+    vertical-align: top;
+  }
+</style>
 
 <div class="container-fluid">
   <h1>${ _('Bundle Manager') }</h1>
 
   <%actionbar:render>
     <%def name="actions()">
+      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
         <button class="btn toolbarBtn" id="submit-btn" disabled="disabled"><i class="icon-play"></i> ${ _('Submit') }</button>
         <button class="btn toolbarBtn" id="clone-btn" disabled="disabled"><i class="icon-retweet"></i> ${ _('Copy') }</button>
-        <div id="delete-dropdown" class="btn-group" style="display: inline">
+        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle;">
           <button id="delete-btn" class="btn toolbarBtn dropdown-toggle" title="${_('Delete')}" data-toggle="dropdown" disabled="disabled">
             <i class="icon-remove"></i> ${_('Delete')}
             <span class="caret"></span>
@@ -45,6 +51,7 @@ ${ layout.menubar(section='bundles') }
             <li><a href="javascript:void(0);" id="destroy-btn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
           </ul>
         </div>
+      </div>
     </%def>
 
     <%def name="creation()">

+ 11 - 4
apps/oozie/src/oozie/templates/editor/list_coordinators.mako

@@ -26,15 +26,21 @@
 ${ commonheader(_("Coordinators"), "oozie", user, "100px") | n,unicode }
 ${ layout.menubar(section='coordinators') }
 
+<style type="text/css">
+  input.search-query {
+    vertical-align: top;
+  }
+</style>
 
 <div class="container-fluid">
   <h1>${ _('Coordinator Manager') }</h1>
 
   <%actionbar:render>
     <%def name="actions()">
+      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
         <button class="btn toolbarBtn" id="submit-btn" disabled="disabled"><i class="icon-play"></i> ${ _('Submit') }</button>
         <button class="btn toolbarBtn" id="clone-btn" disabled="disabled"><i class="icon-retweet"></i> ${ _('Copy') }</button>
-        <div id="delete-dropdown" class="btn-group" style="display: inline">
+        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle;">
           <button id="delete-btn" class="btn toolbarBtn dropdown-toggle" title="${_('Delete')}" data-toggle="dropdown" disabled="disabled">
             <i class="icon-remove"></i> ${_('Delete')}
             <span class="caret"></span>
@@ -44,12 +50,13 @@ ${ layout.menubar(section='coordinators') }
             <li><a href="javascript:void(0);" id="destroy-btn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
           </ul>
         </div>
+      </div>
     </%def>
 
     <%def name="creation()">
-        <a href="${ url('oozie:create_coordinator') }" class="btn"><i class="icon-plus-sign"></i> ${ _('Create') }</a>
-        &nbsp;&nbsp;
-        <a href="${ url('oozie:list_trashed_coordinators') }" class="btn"><i class="icon-trash"></i> ${ _('Trash') }</a>
+      <a href="${ url('oozie:create_coordinator') }" class="btn"><i class="icon-plus-sign"></i> ${ _('Create') }</a>
+      &nbsp;&nbsp;
+      <a href="${ url('oozie:list_trashed_coordinators') }" class="btn"><i class="icon-trash"></i> ${ _('Trash') }</a>
     </%def>
   </%actionbar:render>
 

+ 19 - 12
apps/oozie/src/oozie/templates/editor/list_workflows.mako

@@ -26,24 +26,31 @@
 ${ commonheader(_("Workflows"), "oozie", user, "100px") | n,unicode }
 ${ layout.menubar(section='workflows') }
 
+<style type="text/css">
+  input.search-query {
+    vertical-align: top;
+  }
+</style>
 
 <div class="container-fluid">
   <h1>${ _('Workflow Manager') }</h1>
 
   <%actionbar:render>
     <%def name="actions()">
-      <button class="btn toolbarBtn" id="submit-btn" disabled="disabled"><i class="icon-play"></i> ${ _('Submit') }</button>
-      <button class="btn toolbarBtn" id="schedule-btn" disabled="disabled"><i class="icon-calendar"></i> ${ _('Schedule') }</button>
-      <button class="btn toolbarBtn" id="clone-btn" disabled="disabled"><i class="icon-retweet"></i> ${ _('Copy') }</button>
-      <div id="delete-dropdown" class="btn-group" style="display: inline">
-        <button id="delete-btn" class="btn toolbarBtn dropdown-toggle" title="${_('Delete')}" data-toggle="dropdown" disabled="disabled">
-          <i class="icon-remove"></i> ${_('Delete')}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" style="top: auto">
-          <li><a href="javascript:void(0);" id="trash-btn" title="${_('Move to trash')}"><i class="icon-trash"></i> ${_('Move to trash')}</a></li>
-          <li><a href="javascript:void(0);" id="destroy-btn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
-        </ul>
+      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
+        <button class="btn toolbarBtn" id="submit-btn" disabled="disabled"><i class="icon-play"></i> ${ _('Submit') }</button>
+        <button class="btn toolbarBtn" id="schedule-btn" disabled="disabled"><i class="icon-calendar"></i> ${ _('Schedule') }</button>
+        <button class="btn toolbarBtn" id="clone-btn" disabled="disabled"><i class="icon-retweet"></i> ${ _('Copy') }</button>
+        <div id="delete-dropdown" class="btn-group" style="vertical-align: middle;">
+          <button id="delete-btn" class="btn toolbarBtn dropdown-toggle" title="${_('Delete')}" data-toggle="dropdown" disabled="disabled">
+            <i class="icon-remove"></i> ${_('Delete')}
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" style="top: auto">
+            <li><a href="javascript:void(0);" id="trash-btn" title="${_('Move to trash')}"><i class="icon-trash"></i> ${_('Move to trash')}</a></li>
+            <li><a href="javascript:void(0);" id="destroy-btn" title="${_('Delete forever')}"><i class="icon-bolt"></i> ${_('Delete forever')}</a></li>
+          </ul>
+        </div>
       </div>
     </%def>