浏览代码

HUE-897 [core] Redesign of the overall layout

Ported Pig to Hue 3
Enrico Berti 12 年之前
父节点
当前提交
b2be1450fd

+ 77 - 78
apps/pig/src/pig/templates/app.mako

@@ -35,70 +35,72 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
 
 <div class="container-fluid">
   <div id="scripts" class="row-fluid mainSection hide">
-    <%actionbar:render>
-      <%def name="search()">
-          <input id="filter" type="text" class="input-xlarge search-query" placeholder="${_('Search for script name or content')}">
-      </%def>
-
-      <%def name="actions()">
-          <button class="btn fileToolbarBtn" title="${_('Run this script')}" data-bind="enable: selectedScripts().length == 1, click: listRunScript, visible: scripts().length > 0"><i class="icon-play"></i> ${_('Run')}</button>
-          <button class="btn fileToolbarBtn" title="${_('Copy this script')}" data-bind="enable: selectedScripts().length == 1, click: listCopyScript, visible: scripts().length > 0"><i class="icon-copy"></i> ${_('Copy')}</button>
-          <button class="btn fileToolbarBtn" title="${_('Delete this script')}" data-bind="enable: selectedScripts().length > 0, click: listConfirmDeleteScripts, visible: scripts().length > 0"><i class="icon-trash"></i> ${_('Delete')}</button>
-      </%def>
-
-      <%def name="creation()">
-          <button class="btn fileToolbarBtn" title="${_('Create a new script')}" data-bind="click: confirmNewScript"><i class="icon-plus-sign"></i> ${_('New Script')}</button>
-      </%def>
-    </%actionbar:render>
-    <div class="alert alert-info" data-bind="visible: scripts().length == 0">
-      ${_('There are currently no scripts defined. Please add a new script clicking on "New script"')}
-    </div>
-
-    <table class="table table-striped table-condensed tablescroller-disable" data-bind="visible: scripts().length > 0">
-      <thead>
-      <tr>
-        <th width="1%"><div data-bind="click: selectAll, css: {hueCheckbox: true, 'icon-ok': allSelected}"></div></th>
-        <th width="20%">${_('Name')}</th>
-        <th width="79%">${_('Script')}</th>
-      </tr>
-      </thead>
-      <tbody id="scriptTable" data-bind="template: {name: 'scriptTemplate', foreach: filteredScripts}">
-
-      </tbody>
-      <tfoot>
-      <tr data-bind="visible: isLoading()">
-        <td colspan="3" class="left">
-          <img src="/static/art/spinner.gif" />
-        </td>
-      </tr>
-      <tr data-bind="visible: filteredScripts().length == 0 && !isLoading()">
-        <td colspan="3">
-          <div class="alert">
-              ${_('There are no scripts matching the search criteria.')}
-          </div>
-        </td>
-      </tr>
-      </tfoot>
-    </table>
+    <div class="card">
+      <%actionbar:render>
+        <%def name="search()">
+            <input id="filter" type="text" class="input-xlarge search-query" placeholder="${_('Search for script name or content')}">
+        </%def>
+
+        <%def name="actions()">
+            <button class="btn fileToolbarBtn" title="${_('Run this script')}" data-bind="enable: selectedScripts().length == 1, click: listRunScript, visible: scripts().length > 0"><i class="icon-play"></i> ${_('Run')}</button>
+            <button class="btn fileToolbarBtn" title="${_('Copy this script')}" data-bind="enable: selectedScripts().length == 1, click: listCopyScript, visible: scripts().length > 0"><i class="icon-copy"></i> ${_('Copy')}</button>
+            <button class="btn fileToolbarBtn" title="${_('Delete this script')}" data-bind="enable: selectedScripts().length > 0, click: listConfirmDeleteScripts, visible: scripts().length > 0"><i class="icon-trash"></i> ${_('Delete')}</button>
+        </%def>
+
+        <%def name="creation()">
+            <button class="btn fileToolbarBtn" title="${_('Create a new script')}" data-bind="click: confirmNewScript"><i class="icon-plus-sign"></i> ${_('New Script')}</button>
+        </%def>
+      </%actionbar:render>
+      <div class="alert alert-info" data-bind="visible: scripts().length == 0">
+        ${_('There are currently no scripts defined. Please add a new script clicking on "New script"')}
+      </div>
 
