Several basicContext improvements

- Updated basicContext #245
- Scrollable context menu #215
- New move album
- Fixed context selection bug when clicking on photo/album

src/bower.json

@@ -5,6 +5,6 @@
     "jQuery": "~2.1.1",
     "js-md5": "~1.1.0",
     "mousetrap": "~1.4.6",
-    "basicContext": "~1.1.6"
+    "basicContext": "~2.0.2"
   }
 }

src/gulpfile.js

@@ -87,7 +87,7 @@ paths.main = {
 		'../src/styles/*.scss'
 	],
 	styles: [
-		'bower_components/basicContext/src/scss/basicContext.scss',
+		'bower_components/basicContext/src/styles/main.scss',
 		'../src/styles/main.scss'
 	]
 }

src/images/no_cover.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g><path d="M0 0h16v16H0V0z" fill="#444"/><rect stroke="#aaa" x="4" y="4" width="5" height="5" rx="1"/><path fill="#444" d="M6 6h8v7H6z"/><rect stroke="#aaa" x="7" y="7" width="5" height="5" rx="1"/></g></g></svg>

src/images/no_images.svg

@@ -1 +1 @@
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><title>no_images</title><g fill="none"><path fill="#222" d="M0 0h200v200H0z"/><g transform="translate(68 52)"><rect stroke="#B4B4B4" stroke-width="4" width="50" height="42" rx="3"/><path fill="#222" d="M11 11h44v36H11z"/><rect stroke="#B4B4B4" stroke-width="4" x="20" y="20" width="50" height="42" rx="3"/></g></g></svg>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fill="#222" d="M0 0h200v200H0z"/><g transform="translate(68 52)"><rect stroke="#B4B4B4" stroke-width="4" width="50" height="42" rx="3"/><path fill="#222" d="M11 11h44v36H11z"/><rect stroke="#B4B4B4" stroke-width="4" x="20" y="20" width="50" height="42" rx="3"/></g></g></svg>

src/images/password.svg

@@ -1 +1 @@
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><title>password</title><g fill="none"><path fill="#222" d="M0 0h200v200H0z"/><path d="M118 73h3c4.412 0 8 3.58 8 7.994v28.013c0 4.412-3.582 7.994-8 7.994H80c-4.413 0-8-3.578-8-7.993V80.994C72 76.582 75.58 73 80 73h3v-9.495C83 53.84 90.833 46 100.5 46S118 53.837 118 63.505V73zm-17.5-20C94.7 53 90 57.702 90 63.498V73h21v-9.502C111 57.7 106.3 53 100.5 53zm0 0" fill="#B4B4B4"/></g></svg>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fill="#222" d="M0 0h200v200H0z"/><path d="M118 73h3c4.412 0 8 3.58 8 7.994v28.013c0 4.412-3.582 7.994-8 7.994H80c-4.413 0-8-3.578-8-7.993V80.994C72 76.582 75.58 73 80 73h3v-9.495C83 53.84 90.833 46 100.5 46S118 53.837 118 63.505V73zm-17.5-20C94.7 53 90 57.702 90 63.498V73h21v-9.502C111 57.7 106.3 53 100.5 53zm0 0" fill="#B4B4B4"/></g></svg>

src/scripts/contextMenu.js

@@ -17,7 +17,7 @@ contextMenu.add = function(e) {
 		{ type: 'item', title: 'New Album', icon: 'icon-folder-close', fn: album.add }
 	];
 
-	context.show(items, e);
+	basicContext.show(items, e);
 
 	upload.notify();
 
@@ -37,7 +37,7 @@ contextMenu.settings = function(e) {
 		{ type: 'item', title: 'Sign Out', icon: 'icon-signout', fn: lychee.logout }
 	];
 
-	context.show(items, e);
+	basicContext.show(items, e);
 
 }
 
