document view activity

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

@@ -12,12 +12,7 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-	tab: 'index',
-
 	actions: {
-		onTabSwitch(tab) {
-			this.set('tab', tab);
-		},
 
 		onPageSequenceChange(changes) {
 			this.attrs.onPageSequenceChange(changes);

gui/app/pods/document/index/template.hbs

@@ -27,6 +27,10 @@
 		{{document/view-attachment document=model.document permissions=model.permissions}}
 	{{/if}}
 
+	{{#if (eq tab 'activity')}}
+		{{document/view-activity document=model.document pages=model.pages permissions=model.permissions}}
+	{{/if}}
+	
 	<div id="zone-document-content" class="zone-document-content">
 		{{document/document-sidebar tab=tab
 			document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions

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

@@ -1,52 +0,0 @@
-.document-sidebar-view-activity {
-	> .items {
-		list-style-type: none;
-		margin: 0;
-		padding: 0;
-		white-space: nowrap;
-
-		> .item {
-			margin: 0;
-			padding: 10px 0;
-			width: 100%;
-
-			> .avatar-box {
-				display: inline-block;
-				margin: 0 10px 0 0;
-			}
-
-			> .name {
-				display: inline-block;
-				font-size: 0.9rem;
-				color: $color-gray;
-				width: 200px;
-				@extend .text-truncate;
-			}
-
-			> .detail {
-				display: block;
-				font-size: 0.9rem;
-				color: $color-off-black;
-				margin-left: 50px;
-				width: 200px;
-				@extend .text-truncate;
-
-				.viewed {
-					color: $color-goldy;
-				}
-
-				.added {
-					color: $color-green;
-				}
-
-				.changed {
-					color: $color-blue;
-				}
-
-				.deleted {
-					color: $color-red;
-				}
-			}
-		}
-	}
-}

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

@@ -1,4 +1,3 @@
 @import "history.scss";
-@import "activity.scss";
 @import "toc.scss";
 @import "new-section.scss";

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

@@ -1,5 +1,6 @@
 @import "doc-meta.scss";
 @import "doc-structure.scss";
 @import "section-editor.scss";
+@import "view-attachment.scss";
+@import "view-activity.scss";
 @import "wysiwyg.scss";
-@import "view-attachment.scss";

gui/app/styles/view/document/view-activity.scss

@@ -0,0 +1,65 @@
+.view-activity {
+	> .items {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		white-space: nowrap;
+
+		> .item {
+			margin: 0;
+			padding: 20px 0;
+			width: 100%;
+
+			> .avatar-box {
+				display: inline-block;
+				cursor: default;
+				position: relative;
+				overflow: hidden;
+				width: 35px;
+				height: 35px;
+				line-height: 34px;
+				padding: 0;
+				border-radius: 50%;
+				text-align: center;
+				font-weight: bold;
+				background-color: $color-gray;
+				color: $color-white;
+				
+				margin: 0 20px 0 0;
+			}
+
+			> .activity {
+				display: inline-block;
+
+				> .name {
+					display: block;
+					font-size: 1.2rem;
+					color: $color-off-black;
+					font-weight: bold;
+				}
+	
+				> .detail {
+					display: block;
+					font-size: 1rem;
+					color: $color-gray;
+	
+					.viewed {
+						color: $color-goldy;
+					}
+	
+					.added {
+						color: $color-green;
+					}
+	
+					.changed {
+						color: $color-blue;
+					}
+	
+					.deleted {
+						color: $color-red;
+					}
+				}
+			}
+		}
+	}
+}

gui/app/templates/components/document/document-activity.hbs

@@ -1,18 +0,0 @@
-<div class="sidebar-wrapper">
-	<div class="sidebar-panel">
-		<div class="title">Activity</div>
-		<div class="document-sidebar-view-activity">
-			<ul class="items">
-				{{#each activity as |a|}}
-					<li class="item">
-						<div class="avatar-box">
-							<div class="avatar">{{user-initials a.firstname a.lastname}}</div>
-						</div>
-						<div class="name">{{a.firstname}} {{a.lastname}}</div>
-						<div class="detail {{a.activityColor}}">{{a.activityLabel}}, {{time-ago a.created}}</div>
-					</li>
-				{{/each}}
-			</ul>
-		</div>
-	</div>
-</div>

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

@@ -1,16 +1,5 @@
 {{#if permissions.documentEdit}}
-	<div class="document-sidebar-toolbar">
-		<div class="round-button-mono button-white {{if (eq tab 'index') 'selected'}}" id="document-index-button" data-tooltip="Index" data-tooltip-position="bottom center" {{action 'onTabSwitch' 'index'}}>
-			<i class="material-icons">view_headline</i>
-		</div>
-		<div class="button-gap" />
-		<div class="round-button-mono button-white {{if (eq tab 'activity') 'selected'}}" id="document-activity-button" data-tooltip="Activity" data-tooltip-position="bottom center" {{action 'onTabSwitch' 'activity'}}>
-			<i class="material-icons">timeline</i>
-		</div>
-	</div>
-{{/if}}
 
-{{#if (is-equal tab 'index')}}
 	{{document/document-index
 		document=document
 		folder=folder
@@ -21,7 +10,3 @@
 		onPageLevelChange=(action 'onPageLevelChange')
 		onGotoPage=(action 'onGotoPage')}}
 {{/if}}
-
-{{#if (is-equal tab 'activity')}}
-	{{document/document-activity document=document pages=pages permissions=permissions}}
-{{/if}}

gui/app/templates/components/document/view-activity.hbs

@@ -0,0 +1,13 @@
+<div class="view-activity mt-5">
+	<ul class="items">
+		{{#each activity as |a|}}
+			<li class="item">
+				<div class="avatar-box">{{user-initials a.firstname a.lastname}}</div>
+				<div class="activity">
+					<div class="name">{{a.firstname}} {{a.lastname}}</div>
+					<div class="detail {{a.activityColor}}">{{a.activityLabel}}, {{time-ago a.created}}</div>
+				</div>
+			</li>
+		{{/each}}
+	</ul>
+</div>

gui/app/templates/components/document/view-attachment.hbs

@@ -1,5 +1,5 @@
 {{#if canShow}}
-	<div class="view-attachment non-printable">
+	<div class="view-attachment mt-5">
 		{{#if hasAttachments}}
 			<ul class="list">
 				{{#each files key="id" as |a index|}}