Merge pull request #18732 from nextcloud/enh/files-sidebar

Sidebar polishing

apps/files/js/filelist.js

@@ -630,7 +630,7 @@
 		 * @param {string|OCA.Files.FileInfoModel} fileName file name from the current list or a FileInfoModel object
 		 * @param {boolean} [show=true] whether to open the sidebar if it was closed
 		 */
-		_updateDetailsView: function(fileName) {
+		_updateDetailsView: function(fileName, show) {
 			if (!(OCA.Files && OCA.Files.Sidebar)) {
 				console.error('No sidebar available');
 				return;
@@ -650,8 +650,18 @@
 			var model = this.getModelForFile(tr)
 			var path = model.attributes.path + '/' + model.attributes.name
 
+			// make sure the file list has the correct context available
+			if (this._currentFileModel) {
+				this._currentFileModel.off();
+			}
+			this.$fileList.children().removeClass('highlighted');
+			tr.addClass('highlighted');
+			this._currentFileModel = model;
+
 			// open sidebar and set file
-			OCA.Files.Sidebar.open(path.replace('//', '/'))
+			if (typeof show === 'undefined' || !!show || (OCA.Files.Sidebar.file !== '')) {
+				OCA.Files.Sidebar.open(path.replace('//', '/'))
+			}
 		},
 
 		/**

apps/files/src/views/Sidebar.vue

@@ -25,6 +25,7 @@
 		v-if="file"
 		ref="sidebar"
 		v-bind="appSidebar"
+		:force-menu="true"
 		@close="onClose"
 		@update:active="setActiveTab"
 		@update:starred="toggleStarred"
@@ -37,6 +38,19 @@
 				:file-info="fileInfo" />
 		</template>
 
+		<!-- Actions menu -->
+		<template v-if="fileInfo" #secondary-actions>
+			<!-- TODO: create proper api for apps to register actions
+			And inject themselves here. -->
+			<ActionButton
+				v-if="isSystemTagsEnabled"
+				:close-after-click="true"
+				icon="icon-tag"
+				@click="toggleTags">
+				{{ t('files_sharing', 'Tags') }}
+			</ActionButton>
+		</template>
+
 		<!-- Error display -->
 		<div v-if="error" class="emptycontent">
 			<div class="icon-error" />
@@ -60,6 +74,7 @@
 import $ from 'jquery'
 import axios from '@nextcloud/axios'
 import AppSidebar from 'nextcloud-vue/dist/Components/AppSidebar'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
 import FileInfo from '../services/FileInfo'
 import LegacyTab from '../components/LegacyTab'
 import LegacyView from '../components/LegacyView'
@@ -69,6 +84,7 @@ export default {
 	name: 'Sidebar',
 
 	components: {
+		ActionButton,
 		AppSidebar,
 		LegacyView,
 	},
@@ -218,6 +234,10 @@ export default {
 		defaultActionListener() {
 			return this.defaultAction ? 'figure-click' : null
 		},
+
+		isSystemTagsEnabled() {
+			return OCA && 'SystemTags' in OCA
+		}
 	},
 
 	watch: {
@@ -377,6 +397,15 @@ export default {
 				})
 			}
 		},
+
+		/**
+		 * Toggle the tags selector
+		 */
+		toggleTags() {
+			if (OCA.SystemTags && OCA.SystemTags.View) {
+				OCA.SystemTags.View.toggle()
+			}
+		}
 	},
 }
 </script>

apps/systemtags/src/css/systemtagsfilelist.scss

@@ -12,12 +12,11 @@
 	margin-left: 10px;
 }
 
-#app-sidebar .mainFileInfoView .tag-label {
+#app-sidebar .app-sidebar-header__action .tag-label {
 	cursor: pointer;
-	padding: 13px;
-}
-
-#app-sidebar .mainFileInfoView .icon-tag {
-	opacity: .5;
-	vertical-align: middle;
+	padding: 13px 0;
+	display: flex;
+	color: var(--color-text-light);
+	position: relative;
+	margin-top: -20px;
 }

apps/systemtags/src/filesplugin.js

