Add scroll to top option for document view

Closes #175

gui/app/components/layout/grid/sidebar-go-top.js

@@ -0,0 +1,24 @@
+// 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 browser from '../../../services/browser';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'div',
+	classNames: ['goto-top'],
+
+	actions: {
+		onClick() {
+			this.get('browser').scrollTo('html');
+		}
+	}
+});

gui/app/constants/constants.js

@@ -232,6 +232,7 @@ let constants = EmberObject.extend({
 		Export2: 'dicon-upload',
 		Filter: 'dicon-sort-tool',
 		Grid: 'dicon-grid-interface',
+		GoTop: 'dicon-move-layer-up',
 		Handshake: 'dicon-handshake',
 		Index: 'dicon-menu-8',
 		Integrations: 'dicon-geometry',

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

@@ -23,8 +23,8 @@
 <Layout::Grid::Container>
 	<Layout::Grid::Sidebar>
 		<div class="sidebar-content">
+			<Layout::Grid::SidebarGoTop />
 			<div class="section">
-
 				<div class="text-center">
 					{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
 						{{ui/ui-toolbar-icon icon=constants.Icon.Index color=constants.Color.Gray tooltip="Table of contents"

gui/app/styles/core/icon-ui.scss

@@ -434,3 +434,7 @@ icons
 .dicon-menu-5::before {
   content: "\ea5c";
 }
+
+.dicon-move-layer-up::before {
+  content: "\ea5d";
+}

gui/app/styles/core/layout/layout.scss

@@ -36,6 +36,9 @@ $sidebar-height: auto;
 			// overflow-x: hidden;
 			// overflow-y: auto;
 			padding: 20px 10px 20px 20px;
+			height: calc(100vh - 150px);
+			@include sticky();
+			top: 0px;
 		}
 
 		.master-content {

gui/app/styles/core/layout/sidebar.scss

@@ -7,6 +7,19 @@
 	// background-color: map-get($gray-shades, 100);
 	@include border-radius(6px);
 
+	> .goto-top {
+		position: absolute;
+		top: 7px;
+		left: 10px;
+		cursor: pointer;
+		color: map-get($gray-shades, 500);
+		font-size: 1rem;
+
+		&:hover {
+			color: map-get($gray-shades, 800);
+		}
+	}
+
 	> .section {
 		margin: 0;
 		padding: 0 7px;

gui/app/templates/components/layout/grid/sidebar-go-top.hbs

@@ -0,0 +1,3 @@
+<i class="dicon {{constants.Icon.GoTop}}" {{action "onClick"}}>
+    {{#attach-tooltip showDelay=750}}Scroll to top{{/attach-tooltip}}
+</i>

gui/public/assets/font/dmzui.svg

@@ -214,6 +214,9 @@
     <glyph glyph-name="menu-5"
       unicode="&#xEA5C;"
       horiz-adv-x="256" d="M24.734 158.97C15.404 156.627 7.095 149.89 2.812 141.193C0.946 137.404 0.5 134.862 0.5 128C0.5 117.879 2.692 112.466 9.579 105.579C20.752 94.406 37.733 92.939 50.421 102.051C71.042 116.86 67.331 147.659 43.744 157.47C38.969 159.456 29.609 160.195 24.734 158.97M120.734 158.97C111.404 156.627 103.095 149.89 98.812 141.193C96.946 137.404 96.5 134.862 96.5 128C96.5 117.879 98.692 112.466 105.579 105.579C116.752 94.406 133.733 92.939 146.421 102.051C167.042 116.86 163.331 147.659 139.744 157.47C134.969 159.456 125.609 160.195 120.734 158.97M216.734 158.97C207.404 156.627 199.095 149.89 194.812 141.193C192.946 137.404 192.5 134.862 192.5 128C192.5 117.879 194.692 112.466 201.579 105.579C212.752 94.406 229.733 92.939 242.421 102.051C263.042 116.86 259.331 147.659 235.744 157.47C230.969 159.456 221.609 160.195 216.734 158.97M38.655 142.359C48.696 137.595 50.921 125.206 43.194 117.084C39.075 112.753 34.43 111.321 28.259 112.479C23.492 113.373 17.351 119.614 16.435 124.493C13.956 137.707 26.761 148.003 38.655 142.359M134.655 142.359C144.696 137.595 146.921 125.206 139.194 117.084C135.075 112.753 130.43 111.321 124.259 112.479C119.492 113.373 113.351 119.614 112.435 124.493C109.956 137.707 122.761 148.003 134.655 142.359M230.655 142.359C240.696 137.595 242.921 125.206 235.194 117.084C231.075 112.753 226.43 111.321 220.259 112.479C215.492 113.373 209.351 119.614 208.435 124.493C205.956 137.707 218.761 148.003 230.655 142.359" />
+    <glyph glyph-name="move-layer-up"
+      unicode="&#xEA5D;"
+      horiz-adv-x="256" d="M10.455 245.545C7.266 242.357 7.265 238.085 10.452 234.646L12.905 232L128 232L243.095 232L245.548 234.646C248.735 238.085 248.734 242.357 245.545 245.545L243.091 248L128 248L12.909 248L10.455 245.545M86.265 161.735C52.426 127.897 48 123.114 48 120.382C48 116.06 51.955 112 56.164 112C59.104 112 62.397 114.967 89.712 142.228L120 172.456L120 88.874L120 5.292L122.452 2.646C125.744 -0.906 130.256 -0.906 133.548 2.646L136 5.292L136 88.874L136 172.456L166.288 142.228C193.603 114.967 196.896 112 199.836 112C204.045 112 208 116.06 208 120.382C208 123.114 203.574 127.897 169.735 161.735C134.082 197.389 131.234 200 128 200C124.766 200 121.918 197.389 86.265 161.735" />
   </font>
 </defs>
 </svg>