space view labels

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

@@ -69,7 +69,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 					folderId: folderId,
 					documentId: docId,
 					categoryId: l.get('id')
-				}
+				};
 
 				toLink.push(t);
 			});
@@ -80,7 +80,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 					folderId: folderId,
 					documentId: docId,
 					categoryId: l.get('id')
-				}
+				};
 
 				toUnlink.pushObject(t);
 			});

gui/app/styles/view/folder/document.scss

@@ -31,6 +31,14 @@
 .documents-list {
 	margin-bottom: 50px;
 
+	> .caption {
+		text-transform: uppercase;
+		color: $color-gray;
+		font-weight: bold;
+		font-size: 1.0rem;
+		margin: 0 0 10px 0;
+	}
+
 	.document-item {
 		margin: 0 0 25px 0;
 		padding: 25px 15px;
@@ -133,10 +141,39 @@
 	}
 }
 
-.category-filter {
-	margin-bottom: 30px;
 
-	> .selected {
+.space-filter {
-		@extend .button-nav;
+	display: inline-block;
+	margin: 0 30px 30px 0;
+
+	> .caption {
+		text-transform: uppercase;
+		color: $color-gray;
+		font-weight: bold;
+		font-size: 1.0rem;
+		margin: 0 0 10px 0;
 	}
 }
+
+.category-filter {
+	display: inline-block;
+	margin: 0 0 30px 0;
+
+	> .regular-button {
+		margin-right: 10px;
+	}
+
+	> .caption {
+		text-transform: uppercase;
+		color: $color-gray;
+		font-weight: bold;
+		font-size: 1.0rem;
+		margin: 0 0 10px 0;
+	}
+}
+
+// .category-filter {
+// 	> .selected {
+// 		// @extend .button-nav;
+// 	}
+// }

gui/app/templates/components/folder/documents-list.hbs

@@ -1,5 +1,6 @@
 {{#if (gt documents.length 0)}}
 	<div class="documents-list">
+		<div class="caption">Documents</div>
 		{{#each documents key="id" as |document|}}
 			<div id="document-{{document.id}}">
 				<div class="document-item {{if document.selected "selected-card"}}">

gui/app/templates/components/folder/space-heading.hbs

@@ -3,7 +3,9 @@
 		<div class="space-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
 			<h1 class="space-name">{{folder.name}}</h1>
 			<div class="space-summary">
-				This space contains {{documents.length}} {{if (eq rootDocCount.length 1) 'document' 'documents'}} across {{categories.length}} {{if (eq categories.length 1) 'category' 'categories'}}
+				This space contains {{documents.length}} {{if (eq rootDocCount.length 1) 'document' 'documents'}}
+				{{if (eq categories.length 1) (concat 'and ' categories.length ' category')}}
+				{{if (gt categories.length 1) (concat 'and ' categories.length ' categories')}}
 			</div>
 		</div>
 	{{else}}

gui/app/templates/components/folder/space-view.hbs

@@ -14,21 +14,25 @@
 {{else}}
 
 	{{#if hasCategories}}
-		<div class="category-filter">
+		{{#if (gt rootDocCount 0)}}
-			{{#if (gt rootDocCount 0)}}
+			<div class="space-filter">
-				<div class="regular-button button-white {{if spaceSelected 'selected'}}"
+				<div class="caption">Space</div>
-					id="uncategorized-button" data-tooltip="Documents without category" data-tooltip-position="top center"
+				<div class="regular-button button-nav {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' folder.id}} id="uncategorized-button" data-tooltip="Documents without category" data-tooltip-position="top center">
-					{{action 'onDocumentFilter' 'space' folder.id}}>
+					<div class="name">{{folder.name}} ({{rootDocCount}})</div>
-					{{folder.name}} ({{rootDocCount}})
 				</div>
-			{{/if}}
+			</div>
-			{{#each categories as |cat index|}}
+		{{/if}}
-				<div class="button-gap"/>
+		{{#if (gt categories.length 0)}}
-				<div class="regular-button button-white {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
+			<div class="category-filter">
-					{{cat.category}} ({{cat.docCount}})
+				<div class="caption">Category</div>
-				</div>
+				{{#each categories as |cat index|}}
-			{{/each}}
+					<div class="regular-button button-blue {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
-		</div>
+						{{cat.category}} ({{cat.docCount}})
+					</div>
+					<div class="button-gap"/>
+				{{/each}}
+			</div>
+		{{/if}}
 	{{/if}}
 
 	{{folder/documents-list documents=filteredDocs folders=folders folder=folder