From 42c010947e8da55e92061f372d6c408992b85e26 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 17 Oct 2023 17:28:31 +0200 Subject: [PATCH 01/24] added context menu for individual files in drive (mobile) --- customize.dist/src/less2/include/drive.less | 9 ++++ www/common/drive-ui.js | 52 ++++++++++++++++++--- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index 4fea4e43a..9f8531f1b 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -650,6 +650,15 @@ height: auto; } .cp-app-drive-element-state { + position: absolute; + top: 3px; + left: 3px; + .fa, .cptools { + margin: 0; + font-size: 18px; + } + } + .cp-app-drive-element-menu { position: absolute; top: 3px; right: 3px; diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 88627ebfa..098ddf2a5 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -107,6 +107,7 @@ define([ var $folderIcon = $('', { "class": faFolder + " cptools cp-app-drive-icon-folder cp-app-drive-content-icon" }); + var $fileMenuIcon = $('', {"class": "fa fa-ellipsis-h"}); //var $folderIcon = $('', {src: "/customize/images/icons/folder.svg", "class": "folder icon"}); var $folderEmptyIcon = $folderIcon.clone(); var $folderOpenedIcon = $('', {"class": faFolderOpen + " cptools cp-app-drive-icon-folder"}); @@ -505,6 +506,7 @@ define([ 'tabindex': '-1', 'data-icon': faDelete, }, Messages.fc_delete_owned)), + h('li', h('a.cp-app-drive-context-remove.dropdown-item.cp-app-drive-context-editable', { 'tabindex': '-1', 'data-icon': faTrash, @@ -1524,6 +1526,7 @@ define([ $button.hide(); return; } + $button.show(); $button.css({ background: '#63b1f7' @@ -1679,10 +1682,17 @@ define([ // show contextmenu at cursor position $menu.css({ display: "block" }); if (APP.mobile()) { + let menuPosition; + if ($(e.target).offset().top > ($(window).height()-$menu.height())) { + console.log('top') + menuPosition = ($(e.target).offset().top - $menu.height()) + 'px' + } else { + console.log('bottom') + menuPosition = ($(e.target).offset().top) + 'px' + } $menu.css({ - top: ($("#cp-app-drive-toolbar-context-mobile").offset().top + 32) + 'px', - right: '0px', - left: '' + top: menuPosition, + left: (($(e.target).offset().left - 50)) + 'px' }); return; } @@ -1783,6 +1793,7 @@ define([ displayMenu(e); + $(".cp-app-drive-context-noAction").toggle($contextMenu.find('li:visible').length === 0); $contextMenu.data('paths', paths); @@ -2167,6 +2178,8 @@ define([ 'class': 'cp-app-drive-element-ctime cp-app-drive-element-list' }).text(getDate(data.ctime)); $element.append($type).append($adate).append($cdate); + + }; var _addOwnership = function ($span, $state, data) { if (data && Array.isArray(data.owners) && data.owners.indexOf(edPublic) !== -1) { @@ -2178,6 +2191,7 @@ define([ $owner.attr('title', Messages.fm_padIsOwnedOther); } */ }; + var thumbsUrls = {}; var addFileData = function (element, $element) { if (!manager.isFile(element)) { return; } @@ -2219,12 +2233,24 @@ define([ } _addOwnership($element, $state, data); + var $menu = $('', {'class': 'cp-app-drive-element-menu'}); + $menu.click(function (e) { + e.preventDefault(); + e.stopPropagation(); + $element.contextmenu(); + }) + var $fileMenu = $fileMenuIcon.clone().appendTo($menu); + var name = manager.getTitle(element); // The element with the class '.name' is underlined when the 'li' is hovered var $name = $('', {'class': 'cp-app-drive-element-name'}).text(name); $element.append($name); $element.append($state); + if (APP.mobile()) { + $element.append($menu); + } + if (getViewMode() === 'grid') { $element.attr('title', name); } @@ -2275,6 +2301,15 @@ define([ $span.addClass('cp-app-drive-element-sharedf'); _addOwnership($span, $state, data); + var $menu = $('', {'class': 'cp-app-drive-element-menu'}); + $menu.click(function (e) { + e.preventDefault(); + e.stopPropagation(); + var $element = $(element) + $element.contextmenu(); + }) + var $fileMenu = $fileMenuIcon.clone().appendTo($menu); + var hrefData = Hash.parsePadUrl(data.href || data.roHref); if (hrefData.hashData && hrefData.hashData.password) { var $password = $passwordIcon.clone().appendTo($state); @@ -2291,6 +2326,7 @@ define([ } var $shared = $sharedIcon.clone().appendTo($state); + // var $menu = $shared.clone().appendTo($state); $shared.attr('title', Messages.fm_canBeShared); } else if ($content.data('readOnlyFolder') || APP.readOnly) { $ro = $readonlyIcon.clone().appendTo($state); @@ -2312,7 +2348,8 @@ define([ if (getViewMode() === 'grid') { $span.attr('title', key); } - $span.append($name).append($state).append($subfolders).append($files).append($filler); + + $span.append($name).append($state).append($subfolders).append($files).append($filler).append($menu); }; // This is duplicated in cryptpad-common, it should be unified @@ -3327,8 +3364,8 @@ define([ var $filler = $('', { 'class': 'cp-app-drive-element-filler cp-app-drive-element-list' }); - $fohElement.append($fhIcon).append($name).append($state) - .append($subfolders).append($files).append($filler); + $fohElement.append($name).append($state) + .append($subfolders).append($files).append($filler) if (clickable) { addFolderSortIcon($fohElement); } return $fohElement; }; @@ -3645,6 +3682,7 @@ define([ $element.prepend($icon).dblclick(function () { openFile(id); }); + addFileData(id, $element); $element.data('path', [FILES_DATA, id]); $element.data('element', id); @@ -3654,6 +3692,8 @@ define([ }); $element.contextmenu(openContextMenu('default')); $element.data('context', 'default'); + var $fileMenu = $('
  • ').append($fileMenuIcon); + $element.append($fileMenu); $container.append($element); }); createGhostIcon($container); From e9373b07d5da9baa10b8e437b373a8ab6f5ea5da Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Mon, 23 Oct 2023 11:44:51 +0200 Subject: [PATCH 02/24] positioning of context menus made responsive to screen size and file position --- www/common/drive-ui.js | 171 ++++++++++++++--------------------------- 1 file changed, 57 insertions(+), 114 deletions(-) diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 098ddf2a5..bbadbdc94 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -383,6 +383,10 @@ define([ 'tabindex': '-1', 'data-icon': faFolderOpen, }, Messages.fc_open)), + h('li', h('a.cp-app-drive-context-openfolder.dropdown-item', { + 'tabindex': '-1', + 'data-icon': faFolderOpen, + }, Messages.fc_open)), h('li', h('a.cp-app-drive-context-openro.dropdown-item', { 'tabindex': '-1', 'data-icon': faReadOnly, @@ -1191,7 +1195,6 @@ define([ var defaultInApp = ['application/pdf']; var openFile = function (el, isRo, app) { var data = manager.getFileData(el); - if (data.static) { if (data.href) { common.openUnsafeURL(data.href); @@ -1289,7 +1292,6 @@ define([ var show = []; var filter; var editable = true; - if (type === "content") { if (APP.$content.data('readOnlyFolder')) { editable = false; } // Return true in filter to hide @@ -1332,6 +1334,9 @@ define([ hide.push('savelocal'); hide.push('color'); } + if ($element.is('.cp-app-drive-element-folder')) { + hide.push('open'); + } if (!$element.is('.cp-app-drive-element-owned')) { hide.push('deleteowned'); } @@ -1352,6 +1357,7 @@ define([ } if ($element.is('.cp-app-drive-element-file')) { // No folder in files + hide.push('openfolder'); hide.push('color'); hide.push('newfolder'); if ($element.is('.cp-app-drive-element-readonly')) { @@ -1478,7 +1484,7 @@ define([ show = ['newfolder', 'newsharedfolder', 'uploadfiles', 'uploadfolder', 'newdoc']; break; case 'tree': - show = ['open', 'openro', 'preview', 'openincode', 'expandall', 'collapseall', + show = ['open', 'openfolder', 'openro', 'preview', 'openincode', 'expandall', 'collapseall', 'color', 'download', 'share', 'savelocal', 'rename', 'delete', 'makeacopy', 'openinsheet', 'openindoc', 'openinpresentation', 'deleteowned', 'removesf', 'access', 'properties', 'hashtag']; @@ -1507,67 +1513,6 @@ define([ return filtered; }; - var updateContextButton = function () { - if (manager.isPathIn(currentPath, [TRASH])) { - $driveToolbar.find('cp-app-drive-toolbar-emptytrash').show(); - } else { - $driveToolbar.find('cp-app-drive-toolbar-emptytrash').hide(); - } - var $li = findSelectedElements(); - if ($li.length === 0) { - $li = findDataHolder($tree.find('.cp-app-drive-element-active')); - } - var $button = $driveToolbar.find('#cp-app-drive-toolbar-context-mobile'); - $button.attr('aria-label', Messages.context_menu); - if ($button.length) { // mobile - if ($li.length !== 1 - || !$._data($li[0], 'events').contextmenu - || $._data($li[0], 'events').contextmenu.length === 0) { - $button.hide(); - return; - } - - $button.show(); - $button.css({ - background: '#63b1f7' - }); - window.setTimeout(function () { - $button.css({ - background: '' - }); - }, 500); - return; - } - // Non mobile - /* - var $container = $driveToolbar.find('#cp-app-drive-toolbar-contextbuttons'); - if (!$container.length) { return; } - $container.html(''); - var $element = $li.length === 1 ? $li : $($li[0]); - var paths = getSelectedPaths($element); - var menuType = $element.data('context'); - if (!menuType) { return; } - //var actions = []; - var toShow = filterContextMenu(menuType, paths); - var $actions = $contextMenu.find('a'); - $contextMenu.data('paths', paths); - $actions = $actions.filter(function (i, el) { - return toShow.some(function (className) { return $(el).is(className); }); - }); - $actions.each(function (i, el) { - var $a = $('