From 96bd6b240b89a05ffa177bdcc6f1a6c1167f7220 Mon Sep 17 00:00:00 2001 From: Nils Asmussen Date: Mon, 1 Aug 2016 15:33:21 +0200 Subject: [PATCH 1/4] 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 | 8 ++++---- src/scripts/multiselect.js | 18 +++++++++++++++++- src/styles/_content.scss | 4 ++++ 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/scripts/contextMenu.js b/src/scripts/contextMenu.js index 59f82ba..4dfd091 100644 --- a/src/scripts/contextMenu.js +++ b/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() } \ No newline at end of file diff --git a/src/scripts/multiselect.js b/src/scripts/multiselect.js index d4855c5..5ee0084 100644 --- a/src/scripts/multiselect.js +++ b/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) diff --git a/src/styles/_content.scss b/src/styles/_content.scss index ebbb1a9..16d1c98 100644 --- a/src/styles/_content.scss +++ b/src/styles/_content.scss @@ -72,6 +72,10 @@ transition: none; border-color: darken($colorBlue, 15%); } + + &.selected img { + border-width: 2px; + } } // Album -------------------------------------------------------------- // From 0746acda798dd5e72a0fc20877097dd02efc70d9 Mon Sep 17 00:00:00 2001 From: Nils Asmussen Date: Sun, 14 Aug 2016 20:15:20 +0200 Subject: [PATCH 2/4] Allow to select photos/albums individually (fixes #339). This commit adds support for selecting photos and albums individually via ctrl+click. For that, the event handlers in init.js call to multiselect now, which collects the photo/album ids and calls the appropriate method of contextMenu in the end. --- src/scripts/init.js | 8 ++-- src/scripts/multiselect.js | 75 +++++++++++++++++++++++++++++++++++++- 2 files changed, 78 insertions(+), 5 deletions(-) diff --git a/src/scripts/init.js b/src/scripts/init.js index fa981b8..af0d349 100755 --- a/src/scripts/init.js +++ b/src/scripts/init.js @@ -96,12 +96,12 @@ $(document).ready(function() { $(document) // Navigation - .on('click', '.album', function() { lychee.goto($(this).attr('data-id')) }) - .on('click', '.photo', function() { lychee.goto(album.getID() + '/' + $(this).attr('data-id')) }) + .on('click', '.album', function(e) { multiselect.albumClick(e, $(this)) }) + .on('click', '.photo', function(e) { multiselect.photoClick(e, $(this)) }) // Context Menu - .on('contextmenu', '.photo', function(e) { contextMenu.photo(photo.getID(), e) }) - .on('contextmenu', '.album', function(e) { contextMenu.album(album.getID(), e) }) + .on('contextmenu', '.photo', function(e) { multiselect.photoContextMenu(e, $(this)) }) + .on('contextmenu', '.album', function(e) { multiselect.albumContextMenu(e, $(this)) }) // Upload .on('change', '#upload_files', function() { basicModal.close(); upload.start.local(this.files) }) diff --git a/src/scripts/multiselect.js b/src/scripts/multiselect.js index 5ee0084..c1bacd5 100644 --- a/src/scripts/multiselect.js +++ b/src/scripts/multiselect.js @@ -3,7 +3,11 @@ * @copyright 2015 by Tobias Reich */ -multiselect = {} +multiselect = { + + ids : [] + +} multiselect.position = { @@ -22,6 +26,72 @@ multiselect.bind = function() { } +multiselect.toggleItem = function(object, id) { + + if (album.isSmartID(id)) return + + let pos = $.inArray(id, multiselect.ids) + if (pos!=-1) { + multiselect.ids.splice(pos, 1) + multiselect.deselect(object) + } + else { + multiselect.ids.push(id) + multiselect.select(object) + } + +} + +multiselect.albumClick = function(e, albumObj) { + + let id = albumObj.attr('data-id') + + if (e.ctrlKey) multiselect.toggleItem(albumObj, id) + else lychee.goto(id) + +} + +multiselect.photoClick = function(e, photoObj) { + + let id = photoObj.attr('data-id') + + if (e.ctrlKey) multiselect.toggleItem(photoObj, id) + else lychee.goto(album.getID() + '/' + id) + +} + +multiselect.albumContextMenu = function(e, albumObj) { + + let id = albumObj.attr('data-id') + + if ($.inArray(id, multiselect.ids)!=-1) { + contextMenu.albumMulti(multiselect.ids, e) + } + else { + multiselect.deselect('.photo.active, .album.active') + contextMenu.album(album.getID(), e) + } + + multiselect.ids = [] + +} + +multiselect.photoContextMenu = function(e, photoObj) { + + let id = photoObj.attr('data-id') + + if ($.inArray(id, multiselect.ids)!=-1) { + contextMenu.photoMulti(multiselect.ids, e) + } + else { + multiselect.deselect('.photo.active, .album.active') + contextMenu.photo(photo.getID(), e) + } + + multiselect.ids = [] + +} + multiselect.show = function(e) { if (lychee.publicMode) return false @@ -234,6 +304,9 @@ multiselect.deselect = function(id) { multiselect.close = function() { + multiselect.deselect('.photo.active, .album.active') + multiselect.ids = [] + sidebar.setSelectable(true) multiselect.stopResize() From ea073b43240664b749d7bcd4d8577afe8b4454df Mon Sep 17 00:00:00 2001 From: Nils Asmussen Date: Mon, 15 Aug 2016 22:02:03 +0200 Subject: [PATCH 3/4] Use outline for selected items, not border. --- src/styles/_content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_content.scss b/src/styles/_content.scss index 16d1c98..b448785 100644 --- a/src/styles/_content.scss +++ b/src/styles/_content.scss @@ -74,7 +74,7 @@ } &.selected img { - border-width: 2px; + outline: 1px solid $colorBlue; } } From 7ebe2a1aa0e367a867d901a3b289c7bed36802a9 Mon Sep 17 00:00:00 2001 From: Nils Asmussen Date: Mon, 15 Aug 2016 22:03:03 +0200 Subject: [PATCH 4/4] Clear selected items when multiselect starts. --- src/scripts/multiselect.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/scripts/multiselect.js b/src/scripts/multiselect.js index c1bacd5..781678f 100644 --- a/src/scripts/multiselect.js +++ b/src/scripts/multiselect.js @@ -66,14 +66,13 @@ multiselect.albumContextMenu = function(e, albumObj) { if ($.inArray(id, multiselect.ids)!=-1) { contextMenu.albumMulti(multiselect.ids, e) + multiselect.ids = [] } else { - multiselect.deselect('.photo.active, .album.active') + multiselect.clearSelection() contextMenu.album(album.getID(), e) } - multiselect.ids = [] - } multiselect.photoContextMenu = function(e, photoObj) { @@ -82,12 +81,18 @@ multiselect.photoContextMenu = function(e, photoObj) { if ($.inArray(id, multiselect.ids)!=-1) { contextMenu.photoMulti(multiselect.ids, e) + multiselect.ids = [] } else { - multiselect.deselect('.photo.active, .album.active') + multiselect.clearSelection() contextMenu.photo(photo.getID(), e) } +} + +multiselect.clearSelection = function() { + + multiselect.deselect('.photo.active, .album.active') multiselect.ids = [] } @@ -100,6 +105,8 @@ multiselect.show = function(e) { if (visible.search()) return false if (visible.multiselect()) $('#multiselect').remove() + multiselect.clearSelection() + sidebar.setSelectable(false) multiselect.position.top = e.pageY @@ -304,8 +311,7 @@ multiselect.deselect = function(id) { multiselect.close = function() { - multiselect.deselect('.photo.active, .album.active') - multiselect.ids = [] + multiselect.clearSelection() sidebar.setSelectable(true)