浏览代码

[core] Various UX and UI polishing

Admin: restyle wizard
JB: scroll to top in logs
Beeswax: autocomplete did you know
Romain Rigaux 12 年之前
父节点
当前提交
0374347744

+ 61 - 20
apps/about/src/about/templates/admin_wizard.mako

@@ -37,12 +37,16 @@ ${ commonheader(_('About Hue'), "quick_start", user, "100px") | n,unicode }
 <div class="container-fluid">
 
   <div class="row-fluid">
-    <h2>Hue ${version} <img src="/static/art/hue-login-logo.png"/></h2>
+    <h2>
+      % if user.is_superuser:
+        ${ _('Quick Start Wizard') } -
+      % endif
+      Hue ${version} <img src="/static/art/hue-login-logo.png"/>
+    </h2>
   </div>
 
   % if user.is_superuser:
   <br/>
-  ${ _('Configure Hue through this wizard.') }
   <br/>
   <br/>
 
@@ -50,49 +54,83 @@ ${ commonheader(_('About Hue'), "quick_start", user, "100px") | n,unicode }
    <div id="properties" class="section">
     <ul class="nav nav-tabs">
       <li class="active"><a href="#step1" class="step">${ _('Step 1:') } <i class="icon-cogs"></i> ${ _('Check Configuration') }</a></li>
-      <li><a href="#step2" class="step">${ _('Step 2:') } <i class="icon-comments-alt"></i> ${ _('Examples') }</a></li>
+      <li><a href="#step2" class="step">${ _('Step 2:') } <i class="icon-book"></i> ${ _('Examples') }</a></li>
       <li><a href="#step3" class="step">${ _('Step 3:') } <i class="icon-user"></i> ${ _('Users') }</a></li>
-      <li><a href="${ url('desktop.views.home') }" class="step">${ _('Step 4:') } <i class="icon-home"></i> ${_('Use Hue') }</a></li>
+      <li><a id="lastStep" href="${ url('desktop.views.home') }" class="step">${ _('Step 4:') } <i class="icon-home"></i> ${_('Use Hue') }</a></li>
     </ul>
 
     <div class="steps" >
       <div id="step1" class="stepDetails">
-       ${ check_config.content | n,unicode }
+      <div class="widget-box">
+
+        <div class="widget-content">
+          ${ check_config.content | n,unicode }
+        </div>
+      </div>
     </div>
 
     <div id="step2" class="stepDetails hide">
-      <p>
-      ${ _('Install or re-install available app examples') }:
-      </p>
-      <ul class="nav nav-tabs nav-stacked">
+      <div class="widget-box">
+        <div class="widget-title">
+          <span class="icon">
+            <i class="icon-th-list"></i>
+          </span>
+          <h5>${ _('Install or re-install available app examples') }</h5>
+        </div>
+        <div class="widget-content">
+          <ul>
         % if 'beeswax' in app_names:
           <li>
-            <button type="button" class="btn" data-loading-text="${ _('Installing...') }" data-url="${ url('beeswax:install_examples') }">
+            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-url="${ url('beeswax:install_examples') }">
              <i class="icon-download-alt"></i> Beeswax
-            </button>
+            </a>
           </li>
         % endif
         % if 'oozie' in app_names or 'jobsub' in app_names:
           <li>
-            <button type="button" class="btn" data-loading-text="${ _('Installing...') }" data-url="${ url('oozie:setup_app') }">
+            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-url="${ url('oozie:setup_app') }">
               <i class="icon-download-alt"></i> Oozie / Job Designer
-            </button>
+            </a>
           </li>
         % endif
         % if 'pig' in app_names:
           <li>
-            <button type="button" class="btn" data-loading-text="${ _('Installing...') }" data-url="${ url('pig:install_examples') }">
+            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-url="${ url('pig:install_examples') }">
              <i class="icon-download-alt"></i> Pig
-            </button>
+            </a>
           </li>
         % endif
-      </ul>
+          </ul>
+        </div>
+      </div>
     </div>
 
     <div id="step3" class="stepDetails hide">
-      ${ _('Go create or import users in the') }
-      <a class="btn" href="${ url('useradmin.views.list_users') }" target="_blank">${ _('User Admin') } <img src="/useradmin/static/art/icon_useradmin_24.png"></a>
-      ${ _('application') }.
+      <div class="widget-box">
+        <div class="widget-title">
+          <span class="icon">
+            <i class="icon-th-list"></i>
+          </span>
+          <h5>${ _('Go create or import users') }</h5>
+        </div>
+        <div class="widget-content">
+	      <a  href="${ url('useradmin.views.list_users') }" target="_blank">${ _('User Admin') } <img src="/useradmin/static/art/icon_useradmin_24.png"></a>
+        </div>
+      </div>
+    </div>
+
+    <div id="step4" class="stepDetails hide">
+      <div class="widget-box">
+        <div class="widget-title">
+          <span class="icon">
+            <i class="icon-th-list"></i>
+          </span>
+          <h5>${ _('Go use the apps') }</h5>
+        </div>
+        <div class="widget-content">
+          <a href="${ url('desktop.views.home') }" class="step"><i class="icon-home"></i> ${_('Hue Home') }</a>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -121,7 +159,7 @@ ${ commonheader(_('About Hue'), "quick_start", user, "100px") | n,unicode }
 <script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 
