From 6f7d2c94001f91e7572e15707aacd2d1336b31a1 Mon Sep 17 00:00:00 2001 From: Felix Heidecke Date: Wed, 23 Oct 2019 13:33:16 +0200 Subject: [PATCH] Adding icons and tree info in sidebar --- apps/files/css/files.css | 41 +++++++++++ apps/files/js/filelist.js | 114 +++++++++++++++++------------ core/js/sharedialoglinklistview.js | 3 + core/js/sharedialogview.js | 2 - 4 files changed, 112 insertions(+), 48 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 8e2e1bd3f3c7..532ee12c5c38 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -534,6 +534,47 @@ table td.filename .uploadtext { background-position: center; } +.shareTree { + border-top: 1px solid #eee; +} + +.shareTree-item { + margin: 10px 0; + position: relative; + cursor: pointer; +} + +.shareTree-item * { + cursor: pointer; +} + +.shareTree-item-avatar { + border-radius: 50%; + float: left; + margin-right: 10px; + transform: translateY(5px); +} + +.shareTree-item-icon { + display: block; + float: left; + transform: translateY(5px); +} + +.shareTree-item-name { + display: block; +} + +.shareTree-item-path { + display: block; +} + +.shareTree-item-path:before, +.shareTree-item-path:after { + content: '"'; +} + + /* Show checkbox when hovering, checked, or selected */ html.ie8 #fileList tr td.filename > .selectCheckBox:checked, html.ie8 #fileList tr.selected td.filename > .selectCheckBox, diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 9f7262f64ebc..dbb8e690c576 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -168,6 +168,13 @@ */ _sortComparator: null, + /** + * Stores shareTree items and infos + * + * @type Array + */ + _shareTree: [], + /** * Whether to do a client side sort. * When false, clicking on a table header will call reload(). @@ -1076,6 +1083,11 @@ $(window).scrollTop(0); this.$fileList.trigger(jQuery.Event('updated')); + + this._setShareTree().then(function() { + $('#filestable').trigger(jQuery.Event('shareTreeSet')); + }); + _.defer(function() { self.$el.closest('#app-content').trigger(jQuery.Event('apprendered')); }); @@ -1363,7 +1375,8 @@ this.updateEmptyContent(); } - this._setSharedIcon() + this._setShareTreeIcons() + this._setShareTreeView() return $tr; }, @@ -1487,7 +1500,9 @@ } }); - this._setSharedIcon() + $('#filestable').on('shareTreeSet', function() { + self._setShareTreeIcons(); + }) }, linkTo: function(dir) { return OC.linkTo('files', 'index.php')+"?dir="+ encodeURIComponent(dir).replace(/%2F/g, '/'); @@ -1820,60 +1835,67 @@ return Promise.all(crumbs) }, - - _chechPathHasShares: function() { + _setShareTree: function() { let self = this; return this.getPathShareInfo(this.getCurrentDirectory()).then(function(path) { - - let sharedFolders = _.filter(path, function(dir) { + self._shareTree = _.filter(path, function(dir) { return dir.shares.length > 0 }) + }) + }, - if (sharedFolders.length > 0) - return true + _setShareTreeIcons: function() { + if (!this._shareTree.length) + return - return false - }) + // Add share-tree icon to files and folders + // each per in the table + $('#fileList tr td.filename .thumbnail:not(.sharetree-item)').addClass('sharetree-item') }, - - _setSharedIcon: function() { - var self = this; - var $shareTreeView = $('#app-sidebar .shareeTreeView'); - var shareTreeItems = ''; - - var template = - '
  • ' + - ' share_with_displayname
    ' + - ' path
    ' + - '
    • '; - - $shareTreeView.ready( function(){ - - // Remove content's - $shareTreeView.text('') - - self._chechPathHasShares().then(function(e) { - - if (!e) return - - // Add share-tree icon to files and folders - $('#fileList tr td.filename .thumbnail').addClass('sharetree-item') - - // Add items to the sharefiev in the sidebar - if ($shareTreeView.length) { - self.getPathShareInfo( self.getCurrentDirectory() ).then( share => { - share.filter( share => share.shares.length).forEach( item => { - item.shares.forEach( share => { - shareTreeItems += template.replace(/share_with_displayname|path/g, key => share[key] ) - }) - }) - $shareTreeView.append(``) - }) - } + _setShareTreeView: function() { + var self = this; + var $shareTabView = $('#shareTabView .dialogContainer'); + var $shareTreeView = $('
    ', { class : 'shareTreeView' , html : ''}); - }) + $shareTabView.ready( function() { + + if (!self._shareTree.length) + return + + // Add items to the shareview in the sidebar ... if it's open + if (!$('#app-sidebar').hasClass('disappear')) { + + $shareTabView.append($shareTreeView) + + // Shared folders + self._shareTree.forEach( folder => { + + // Shares by folder + folder.shares.forEach( share => { + + let $path = $('', { class : 'shareTree-item-path', text : folder.name }) + + // user/group shares + if (share.share_type === 0) { + let $name = $('', { class : 'shareTree-item-name', text : share.share_with_displayname }) + let $avatar = $('
    ', { class : 'shareTree-item-avatar' }) + + $('
  • ').append( $avatar, $name, $path).appendTo($shareTreeView.find('> ul')) + $avatar.avatar(share.share_with, 32) + } + + // link shares + else if (share.share_type === 3) { + let $name = $('', { class : 'shareTree-item-name', text : share.name }) + let $icon = $('', { class : 'shareTree-item-icon link-entry--icon icon-public-white' }) + + $('
  • ').append( $icon, $name, $path).appendTo($shareTreeView.find('> ul')) + } + }) + }) + } }) }, diff --git a/core/js/sharedialoglinklistview.js b/core/js/sharedialoglinklistview.js index 4e1900687d76..a37b775142fa 100644 --- a/core/js/sharedialoglinklistview.js +++ b/core/js/sharedialoglinklistview.js @@ -51,6 +51,9 @@ '
    ' + ' ' + '
    ' + + '
    '+ + '
      ' + '
      ' + '
      {{privacyWarningMessage}}
      '; /** diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js index dc9c155ce3a5..c19617420599 100644 --- a/core/js/sharedialogview.js +++ b/core/js/sharedialogview.js @@ -31,8 +31,6 @@ ' '+ ' {{{remoteShareInfo}}}' + '
      • ' + - '
      ' + - '
      ' + '
      ' + ' ' + '' +