فهرست منبع

HUE-5354 [fb] Edit file shouldn't refresh the page

Enrico Berti 9 سال پیش
والد
کامیت
d75ad26

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

@@ -1,3 +1,12 @@
+#fileviewer .card-body {
+  padding: 0;
+  margin: 0;
+}
+
+#fileviewer .hueBreadcrumbBar {
+  margin: 0;
+}
+
 #fileArea {
   overflow: auto;
   background-color: #F5F5F5;

+ 46 - 13
apps/filebrowser/src/filebrowser/templates/display.mako

@@ -25,6 +25,7 @@
   path_enc = path
   dirname_enc = urlencode(view['dirname'])
   base_url = url('filebrowser.views.view', path=path_enc)
+  edit_url = url('filebrowser.views.edit', path=path_enc)
 %>
 <%namespace name="fb_components" file="fb_components.mako" />
 
@@ -63,18 +64,20 @@ ${ fb_components.menubar() }
             <!-- /ko -->
 
             <!-- ko if: $root.file().view.compression() && $root.file().view.compression() === "none" && $root.file().editable -->
-              <li><a href="${url('filebrowser.views.edit', path=path_enc)}"><i class="fa fa-pencil"></i> ${_('Edit file')}</a></li>
+              <li><a class="pointer" data-bind="click: $root.editFile"><i class="fa fa-pencil"></i> ${_('Edit file')}</a></li>
             <!-- /ko -->
           <!-- /ko -->
           <!-- ko ifnot: $root.isViewing -->
-            <li><a href="${url('filebrowser.views.view', path=path_enc)}"><i class="fa fa-eye"></i> ${_('View file')}</a></li>
+            <li><a class="pointer" data-bind="click: $root.viewFile"><i class="fa fa-eye"></i> ${_('View file')}</a></li>
           <!-- /ko -->
 
+          <!-- ko if: $root.isViewing -->
           <!-- ko if: $root.file().show_download_button -->
            <li><a href="${url('filebrowser.views.download', path=path_enc)}"><i class="fa fa-download"></i> ${_('Download')}</a></li>
           <!-- /ko -->
            <li><a href="${url('filebrowser.views.view', path=dirname_enc)}"><i class="fa fa-file-text"></i> ${_('View file location')}</a></li>
            <li><a class="pointer" data-bind="click: changePage"><i class="fa fa-refresh"></i> ${_('Refresh')}</a></li>
+          <!-- /ko -->
 
            <!-- ko if: $root.file().stats -->
            <li class="white">
@@ -98,7 +101,7 @@ ${ fb_components.menubar() }
     </div>
     <div class="span10">
       <div class="card card-small" style="margin-bottom: 5px">
-        <!-- ko if: $root.file() && ($root.file().view.compression() === null || $root.file().view.compression() === "avro" || $root.file().view.compression() === "none") -->
+        <!-- ko if: $root.isViewing() && $root.file() && ($root.file().view.compression() === null || $root.file().view.compression() === "avro" || $root.file().view.compression() === "none") -->
           <div class="pull-right" style="margin-right: 20px; margin-top: 14px;">
             <div class="form-inline pagination-input-form inline">
               <span>${_('Page')}</span>
@@ -119,7 +122,7 @@ ${ fb_components.menubar() }
         % if breadcrumbs:
           ${fb_components.breadcrumbs(path, breadcrumbs)}
         %endif
-        <div class="card-body">
+        <div class="card-body" style="padding: 0">
             <!-- ko if: $root.file() && $root.file().stats.size() === 0 -->
             <div class="center empty-wrapper">
               <i class="fa fa-frown-o"></i>
@@ -137,19 +140,25 @@ ${ fb_components.menubar() }
                 <!-- /ko -->
               <!-- /ko -->
             <!-- /ko -->
+            <div id="loader" data-bind="visible: isLoading">
+              <!--[if !IE]><!--><i class="fa fa-spinner fa-spin"></i><!--<![endif]-->
+              <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }"/><![endif]-->
+            </div>
+            <!-- ko if: $root.isViewing -->
             <div id="fileArea" data-bind="css: {'loading': isLoading}">
-              <div id="loader" data-bind="visible: isLoading">
-                <!--[if !IE]><!--><i class="fa fa-spinner fa-spin"></i><!--<![endif]-->
-                <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }"/><![endif]-->
-              </div>
-                <pre></pre>
-                <table class="binary">
-                  <tbody>
-                  </tbody>
-                </table>
+              <pre></pre>
+              <table class="binary">
+                <tbody>
+                </tbody>
+              </table>
             </div>
+            <!-- /ko -->
+            <!-- ko if not: $root.isViewing -->
+            <div id="fileeditor"></div>
+            <!-- /ko -->
         </div>
       </div>
+
     </div>
   </div>
 </div>
@@ -327,6 +336,30 @@ ${ fb_components.menubar() }
       self.changePage();
     }
 
+    self.editFile = function() {
+      self.isViewing(false);
+      self.isLoading(true);
+      $.ajax({
+        url: '${ edit_url }' + '?is_embeddable=true',
+        beforeSend:function (xhr) {
+          xhr.setRequestHeader('X-Requested-With', 'Hue');
+        },
+        dataType:'html',
+        success:function (response) {
+          $('#fileeditor').html(response);
+          self.isLoading(false);
+        }
+      });
+    }
+
+    self.viewFile = function() {
+      $('#fileeditor').html('');
+      self.isViewing(true);
+      self.page(1);
+      self.upperPage(1);
+      self.changePage();
+    }
+
     self.toggleDisables = function () {
       $(".next-page").removeClass("disabled");
       $(".last-page").removeClass("disabled");

+ 6 - 1
apps/filebrowser/src/filebrowser/templates/edit.mako

@@ -30,14 +30,17 @@
 <%namespace name="edit" file="editor_components.mako" />
 <%namespace name="fb_components" file="fb_components.mako" />
 
+%if not is_embeddable:
 ${ commonheader(_('%(filename)s - File Viewer') % dict(filename=truncate(filename)), 'filebrowser', user, request) | n,unicode }
 ${ fb_components.menubar() }
+%endif
+
 
 <div class="container-fluid">
   <div class="row-fluid">
     <div class="span12">
       <div class="card card-small">
-      % if breadcrumbs:
+      % if breadcrumbs and not is_embeddable:
         ${fb_components.breadcrumbs(path, breadcrumbs)}
       %endif
         <div class="card-body">
@@ -183,4 +186,6 @@ ${ fb_components.menubar() }
     });
   </script>
 
+%if not is_embeddable:
 ${ commonfooter(request, messages) | n,unicode }
+%endif

+ 1 - 0
apps/filebrowser/src/filebrowser/views.py

@@ -263,6 +263,7 @@ def edit(request, path, form=None):
         filename=os.path.basename(path),
         dirname=os.path.dirname(path),
         breadcrumbs=parse_breadcrumbs(path),
+        is_embeddable=request.GET.get('is_embeddable', False),
         show_download_button=SHOW_DOWNLOAD_BUTTON.get())
     if request.META.get('HTTP_X_REQUESTED_WITH') != 'XMLHttpRequest':
         data['stats'] = stats;

+ 4 - 0
desktop/core/src/desktop/templates/responsive.mako

@@ -822,6 +822,10 @@ ${ assist.assistPanel() }
     $(".modal:visible").find("input:not(.disable-autofocus):visible:first").focus();
   });
 
+  function resetPrimaryButtonsStatus() {
+    $(".btn-primary:not(.disable-feedback), .btn-danger:not(.disable-feedback)").button("reset");
+  }
+
     %if collect_usage:
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-40351920-1']);