Move revisions to new ui framework

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

@@ -11,6 +11,7 @@
 
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import AuthMixin from '../../mixins/auth';
 import ModalMixin from '../../mixins/modal';
 import Notifier from '../../mixins/notifier';
@@ -24,6 +25,14 @@ export default Component.extend(ModalMixin, AuthMixin, Notifier, {
 	pinned: service(),
 	browserSvc: service('browser'),
 	documentSvc: service('document'),
+	showRevisions: computed('permissions', 'document.protection', function() {
+		if (!this.get('session.authenticated')) return false;
+		if (!this.get('session.viewUsers')) return false;
+		if (this.get('document.protection') === this.get('constants').ProtectionType.None) return true;
+		if (this.get('document.protection') === this.get('constants').ProtectionType.Review && this.get('permissions.documentApprove')) return true;
+
+		return false;
+	}),
 
 	init() {
 		this._super(...arguments);

gui/app/components/document/view-revision.js

@@ -9,19 +9,15 @@
 //
 // https://documize.com
 
-import { computed, set } from '@ember/object';
+import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import ModalMixin from '../../mixins/modal';
 import Component from '@ember/component';
 
 export default Component.extend(ModalMixin, {
 	documentService: service('document'),
-	revision: null,
-	revisions: null,
 	diff: '',
-	hasRevisions: computed('revisions', function() {
-		return this.get('revisions').length > 0;
-	}),
+	revision: null,
 	hasDiff: computed('diff', function() {
 		return this.get('diff').length > 0;
 	}),
@@ -34,32 +30,17 @@ export default Component.extend(ModalMixin, {
 			this.get('document.protection') === constants.ProtectionType.None;
 	}),
 
-	init() {
-		this._super(...arguments);
-		this.revisions = [];
-	},
-
 	didReceiveAttrs() {
 		this._super(...arguments);
-		this.fetchRevisions();
-	},
 
-	fetchRevisions() {
-		this.get('documentService').getDocumentRevisions(this.get('document.id')).then((revisions) => {
-			revisions.forEach((r) => {
-				set(r, 'deleted', r.revisions === 0);
-				let date = moment(r.created).format('Do MMMM YYYY HH:mm');
-				let format = `${r.firstname} ${r.lastname} on ${date} changed ${r.title}`;
-				set(r, 'label', format);
-			});
+		let revision = this.get('revision');
 
-			this.set('revisions', revisions);
-
-			if (revisions.length > 0 && is.null(this.get('revision'))) {
-				this.send('onSelectRevision', revisions[0]);
+		if (is.not.null(revision)) {
+			if (!revision.deleted) {
+				this.fetchDiff(revision.pageId, revision.id);
 			}
-		});
-	},
+		}
+},
 
 	fetchDiff(pageId, revisionId) {
 		this.get('documentService').getPageRevisionDiff(this.get('document.id'), pageId, revisionId).then((revision) => {
@@ -68,12 +49,8 @@ export default Component.extend(ModalMixin, {
 	},
 
 	actions: {
-		onSelectRevision(revision) {
-			this.set('revision', revision);
-
-			if (!revision.deleted) {
-				this.fetchDiff(revision.pageId, revision.id);
-			}
+		onShowModal() {
+			this.modalOpen('#document-rollback-modal', {show:true});
 		},
 
 		onRollback() {

gui/app/constants/constants.js

@@ -245,6 +245,10 @@ let constants = EmberObject.extend({
 		Settings: 'dicon-settings-gear',
 		Tag: 'dicon-delete-key',
 		TimeBack: 'dicon-time',
+		TriangleSmallUp: 'dicon-small-triangle-up',
+		TriangleSmallDown: 'dicon-small-triangle-down',
+		TriangleSmallLeft: 'dicon-small-triangle-left',
+		TriangleSmallRight: 'dicon-small-triangle-right',
 		Unlocked: 'dicon-unlocked',
 		World: 'dicon-globe',
 	},

gui/app/pods/document/index/controller.js

@@ -21,7 +21,6 @@ export default Controller.extend(Notifier, {
 	linkService: service('link'),
 	router: service(),
 	sidebarTab: 'toc',
-	tab: 'content',
 	queryParams: ['currentPageId', 'source'],
 
 	actions: {
@@ -29,15 +28,7 @@ export default Controller.extend(Notifier, {
 			this.set('sidebarTab', tab);
 		},
 
-		onTabChange(tab) {
-			this.set('tab', tab);
-			if (tab === 'content') {
-				this.send('refresh');
-			}
-		},
-
 		onShowPage(pageId) {
-			this.set('tab', 'content');
 			this.get('browser').scrollTo(`#page-${pageId}`);
 		},
 
@@ -222,13 +213,6 @@ export default Controller.extend(Notifier, {
 			});
 		},
 
-		onRollback(pageId, revisionId) {
-			this.get('documentService').rollbackPage(this.get('document.id'), pageId, revisionId).then(() => {
-				this.set('tab', 'content');
-				this.get('target._routerMicrolib').refresh();
-			});
-		},
-
 		onEditMeta() {
 			if (!this.get('permissions.documentEdit')) return;
 

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

@@ -75,38 +75,25 @@
 		</div>
 	</div>
 
-	{{#if (eq tab "content")}}
-		{{document/view-content
-			roles=roles
-			links=links
-			pages=pages
-			blocks=blocks
-			folder=folder
-			folders=folders
-			sections=sections
-			document=document
-			permissions=permissions
-			currentPageId=currentPageId
-			refresh=(action "refresh")
-			onSavePage=(action "onSavePage")
-			onCopyPage=(action "onCopyPage")
-			onMovePage=(action "onMovePage")
-			onDeletePage=(action "onPageDeleted")
-			onInsertSection=(action "onInsertSection")
-			onSavePageAsBlock=(action "onSavePageAsBlock")
-			onPageLevelChange=(action "onPageLevelChange")
-			onPageSequenceChange=(action "onPageSequenceChange")}}
-	{{/if}}
-
-	{{#if (eq tab "revision")}}
-		{{#if showRevisions}}
-			{{document/view-revision
-				pages=pages
-				folder=folder
-				document=document
-				permissions=permissions
-				onRollback=(action "onRollback")}}
-		{{/if}}
-	{{/if}}
+	{{document/view-content
+		roles=roles
+		links=links
+		pages=pages
+		blocks=blocks
+		folder=folder
+		folders=folders
+		sections=sections
+		document=document
+		permissions=permissions
+		currentPageId=currentPageId
+		refresh=(action "refresh")
+		onSavePage=(action "onSavePage")
+		onCopyPage=(action "onCopyPage")
+		onMovePage=(action "onMovePage")
+		onDeletePage=(action "onPageDeleted")
+		onInsertSection=(action "onInsertSection")
+		onSavePageAsBlock=(action "onSavePageAsBlock")
+		onPageLevelChange=(action "onPageLevelChange")
+		onPageSequenceChange=(action "onPageSequenceChange")}}
 {{/layout/master-content}}
 

gui/app/pods/document/revisions/controller.js

@@ -0,0 +1,33 @@
+// 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 { inject as service } from '@ember/service';
+import Notifier from '../../../mixins/notifier';
+import Controller from '@ember/controller';
+
+export default Controller.extend(Notifier, {
+	documentService: service('document'),
+	router: service(),
+	selectedRevision: null,
+
+	actions: {
+		onRevision(revision) {
+			this.set('selectedRevision', revision);
+		},
+
+		onRollback(pageId, revisionId) {
+			this.get('documentService').rollbackPage(this.get('document.id'), pageId, revisionId).then(() => {
+				this.notifySuccess('Reverted to selected revision');
+				this.get('router').transitionTo('document.index');
+			});
+		}
+	}
+});

gui/app/pods/document/revisions/route.js

@@ -0,0 +1,75 @@
+// 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 { set } from '@ember/object';
+import { Promise as EmberPromise, hash } from 'rsvp';
+import { inject as service } from '@ember/service';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
+
+export default Route.extend(AuthenticatedRouteMixin, {
+	docSvc: service('document'),
+	linkService: service('link'),
+	folderService: service('folder'),
+	userService: service('user'),
+
+	beforeModel() {
+		return new EmberPromise((resolve) => {
+			let doc = this.modelFor('document').document;
+
+			this.get('docSvc').getDocumentRevisions(doc.get('id')).then((revisions) => {
+				revisions.forEach((r) => {
+					set(r, 'deleted', r.revisions === 0);
+				});
+
+				this.set('revisions', revisions);
+
+				resolve(revisions)
+			});
+		});
+	},
+
+	model() {
+		return hash({
+			folders: this.modelFor('document').folders,
+			folder: this.modelFor('document').folder,
+			document: this.modelFor('document').document,
+			pages: this.get('pages'),
+			permissions: this.modelFor('document').permissions,
+			roles: this.modelFor('document').roles,
+			revisions: this.get('revisions')
+		});
+	},
+
+	setupController(controller, model) {
+		this._super(controller, model);
+
+		controller.set('folders', model.folders);
+		controller.set('folder', model.folder);
+		controller.set('document', model.document);
+		controller.set('pages', model.pages);
+		controller.set('permissions', model.permissions);
+		controller.set('roles', model.roles);
+		controller.set('revisions', model.revisions);
+
+		if (model.revisions.length > 0) {
+			controller.set('selectedRevision', model.revisions[0]);
+		}
+	},
+
+	activate: function () {
+		this._super(...arguments);
+
+		let document = this.modelFor('document').document;
+		this.browser.setTitleWithoutSuffix(document.get('name'));
+		this.browser.setMetaDescription(document.get('excerpt'));
+	}
+});

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

@@ -0,0 +1,38 @@
+{{#layout/master-sidebar}}
+	{{ui/ui-spacer size=300}}
+
+	{{#link-to "document.index"}}
+		{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
+	{{/link-to}}
+
+	{{ui/ui-spacer size=400}}
+
+	<div class="section">
+		<div class="title">REVISIONS</div>
+		<div class="list">
+			{{#each revisions as |revision|}}
+				<div class="item {{if (eq selectedRevision revision) "selected"}}" {{action "onRevision" revision}}>
+					<i class={{concat "dicon " constants.Icon.TriangleSmallRight}} />
+					<div class="name">{{formatted-date revision.created}}</div>
+				</div>
+			{{/each}}
+		</div>
+	</div>
+{{/layout/master-sidebar}}
+
+{{#layout/master-content}}
+	{{layout/logo-heading
+		title="Content Revisions"
+		desc="Review previous content changes and roll back edits"
+		icon=constants.Icon.TimeBack}}
+
+	{{document/view-revision
+		pages=pages
+		folder=folder
+		document=document
+		permissions=permissions
+		revisions=revisions
+		revision=selectedRevision
+		onRollback=(action "onRollback")}}
+{{/layout/master-content}}
+

gui/app/router.js

@@ -56,6 +56,9 @@ export default Router.map(function () {
 			this.route('settings', {
 				path: 'settings'
 			});
+			this.route('revisions', {
+				path: 'revisions'
+			});
 		}
 	);
 

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

@@ -7,6 +7,6 @@
 @import "sidebar-toc.scss";
 @import "sidebar-attachment.scss";
 @import "view-activity.scss";
-@import "view-revision.scss";
-@import "vote-likes.scss";
+@import "revisions.scss";
+@import "likes.scss";
 @import "wysiwyg.scss";

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

@@ -0,0 +1,29 @@
+.vote-box {
+	margin: 50px 0;
+	// max-width: 400px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	align-content: center;
+	justify-content: center;
+
+	> .prompt {
+		text-align: center;
+		font-size: 1.5rem;
+		font-weight: 500;
+		color: map-get($yellow-shades, 700);
+	}
+
+	> .buttons {
+		text-align: center;
+	}
+
+	> .thanks {
+		font-size: 1.2rem;
+		font-weight: 500;
+		color: map-get($yellow-shades, 600);
+	}
+}
+
+
+

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

@@ -0,0 +1,11 @@
+.view-revision {
+	> h1 {
+		color: map-get($yellow-shades, 800);
+	}
+
+	> h2 {
+		color: map-get($yellow-shades, 700);
+		font-size: 1.2rem;
+		font-weight: 400;
+	}
+}

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

@@ -51,12 +51,10 @@
 }
 
 .start-section {
-	@include border-radius(5px);
 	@extend .no-select;
 	text-align: right;
 	margin: 1.5rem 0;
 	display: block;
-	cursor: pointer;
 
 	> i {
 		background-color: map-get($yellow-shades, 100);
@@ -65,6 +63,8 @@
 		padding: 0.5rem;
 		font-size: 16px;
 		@extend %toolbar-shadow;
+		@include border-radius(5px);
+		cursor: pointer;
 
 		&:hover {
 			color: map-get($yellow-shades, 700);

gui/app/styles/core/view/document/view-revision.scss

@@ -1,16 +0,0 @@
-.view-revision {
-	> .diff-zone {
-		@extend .transition-all;
-		@include border-radius(2px);
-		@include ease-in();
-		position: relative;
-		padding: 25px 50px;
-		box-shadow: 0 0 0 0.75pt map-get($gray-shades, 200),0 0 3pt 0.75pt map-get($gray-shades, 200);
-		background-color: $color-white;
-		margin: 50px 0;
-
-		> .canvas {
-			padding: 0;
-		}
-	}
-}

gui/app/styles/core/view/document/vote-likes.scss

@@ -1,25 +0,0 @@
-.vote-box {
-	margin: 50px 0;
-	padding: 30px 50px;
-	text-align: center;
-	max-width: 400px;
-	border: 1px dotted map-get($gray-shades, 300);
-	background: map-get($gray-shades, 100);
-	@include border-radius(3px);
-
-	> .prompt {
-		font-size: 1.5rem;
-		font-weight: 600;
-		color: map-get($gray-shades, 800);
-	}
-
-	> .buttons {
-		margin: 20px 0 0 0;
-	}
-
-	> .ack {
-		font-size: 1.2rem;
-		font-weight: 600;
-		color: map-get($green-shades, 600);
-	}
-}

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

@@ -1,11 +1,5 @@
 <div class="no-print">
 	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Gray
-			tooltip="Print" onClick=(action "onPrintDocument")}}
-
-		{{ui/ui-toolbar-icon icon=constants.Icon.Download color=constants.Color.Gray
-			tooltip="Export as complete HTML file" onClick=(action "onExport")}}
-
 		{{#if pinState.isPinned}}
 			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
 				tooltip="Remove from bookmarks" onClick=(action "onUnpin")}}
@@ -19,6 +13,17 @@
 				tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
 		{{/if}}
 
+		{{#if showRevisions}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.TimeBack color=constants.Color.Gray
+				tooltip="Revisions and rollback" linkTo="document.revisions"}}
+		{{/if}}
+
+		{{ui/ui-toolbar-icon icon=constants.Icon.Download color=constants.Color.Gray
+			tooltip="Download as HTML file" onClick=(action "onExport")}}
+
+		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Gray
+			tooltip="Print" onClick=(action "onPrintDocument")}}
+
 		{{#if permissions.documentDelete}}
 			{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray
 				tooltip="Delete" onClick=(action "onShowDeleteModal")}}
@@ -50,8 +55,8 @@
 				</form>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-success" onclick={{action "onSaveTemplate"}}>Save</button>
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Delete onClick=(action "onSaveTemplate")}}
 			</div>
 		</div>
 	</div>
@@ -65,8 +70,8 @@
 				<p>Are you sure you want to delete this document?</p>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-danger" onclick={{action "onDocumentDelete"}}>Delete</button>
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDocumentDelete")}}
 			</div>
 		</div>
 	</div>

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

@@ -39,23 +39,21 @@
 	{{/if}}
 
 	{{#if showLikes}}
-		<div class=" d-flex justify-content-center no-print">
-			<div class="vote-box">
-				{{#unless voteThanks}}
-				<div class="prompt">
-					{{folder.likes}}
-				</div>
+		<div class="vote-box no-print">
+			{{#if voteThanks}}
+				<div class="thanks">Thanks for the feedback!</div>
+			{{else}}
+				<div class="prompt">{{folder.likes}}</div>
+				{{ui/ui-spacer size=200}}
 				<div class="buttons">
-					<button type="button" class="btn btn-outline-success bold-700" {{action "onVote" 1}}>Yes, thanks!</button>&nbsp;&nbsp;
-					<button type="button" class="btn btn-outline-secondary bold-700" {{action "onVote" 2}}>Not really</button>
+					{{ui/ui-button color=constants.Color.Yellow light=true label="Yes, thanks!" onClick=(action "onVote" 1)}}
+					{{ui/ui-button-gap}}
+					{{ui/ui-button color=constants.Color.Yellow light=true label="Not really" onClick=(action "onVote" 2)}}
 				</div>
-				{{else}}
-				<div class="ack">Thanks for the feedback!</div>
-				{{/unless}}
-			</div>
+			{{/if}}
 		</div>
 	{{/if}}
-{{else }}
+{{else}}
 	{{#if canEdit}}
 		<div class="start-section">
 			<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}}>

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

@@ -1,37 +1,23 @@
-<div class="mt-5">
-	{{#unless hasRevisions}}
-		<p>No revisions made</p>
-	{{else}}
-		<div class="row">
-			<div class="col-12">
-				<div class="form-group">
-					{{ui/ui-select tagName="span" class="revision-picker" content=revisions action=(action "onSelectRevision") optionValuePath="id" optionLabelPath="label"}}
-				</div>
-			</div>
+{{#unless revisions}}
+	<p>No revisions made</p>
+{{/unless}}
+
+<div class="view-revision">
+	{{#if hasDiff}}
+		<h1>{{revision.title}}</h1>
+		<h2>Changed by {{revision.firstname}} {{revision.lastname}}</h2>
+		{{ui/ui-spacer size=200}}
+		<div class="diff-zone wysiwyg">
+			{{{diff}}}
 		</div>
-		<div class="row">
-			<div class="col-12 view-revision">
-				<div class="diff-zone">
-					{{#if hasDiff}}
-						<div class="wysiwyg">
-							{{{diff}}}
-						</div>
-					{{/if}}
-				</div>
-			</div>
-		</div>
-		{{#if canRollback}}
-			<div class="row">
-				<div class="col-12">
-					<div class="form-group">
-						<div id="restore-history-button" class="btn btn-danger" data-toggle="modal" data-target="#document-rollback-modal" data-backdrop="static">Restore to this version</div>
-					</div>
-				</div>
-			</div>
-		{{/if}}
-	{{/unless}}
+	{{/if}}
 </div>
 
+{{#if canRollback}}
+	{{ui/ui-spacer size=400}}
+	{{ui/ui-button color=constants.Color.Red icon=constants.Icon.TimeBack light=true label=constants.Label.Restore onClick=(action "onShowModal")}}
+{{/if}}
+
 <div id="document-rollback-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
@@ -40,8 +26,8 @@
 				<p>Are you sure you want to restore this revision?</p>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-success" onclick={{action "onRollback"}}>Restore</button>
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Restore onClick=(action "onRollback")}}
 			</div>
 		</div>
 	</div>

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

@@ -45,8 +45,8 @@
 					</form>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-success" onclick={{action "onAddEmptyDoc"}}>Add</button>
+					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
 				</div>
 			</div>
 		</div>
@@ -78,8 +78,8 @@
 					</form>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-success" onclick={{action "onAddTemplateDoc"}}>Add</button>
+					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
 				</div>
 			</div>
 		</div>
@@ -105,7 +105,7 @@
 					</div>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
 				</div>
 			</div>
 		</div>
@@ -127,8 +127,8 @@
 				{{/if}}
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-success" onclick={{action "onExport"}}>Export</button>
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Export onClick=(action "onExport")}}
 			</div>
 		</div>
 	</div>