Browse Source

HUE-4116 [editor] Prettified context panel

Enrico Berti 9 years ago
parent
commit
8876178ccc

+ 8 - 2
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -74,8 +74,7 @@ body {
   transition-duration: .3s;
   transition-duration: .3s;
   z-index: 10;
   z-index: 10;
   overflow-y: auto;
   overflow-y: auto;
-  padding: 10px;
-  padding-top: 20px;
+  padding: 10px 0;
   width: 380px;
   width: 380px;
   right: -440px;
   right: -440px;
   box-shadow: 0 0 20px rgba(14, 18, 21, .38);
   box-shadow: 0 0 20px rgba(14, 18, 21, .38);
@@ -86,6 +85,13 @@ body {
   right: 0;
   right: 0;
 }
 }
 
 
+.context-panel .nav-tabs {
+  padding-left: 10px;
+}
+.context-panel .tab-content {
+  padding: 12px;
+}
+
 .resizer {
 .resizer {
   position: absolute;
   position: absolute;
   height: 100%;
   height: 100%;

+ 4 - 6
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -980,10 +980,10 @@ ${ hueIcons.symbols() }
 
 
   <div class="context-panel" data-bind="css: {'visible': isContextPanelVisible}">
   <div class="context-panel" data-bind="css: {'visible': isContextPanelVisible}">
     <ul class="nav nav-tabs">
     <ul class="nav nav-tabs">
-      <li class="active"><a href="#sessionsTab" data-toggle="tab">${_('Sessions')}</a></li>
+      <li class="active"><a href="#sessionsTab" data-toggle="tab"><i class="fa fa-cloud"></i> ${_('Sessions')}</a></li>
       % if ENABLE_QUERY_SCHEDULING.get():
       % if ENABLE_QUERY_SCHEDULING.get():
-      <li><a href="#scheduleTab" data-toggle="tab">${_('Schedule')}</a></li>
-      <li><a href="#scheduledJobsTab" data-toggle="tab">${_('Jobs')}</a></li>
+      <li><a href="#scheduleTab" data-toggle="tab"><i class="fa fa-calendar"></i> ${_('Schedule')}</a></li>
+      <li><a href="#scheduledJobsTab" data-toggle="tab"><i class="fa fa-wrench"></i> ${_('Jobs')}</a></li>
       % endif
       % endif
     </ul>
     </ul>
 
 
@@ -994,7 +994,6 @@ ${ hueIcons.symbols() }
             <!-- ko with: $root.selectedNotebook() -->
             <!-- ko with: $root.selectedNotebook() -->
             <form class="form-horizontal">
             <form class="form-horizontal">
               <fieldset>
               <fieldset>
-                <legend><i class="fa fa-cloud"></i> ${ _('Sessions') }</legend>
                 <!-- ko ifnot: sessions().length -->
                 <!-- ko ifnot: sessions().length -->
                <p>${ _('There are currently no active sessions.') }</p>
                <p>${ _('There are currently no active sessions.') }</p>
                <!-- /ko -->
                <!-- /ko -->
@@ -1041,8 +1040,7 @@ ${ hueIcons.symbols() }
     ## mode == 'editor', mode not defined yet
     ## mode == 'editor', mode not defined yet
     % if ENABLE_QUERY_SCHEDULING.get():
     % if ENABLE_QUERY_SCHEDULING.get():
     <div class="tab-pane" id="scheduleTab">
     <div class="tab-pane" id="scheduleTab">
-      <legend><i class="fa fa-calendar"></i> ${ _('Schedule') }</legend>
-      
+
       <!-- ko if: $root.selectedNotebook() -->
       <!-- ko if: $root.selectedNotebook() -->
       <!-- ko with: $root.selectedNotebook() -->
       <!-- ko with: $root.selectedNotebook() -->
         <!-- ko if: $root.selectedNotebook().isSaved() -->
         <!-- ko if: $root.selectedNotebook().isSaved() -->