[mobile] added 'updateDirOpBarUI'

media/css/seahub.css

@@ -3257,7 +3257,7 @@ button.sf-dropdown-toggle:focus {
 /* multi repo operation */
 .repo-op .op-link {
     display:inline-block;
-    height:30px;
+    height:29px;
     margin-right:15px;
     color:#8a8a8a;
     font-size:22px;
@@ -3267,9 +3267,6 @@ button.sf-dropdown-toggle:focus {
     text-decoration:none;
 }
 /* multi dirents operation */
-#multi-dirents-op {
-    margin-left:5px;
-}
 #multi-dirents-op .op-btn {
     margin:0;
 }
@@ -3590,11 +3587,37 @@ img.thumbnail {
     font-size:12px;
     color:#888;
 }
-/****** grid view *****/
 /* view mode */
-.switch-mode {
+@media (max-width:499px) {
+    .repo-op-misc {
+        display:block;
+        margin:5px 0 0 0;
+    }
+    .switch-mode {
+        vertical-align:middle;
+    }
+    .trash-history {
+        display:inline-block;
+        margin-left:30px;
+        vertical-align:middle;
+    }
+}
+@media (min-width:500px) {
+    .repo-op-misc {
         display:inline-block;
         margin-left:12px;
+        overflow:hidden;
+        vertical-align:middle;
+    }
+    .trash-history {
+        float:right;
+    }
+}
+.trash-history {
+    height:29px;
+}
+.switch-mode {
+    display:inline-block;
 }
 .grid-view-icon-btn,
 .list-view-icon-btn {

seahub/templates/js/templates.html

@@ -244,22 +244,24 @@
     <% } %>
     </div><!-- div#cur-dir-ops ends here -->
 
-    <div class="switch-mode vam">
+    <div class="repo-op-misc">
+        <div class="switch-mode">
             <button class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button><button class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button>
         </div>
 
+        <div class="trash-history">
         <% if (path == '/') { %>
-        <div class="fright">
             <% if (user_perm == 'rw') { %>
             <a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a>
             <% } %>
             <a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a>
-        </div>
         <% } else { %>
             <% if (user_perm == 'rw') { %>
-        <a class="op-link sf2-icon-trash fright" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
+            <a class="op-link sf2-icon-trash" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
             <% } %>
         <% } %>
+        </div>
+    </div>
 </script>
 <script type="text/template" id="dir-path-bar-tmpl">
     <% if (context == 'group') { %>

static/scripts/app/views/dir.js

@@ -76,13 +76,16 @@ define([
                 this.render();
 
 
-                // scroll window: get 'more', fix 'op bar'
                 var _this = this;
+                // scroll window: get 'more', fix 'op bar'
                 $(window).scroll(function() {
                     if ($(_this.el).is(':visible')) {
                         _this.onWindowScroll();
                     }
                 });
+                $(window).resize(function() {
+                    _this.updateDirOpBarUI();
+                });
 
                 // hide 'rename form'
                 $(document).click(function(e) {
@@ -172,6 +175,9 @@ define([
 
                 this.$el_con.show();
 
+                this.setFileInput();
+                this.updateDirOpBarUI(); // should be after `setFileInput()`
+
                 // there may be a 'style' added via 'onWindowScroll()' when visiting last dir
                 this.$('.js-dir-content').removeAttr('style');
 
@@ -200,11 +206,20 @@ define([
                 this.dir.limit = 100;
                 this.render_dirents_slice(this.dir.last_start, this.dir.limit);
 
-                this.setFileInput();
-
                 this.getImageThumbnail();
             },
 
+            updateDirOpBarUI: function() {
+                var width;
+                if ($(window).width() > 500) {
+                    width = this.$('.repo-op').width() - parseInt(this.$('.repo-op-misc').css('margin-left')) - 5;
+                    width -= $('#multi-dirents-op').is(':visible') ? $('#multi-dirents-op').width() : $('#cur-dir-ops').width();
+                    this.$('.repo-op-misc').css({'width': width});
+                } else {
+                    this.$('.repo-op-misc').removeAttr('style');
+                }
+            },
+
             updateMagnificPopupOptions: function() {
                 var imgs = this.dir.where({is_img: true});
                 var items = [];
@@ -451,6 +466,7 @@ define([
                 })))
                 .removeAttr('style'); // there may be a 'style' added via 'onWindowScroll()' when visiting last dir
 
+
                 if (dir.user_perm == 'rw') {
                     // add new folder/file
                     this.new_dropdown = new DropdownView({
@@ -848,6 +864,8 @@ define([
                     $dirents_op.hide();
                     $curDirOps.show();
                 }
+
+                this.updateDirOpBarUI();
             },
 
             download: function () {

static/scripts/app/views/dirent.js

@@ -134,6 +134,7 @@ define([
                 $dirents_op.hide();
                 $curDirOps.show();
             }
+            dirView.updateDirOpBarUI();
             if (checked_num == dirView.$('tr:gt(0)').length) {
                 $toggle_all_checkbox.prop('checked', true);
             } else {