Эх сурвалжийг харах

HUE-2253 [fb] Simpler bottom bar

Implemented 'skipTo' method for pagination
Implmented updated navigation buttons and input to skip to a particular page
Moved styles from fb.css to display.css for display.mako specific files
Moved fb.css to listdir_components.css for listdir_components.mako specific styles
Paul McCaughtry 11 жил өмнө
parent
commit
61fff6b

+ 51 - 0
apps/filebrowser/src/filebrowser/static/css/display.css

@@ -0,0 +1,51 @@
+#fileArea {
+  overflow: auto;
+  background-color: #F5F5F5;
+  position: relative;
+}
+
+#fileArea.loading {
+  opacity: .7;
+}
+
+#loader {
+  position: fixed;
+  margin-top: 40px;
+  font-size: 50px;
+  text-align: center;
+  width: 140px;
+  height: 140px;
+  line-height: 140px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+
+.binary {
+  font-family: "Courier New", Courier, monospace;
+}
+
+pre {
+  border: none;
+}
+
+pre a {
+  color: #444;
+  cursor: default;
+}
+
+pre a:hover {
+  color: #444;
+  text-decoration: none;
+}
+
+.pagination-input-form {
+  position: relative;
+  right: 1em;
+  top: -10px;
+}
+
+.pagination-input {
+  text-align: center;
+  width: 40px;
+}

+ 45 - 42
apps/filebrowser/src/filebrowser/static/css/fb.css → apps/filebrowser/src/filebrowser/static/css/listdir_components.css

