Merge pull request #41 from documize/doc-toolbar-ux

Doc toolbar ux

Author: HarveyKandola

.gitattributes

@@ -2,4 +2,11 @@
 * text=auto
 
 # These files are text and should be normalized (convert crlf > lf)
-*.hbs text
+*.hbs text eol=lf
+*.js text eol=lf
+*.html text eol=lf
+*.go text eol=lf
+*.sql text eol=lf
+*.scss text eol=lf
+*.js text eol=lf
+*.json text eol=lf

app/.editorconfig

@@ -10,8 +10,8 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 
 [*.hbs]
 insert_final_newline = false

app/.jshintrc

@@ -18,7 +18,8 @@
     "Drop",
 	"Dropzone",
 	"dragula",
-  "datetimepicker"
+  	"datetimepicker",
+	"Waypoint"
   ],
   "browser": true,
   "boss": true,

app/app/components/layout/button-home.js app/app/components/back-to-home.jsapp/app/components/layout/button-home.js renamed to app/app/components/back-to-home.js

@@ -11,4 +11,5 @@
 
 import Ember from 'ember';
 
-export default Ember.Component.extend({});
+export default Ember.Component.extend({
+});

app/app/components/back-to-space.js

@@ -0,0 +1,15 @@
+// Copyright 2016 Documize Inc. <[email protected]>. 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 <[email protected]>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

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

@@ -45,27 +45,29 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
     didInsertElement() {
         this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
-
-        var s = $(".document-structure");
-        var pos = s.position();
-
-        $(window).scroll(function() {
-            var windowpos = $(window).scrollTop();
-            if (windowpos - 200 >= pos.top) {
-                s.addClass("stick");
-                s.css('width', s.parent().width());
-            } else {
-                s.removeClass("stick");
-                s.css('width', 'auto');
-            }
-        });
-    },
+	},
 
     willDestroyElement() {
         this.eventBus.unsubscribe('documentPageAdded');
 		this.destroyTooltips();
     },
 
+	// positionToc() {
+	// 	let s = $(".document-structure");
+    //     let pos = s.position();
+	//
+	// 	$(window).scroll(_.throttle(function() {
+	// 		let windowpos = $(window).scrollTop();
+    //         if (windowpos - 200 >= pos.top) {
+    //             s.addClass("stuck-toc");
+    //             s.css('width', s.parent().width());
+    //         } else {
+    //             s.removeClass("stuck-toc");
+    //             s.css('width', 'auto');
+    //         }
+    //     }, 50));
+	// },
+
     onDocumentPageAdded(pageId) {
         this.send('onEntryClick', pageId);
     },

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

@@ -11,23 +11,51 @@
 
 import Ember from 'ember';
 import TooltipMixin from '../../mixins/tooltip';
+import NotifierMixin from '../../mixins/notifier';
 
-export default Ember.Component.extend(TooltipMixin, {
+export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
     documentService: Ember.inject.service('document'),
     document: {},
     folder: {},
 	showToc: true,
 	showViews: false,
 	showContributions: false,
+	showSections: false,
+	showScrollTool: false,
+	showingSections: false,
 
 	didRender() {
 		if (this.session.authenticated) {
             this.addTooltip(document.getElementById("owner-avatar"));
+			this.addTooltip(document.getElementById("section-tool"));
         }
 	},
 
-	willDestroyElements() {
-		this.destroyElements();
+	didInsertElement() {
+        this.eventBus.subscribe('resized', this, 'positionTool');
+		this.eventBus.subscribe('scrolled', this, 'positionTool');
+	},
+
+	willDestroyElement() {
+		this.destroyTooltips();
+	},
+
+	positionTool() {
+		if (this.get('isDestroyed') || this.get('isDestroying')) {
+			return;
+		}
+
+		let s = $(".scroll-tool");
+		let windowpos = $(window).scrollTop();
+
+		if (windowpos >= 300) {
+			this.set('showScrollTool', true);
+			s.addClass("stuck-tool");
+			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+		} else {
+			this.set('showScrollTool', false);
+			s.removeClass("stuck-tool");
+		}
 	},
 
     actions: {
@@ -45,27 +73,55 @@ export default Ember.Component.extend(TooltipMixin, {
             return this.attrs.gotoPage(id);
         },
 
-		// close dialog
-        close() {
-            return true;
-        },
-
 		showToc() {
 			this.set('showToc', true);
 			this.set('showViews', false);
 			this.set('showContributions', false);
+			this.set('showSections', false);
+			this.set('showingSections', false);
 		},
 
 		showViews() {
 			this.set('showToc', false);
 			this.set('showViews', true);
 			this.set('showContributions', false);
+			this.set('showSections', false);
+			this.set('showingSections', false);
 		},
 
 		showContributions() {
 			this.set('showToc', false);
 			this.set('showViews', false);
 			this.set('showContributions', true);
+			this.set('showSections', false);
+			this.set('showingSections', false);
+		},
+
+		showSections() {
+			this.set('showToc', false);
+			this.set('showViews', false);
+			this.set('showContributions', false);
+			this.set('showSections', true);
+			this.set('showingSections', true);
+		},
+
+		onCancel() {
+			this.send('showToc');
+			this.set('showingSections', false);
+		},
+
+		onAddSection(section) {
+			this.attrs.onAddSection(section);
+
+			this.set('showingSections', false);
+		},
+
+		scrollTop() {
+			this.set('showScrollTool', false);
+
+			$("html,body").animate({
+				scrollTop: 0
+			}, 500, "linear");
 		}
     }
 });

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

@@ -35,7 +35,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.addTooltip(document.getElementById("save-template-button"));
 			this.addTooltip(document.getElementById("set-meta-button"));
 			this.addTooltip(document.getElementById("delete-document-button"));
-			this.addTooltip(document.getElementById("add-section-button"));
 		}
 
 		this.addTooltip(document.getElementById("print-document-button"));
@@ -139,4 +138,4 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			return true;
 		},
 	}
-});
+});

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

@@ -133,4 +133,4 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.get('documentService').save(doc);
 		}
 	}
-});
+});

app/app/components/document/page-wizard.js

@@ -13,9 +13,18 @@ import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
+	sectionService: Ember.inject.service('section'),
+
+	didReceiveAttrs() {
+		let self = this;
+		this.get('sectionService').getAll().then(function(sections) {
+			self.set('sections', sections);
+		});
+	},
 
 	didRender() {
         let self = this;
+
         Mousetrap.bind('esc', function() {
             self.send('onCancel');
             return false;
@@ -28,12 +37,6 @@ export default Ember.Component.extend(NotifierMixin, {
 		},
 
         addSection(section) {
-
-            if (section.preview) {
-                this.showNotification("Coming soon!");
-                return;
-            }
-
             this.attrs.onAction(section);
         }
     }