Merge pull request #1469 from nextcloud/hide-empty-tag-input

Hide collaborative tag input when empty

apps/systemtags/css/systemtagsfilelist.css

@@ -27,3 +27,13 @@
 .nav-icon-systemtagsfilter {
 	background-image: url('../img/tag.svg');
 }
+
+#app-sidebar .mainFileInfoView .tag-label {
+	cursor: pointer;
+	padding: 13px;
+}
+
+#app-sidebar .mainFileInfoView .icon-tag {
+	opacity: .5;
+	vertical-align: middle;
+}

apps/systemtags/img/tag.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0">
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" viewBox="0 0 16 16">
  <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
  <path d="m6.1861 0.96121-4.807 0.01316c-0.27161 0-0.34656 0.20987-0.34703 0.34604l-0.015132 4.8017 8.7232 8.7222c0.19688 0.19829 0.51234 0.19697 0.7092 0l4.4569-4.4569c0.19672-0.19688 0.19895-0.51327 0.002-0.71024l-0.0011 0.00876-8.3668-8.3668-0.3541-0.35417zm-2.1669 1.8522a1.1438 1.1438 0 0 1 1.144 1.144 1.1438 1.1438 0 0 1 -1.144 1.144 1.1438 1.1438 0 0 1 -1.144 -1.144 1.1438 1.1438 0 0 1 1.144 -1.144z"/>
 </svg>

apps/systemtags/js/systemtagsinfoview.js

@@ -37,6 +37,8 @@
 		 */
 		_inputView: null,
 
+		_toggleHandle: null,
+
 		initialize: function(options) {
 			var self = this;
 			options = options || {};
@@ -58,6 +60,9 @@
 
 			this._inputView.on('select', this._onSelectTag, this);
 			this._inputView.on('deselect', this._onDeselectTag, this);
+
+			this._toggleHandle = $('<span>').addClass('tag-label').text(t('systemtags', 'Tags'));
+			this._toggleHandle.prepend($('<span>').addClass('icon icon-tag'));
 		},
 
 		/**
@@ -118,11 +123,19 @@
 				this.selectedTagsCollection.fetch({
 					success: function(collection) {
 						collection.fetched = true;
-						self._inputView.setData(collection.map(modelToSelection));
+
+						var appliedTags = collection.map(modelToSelection);
+						self._inputView.setData(appliedTags);
+
+						if (appliedTags.length !== 0) {
 							self.$el.removeClass('hidden');
+						} else {
+							self.$el.addClass('hidden');
+						}
 					}
 				});
 			}
+
 			this.$el.addClass('hidden');
 		},
 
@@ -130,12 +143,23 @@
 		 * Renders this details view
 		 */
 		render: function() {
+			var self = this;
+
 			this.$el.append(this._inputView.$el);
 			this._inputView.render();
+
+			$('#app-sidebar').find('.mainFileInfoView .file-details').append(this._toggleHandle);
+			this._toggleHandle.off('click');
+			this._toggleHandle.on('click', function () {
+				console.log('toggle');
+				console.log(self.$el);
+				self.$el.toggleClass('hidden');
+			});
 		},
 
 		remove: function() {
 			this._inputView.remove();
+			this._toggleHandle.remove();
 		}
 	});
 

core/css/icons.css

@@ -291,6 +291,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 	background-image: url('../img/actions/starred.svg?v=1');
 }
 
+.icon-tag {
+	background-image: url('../img/actions/tag.svg?v=1');
+}
+
 .icon-toggle {
 	background-image: url('../img/actions/toggle.svg?v=1');
 }

core/img/actions/tag.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" viewBox="0 0 16 16">
+ <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
+ <path d="m6.1861 0.96121-4.807 0.01316c-0.27161 0-0.34656 0.20987-0.34703 0.34604l-0.015132 4.8017 8.7232 8.7222c0.19688 0.19829 0.51234 0.19697 0.7092 0l4.4569-4.4569c0.19672-0.19688 0.19895-0.51327 0.002-0.71024l-0.0011 0.00876-8.3668-8.3668-0.3541-0.35417zm-2.1669 1.8522a1.1438 1.1438 0 0 1 1.144 1.144 1.1438 1.1438 0 0 1 -1.144 1.144 1.1438 1.1438 0 0 1 -1.144 -1.144 1.1438 1.1438 0 0 1 1.144 -1.144z"/>
+</svg>