Merge pull request #35 from documize/document-sidebar-view

inline meta display

app/app/components/document/document-sidebar-close-action.js

@@ -0,0 +1,20 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    actions: {
+		close() {
+			this.attrs.close();
+		}
+    }
+});

app/app/components/document/document-sidebar.js

@@ -14,9 +14,11 @@ import TooltipMixin from '../../mixins/tooltip';
 
 export default Ember.Component.extend(TooltipMixin, {
     documentService: Ember.inject.service('document'),
-
     document: {},
     folder: {},
+	showToc: true,
+	showViews: false,
+	showContributions: false,
 
 	didRender() {
 		if (this.session.authenticated) {
@@ -46,6 +48,24 @@ export default Ember.Component.extend(TooltipMixin, {
 		// close dialog
         close() {
             return true;
-        }
+        },
+
+		showToc() {
+			this.set('showToc', true);
+			this.set('showViews', false);
+			this.set('showContributions', false);
+		},
+
+		showViews() {
+			this.set('showToc', false);
+			this.set('showViews', true);
+			this.set('showContributions', false);
+		},
+
+		showContributions() {
+			this.set('showToc', false);
+			this.set('showViews', false);
+			this.set('showContributions', true);
+		}
     }
 });

app/app/styles/view/document/sidebar.scss

@@ -3,7 +3,7 @@
 
 	> .summary-line {
 		color: $color-gray;
-		margin-top: 20px;
+		margin: 20px 0 30px 0;
 
 		>.items {
 			padding: 0;
@@ -51,11 +51,23 @@
 	    top: 10px;
 	}
 
+	.close-action {
+		float: right;
+
+		> .round-button-mono {
+			color: $color-stroke;
+			border-color: $color-stroke;
+
+			> .material-icons {
+				color: $color-stroke;
+			}
+		}
+	}
+
 	.document-structure {
 		> .toc-controls {
 			text-align: center;
 			margin: 0;
-			padding: 30px 0 10px 0;
 			color: $color-gray;
 
 			> .round-button-mono {
@@ -84,6 +96,7 @@
 			font-size: 13px;
 			overflow-x: hidden;
 			list-style-type: none;
+			margin: 20px 0 0 0;
 
 			.item {
 				padding: 4px 0;
@@ -110,17 +123,10 @@
 }
 
 .meta-viewers {
-	overflow-y: auto;
-	overflow-x: hidden;
-
 	> .items {
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-		height: 300px;
-		min-width: 300px;
 		white-space: nowrap;
 
 		> .item {
@@ -159,10 +165,6 @@
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-		height: 300px;
-		min-width: 300px;
 		white-space: nowrap;
 
 		> .item {

app/app/templates/components/document/document-sidebar-close-action.hbs

@@ -0,0 +1,6 @@
+<div class="close-action">
+	<div class="round-button-mono" {{action 'close'}}>
+		<i class="material-icons">clear</i>
+	</div>
+</div>
+<div class="clearfix"></div>

app/app/templates/components/document/document-sidebar.hbs

@@ -6,14 +6,14 @@
 					<div id="owner-avatar" class="avatar" data-tooltip="{{owner.fullname}}" data-tooltip-position="right middle">{{owner.initials}}</div>
 				</li>
 				<li class="divider" />
-		        <li class="item" id="meta-button-viewers">
+		        <li class="item" {{action 'showViews'}}>
 					<div class="metric">
 						<div class="number">{{meta.viewers.length}}</div>
 			            <div class="label">views</div>
 					</div>
 		        </li>
 				<li class="divider" />
-		        <li class="item" id="meta-button-history">
+		        <li class="item" {{action 'showContributions'}}>
 					<div class="metric">
 						<div class="number">{{meta.editors.length}}</div>
 			            <div class="label">activity</div>
@@ -21,16 +21,21 @@
 		        </li>
 		    </ul>
 		</div>
-		{{#dropdown-dialog target="meta-button-viewers" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
-			{{document/document-sidebar-viewers meta=meta}}
-		{{/dropdown-dialog}}
-		{{#dropdown-dialog target="meta-button-history" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
-			{{document/document-sidebar-edits pages=pages meta=meta}}
-		{{/dropdown-dialog}}
 	{{else}}
 		<div class="margin-top-40" />
 	{{/if}}
-	{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
-		changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
-		gotoPage=(action 'gotoPage')}}
+
+	{{#if showToc}}
+		{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
+			changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
+			gotoPage=(action 'gotoPage')}}
+	{{/if}}
+	{{#if showViews}}
+		{{document/document-sidebar-close-action close=(action 'showToc')}}
+		{{document/document-sidebar-viewers meta=meta}}
+	{{/if}}
+	{{#if showContributions}}
+		{{document/document-sidebar-close-action close=(action 'showToc')}}
+		{{document/document-sidebar-edits pages=pages meta=meta}}
+	{{/if}}
 </div>