@@ -1,44 +1,3 @@
-#fileArea {
-  overflow: auto;
-  background-color: #F5F5F5;
-  position: relative;
-}
-
-#fileArea.loading {
-  opacity: .7;
-}
-
-#loader {
-  position: fixed;
-  margin-top: 40px;
-  font-size: 50px;
-  text-align: center;
-  width: 140px;
-  height: 140px;
-  line-height: 140px;
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
-}
-
-.binary {
-  font-family: "Courier New", Courier, monospace;
-}
-
-pre {
-  border: none;
-}
-
-pre a {
-  color: #444;
-  cursor: default;
-}
-
-pre a:hover {
-  color: #444;
-  text-decoration: none;
-}
-
 .fixed {
   position: fixed;
   top: 40px;
@@ -74,10 +33,38 @@ pre a:hover {
   top: -10px;
 }
 
+.pagination {
+  background-color: #f5f5f5;
+  border-top: 1px solid #e3e3e3;
+  bottom: 0;
+  -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  left: 0;
+  margin: 0;
+  padding: 0px;
+  position: fixed;
+  width: 100%;
+}
+
+.pagination {
+  background-color: #f5f5f5;
+  border-top: 1px solid #e3e3e3;
+  bottom: 0;
+  -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  left: 0;
+  margin: 0;
+  padding: 0px;
+  position: fixed;
+  width: 100%;
+}
+
 .pagination p {
   padding-top: 10px;
   padding-left: 10px;
-  margin: 0;
+  margin: 0 .5em;
 }
 
 .pagination select {
@@ -89,6 +76,22 @@ pre a:hover {
   margin-right: 20px;
 }
 
+.pagination-input-form {
+  position: relative;
+  right: 1em;
+  top: 5px;
+}
+
+.pagination-input {
+  text-align: center;
+  width: 40px;
+}
+
+.flush-right {
+  position: relative;
+  right: -3em;
+}
+
 .actionbar {
   padding-top: 6px;
   background-color: #FFFFFF;

+ 5 - 6
apps/filebrowser/src/filebrowser/templates/display.mako

@@ -31,8 +31,7 @@
 ${ commonheader(_('%(filename)s - File Viewer') % dict(filename=truncate(filename)), 'filebrowser', user) | n,unicode }
 ${ fb_components.menubar() }
 
-<link rel="stylesheet" type="text/css" href="/filebrowser/static/css/fb.css">
-
+<link href="/filebrowser/static/css/display.css" rel="stylesheet" />
 <div class="container-fluid">
   <div class="row-fluid">
     <div class="span2">
@@ -41,12 +40,12 @@ ${ fb_components.menubar() }
     <div class="span10">
       <div class="card card-small" style="margin-bottom: 5px">
         % if not view['compression'] or view['compression'] in ("none", "avro"):
-          <div class="pull-right">
-            <div class="form-inline inline">
+          <div class="pull-right" style="margin-right: 20px; margin-top: 14px;">
+            <div class="form-inline pagination-input-form inline">
               <span>${_('Page')}</span>
-              <input type="text" data-bind="value: page, valueUpdate: 'afterkeydown', event: { change: pageChanged }" style="width: 40px; text-align: center"/>
+              <input type="text" data-bind="value: page, valueUpdate: 'afterkeydown', event: { change: pageChanged }" class="pagination-input" />
               <span data-bind="visible: totalPages() > MAX_PAGES_TO_ENABLE_SCROLLING || viewModel.mode() == 'binary'">
-              to <input type="text" data-bind="value: upperPage, valueUpdate: 'afterkeydown', event: { change: upperPageChanged }" style="width: 40px; text-align: center"/></span>
+              to <input type="text" data-bind="value: upperPage, valueUpdate: 'afterkeydown', event: { change: upperPageChanged }" class="pagination-input"/></span>
               of <span data-bind="text: totalPages"></span>
             </div>
             <div class="pagination inline">

+ 40 - 16
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -35,7 +35,7 @@ from django.utils.translation import ugettext as _
 
 <%def name="_table(files, path, current_request_path, view)">
 
-  <link href="/filebrowser/static/css/fb.css" rel="stylesheet" type="text/css">
+  <link href="/filebrowser/static/css/listdir_components.css" rel="stylesheet" type="text/css">
   <table class="table table-condensed datatables tablescroller-disable">
     <thead>
       <tr>
@@ -66,22 +66,34 @@ from django.utils.translation import ugettext as _
     </tfoot>
   </table>
 
-  <div class="pagination" data-bind="visible: !isLoading()">
-    <ul class="pull-right">
-      <!-- ko if: page().number > 1 -->
-      <li class="prev"><a href="#" data-bind="click: firstPage" title="${_('Beginning of List')}">&larr; ${_('Beginning of List')}</a></li>
-      <li><a href="#" data-bind="click: previousPage" title="${_('Previous Page')}">${_('Previous Page')}</a></li>
-      <!-- /ko -->
-      <!-- ko if: page().number < page().num_pages -->
-      <li><a href="#" data-bind="click: nextPage" title="${_('Next page')}">${_('Next Page')}</a></li>
-      <li class="next"><a href="#" data-bind="click: lastPage" title="${_('End of List')}">${_('End of List')} &rarr;</a></li>
-      <!-- /ko -->
-    </ul>
+  <div class="pagination">
+    <div class="pull-right flush-right">
+        <div class="form-inline pagination-input-form inline">
+          <span>${_('Page')}</span>
+          <input type="text" data-bind="value: page().number, valueUpdate: 'afterkeydown', event: { change: skipTo }" class="pagination-input" />
+          <input type="hidden" id="current_page" data-bind="value: page().number" />
+          of <span data-bind="text: page().num_pages"></span>
+        </div>
+
+        <ul class="inline">
+          <li class="first-page prev" data-bind="css: { 'disabled': page().number === page().start_index }">
+            <a href="javascript:void(0);" data-bind="click: firstPage" title="${_('First page')}"><i class="fa fa-fast-backward"></i></a>
+          </li>
+          <li class="previous-page" data-bind="css: { 'disabled': page().number === page().start_index }">
+            <a href="javascript:void(0);" data-bind="click: previousPage" title="${_('Previous page')}"><i class="fa fa-backward"></i></a>
+          </li>
+          <li class="next-page" data-bind="css: { 'disabled': page().number === page().num_pages }">
+            <a href="javascript:void(0);" data-bind="click: nextPage" title="${_('Next page')}"><i class="fa fa-forward"></i></a>
+          </li>
+          <li class="last-page next" data-bind="css: { 'disabled': page().number === page().num_pages }">
+            <a href="javascript:void(0);" data-bind="click: lastPage" title="${_('Last page')}"><i class="fa fa-fast-forward"></i></a>
+          </li>
+        </ul>
+    </div>
+
     <p>${_('Show')}
       <select class="input-mini" data-bind="options: recordsPerPageChoices, value: recordsPerPage"></select>
-      ${_('items per page')}.
-      ${_('Showing')} <span data-bind="text: page().start_index"></span> ${_('to')} <span data-bind="text: page().end_index"></span> ${_('of')} <span data-bind="text: page().total_count"></span> ${_('items, page')}
-      <span data-bind="text: page().number"></span> ${_('of')} <span data-bind="text: page().num_pages"></span>.
+      ${_('of')} <span data-bind="text: page().total_count"></span> ${_('items')}.
     </p>
   </div>
 
@@ -552,7 +564,7 @@ from django.utils.translation import ugettext as _
       }
 
       self.page = ko.observable(new Page(page));
-      self.recordsPerPageChoices = ["15", "30", "45", "60", "100", "200"],
+      self.recordsPerPageChoices = ["15", "30", "45", "60", "100", "200", "1000"],
       self.recordsPerPage = ko.observable($.cookie("hueFilebrowserRecordsPerPage"));
       self.targetPageNum = ko.observable(1);
       self.targetPath = ko.observable("${current_request_path}");
@@ -701,6 +713,18 @@ from django.utils.translation import ugettext as _
         self.retrieveData();
       });
 
+      self.skipTo = function () {
+        var doc = document,
+          old_page = doc.querySelector('#current_page').value,
+          page = doc.querySelector('.pagination-input');
+
+        if (! isNaN(page.value) && (page.value > 0 && page.value <= self.page().num_pages)) {
+          self.goToPage(page.value);
+        } else {
+          page.value = old_page;
+        }
+      };
+
       self.goToPage = function (pageNumber) {
         self.targetPageNum(pageNumber);
         if (location.hash.indexOf("!!") > -1){