-    <script id="scriptTemplate" type="text/html">
-      <tr style="cursor: pointer" data-bind="event: { mouseover: toggleHover, mouseout: toggleHover}">
-        <td class="center" data-bind="click: handleSelect" style="cursor: default">
-          <div data-bind="css: {hueCheckbox: true, 'icon-ok': selected}"></div>
-        </td>
-        <td data-bind="click: $root.confirmViewScript">
-          <strong><a href="#" data-bind="click: $root.confirmViewScript, text: name"></a></strong>
-        </td>
-        <td data-bind="click: $root.confirmViewScript">
-          <span data-bind="text: scriptSumup"></span>
-        </td>
-      </tr>
-    </script>
+      <table class="table table-striped table-condensed tablescroller-disable" data-bind="visible: scripts().length > 0">
+        <thead>
+        <tr>
+          <th width="1%"><div data-bind="click: selectAll, css: {hueCheckbox: true, 'icon-ok': allSelected}"></div></th>
+          <th width="20%">${_('Name')}</th>
+          <th width="79%">${_('Script')}</th>
+        </tr>
+        </thead>
+        <tbody id="scriptTable" data-bind="template: {name: 'scriptTemplate', foreach: filteredScripts}">
+
+        </tbody>
+        <tfoot>
+        <tr data-bind="visible: isLoading()">
+          <td colspan="3" class="left">
+            <img src="/static/art/spinner.gif" />
+          </td>
+        </tr>
+        <tr data-bind="visible: filteredScripts().length == 0 && !isLoading()">
+          <td colspan="3">
+            <div class="alert">
+                ${_('There are no scripts matching the search criteria.')}
+            </div>
+          </td>
+        </tr>
+        </tfoot>
+      </table>
+
+      <script id="scriptTemplate" type="text/html">
+        <tr style="cursor: pointer" data-bind="event: { mouseover: toggleHover, mouseout: toggleHover}">
+          <td class="center" data-bind="click: handleSelect" style="cursor: default">
+            <div data-bind="css: {hueCheckbox: true, 'icon-ok': selected}"></div>
+          </td>
+          <td data-bind="click: $root.confirmViewScript">
+            <strong><a href="#" data-bind="click: $root.confirmViewScript, text: name"></a></strong>
+          </td>
+          <td data-bind="click: $root.confirmViewScript">
+            <span data-bind="text: scriptSumup"></span>
+          </td>
+        </tr>
+      </script>
+    </div>
   </div>
 
   <div id="editor" class="row-fluid mainSection hide">
     <div class="span2">
-      <div class="well sidebar-nav">
+      <div class="sidebar-nav">
           <ul class="nav nav-list">
             <li class="nav-header">${_('Editor')}</li>
             <li data-bind="click: editScript" class="active" data-section="edit">
@@ -148,8 +150,9 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
               </a>
             </li>
             <li>
-            <br/>
-            <i class="icon-question-sign" id="help"></i>
+            <a href="#" id="help">
+              <i class="icon-question-sign"></i>
+            </a>
             <div id="help-content" class="hide">
               <ul style="text-align: left;">
                 <li>${ _("Press CTRL + Space to autocomplete") }</li>
@@ -166,6 +169,8 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
         <div class="ribbon">${ _('Unsaved') }</div>
       </div>
 
+      <div class="card">
+
       <div id="edit" class="section">
         <div class="alert alert-info">
           <a class="mainAction" href="#" title="${ _('Run this script') }" data-bind="click: runOrShowSubmissionModal, visible: !currentScript().isRunning()"><i class="icon-play"></i></a>
@@ -371,20 +376,16 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
           <pre id="withoutLogs">${ _('No available logs.') } <img src="/static/art/spinner.gif"/></pre>
           <pre id="withLogs" class="hide scroll"></pre>
         </div>
-
+      </div>
       </div>
   </div>
 
   <div id="dashboard" class="row-fluid mainSection hide">
 