@@ -33,27 +33,7 @@
 
 			const systemTagsInfoView = new OCA.SystemTags.SystemTagsInfoView()
 			fileList.registerDetailView(systemTagsInfoView)
-
-			_.each(fileList.getRegisteredDetailViews(), function(detailView) {
-				if (detailView instanceof OCA.Files.MainFileInfoDetailView) {
-					const systemTagsInfoViewToggleView
-						= new OCA.SystemTags.SystemTagsInfoViewToggleView({
-							systemTagsInfoView: systemTagsInfoView,
-						})
-					systemTagsInfoViewToggleView.render()
-
-					// The toggle view element is detached before the
-					// MainFileInfoDetailView is rendered to prevent its event
-					// handlers from being removed.
-					systemTagsInfoViewToggleView.listenTo(detailView, 'pre-render', function() {
-						systemTagsInfoViewToggleView.$el.detach()
-					})
-					systemTagsInfoViewToggleView.listenTo(detailView, 'post-render', function() {
-						detailView.$el.find('.file-details').append(systemTagsInfoViewToggleView.$el)
-					})
-
-				}
-			})
+			OCA.SystemTags.View = systemTagsInfoView
 		},
 	}
 

apps/systemtags/src/systemtags.js

@@ -2,7 +2,6 @@ import './app'
 import './systemtagsfilelist'
 import './filesplugin'
 import './systemtagsinfoview'
-import './systemtagsinfoviewtoggleview'
 import './css/systemtagsfilelist.scss'
 
 window.OCA.SystemTags = OCA.SystemTags

apps/systemtags/src/systemtagsinfoview.js

@@ -123,8 +123,9 @@
 
 							const appliedTags = collection.map(modelToSelection)
 							self._inputView.setData(appliedTags)
-
-							self.show()
+							if (appliedTags.length > 0) {
+								self.show()
+							}
 						},
 					})
 				}
@@ -152,6 +153,10 @@
 				this.$el.addClass('hidden')
 			},
 
+			toggle: function() {
+				this.$el.toggleClass('hidden')
+			},
+
 			openDropdown: function() {
 				this.$el.find('.systemTagsInputField').select2('open')
 			},

apps/systemtags/src/systemtagsinfoviewtoggleview.js

@@ -1,97 +0,0 @@
-/**
- *
- * @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-(function(OCA) {
-
-	/**
-	 * @class OCA.SystemTags.SystemTagsInfoViewToggleView
-	 * @classdesc
-	 *
-	 * View to toggle the visibility of a SystemTagsInfoView.
-	 *
-	 * This toggle view must be explicitly rendered before it is used.
-	 */
-	const SystemTagsInfoViewToggleView = OC.Backbone.View.extend(
-		/** @lends OC.Backbone.View.prototype */ {
-
-			tagName: 'span',
-
-			className: 'tag-label',
-
-			events: {
-				'click': 'click',
-			},
-
-			/**
-			 * @type OCA.SystemTags.SystemTagsInfoView
-			 */
-			_systemTagsInfoView: null,
-
-			template: function(data) {
-				return '<span class="icon icon-tag"/>' + t('systemtags', 'Tags')
-			},
-
-			/**
-			 * Initialize this toggle view.
-			 *
-			 * The options must provide a systemTagsInfoView parameter that
-			 * references the SystemTagsInfoView to associate to this toggle view.
-			 * @param {Object} options options
-			 */
-			initialize: function(options) {
-				options = options || {}
-
-				this._systemTagsInfoView = options.systemTagsInfoView
-				if (!this._systemTagsInfoView) {
-					throw new Error('Missing required parameter "systemTagsInfoView"')
-				}
-			},
-
-			/**
-		 * Toggles the visibility of the associated SystemTagsInfoView.
-		 *
-		 * When the systemTagsInfoView is shown its dropdown is also opened.
-		 */
-			click: function() {
-				if (this._systemTagsInfoView.isVisible()) {
-					this._systemTagsInfoView.hide()
-				} else {
-					this._systemTagsInfoView.show()
-					this._systemTagsInfoView.openDropdown()
-				}
-			},
-
-			/**
-			 * Renders this toggle view.
-			 *
-			 * @returns {OCA.SystemTags.SystemTagsInfoViewToggleView} this object.
-			 */
-			render: function() {
-				this.$el.html(this.template())
-
-				return this
-			},
-
-		})
-
-	OCA.SystemTags.SystemTagsInfoViewToggleView = SystemTagsInfoViewToggleView
-
-})(OCA)

