Răsfoiți Sursa

[home2] Style the file browser component and the home2 page

Johan Ahlen 10 ani în urmă
părinte
comite
db6fa9f6af

+ 160 - 5
desktop/core/src/desktop/templates/file_browser.mako

@@ -24,10 +24,163 @@ from desktop.views import _ko
 <%def name="fileBrowser()">
   <style>
 
+    .fb-container {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .fb-action-bar,
+    .fb-header {
+      flex: 0 0 auto;
+
+      overflow: hidden;
+      padding: 2px;
+      clear: both;
+    }
+
+    .fb-header {
+      border-bottom: 1px solid #f1f1f1;
+      letter-spacing: 0.035em;
+      font-size: 15px;
+      color: #737373;
+    }
+
+    .fb-list {
+      flex: 1 1 auto;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .fb-breadcrumb {
+      display: inline-block;
+    }
+
+    .fb-folder-actions {
+      display: inline-block;
+      float: right;
+      font-size: 25px;
+      margin-right: 10px;
+    }
+
+    .fb-list ul {
+      list-style: none;
+      padding: 4px 0;
+      margin: 0;
+    }
+
+    .fb-list li {
+      clear: both;
+      height: 35px;
+      line-height: 35px;
+      padding: 2px;
+      margin: 0;
+      color: #444;
+      font-size: 13px;
+    }
+
+    .fb-list i {
+      color: #666;
+      font-size: 20px;
+      margin-right: 8px;
+      font-weight: lighter;
+    }
+
+    .fb-action {
+      width: 25px;
+      height: 40px;
+      line-height: 40px;
+      margin-left:5px;
+    }
+
+    .fb-primary-col {
+      float: left;
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      vertical-align: middle;
+      padding-left: 8px;
+      text-overflow: ellipsis;
+    }
+
+    .fb-attr-group {
+      float: right;
+      display: inline-block;
+      height: 30px;
+    }
+
+    .fb-attr-col {
+      display: inline-block;;
+      height: 30px;
+      line-height: 30px;
+      vertical-align: middle;
+    }
+
+    .fb-owner {
+      width: 170px;
+    }
+
+    .fb-modified {
+      width: 150px;
+    }
+
+    .hueBreadcrumbBar a {
+      color: #338BB8 !important;
+      display: inline !important;
+    }
+
+    .divider {
+      color: #CCC;
+    }
   </style>
 
-  <script type="text/html" id="file-browser-template">
-    Hello
+  <script type="text/html" id="fb-template">
+    <div class="fb-container">
+      <div class="fb-action-bar">
+        <h4>
+          <div class="fb-breadcrumb">
+              <ul class="nav nav-pills hueBreadcrumbBar">
+                <li><a href="javascript:void(0);">Documents</a><span class="divider">&gt;</span></li>
+                <li><a href="javascript:void(0);">Test folder</a></li>
+              </ul>
+          </div>
+          <div class="fb-folder-actions">
+            <a class="inactive-action" href="javascript:void(0);"><span class="fa-stack fa-fw fb-action"><i class="fa fa-file-o fa-stack-1x"></i><i class="fa fa-plus-circle fa-stack-1x" style="font-size: 14px; margin-left: 6px; margin-top: 6px;"></i></span></a>
+            <a class="inactive-action" href="javascript:void(0);"><span class="fa-stack fa-fw fb-action"><i class="fa fa-folder-o fa-stack-1x" ></i><i class="fa fa-plus-circle fa-stack-1x" style="font-size: 14px; margin-left: 7px; margin-top: 3px;"></i></span></a>
+            <a class="inactive-action" href="javascript:void(0);"><i class="fa fa-fw fa-times fb-action"></i></a>
+            <a class="inactive-action" href="javascript:void(0);"><i class="fa fa-fw fa-users fb-action"></i></a>
+            <a class="inactive-action" href="javascript:void(0);"><i class="fa fa-fw fa-download fb-action"></i></a>
+            <a class="inactive-action" href="javascript:void(0);"><i class="fa fa-fw fa-upload fb-action"></i></a>
+          </div>
+        </h4>
+      </div>
+      <div class="fb-header">
+        <div class="fb-primary-col">Name</div>
+        <div class="fb-attr-group">
+          <div class="fb-attr-col fb-owner">
+            Owner
+          </div>
+          <div class="fb-attr-col fb-modified">
+            Last Modified
+          </div>
+        </div>
+      </div>
+      <div class="fb-list">
+        <ul>
+          <li>
+            <div class="fb-primary-col"><i class="fa fa-file-o fa-fw"></i> Filename</div>
+            <div class="fb-attr-group">
+              <div class="fb-attr-col fb-owner">me</div>
+              <div class="fb-attr-col fb-modified">2015-10-11</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
   </script>
 
   <script type="text/javascript" charset="utf-8">
@@ -42,16 +195,18 @@ from desktop.views import _ko
     }(function (ko) {
 
       /**
-       * @param {Object} options
+       * @param {Object} params
+       * @param {HueDirectory} params.currentDirectory - Observable holding the current directory
        * @constructor
        */
-      function FileBrowser (options) {
+      function FileBrowser (params) {
         var self = this;
+        self.currentDirectory = params.currentDirectory;
       }
 
       ko.components.register('file-browser', {
         viewModel: FileBrowser,
-        template: { element: 'file-browser-template' }
+        template: { element: 'fb-template' }
       });
     }));
   </script>

+ 76 - 67
desktop/core/src/desktop/templates/home2.mako

@@ -130,6 +130,14 @@ ${ fileBrowser.fileBrowser() }
     margin-right: 2px;
     color: #338bb8;
   }
