first : modify the editor to be resposed for pc and mobile;

second: change the editor menu style for different device;

static/scripts/app/views/dirent.js

@@ -80,7 +80,7 @@ define([
                 el: this.$('.sf-dropdown'),
                 right: '0'
             });
-
+            this.mobileMenu = this.$(".mobile-menu-container");
             // for image files
             this.$('.img-name-link').magnificPopup(this.dirView.magnificPopupOptions);
 
@@ -114,7 +114,10 @@ define([
             'click .unlock-file': 'unlockFile',
             'click .view-details': 'viewDetails',
             'click .file-comment': 'viewFileComments',
-            'click .open-via-client': 'open_via_client'
+            'click .open-via-client': 'open_via_client',
+            'click .mobile-menu-control': 'showMobileMenu',
+            'click .mobile-menu-mask': 'closeMobileMenu',
+            'click .download-close-menu': 'hideMobileMenu'
         },
 
         getSmartLink: function() {
@@ -358,6 +361,7 @@ define([
             if ($(window).width() < 768 &&
                 !this.model.get('is_img')) { // dir or non image file
                 location.href = this.$('.dirent-name a').attr('href');
+                return false;
             }
         },
 
@@ -367,6 +371,7 @@ define([
         },
 
         share: function() {
+            this.hideMobileMenu();
             var dir = this.dir,
                 obj_name = this.model.get('obj_name'),
                 dirent_path = Common.pathJoin([dir.path, obj_name]);
@@ -392,6 +397,7 @@ define([
         },
 
         del: function() {
+            this.hideMobileMenu();
             var _this = this;
             if (this.model.get('is_img')) {
                 var index = $('.img-name-link', this.dirView.$table).index(this.$('.img-name-link'));
@@ -418,6 +424,7 @@ define([
         },
 
         rename: function() {
+            this.hideMobileMenu();
             var _this = this;
             var dirent_name = this.model.get('obj_name');
 
@@ -532,6 +539,7 @@ define([
         },
 
         mvcp: function(e) {
+            this.hideMobileMenu();
             var op_type = $(e.currentTarget).hasClass('mv') ? 'mv' : 'cp';
             var options = {
                 'dir': this.dir,
@@ -552,6 +560,7 @@ define([
         },
 
         setFolderPerm: function() {
+            this.hideMobileMenu();
             var options = {
                 'obj_name': this.model.get('obj_name'),
                 'dir_path': this.dir.path,
@@ -567,6 +576,7 @@ define([
         },
 
         lockFile: function() {
+            this.hideMobileMenu();
             var _this = this;
             this._hideMenu();
             this.model.lockFile({
@@ -581,6 +591,7 @@ define([
         },
 
         unlockFile: function() {
+            this.hideMobileMenu();
             var _this = this;
             this._hideMenu();
             this.model.unlockFile({
@@ -595,6 +606,7 @@ define([
         },
 
         viewDetails: function() {
+            this.hideMobileMenu();
             if (this.dirView.fileCommentsView.$el.is(':visible')) {
                 this.dirView.fileCommentsView.hide();
             }
@@ -699,6 +711,7 @@ define([
         },
 
         viewFileComments: function() {
+            this.hideMobileMenu();
             if (this.dirView.direntDetailsView.$el.is(':visible')) {
                 this.dirView.direntDetailsView.hide();
             }
@@ -717,8 +730,29 @@ define([
         },
 
         open_via_client: function() {
+            this.hideMobileMenu();
             this._hideMenu();
             return true;
+        },
+
+        showMobileMenu : function(event) {
+            var mobileMenu = this.mobileMenu.length ? this.mobileMenu : null;
+            if(mobileMenu){
+                mobileMenu.slideDown('fast');
+            }
+            return false;
+        },
+
+        hideMobileMenu: function() {
+            var mobileMenu = this.mobileMenu.length ? this.mobileMenu : null;
+            if(mobileMenu){
+                mobileMenu.slideUp('fast');
+            }
+        },
+
+        closeMobileMenu: function(){
+            this.hideMobileMenu();
+            return false;
         }
 
     });

static/scripts/app/views/repo.js

@@ -36,7 +36,9 @@ define([
             'click .js-popup-share-link-admin': 'popupShareLinkAdmin',
             'click .js-popup-folder-perm-admin': 'popupFolderPermAdmin',
             'click .js-repo-details': 'viewDetails',
-            'click .js-add-label': 'addLabel'
+            'click .js-add-label': 'addLabel',
+            'click .mobile-menu-control': 'showMobileMenu',
+            'click .mobile-menu-mask': 'closeMobileMenu'
         },
 
         initialize: function(options) {
@@ -68,6 +70,7 @@ define([
             this.dropdown = new DropdownView($.extend({
                 el: this.$('.sf-dropdown')
             }, dropdownOptions));
+            this.mobileMenu = this.$(".mobile-menu-container");
             return this;
         },
 
@@ -86,6 +89,7 @@ define([
         },
 
         del: function() {
+            this.hideMobileMenu();
             var _this = this;
             var repo_name = this.model.get('name');
             var popupTitle = gettext("Delete Library");
@@ -115,6 +119,7 @@ define([
         },
 
         share: function() {
+            this.hideMobileMenu();
             var options = {
                 'is_repo_owner': true,
                 'is_virtual': this.model.get('virtual'),
@@ -134,6 +139,7 @@ define([
         },
 
         rename: function() {
+            this.hideMobileMenu();
             var repo_name = this.model.get('name');
 
             var form = $(this.renameTemplate({
@@ -227,6 +233,7 @@ define([
         },
 
         transfer: function() {
+            this.hideMobileMenu();
             var _this = this;
             this.togglePopup(); // Close the popup
 
@@ -291,6 +298,7 @@ define([
         },
 
         popupHistorySetting: function() {
+            this.hideMobileMenu();
             var options = {
                 'repo_name': this.model.get('name'),
                 'repo_id': this.model.get('id'),
@@ -302,6 +310,7 @@ define([
         },
 
         popupShareLinkAdmin: function() {
+            this.hideMobileMenu();
             var options = {
                 'repo_name': this.model.get('name'),
                 'repo_id': this.model.get('id')
@@ -312,6 +321,7 @@ define([
         },
 
         popupFolderPermAdmin: function() {
+            this.hideMobileMenu();
             var options = {
                 'repo_name': this.model.get('name'),
                 'repo_id': this.model.get('id')
@@ -332,6 +342,7 @@ define([
         },
 
         viewDetails: function() {
+            this.hideMobileMenu();
             var obj = this.model.toJSON();
             var icon_size = Common.isHiDPI() ? 48 : 24;
             var data = $.extend({}, obj, {
@@ -447,6 +458,26 @@ define([
                 return false;
             });
 
+            return false;
+        },
+
+        showMobileMenu : function(event) {
+            var mobileMenu = this.mobileMenu.length ? this.mobileMenu : null;
+            if(mobileMenu){
+                mobileMenu.slideDown('fast');
+            }
+            return false;
+        },
+
+        hideMobileMenu: function() {
+            var mobileMenu = this.mobileMenu.length ? this.mobileMenu : null;
+            if(mobileMenu){
+                mobileMenu.slideUp('fast');
+            }
+        },
+
+        closeMobileMenu: function(){
+            this.hideMobileMenu();
             return false;
         }