-  $("button").click(function() {
+  $(".installBtn").click(function() {
     var button = $(this);
     $(button).button('loading');
     $.post($(this).data("url"), function(data) {
@@ -165,6 +203,9 @@ $(document).ready(function(){
 
     $("a.step").parent().removeClass("active");
     $("a.step[href=#" + step + "]").parent().addClass("active");
+    if (step == "step4") {
+      $("#lastStep").parent().addClass("active");
+    }
     $(".stepDetails").hide();
     $("#" + step).show();
   }

+ 10 - 4
apps/beeswax/src/beeswax/templates/execute.mako

@@ -235,9 +235,10 @@ ${layout.menubar(section='query')}
                             <div class="control-group">
                               <i class="icon-question-sign" id="help"></i>
                               <div id="help-content" class="hide">
-                                <ul>
-                                  <li>${ _("You can execute queries with multiple SQL statements delimited by a semicolon ';'.") }</li>
-                                  <li>${ _('You can highlight and run a fragment of a query.') }</li>
+                                <ul style="text-align: left;">
+                                  <li>${ _('Press Shift + Space to autocomplete') }</li>
+                                  <li>${ _("You can execute queries with multiple SQL statements delimited by a semicolon ';'") }</li>
+                                  <li>${ _('You can highlight and run a fragment of a query') }</li>
                                 </ul>
                               </div>
                             </div>
@@ -671,7 +672,12 @@ ${layout.menubar(section='query')}
       });
     });
 
-    $("#help").popover({'title': "${_('Did you know?')}", 'content': $("#help-content").html(), 'trigger': 'hover', 'html': true});
+    $("#help").popover({
+        'title': "${_('Did you know?')}",
+        'content': $("#help-content").html(),
+        'trigger': 'hover',
+        'html': true
+    });
 </script>
 
 

+ 2 - 0
apps/jobbrowser/src/jobbrowser/templates/attempt_logs.mako

@@ -149,6 +149,8 @@ ${ line | unicode,trim }
                 "sZeroRecords": "${_('No matching records')}",
             }
         });
+
+        $.jHueScrollUp();
     });
 </script>
 

+ 1 - 83
desktop/core/src/desktop/templates/home.mako

@@ -21,88 +21,6 @@
 ${ commonheader(_('Home'), "home", user) | n,unicode }
 
 
-<style type="text/css">
-  .widget-box {
-    background: none repeat scroll 0 0 #F9F9F9;
-    border-top: 1px solid #CDCDCD;
-    border-left: 1px solid #CDCDCD;
-    border-right: 1px solid #CDCDCD;
-    clear: both;
-    margin-top: 10px;
-    margin-bottom: 16px;
-    position: relative;
-  }
-
-  .widget-title {
-    background-color: #efefef;
-    background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#eaeaea));
-    background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
-    background-image: -moz-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
-    background-image: -ms-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
-    background-image: -o-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
-    background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */
-    border-bottom: 1px solid #CDCDCD;
-    height: 36px;
-  }
-
-  .widget-title span.icon {
-    border-right: 1px solid #cdcdcd;
-    padding: 9px 10px 7px 11px;
-    float: left;
-    opacity: .7;
-  }
-
-  .widget-title h5 {
-    color: #666666;
-    text-shadow: 0 1px 0 #ffffff;
-    float: left;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 10px;
-    line-height: 16px;
-    margin: 0;
-  }
-
-  .widget-content {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #cdcdcd;
-  }
-
-  .widget-content ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .widget-content ul li {
-    margin: 0;
-    padding: 0;
-  }
-
-  .widget-content a {
-    padding: 5px 15px;
-    display: block;
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .widget-content a i {
-    color: #999999;
-  }
-
-  .widget-content a:hover {
-    background-color: #EEEEEE;
-    text-decoration: none;
-  }
-
-  .widget-content a:hover i {
-    color: #333333;
-  }
-
-</style>
-
 <%def name="app_link(current_app, label, extra_path = '')">
   %for app in apps:
     %if app == current_app:
@@ -183,4 +101,4 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
 
 </div>
 
-${ commonfooter(messages) | n,unicode }
+${ commonfooter(messages) | n,unicode }

+ 80 - 0
desktop/core/static/css/hue2.css

@@ -333,6 +333,86 @@ a.toggle-display-link:hover {
 }
 
 
+.widget-box {
+  background: none repeat scroll 0 0 #F9F9F9;
+  border-top: 1px solid #CDCDCD;
+  border-left: 1px solid #CDCDCD;
+  border-right: 1px solid #CDCDCD;
+  clear: both;
+  margin-top: 10px;
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.widget-title {
+  background-color: #efefef;
+  background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#eaeaea));
+  background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
+  background-image: -moz-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
+  background-image: -ms-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
+  background-image: -o-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
+  background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */
+  border-bottom: 1px solid #CDCDCD;
+  height: 36px;
+}
+
+.widget-title span.icon {
+  border-right: 1px solid #cdcdcd;
+  padding: 9px 10px 7px 11px;
+  float: left;
+  opacity: .7;
+}
+
+.widget-title h5 {
+  color: #666666;
+  text-shadow: 0 1px 0 #ffffff;
+  float: left;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px;
+  line-height: 16px;
+  margin: 0;
+}
+
+.widget-content {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #cdcdcd;
+}
+
+.widget-content ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.widget-content ul li {
+  margin: 0;
+  padding: 0;
+}
+
+.widget-content a {
+  padding: 5px 15px;
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.widget-content a i {
+  color: #999999;
+}
+
+.widget-content a:hover {
+  background-color: #EEEEEE;
+  text-decoration: none;
+}
+
+.widget-content a:hover i {
+  color: #333333;
+}
+
+
 code {
     line-height:1.4em;
 }