+
+  .home-container {
+    height: 100%;
+  }
+  .file-browser {
+    position: ;
+  }
+
 </style>
 
 <div class="navbar navbar-inverse navbar-fixed-top nokids">
@@ -171,75 +179,76 @@ ${ fileBrowser.fileBrowser() }
           <i class="fa fa-chevron-left"></i>
         </a>
         <div class="assist" data-bind="component: {
-        name: 'assist-panel',
-        params: {
-          sourceTypes: [{
-            name: 'hive',
-            type: 'hive'
-          }],
-          user: '${user.username}',
-          navigationSettings: {
-            openItem: true,
-            showPreview: true,
-            showStats: false
-          },
-          visibleAssistPanels: ['sql']
-        }
-      }"></div>
+          name: 'assist-panel',
+          params: {
+            sourceTypes: [{
+              name: 'hive',
+              type: 'hive'
+            }],
+            user: '${user.username}',
+            navigationSettings: {
+              openItem: true,
+              showPreview: true,
+              showStats: false
+            },
+            visibleAssistPanels: ['sql']
+          }
+        }"></div>
       </div>
       <div class="resizer" data-bind="visible: $root.isLeftPanelVisible, splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }" style="display:none;"><div class="resize-bar">&nbsp;</div></div>
-      <div class="right-panel" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '20px' : '0' }">
-        <input id="searchInput" type="text" placeholder="${ _('Search for name, description, etc...') }" class="input-xlarge search-query" style="margin-left: 20px;margin-top: 5px">
-        <div class="dropdown" style="float: right;">
-          <a href="#" data-toggle="dropdown"><i class="fa fa-plus-circle"></i> ${_('New document')}</a>
-          <ul class="dropdown-menu" role="menu">
-            % if 'beeswax' in apps:
-              <li><a href="${ url('beeswax:index') }"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive Query')}</a></li>
-            % endif
-            % if 'impala' in apps:
-              <li><a href="${ url('impala:index') }"><img src="${ static(apps['impala'].icon_path) }" class="app-icon"/> ${_('Impala Query')}</a></li>
-            % endif
-            % if 'pig' in apps:
-              <li><a href="${ url('pig:index') }"><img src="${ static(apps['pig'].icon_path) }" class="app-icon"/> ${_('Pig Script')}</a></li>
-            % endif
-            % if 'spark' in apps:
-              <li><a href="${ url('notebook:index') }"><img src="${ static(apps['spark'].icon_path) }" class="app-icon"/> ${_('Spark Job')}</a></li>
-            % endif
-            % if 'oozie' in apps:
-              <li class="dropdown-submenu">
-                <a href="#"><img src="${ static(apps['oozie'].icon_path) }" class="app-icon"/> ${_('Oozie Scheduler')}</a>
-                <ul class="dropdown-menu">
-                  <li><a href="${ url('oozie:new_workflow') }"><img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon"/> ${_('Workflow')}</a></li>
-                  <li><a href="${ url('oozie:new_coordinator') }"><img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon"/> ${_('Coordinator')}</a></li>
-                  <li><a href="${ url('oozie:new_bundle') }"><img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon"/> ${_('Bundle')}</a></li>
-                </ul>
-              </li>
-            % endif
-          </ul>
-        </div>
-        <h2 class="card-heading simple">${_('My Documents')}</h2>
-        <br/>
-        <input data-bind="value: mkdirFormPath" placeholder="dir name, e.g. projects" />
-        <a href="javascript:void(0);" class="btn" data-bind="click: mkdir"><i class="fa fa-plus-circle"></i> ${ _('Create Directory') }</a>
-
-        <input data-bind="value: deleteFormPath" placeholder="doc id, e.g. 50491" />
-        <a href="javascript:void(0);" class="btn" data-bind="click: deleteDocument"><i class="fa fa-times"></i> ${ _('Delete') }</a>
-
-        <input data-bind="value: shareFormDocId" placeholder="doc id, e.g. 50491" />
-        <a class="share-link btn" rel="tooltip" data-placement="bottom" style="margin-left:20px" data-bind="click: function(e){ prepareShareModal(e) },
-          attr: {'data-original-title': '${ _ko("Share") } ' + name}">
-          <i class="fa fa-users"></i> ${ _('Share') }
-        </a>
-
-        <input data-bind="value: exportFormDocIds" placeholder="doc id, e.g. 50491,50492" />
-        <a class="share-link btn" data-bind="click: exportDocuments">
-          <i class="fa fa-download"></i> ${ _('Export') }
-        </a>
-
-        <a data-bind="click: function() { $('#import-documents').modal('show'); }" class="btn">
-          <i class="fa fa-upload"></i> ${ _('Import') }
-        </a>
-
+      <div class="right-panel home-container" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '8px' : '0' }">
+##         <div class="home-header">
+##           <input id="searchInput" type="text" placeholder="${ _('Search for name, description, etc...') }" class="input-xlarge search-query" style="margin-left: 20px;margin-top: 5px">
+##           <div class="dropdown" style="float: right;">
+##             <a href="#" data-toggle="dropdown"><i class="fa fa-plus-circle"></i> ${_('New document')}</a>
+##             <ul class="dropdown-menu" role="menu">
+##               % if 'beeswax' in apps:
+##                 <li><a href="${ url('beeswax:index') }"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive Query')}</a></li>
+##               % endif
+##               % if 'impala' in apps:
+##                 <li><a href="${ url('impala:index') }"><img src="${ static(apps['impala'].icon_path) }" class="app-icon"/> ${_('Impala Query')}</a></li>
+##               % endif
+##               % if 'pig' in apps:
+##                 <li><a href="${ url('pig:index') }"><img src="${ static(apps['pig'].icon_path) }" class="app-icon"/> ${_('Pig Script')}</a></li>
+##               % endif
+##               % if 'spark' in apps:
+##                 <li><a href="${ url('notebook:index') }"><img src="${ static(apps['spark'].icon_path) }" class="app-icon"/> ${_('Spark Job')}</a></li>
+##               % endif
+##               % if 'oozie' in apps:
+##                 <li class="dropdown-submenu">
+##                   <a href="#"><img src="${ static(apps['oozie'].icon_path) }" class="app-icon"/> ${_('Oozie Scheduler')}</a>
+##                   <ul class="dropdown-menu">
+##                     <li><a href="${ url('oozie:new_workflow') }"><img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon"/> ${_('Workflow')}</a></li>
+##                     <li><a href="${ url('oozie:new_coordinator') }"><img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon"/> ${_('Coordinator')}</a></li>
+##                     <li><a href="${ url('oozie:new_bundle') }"><img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon"/> ${_('Bundle')}</a></li>
+##                   </ul>
+##                 </li>
+##               % endif
+##             </ul>
+##           </div>
+##           <h2 class="card-heading simple">${_('My Documents')}</h2>
+##           <br/>
+##           <input data-bind="value: mkdirFormPath" placeholder="dir name, e.g. projects" />
+##           <a href="javascript:void(0);" class="btn" data-bind="click: mkdir"><i class="fa fa-plus-circle"></i> ${ _('Create Directory') }</a>
+##
+##           <input data-bind="value: deleteFormPath" placeholder="doc id, e.g. 50491" />
+##           <a href="javascript:void(0);" class="btn" data-bind="click: deleteDocument"><i class="fa fa-times"></i> ${ _('Delete') }</a>
+##
+##           <input data-bind="value: shareFormDocId" placeholder="doc id, e.g. 50491" />
+##           <a class="share-link btn" rel="tooltip" data-placement="bottom" style="margin-left:20px" data-bind="click: function(e){ prepareShareModal(e) },
+##             attr: {'data-original-title': '${ _ko("Share") } ' + name}">
+##             <i class="fa fa-users"></i> ${ _('Share') }
+##           </a>
+##
+##           <input data-bind="value: exportFormDocIds" placeholder="doc id, e.g. 50491,50492" />
+##           <a class="share-link btn" data-bind="click: exportDocuments">
+##             <i class="fa fa-download"></i> ${ _('Export') }
+##           </a>
+##
+##           <a data-bind="click: function() { $('#import-documents').modal('show'); }" class="btn">
+##             <i class="fa fa-upload"></i> ${ _('Import') }
+##           </a>
+##         </div>
         <div class="file-browser" data-bind="component: {
           name: 'file-browser',
           params: {