apps/systemtags/tests/js/systemtagsinfoviewtoggleviewSpec.js

@@ -1,93 +0,0 @@
-/**
- *
- * @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-describe('OCA.SystemTags.SystemTagsInfoViewToggleView', function () {
-
-	var systemTagsInfoView;
-	var view;
-
-	beforeEach(function() {
-		systemTagsInfoView = new OCA.SystemTags.SystemTagsInfoView();
-		view = new OCA.SystemTags.SystemTagsInfoViewToggleView({ systemTagsInfoView: systemTagsInfoView });
-	});
-
-	afterEach(function() {
-		view.remove();
-		systemTagsInfoView.remove();
-	});
-
-	describe('initialize', function() {
-		it('fails if a "systemTagsInfoView" parameter is not provided', function() {
-			var constructor = function() {
-				return new OCA.SystemTags.SystemTagsInfoViewToggleView({});
-			}
-
-			expect(constructor).toThrow();
-		});
-	});
-
-	describe('click on element', function() {
-
-		var isVisibleStub;
-		var showStub;
-		var hideStub;
-		var openDropdownStub;
-
-		beforeEach(function() {
-			isVisibleStub = sinon.stub(systemTagsInfoView, 'isVisible');
-			showStub = sinon.stub(systemTagsInfoView, 'show');
-			hideStub = sinon.stub(systemTagsInfoView, 'hide');
-			openDropdownStub = sinon.stub(systemTagsInfoView, 'openDropdown');
-		});
-
-		afterEach(function() {
-			isVisibleStub.restore();
-			showStub.restore();
-			hideStub.restore();
-			openDropdownStub.restore();
-		});
-
-		it('shows a not visible SystemTagsInfoView', function() {
-			isVisibleStub.returns(false);
-
-			view.$el.click();
-
-			expect(isVisibleStub.calledOnce).toBeTruthy();
-			expect(showStub.calledOnce).toBeTruthy();
-			expect(openDropdownStub.calledOnce).toBeTruthy();
-			expect(openDropdownStub.calledAfter(showStub)).toBeTruthy();
-			expect(hideStub.notCalled).toBeTruthy();
-		});
-
-		it('hides a visible SystemTagsInfoView', function() {
-			isVisibleStub.returns(true);
-
-			view.$el.click();
-
-			expect(isVisibleStub.calledOnce).toBeTruthy();
-			expect(hideStub.calledOnce).toBeTruthy();
-			expect(showStub.notCalled).toBeTruthy();
-			expect(openDropdownStub.notCalled).toBeTruthy();
-		});
-
-	});
-
-});

package-lock.json

@@ -7174,9 +7174,9 @@
       }
     },
     "nextcloud-vue": {
-      "version": "0.12.8",
-      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.8.tgz",
-      "integrity": "sha512-4TU5Ji7560cRo14iaRgvVo4+Z6iQCWw6VU26dQaYWD8G3BUoZMQXCrETGyMW5kpP/ODW4cLVVzjlYaVosyqoOA==",
+      "version": "0.12.11",
+      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.11.tgz",
+      "integrity": "sha512-3zzgSRpWtPMqIi+DpZsh0YxACACHv+j8bWmMYyiUJVB2JjVADYpzb/lbUxQCE/A8rB3N75zIfkQOf0gd9BC9oA==",
       "requires": {
         "@babel/polyfill": "^7.4.4",
         "escape-html": "^1.0.3",

package.json

@@ -56,7 +56,7 @@
     "moment-timezone": "^0.5.27",
     "nextcloud-password-confirmation": "^0.4.2",
     "nextcloud-router": "0.0.9",
-    "nextcloud-vue": "^0.12.8",
+    "nextcloud-vue": "^0.12.11",
     "nextcloud-vue-collections": "^0.7.1",
     "p-limit": "^2.2.2",
     "p-queue": "^6.2.1",