-    <div class="widget-box">
-      <div class="widget-title">
-        <span class="icon">
-          <i class="icon-cogs"></i>
-        </span>
-        <h5>${ _('Running') }</h5>
-      </div>
-      <div class="widget-content">
+    <div class="card card-home">
+      <h2 class="card-heading simple">${ _('Running') }</h2>
+      <div class="card-body">
+        <p>
         <div class="alert alert-info" data-bind="visible: runningScripts().length == 0" style="margin-bottom:0">
           ${_('There are currently no running scripts.')}
         </div>
@@ -401,17 +402,14 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
 
           </tbody>
         </table>
+        </p>
       </div>
     </div>
 
-    <div class="widget-box">
-      <div class="widget-title">
-        <span class="icon">
-          <i class="icon-th-list"></i>
-        </span>
-        <h5>${ _('Completed') }</h5>
-      </div>
-      <div class="widget-content">
+    <div class="card card-home">
+      <h2 class="card-heading simple">${ _('Completed') }</h2>
+      <div class="card-body">
+        <p>
         <div class="alert alert-info" data-bind="visible: completedScripts().length == 0">
           ${_('There are currently no completed scripts.')}
         </div>
@@ -427,6 +425,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
 
           </tbody>
         </table>
+        </p>
       </div>
     </div>
 

+ 2 - 2
desktop/core/static/css/hue3.css

@@ -431,9 +431,9 @@ ul.errorlist li {
   height: 88px;
   overflow: hidden;
   position: fixed;
-  top: 74px;
+  top: 50px;
   right: -3px;
-  z-index: 1001;
+  z-index: 10001;
 }
 
 .ribbon {

+ 0 - 50
desktop/core/static/ext/css/bootplus.css

@@ -6488,56 +6488,6 @@ input.search-query {
   color: #737373;
 }
 
-.label-important,
-.badge-important {
-  background-color: #f2dede;
-}
-
-.label-important[href],
-.badge-important[href] {
-  background-color: #e4b9b9;
-}
-
-.label-warning,
-.badge-warning {
-  background-color: #f89406;
-}
-
-.label-warning[href],
-.badge-warning[href] {
-  background-color: #c67605;
-}
-
-.label-success,
-.badge-success {
-  background-color: #dff0d8;
-}
-
-.label-success[href],
-.badge-success[href] {
-  background-color: #c1e2b3;
-}
-
-.label-info,
-.badge-info {
-  background-color: #d9edf7;
-}
-
-.label-info[href],
-.badge-info[href] {
-  background-color: #afd9ee;
-}
-
-.label-inverse,
-.badge-inverse {
-  background-color: #444444;
-}
-
-.label-inverse[href],
-.badge-inverse[href] {
-  background-color: #2b2b2b;
-}
-
 .progress {
   height: 10px;
   padding: 1px;

+ 1 - 1
tools/bootplus/less/bootplus/bootplus.less

@@ -83,7 +83,7 @@
 @import "popovers.less";
 
 @import "media.less";
-@import "labels-badges.less";
+//@import "labels-badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 

+ 5 - 5
tools/bootplus/less/bootplus/labels-badges.less

@@ -5,16 +5,16 @@
 .label,
 .badge {
    // Important (red)
-   &-important         { background-color: @errorBackground; }
+   &-important         { background-color: @errorBackground; color: @errorText; }
    &-important[href]   { background-color: darken(@errorBackground, 10%); }
    // Warnings (orange)
-   &-warning           { background-color: @orange; }
-   &-warning[href]     { background-color: darken(@orange, 10%); }
+   &-warning           { background-color: @warningBackground; color: @warningText; }
+   &-warning[href]     { background-color: darken(@warningBackground, 10%); }
    // Success (green)
-   &-success           { background-color: @successBackground; }
+   &-success           { background-color: @successBackground; color: @successText; }
    &-success[href]     { background-color: darken(@successBackground, 10%); }
    // Info (turquoise)
-   &-info              { background-color: @infoBackground; }
+   &-info              { background-color: @infoBackground; color: @infoText; }
    &-info[href]        { background-color: darken(@infoBackground, 10%); }
    // Inverse (black)
    &-inverse           { background-color: @grayDark; }