Add a handle for the tags label

2 files changed, 26 insertions, 0 deletions

diff --git a/apps/systemtags/css/systemtagsfilelist.css b/apps/systemtags/css/systemtagsfilelist.css
index e8fb665e26b..32cce759ec2 100644
--- a/apps/systemtags/css/systemtagsfilelist.css
+++ b/apps/systemtags/css/systemtagsfilelist.css
@@ -27,3 +27,12 @@
 .nav-icon-systemtagsfilter {
 	background-image: url('../img/tag.svg');
 }
+
+#app-sidebar .mainFileInfoView .tag-label {
+	cursor: pointer;
+}
+
+#app-sidebar .mainFileInfoView .icon-tag {
+	opacity: .5;
+	vertical-align: middle;
+}
diff --git a/apps/systemtags/js/systemtagsinfoview.js b/apps/systemtags/js/systemtagsinfoview.js
index ad09f3a68c8..ce41bc504e2 100644
--- a/apps/systemtags/js/systemtagsinfoview.js
+++ b/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'));
 		},
 
 		/**
@@ -130,6 +135,7 @@
 					}
 				});
 			}
+
 			this.$el.addClass('hidden');
 		},
 
@@ -137,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();
 		}
 	});