@@ -52,10 +52,7 @@ contextMenu.album = function(albumID, e) {
 
 	$('.album[data-id="' + albumID + '"]').addClass('active');
 
-	context.show(items, e, function() {
+	basicContext.show(items, e, contextMenu.close);
-		$('.photo.active, .album.active').removeClass('active');
-		context.close();
-	});
 
 }
 
@@ -68,37 +65,38 @@ contextMenu.albumMulti = function(albumIDs, e) {
 		{ type: 'item', title: 'Delete All', icon: 'icon-trash', fn: function() { album.delete(albumIDs) } }
 	];
 
-	context.show(items, e, function() {
+	basicContext.show(items, e, contextMenu.close);
-		context.close();
-		$('.photo.active, .album.active').removeClass('active');
-		if (visible.multiselect()) multiselect.close();
-	});
 
 }
 
 contextMenu.photo = function(photoID, e) {
 
+	// Notice for 'Move':
+	// fn must call basicContext.close() first,
+	// in order to keep the selection
+
 	var items = [
 		{ type: 'item', title: 'Star', icon: 'icon-star', fn: function() { photo.setStar([photoID]) } },
 		{ type: 'item', title: 'Tags', icon: 'icon-tags', fn: function() { photo.editTags([photoID]) } },
 		{ type: 'separator' },
 		{ type: 'item', title: 'Rename', icon: 'icon-edit', fn: function() { photo.setTitle([photoID]) } },
 		{ type: 'item', title: 'Duplicate', icon: 'icon-copy', fn: function() { photo.duplicate([photoID]) } },
-		{ type: 'item', title: 'Move', icon: 'icon-folder-open', fn: function() { contextMenu.move([photoID], e) } },
+		{ type: 'item', title: 'Move', icon: 'icon-folder-open', fn: function() { basicContext.close(); contextMenu.move([photoID], e); } },
 		{ type: 'item', title: 'Delete', icon: 'icon-trash', fn: function() { photo.delete([photoID]) } }
 	];
 
 	$('.photo[data-id="' + photoID + '"]').addClass('active');
 
-	context.show(items, e, function() {
+	basicContext.show(items, e, contextMenu.close);
-		context.close();
-		$('.photo.active, .album.active').removeClass('active');
-	});
 
 }
 
 contextMenu.photoMulti = function(photoIDs, e) {
 
+	// Notice for 'Move All':
+	// fn must call basicContext.close() first,
+	// in order to keep the selection and multiselect
+
 	multiselect.stopResize();
 
 	var items = [
@@ -107,15 +105,11 @@ contextMenu.photoMulti = function(photoIDs, e) {
 		{ type: 'separator' },
 		{ type: 'item', title: 'Rename All', icon: 'icon-edit', fn: function() { photo.setTitle(photoIDs) } },
 		{ type: 'item', title: 'Duplicate All', icon: 'icon-copy', fn: function() { photo.duplicate(photoIDs) } },
-		{ type: 'item', title: 'Move All', icon: 'icon-folder-open', fn: function() { contextMenu.move(photoIDs, e) } },
+		{ type: 'item', title: 'Move All', icon: 'icon-folder-open', fn: function() { basicContext.close(); contextMenu.move(photoIDs, e); } },
 		{ type: 'item', title: 'Delete All', icon: 'icon-trash', fn: function() { photo.delete(photoIDs) } }
 	];
 
-	context.show(items, e, function() {
+	basicContext.show(items, e, contextMenu.close);
-		context.close();
-		$('.photo.active, .album.active').removeClass('active');
-		if (visible.multiselect()) multiselect.close();
-	});
 
 }
 
@@ -132,7 +126,7 @@ contextMenu.photoMore = function(photoID, e) {
 	if (!(album.json&&album.json.downloadable&&album.json.downloadable==='1')&&
 		lychee.publicMode===true) items.splice(1, 1);
 
-	context.show(items, e);
+	basicContext.show(items, e);
 
 }
 
@@ -144,7 +138,7 @@ contextMenu.move = function(photoIDs, e) {
 	if (album.getID()!=='0') {
 
 		items = [
-			{ type: 'item', title: 'Unsorted', fn: function() { photo.setAlbum([photoIDs], 0) } },
+			{ type: 'item', title: 'Unsorted', fn: function() { photo.setAlbum(photoIDs, 0) } },
 			{ type: 'separator' }
 		];
 
@@ -154,7 +148,7 @@ contextMenu.move = function(photoIDs, e) {
 
 		if (data.num===0) {
 
-			// Show 'Add album' when no album available
+			// Show only 'Add album' when no album available
 			items = [
 				{ type: 'item', title: 'New Album', fn: album.add }
 			];
@@ -163,13 +157,19 @@ contextMenu.move = function(photoIDs, e) {
 
 			// Generate list of albums
 			$.each(data.content, function(index) {
+
 				var that = this;
-				if (that.id!=album.getID()) items.push({ type: 'item', title: that.title, fn: function() { photo.setAlbum([photoIDs], that.id) } });
+
+				if (!that.thumb0) that.thumb0 = 'src/images/no_cover.svg';
+				that.title = "<img class='albumCover' width='16' height='16' src='" + that.thumb0 + "'><div class='albumTitle'>" + that.title + "</div>";
+
+				if (that.id!=album.getID()) items.push({ type: 'item', title: that.title, fn: function() { photo.setAlbum(photoIDs, that.id) } });
+
 			});
 
 		}
 
-		context.show(items, e);
+		basicContext.show(items, e, contextMenu.close);
 
 	});
 
@@ -192,8 +192,8 @@ contextMenu.sharePhoto = function(photoID, e) {
 		{ type: 'item', title: 'Direct Link', icon: 'icon-link', fn: function() { window.open(photo.getDirectLink()) } }
 	];
 
-	context.show(items, e);
+	basicContext.show(items, e);
-	$('.context input#link').focus().select();
+	$('.basicContext input#link').focus().select();
 
 }
 
@@ -209,20 +209,18 @@ contextMenu.shareAlbum = function(albumID, e) {
 		{ type: 'item', title: 'Mail', icon: 'icon-envelope', fn: function() { album.share(2) } }
 	];
 
-	context.show(items, e);
+	basicContext.show(items, e);
-	$('.context input#link').focus().select();
+	$('.basicContext input#link').focus().select();
 
 }
 
-contextMenu.close = function(leaveSelection) {
+contextMenu.close = function() {
 
 	if (!visible.contextMenu()) return false;
 
-	context.close();
+	basicContext.close();
 
-	if (leaveSelection!==true) {
+	$('.photo.active, .album.active').removeClass('active');
-		$('.photo.active, .album.active').removeClass('active');
+	if (visible.multiselect()) multiselect.close();
-		if (visible.multiselect()) multiselect.close();
-	}
 
 }

src/scripts/visible.js

@@ -55,8 +55,7 @@ visible.signin = function() {
 }
 
 visible.contextMenu = function() {
-	if ($('.contextContainer').length>0) return true;
+	return basicContext.visible();
-	return false;
 }
 
 visible.multiselect = function() {

src/styles/_contextmenu.scss

@@ -3,7 +3,7 @@
  */
 
 /* Context ------------------------------------------------*/
-.context {
+.basicContext {
 
 	padding: 5px 0 6px;
 	background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
@@ -37,6 +37,17 @@
 			}
 		}
 
+			tr td .albumCover {
+				border-radius: 2px;
+				box-shadow: 0 0 0 1px rgba(0,0,0,.5);
+				position: absolute;
+			}
+
+			tr td .albumTitle {
+				display: inline-block;
+				margin: 0 0 3px 26px;
+			}
+
 	/* Link ------------------------------------------------*/
 	input#link {
 		width: 100%;