arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Several basicContext improvements

Browse Source 
- Updated basicContext #245
- Scrollable context menu #215
- New move album
- Fixed context selection bug when clicking on photo/album
This commit is contained in:
Tobias Reich 2014-12-04 21:15:21 +01:00
parent 35e0627d81
commit 37040c99d7
11 changed files with 53 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

2
src/bower.json
View File

@ -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"
}
}

2
src/gulpfile.js
View File

@ -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'
]
}

1
src/images/no_cover.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

2
src/images/no_images.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 385 B

After

Width:  |  Height:  |  Size: 361 B

2
src/images/password.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 428 B

72
src/scripts/contextMenu.js
View File

@ -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() {
$('.photo.active, .album.active').removeClass('active');
context.close();
});
basicContext.show(items, e, contextMenu.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() {
context.close();
$('.photo.active, .album.active').removeClass('active');
if (visible.multiselect()) multiselect.close();
});
basicContext.show(items, e, contextMenu.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() {
context.close();
$('.photo.active, .album.active').removeClass('active');
});
basicContext.show(items, e, contextMenu.close);
}
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() {
context.close();
$('.photo.active, .album.active').removeClass('active');
if (visible.multiselect()) multiselect.close();
});
basicContext.show(items, e, contextMenu.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);
$('.context input#link').focus().select();
basicContext.show(items, e);
$('.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);
$('.context input#link').focus().select();
basicContext.show(items, e);
$('.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');
if (visible.multiselect()) multiselect.close();
}
$('.photo.active, .album.active').removeClass('active');
if (visible.multiselect()) multiselect.close();
}

3
src/scripts/visible.js
View File

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

13
src/styles/_contextmenu.scss
View File

@ -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%;