Better highlighting of selected items.

Especially for albums, it is difficult to which ones are
chosen for an operation, because in contrast to photos, the
only change is the thin blue border.

This commit adds a new CSS class, that is set when items
have been selected. Currently, it sets a 2px border instead
of 1px.

src/scripts/contextMenu.js

@@ -126,7 +126,7 @@ contextMenu.album = function(albumID, e) {
 		{ title: build.iconic('trash') + 'Delete', fn: () => album.delete([ albumID ]) }
 	]
 
-	$('.album[data-id="' + albumID + '"]').addClass('active')
+	multiselect.select('.album[data-id="' + albumID + '"]')
 
 	basicContext.show(items, e.originalEvent, contextMenu.close)
 
@@ -226,7 +226,7 @@ contextMenu.photo = function(photoID, e) {
 		{ title: build.iconic('trash') + 'Delete', fn: () => photo.delete([ photoID ]) }
 	]
 
-	$('.photo[data-id="' + photoID + '"]').addClass('active')
+	multiselect.select('.photo[data-id="' + photoID + '"]')
 
 	basicContext.show(items, e.originalEvent, contextMenu.close)
 
@@ -238,7 +238,7 @@ contextMenu.photoMulti = function(photoIDs, e) {
 	let photocount = photoIDs.length - subcount
 
 	if (subcount && photocount) {
-		$('.photo.active, .album.active').removeClass('active')
+		multiselect.deselect('.photo.active, .album.active')
 		multiselect.close()
 		lychee.error('Please select either albums or photos!')
 		return
@@ -389,7 +389,7 @@ contextMenu.close = function() {
 
 	basicContext.close()
 
-	$('.photo.active, .album.active').removeClass('active')
+	multiselect.deselect('.photo.active, .album.active')
 	if (visible.multiselect()) multiselect.close()
 
 }

src/scripts/multiselect.js

@@ -202,7 +202,7 @@ multiselect.getSelection = function(e) {
 			if (id!=null && id!==0 && album.isSmartID(id)===false) {
 
 				ids.push(id)
-				$(this).addClass('active')
+				multiselect.select(this)
 
 			}
 
@@ -216,6 +216,22 @@ multiselect.getSelection = function(e) {
 
 }
 
+multiselect.select = function(id) {
+
+	let el = $(id)
+	el.addClass('selected')
+	el.addClass('active')
+
+}
+
+multiselect.deselect = function(id) {
+
+	let el = $(id)
+	el.removeClass('selected')
+	el.removeClass('active')
+
+}
+
 multiselect.close = function() {
 
 	sidebar.setSelectable(true)

src/styles/_content.scss

@@ -72,6 +72,10 @@
 			transition: none;
 			border-color: darken($colorBlue, 15%);
 		}
+
+		&.selected img {
+			border-width: 2px;
+		}
 	}
 
 	// Album -------------------------------------------------------------- //