Browse Source

HUE-3294 [core] Style the compose button

Johan Ahlen 9 years ago
parent
commit
b69e6b0

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

@@ -63,7 +63,7 @@ body {
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  background-color: #003F6C;
+  background-color: #338BB8;
   width: 100%;
 }
 
@@ -84,6 +84,83 @@ body {
   flex: 0 0 300px;
 }
 
+.compose-action {
+  float: right;
+  margin-top: 10px;
+  z-index: 999999;
+  line-height: 20px;
+}
+
+.compose-action .btn {
+  color: #f9f9f9;
+  border: 1px solid transparent;
+  background-color: transparent;
+  background-image: none;
+  font-weight: 600;
+  font-size: 14px;
+
+  -webkit-transition-duration: 0.2s;
+  -mos-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-property: background-color, color, opacity;
+  -moz-transition-property: background-color, color, opacity;
+  -ms-transition-property: background-color, color, opacity;
+  transition-property: background-color, color, opacity;
+}
+
+.compose-action .btn:hover {
+  background-color: rgba(240, 240, 240, 0.8);
+  color: #338BB8;
+}
+
+.compose-action .btn:first-child:active,
+.compose-action .btn:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding-bottom: 2px;
+  box-shadow: none;
+}
+
+.compose-action .btn:nth-child(2) {
+  margin-left: 0;
+  padding-left: 1px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: none;
+}
+
+.compose-action .dropdown-menu img {
+  height: 18px;
+  width: 18px;
+  margin: -1px 5px 0 -10px;
+}
+
+.compose-action .dropdown-menu li {
+  height: 32px;
+}
+
+.compose-action .dropdown-menu li a {
+  line-height: 32px;
+}
+
+.compose-action .dropdown-submenu>a:after {
+  margin-top: 11px;
+}
+
+.compose-action .dropdown-menu li.divider {
+  height: 1px;
+  margin: 5px 0;
+}
+
+.compose-action.open .dropdown-toggle:not(:hover) {
+  background-color: transparent !important;
+}
+
+.dropdown-no-icon {
+  margin-left: 17px;
+}
+
 .top-nav-middle .search-container {
   margin-left: auto;
   margin-right: auto;

+ 46 - 0
desktop/core/src/desktop/templates/responsive.mako

@@ -88,6 +88,52 @@ ${ hueIcons.symbols() }
       </span>
       </a>
       <a class="brand nav-tooltip pull-left" title="${_('Homepage')}" rel="navigator-tooltip" href="/home"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
+      <div class="compose-action btn-group">
+        <button class="btn">${ _('Compose') }</button>
+        <button class="btn dropdown-toggle" data-toggle="dropdown">
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+          % if 'beeswax' in apps:
+            <li><a href="${ url('notebook:editor') }?type=hive"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive')}</a></li>
+          % endif
+          % if 'impala' in apps: ## impala requires beeswax anyway
+            <li><a href="${ url('notebook:editor') }?type=impala"><img src="${ static(apps['impala'].icon_path) }" class="app-icon"/> ${_('Impala')}</a></li>
+          % endif
+          % if 'search' in apps:
+            <li><a href="${ url('search:new_search') }"><img src="${ static('search/art/icon_search_48.png') }" class="app-icon"/> ${ _('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 title="${_('Schedule with Oozie')}" rel="navigator-tooltip" href="#"><img src="${ static('oozie/art/icon_oozie_editor_48.png') }" class="app-icon" /> ${ _('Workflows') }</a>
+              <ul class="dropdown-menu">
+                <li><a href="${url('oozie:list_editor_workflows')}"><img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon"/> ${_('Workflows')}</a></li>
+                <li><a href="${url('oozie:list_editor_coordinators')}"><img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon" /> ${_('Coordinators')}</a></li>
+                <li><a href="${url('oozie:list_editor_bundles')}"><img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon" /> ${_('Bundles')}</a></li>
+              </ul>
+            </li>
+          % endif
+          % endif
+          % if len(interpreters) > 0:
+          <li class="divider"></li>
+          <li class="dropdown-submenu">
+            <a title="${_('More...')}" 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="${ url('notebook:editor') }?type=${ interpreter['type'] }"><span class="dropdown-no-icon">${ interpreter['name'] }</span></a></li>
+                % endif
+              % endfor
+              % if user.is_superuser:
+                <li class="divider"></li>
+                <li><a href="gethue.com" class="dropdown-no-icon">${ _('Add more...') }</a></li>
+              % endif
+            </ul>
+          </li>
+          % endif
+        </ul>
+      </div>
     </div>
     <div class="top-nav-middle">
       <div class="search-container">