document tag editor re-vamped

gui/app/components/document/space-category.js

@@ -21,8 +21,11 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	hasCategories: Ember.computed('categories', function() {
 		return this.get('categories').length > 0;
 	}),
-	canAdd: Ember.computed('categories', function() {
-		return this.get('categories').length > 0 && this.get('permissions.documentEdit');
+	canSelectCategory: Ember.computed('categories', function() {
+		return (this.get('categories').length > 0 && this.get('permissions.documentEdit'));
+	}),
+	canAddCategory: Ember.computed('categories', function() {
+		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
 
 	init() {

gui/app/components/document/tag-editor.js

@@ -16,7 +16,10 @@ export default Ember.Component.extend({
     tagz: [],
     newTag: "",
     maxTags: 3,
-    canAdd: false,
+	canAdd: false,
+	emptyState: Ember.computed('tagz', function() {
+		return (this.get('tagz').length === 0 && !this.get('permissions.documentEdit'));
+	}),
 
     init() {
 		this._super(...arguments);
@@ -36,15 +39,14 @@ export default Ember.Component.extend({
     },
 
     didUpdateAttrs() {
+		this._super(...arguments);
         this.set('canAdd', this.get('permissions.documentEdit') && this.get('tagz').get('length') < 3);
     },
 
-    didInsertElement() {
-
-    },
 
     willDestroyElement() {
-        $("#add-tag-field").off("keydown");
+		this._super(...arguments);
+		$("#add-tag-field").off("keydown");
     },
 
     actions: {

gui/app/styles/view/document/space-category-tag.scss

@@ -5,7 +5,7 @@
 		text-transform: uppercase;
 		color: $color-gray;
 		font-weight: bold;
-		font-size: 1rem;
+		font-size: 1.2rem;
 		margin: 0 0 10px 0;
 	}
 }
@@ -22,7 +22,7 @@
 		text-transform: uppercase;
 		color: $color-gray;
 		font-weight: bold;
-		font-size: 1rem;
+		font-size: 1.2rem;
 		margin: 0 0 10px 0;
 	}
 }
@@ -34,20 +34,16 @@
 		text-transform: uppercase;
 		color: $color-gray;
 		font-weight: bold;
-		font-size: 1rem;
+		font-size: 1.2rem;
 		margin: 0 0 10px 0;
 	}
 
 	> .regular-button {
 		margin-right: 10px;
+	}
 
-		&:hover {
-			visibility: visible;
-		}
-
-		> .material-icons {
-			visibility: hidden;
-		}
+	> .none {
+		color: $color-gray;
+		font-size: 0.9rem;
 	}
 }
-

gui/app/styles/widget/widget-dropdown.scss

@@ -35,7 +35,7 @@
             line-height: 1.5em;
 
             > .dropdown-dialog {
-                @extend .clearfix;
+				@extend .clearfix;
 
 				.content {
 					> p {

gui/app/templates/components/document/space-category.hbs

@@ -13,18 +13,24 @@
 
 	{{#each selectedCategories as |cat|}}
 		<div class="regular-button button-blue">{{cat.category}}</div>
+	{{else}}
+		{{#if canAddCategory}}
+			{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
+		{{else}}
+			<p>&nbsp;</p>
+		{{/if}}
 	{{/each}}
 
-	{{#if hasCategories}}
+	{{#if canSelectCategory}}
 		<div class="regular-button button-white" id="document-category-button">
 			<i class="material-icons">add</i>
 		</div>
-
 		{{#dropdown-dialog target="document-category-button" position="bottom left" button="set" color="flat-green" onAction=(action 'onSave')}}
-			<p class="heading">Select categories for document</p>
+			<p class="heading">Set document categories</p>
 			{{ui/ui-list-picker items=categories nameField='category'}}
+			{{#if canAddCategory}}
+				{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
+			{{/if}}
 		{{/dropdown-dialog}}
-	{{else}}
-		<p>&nbsp;</p>
 	{{/if}}
 </div>

gui/app/templates/components/document/tag-editor.hbs

@@ -1,13 +1,13 @@
 <div class="document-tags">
 	<div class="caption">Tag</div>
-    {{#each tagz as |tg|}}
-		<div class="regular-button button-chip">{{concat '#' tg}}</div>
+    {{#each tagz as |t index|}}
+		<div class="regular-button button-chip" id="{{concat 'delete-tag-' index}}">{{concat '#' t}}</div>
     {{/each}}
     {{#if canAdd}}
-		<div class="chip-action">
-			<span id="add-tag-button" class="chip-text">+</span>
+		<div class="regular-button button-white" id="document-tag-button">
+			<i class="material-icons">add</i>
 		</div>
-		{{#dropdown-dialog target="add-tag-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addTag') focusOn="add-tag-field" onOpenCallback=(action 'onTagEditor') targetOffset="20px 0"}}
+		{{#dropdown-dialog tagName="span" target="document-tag-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addTag') focusOn="add-tag-field" onOpenCallback=(action 'onTagEditor') targetOffset="20px 0"}}
 			<div class="input-control">
 				<label>Tag</label>
 				<div class="tip">Lowercase letters, numbers, dashes</div>
@@ -15,4 +15,14 @@
             </div>
 		{{/dropdown-dialog}}
 	{{/if}}
+	{{#if permissions.documentEdit}}
+    	{{#each tagz as |t index|}}
+			{{#dropdown-dialog target=(concat 'delete-tag-' index) position="bottom left" button="Delete" color="flat-red" onAction=(action 'removeTag' t)}}
+				<p>Are you sure you want delete this tag?</p>
+			{{/dropdown-dialog}}
+	    {{/each}}
+	{{/if}}
+	{{#if emptyState}}
+		<div class="none">none</div>
+	{{/if}}
 </div>