Popover init

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 76 insertions, 11 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index d895572f9b0..efd236af4a2 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -33,6 +33,7 @@
 	 */
 	var BreadCrumb = function(options){
 		this.$el = $('<div class="breadcrumb"></div>');
+		this.$menu = $('<div class="popovermenu menu-center open"><ul></ul></div>');
 		options = options || {};
 		if (options.onClick) {
 			this.onClick = options.onClick;
@@ -73,6 +74,8 @@
 		 * @param dir path to be displayed as breadcrumb
 		 */
 		setDirectory: function(dir) {
+			var err = new Error();
+			console.log(err.stack);
 			dir = dir.replace(/\\/g, '/');
 			dir = dir || '/';
 			if (dir !== this.dir) {
@@ -118,11 +121,18 @@
 			for (var i = 0; i < parts.length; i++) {
 				var part = parts[i];
 				var $image;
-				var $link = $('<a></a>').attr('href', this.getCrumbUrl(part, i));
-				$link.text(part.name);
+				var $link = $('<a></a>');
+				if(part.dir) {
+					$link.attr('href', this.getCrumbUrl(part, i));
+				}
+				if(part.name) {
+					$link.text(part.name);
+				}
+				$link.addClass(part.linkclass);
 				$crumb = $('<div class="crumb svg"></div>');
 				$crumb.append($link);
 				$crumb.attr('data-dir', part.dir);
+				$crumb.addClass(part.class);
 
 				if (part.img) {
 					$image = $('<img class="svg"></img>');
@@ -159,6 +169,8 @@
 					hoverClass: 'canDrop'
 				});
 			}
+
+			this._createMenu();
 			this._resize();
 		},
 
@@ -180,9 +192,12 @@
 			// root part
 			crumbs.push({
 				dir: '/',
-				name: '',
-				alt: t('files', 'Home'),
-				img: OC.imagePath('core', 'places/home.svg')
+				linkclass: 'icon-home'
+			});
+			// menu part
+			crumbs.push({
+				class: 'crumbmenu',
+				linkclass: 'icon-more'
 			});
 			for (var i = 0; i < parts.length; i++) {
 				var part = parts[i];
@@ -199,10 +214,11 @@
  		 * Hide the middle crumb
  		 */
  		 _hideCrumb: function() {
-			 var length = this.$el.find('.crumb:not(.hidden)').length;
+			 var selector = '.crumb:not(.hidden):not(.crumbmenu)';
+			 var length = this.$el.find(selector).length;
 			 // Get the middle one floored down
 			 var elmt = Math.floor(length / 2 - 0.5);
-			 this.$el.find('.crumb:not(.hidden):eq('+elmt+')').addClass('hidden');
+			 this.$el.find(selector+':eq('+elmt+')').addClass('hidden');
  		 },
 
  		/**
@@ -225,6 +241,30 @@
 			 this._getCrumbElement().removeClass('hidden');
  		 },
 
+		 /**
+		 * Create and append the popovermenu
+		 */
+		 _createMenu: function() {
+			 this.$el.find('.crumbmenu').append(this.$menu);
+		 },
+
+		 /**
+		 * Update the popovermenu
+		 */
+		 _updateMenu: function() {
+			 var menuItems = this.$el.children('.crumb.hidden').clone();
+			 // Hide the crumb menu if no elements
+			 this.$el.find('.crumbmenu').toggleClass('hidden', menuItems.length===0)
+
+			 this.$menu.children('ul').html(menuItems);
+			 this.$menu.find('div').replaceWith(function(){
+				 return $('<li/>', {
+					 html: this.innerHTML
+				 })
+			 });
+			 this.$menu.find('a').addClass('icon-triangle-e').wrapInner('<span/>');
+		 },
+
 		_resize: function() {
 			var i, $crumb, $ellipsisCrumb;
 
@@ -247,6 +287,7 @@
 				this._showCrumb();
 			}
 
+			this._updateMenu();
 		}
 	};
 
diff --git a/core/css/styles.scss b/core/css/styles.scss
index e35f496f8f9..dda502df4d4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -1400,18 +1400,39 @@ div.crumb {
 	height: 44px;
 	background-size: auto 24px;
 	flex: 0 0 auto;
+	order: 1;
+	&.crumbmenu {
+		order: 2;
+		position: relative;
+		a {
+			opacity: 0.5
+		}
+		// Fix because of the display flex
+		.popovermenu {
+			top: 100%;
+			margin-right: 3px;
+		}
+	}
 	&.hidden {
 		display: none;
+		~ .crumb {
+			order: 3;
+		}
 	}
-	a,
+	> a,
 	> span {
 		position: relative;
 		padding: 12px 24px 12px 17px;
-		color: nc-lighten($color-main-text, 33%);
+		opacity: 0.5;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 	}
+	> a[class^='icon-'] {
+		padding: 0;
+		width: 44px;
+		margin-right: 7px;
+	}
 	&:not(:first-child) a {
 	}
 	&:last-child {
@@ -1422,7 +1443,10 @@ div.crumb {
 		}
 	}
 	&:hover, &:focus, a:focus, &:active {
-		opacity: .7;
+		> a,
+		> span {
+			opacity: .7;
+		}
 	}
 }
 
diff --git a/core/img/places/home.svg b/core/img/places/home.svg
index 30ef3e31ad4..7ef6db0fde1 100644
--- a/core/img/places/home.svg
+++ b/core/img/places/home.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path opacity=".5" d="M8 1.03L0 9h3v6h10V9h3l-3-3.03V2h-3v1.08L8 1.03z" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path d="M8 1.03L0 9h3v6h10V9h3l-3-3.03V2h-3v1.08L8 1.03z" fill-rule="evenodd"/></svg>
\ No newline at end of file