New dialog system (WIP)

+ Added vars for shadows
+ Removed ctrl-modifer (#288)

src/bower.json

@@ -5,6 +5,7 @@
     "jQuery": "~2.1.3",
     "js-md5": "~1.1.0",
     "mousetrap": "~1.4.6",
-    "basicContext": "~2.0.2"
+    "basicContext": "~2.0.2",
+    "basicModal": "~2.0.0"
   }
 }

src/gulpfile.js

@@ -74,6 +74,7 @@ paths.main = {
 		'bower_components/mousetrap/mousetrap.min.js',
 		'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
 		'bower_components/basicContext/dist/basicContext.min.js',
+		'bower_components/basicModal/dist/basicModal.min.js',
 		'../src/scripts/*.js'
 	],
 	coffee: [
@@ -88,6 +89,7 @@ paths.main = {
 	],
 	styles: [
 		'bower_components/basicContext/src/styles/main.scss',
+		'bower_components/basicModal/src/styles/main.scss',
 		'../src/styles/main.scss'
 	]
 }

src/scripts/album.js

@@ -99,21 +99,18 @@ album.parse = function() {
 
 album.add = function() {
 
-	var title,
+	var action;
-		params,
+
-		buttons,
+	action = function(data) {
+
+		var params,
 			isNumber = function(n) { return !isNaN(parseFloat(n)) && isFinite(n) };
 
-	buttons = [
+		basicModal.close();
-		['Create Album', function() {
 
-			title = $('.message input.text').val();
+		if (data.title.length===0) data.title = 'Untitled';
 
-			if (title.length===0) title = 'Untitled';
+		params = 'addAlbum&title=' + escape(encodeURI(data.title));
-
-			modal.close();
-
-			params = 'addAlbum&title=' + escape(encodeURI(title));
 		lychee.api(params, function(data) {
 
 			// Avoid first album to be true
@@ -128,25 +125,39 @@ album.add = function() {
 
 		});
 
-		}],
+	}
-		['Cancel', function() {}]
-	];
 
-	modal.show('New Album', "Enter a title for this album: <input class='text' type='text' maxlength='30' placeholder='Title' value='Untitled'>", buttons);
+	basicModal.show({
+		body: "<p>Enter a title for the new album: <input class='text' data-name='title' type='text' maxlength='30' placeholder='Title' value='Untitled'></p>",
+		buttons: {
+			action: {
+				title: 'Create Album',
+				fn: action
+			},
+			cancel: {
+				title: 'Cancel',
+				fn: basicModal.close
+			}
+		}
+	});
 
 }
 
 album.delete = function(albumIDs) {
 
-	var params,
+	var action = {},
-		buttons,
+		cancel = {},
-		albumTitle;
+		msg = '',
+		albumTitle = '';
 
 	if (!albumIDs) return false;
 	if (albumIDs instanceof Array===false) albumIDs = [albumIDs];
 
-	buttons = [
+	action.fn = function() {
-		['', function() {
+
+		var params;
+
+		basicModal.close();
 
 		params = 'deleteAlbum&albumIDs=' + albumIDs;
 		lychee.api(params, function(data) {
@@ -170,45 +181,56 @@ album.delete = function(albumIDs) {
 
 		});
 
-		}],
+	}
-		['', function() {}]
-	];
 
 	if (albumIDs.toString()==='0') {
 
-		buttons[0][0] = 'Clear Unsorted';
+		action.title = 'Clear Unsorted';
-		buttons[1][0] = 'Keep Unsorted';
+		cancel.title = 'Keep Unsorted';
 
-		modal.show('Clear Unsorted', "Are you sure you want to delete all photos from 'Unsorted'?<br>This action can't be undone!", buttons);
+		msg = "<p>Are you sure you want to delete all photos from 'Unsorted'?<br>This action can't be undone!</p>";
 
 	} else if (albumIDs.length===1) {
 
-		buttons[0][0] = 'Delete Album and Photos';
+		action.title = 'Delete Album and Photos';
-		buttons[1][0] = 'Keep Album';
+		cancel.title = 'Keep Album';
 
 		// Get title
 		if (album.json)			albumTitle = album.json.title;
 		else if (albums.json)	albumTitle = albums.json.content[albumIDs].title;
 
-		modal.show('Delete Album', "Are you sure you want to delete the album '" + albumTitle + "' and all of the photos it contains? This action can't be undone!", buttons);
+		msg = "<p>Are you sure you want to delete the album '" + albumTitle + "' and all of the photos it contains? This action can't be undone!</p>";
 
 	} else {
 
-		buttons[0][0] = 'Delete Albums and Photos';
+		action.title = 'Delete Albums and Photos';
-		buttons[1][0] = 'Keep Albums';
+		cancel.title = 'Keep Albums';
 
-		modal.show('Delete Albums', "Are you sure you want to delete all " + albumIDs.length + " selected albums and all of the photos they contain? This action can't be undone!", buttons);
+		msg = "<p>Are you sure you want to delete all " + albumIDs.length + " selected albums and all of the photos they contain? This action can't be undone!</p>";
 
 	}
 
+	basicModal.show({
+		body: msg,
+		buttons: {
+			action: {
+				title: action.title,
+				fn: action.fn,
+				class: 'red'
+			},
+			cancel: {
+				title: cancel.title,
+				fn: basicModal.close
+			}
+		}
+	});
+
 }
 
 album.setTitle = function(albumIDs) {
 
 	var oldTitle = '',
-		newTitle,
+		input;
-		params,
-		buttons;
 
 	if (!albumIDs) return false;
 	if (albumIDs instanceof Array===false) albumIDs = [albumIDs];
@@ -224,11 +246,15 @@ album.setTitle = function(albumIDs) {
 
 	}
 
-	buttons = [
+	action = function(data) {
-		['Set Title', function() {
+
+		var params,
+			newTitle;
+
+		basicModal.close();
 
 		// Get input
-			newTitle = $('.message input.text').val();
+		newTitle = data.title;
 
 		// Remove html from input
 		newTitle = lychee.removeHTML(newTitle);
@@ -262,12 +288,26 @@ album.setTitle = function(albumIDs) {
 
 		});
 
-		}],
+	}
-		['Cancel', function() {}]
-	];
 
-	if (albumIDs.length===1) modal.show('Set Title', "Enter a new title for this album: <input class='text' type='text' maxlength='30' placeholder='Title' value='" + oldTitle + "'>", buttons);
+	input = "<input class='text' data-name='title' type='text' maxlength='30' placeholder='Title' value='" + oldTitle + "'>";
-	else modal.show('Set Titles', "Enter a title for all " + albumIDs.length + " selected album: <input class='text' type='text' maxlength='30' placeholder='Title' value='" + oldTitle + "'>", buttons);
+
+	if (albumIDs.length===1)	msg = "<p>Enter a new title for this album: " + msg + "</p>";
+	else						msg = "<p>Enter a title for all " + albumIDs.length + " selected albums: " + msg +"</p>";
+
+	basicModal.show({
+		body: msg,
+		buttons: {
+			action: {
+				title: 'Set title',
+				fn: action
+			},
+			cancel: {
+				title: 'Cancel',
+				fn: basicModal.close
+			}
+		}
+	});
 
 }
 

src/scripts/init.js

@@ -71,8 +71,8 @@ $(document).ready(function() {
 	Mousetrap
 		.bind('left',			function() { if (visible.photo()) $('#imageview a#previous').click() })
 		.bind('right',			function() { if (visible.photo()) $('#imageview a#next').click() })
-		.bind(['u', 'ctrl+u'],	function() { $('#upload_files').click() })
+		.bind('u',	function() { $('#upload_files').click() })
-		.bind(['s', 'ctrl+s', 'f', 'ctrl+f'], function(e) {
+		.bind(['s', 'f'], function(e) {
 			if (visible.photo()) {
 				header.dom('#button_star').click();
 			} else if (visible.albums()) {
@@ -80,23 +80,23 @@ $(document).ready(function() {
 				header.dom('#search').focus();
 			}
 		})
-		.bind(['r', 'ctrl+r'], function(e) {
+		.bind('r', function(e) {
 			e.preventDefault();
 			if (visible.album())		album.setTitle(album.getID());
 			else if (visible.photo())	photo.setTitle([photo.getID()]);
 		})
-		.bind(['d', 'ctrl+d'], function(e) {
+		.bind('d', function(e) {
 			e.preventDefault();
 			if (visible.photo())		photo.setDescription(photo.getID());
 			else if (visible.album())	album.setDescription(album.getID());
 		})
-		.bind(['t', 'ctrl+t'], function(e) {
+		.bind('t', function(e) {
 			if (visible.photo()) {
 				e.preventDefault();
 				photo.editTags([photo.getID()]);
 			}
 		})
-		.bind(['i', 'ctrl+i'], function() {
+		.bind('i', function() {
 			if (visible.infobox())				view.infobox.hide();
 			else if (visible.multiselect())		return false;
 			else if (visible.infoboxbutton())	view.infobox.show();
@@ -111,12 +111,12 @@ $(document).ready(function() {
 		});
 
 	Mousetrap.bindGlobal('enter', function() {
-		if ($('.message .button.active').length) $('.message .button.active').addClass('pressed').click()
+		if (basicModal.visible()===true) basicModal.action();
 	});
 
 	Mousetrap.bindGlobal(['esc', 'command+up'], function(e) {
 		e.preventDefault();
-		if (visible.message()&&$('.message .close').length>0)		modal.close();
+		if (basicModal.visible()===true)							basicModal.cancel();
 		else if (visible.contextMenu())								contextMenu.close();
 		else if (visible.infobox())									view.infobox.hide();
 		else if (visible.photo())									lychee.goto(album.getID());

src/scripts/lychee.js

@@ -274,12 +274,12 @@ lychee.setMode = function(mode) {
 		.off('drop');
 
 	Mousetrap
-		.unbind(['u', 'ctrl+u'])
+		.unbind('u')
-		.unbind(['s', 'ctrl+s'])
+		.unbind('s')
-		.unbind(['f', 'ctrl+f'])
+		.unbind('f')
-		.unbind(['r', 'ctrl+r'])
+		.unbind('r')
-		.unbind(['d', 'ctrl+d'])
+		.unbind('d')
-		.unbind(['t', 'ctrl+t'])
+		.unbind('t')
 		.unbind(['command+backspace', 'ctrl+backspace'])
 		.unbind(['command+a', 'ctrl+a']);
 
@@ -290,7 +290,7 @@ lychee.setMode = function(mode) {
 
 	} else if (mode==='view') {
 
-		Mousetrap.unbind('esc');
+		Mousetrap.unbind(['esc', 'command+up']);
 		$('#button_back, a#next, a#previous').remove();
 		$('.no_content').remove();
 

src/scripts/upload.js

@@ -229,29 +229,28 @@ upload.start = {
 	url: function() {
 
 		var albumID = album.getID(),
-			params,
+			action;
-			extension,
-			buttons,
-			link,
-			files = [];
 
 		if (albumID===false) albumID = 0;
 
-		buttons = [
+		action = function(data) {
-			['Import', function() {
 
-				link = $('.message input.text').val();
+			var params,
+				extension,
+				files = [];
 
-				if (link&&link.length>3) {
+			basicModal.close();
 
-					extension = link.split('.').pop();
+			if (data.link&&data.link.length>3) {
+
+				extension = data.link.split('.').pop();
 				if (extension!=='jpeg'&&extension!=='jpg'&&extension!=='png'&&extension!=='gif'&&extension!=='webp') {
 					loadingBar.show('error', 'The file format of this link is not supported.');
 					return false;
 				}
 
 				files[0] = {
-						name:		link,
+					name:		data.link,
 					supported:	true
 				}
 
@@ -259,7 +258,7 @@ upload.start = {
 					$('.upload_message .rows .row .status').html('Importing');
 				});
 
-					params = 'importUrl&url=' + escape(encodeURI(link)) + '&albumID=' + albumID;
+				params = 'importUrl&url=' + escape(encodeURI(data.link)) + '&albumID=' + albumID;
 				lychee.api(params, function(data) {
 
 					upload.close();
@@ -276,31 +275,38 @@ upload.start = {
 
 			} else loadingBar.show('error', 'Link to short or too long. Please try another one!');
 
-			}],
+		}
-			['Cancel', function() {}]
-		];
 
-		modal.show('Import from Link', "Please enter the direct link to a photo to import it: <input class='text' type='text' placeholder='http://' value='http://'>", buttons);
+		basicModal.show({
+			body: "<p>Please enter the direct link to a photo to import it: <input class='text' data-name='link' type='text' placeholder='http://' value='http://'></p>",
+			buttons: {
+				action: {
+					title: 'Import',
+					fn: action
+				},
+				cancel: {
+					title: 'Cancel',
+					fn: basicModal.close
+				}
+			}
+		});
 
 	},
 
 	server: function() {
 
 		var albumID = album.getID(),
-			params,
+			action;
-			buttons,
-			files = [],
-			path;
 
 		if (albumID===false) albumID = 0;
 
-		buttons = [
+		action = function(data) {
-			['Import', function() {
 
-				path = $('.message input.text').val();
+			var params,
+				files = [];
 
 			files[0] = {
-					name:		path,
+				name:		data.path,
 				supported:	true
 			};
 
@@ -308,7 +314,7 @@ upload.start = {
 				$('.upload_message .rows .row .status').html('Importing');
 			});
 
-				params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(path));
+			params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(data.path));
 			lychee.api(params, function(data) {
 
 				upload.close();
@@ -329,11 +335,21 @@ upload.start = {
 
 			});
 
-			}],
+		}
-			['Cancel', function() {}]
-		];
 
-		modal.show('Import from Server', "This action will import all photos, folders and sub-folders which are located in the following directory. The <b>original files will be deleted</b> after the import when possible. <input class='text' type='text' maxlength='100' placeholder='Absolute path to directory' value='" + lychee.location + "uploads/import/'>", buttons);
+		basicModal.show({
+			body: "<p>This action will import all photos, folders and sub-folders which are located in the following directory. The <b>original files will be deleted</b> after the import when possible. <input class='text' data-name='path' type='text' maxlength='100' placeholder='Absolute path to directory' value='" + lychee.location + "uploads/import/'></p>",
+			buttons: {
+				action: {
+					title: 'Import',
+					fn: action
+				},
+				cancel: {
+					title: 'Cancel',
+					fn: basicModal.close
+				}
+			}
+		});
 
 	},
 

src/styles/_content.scss

@@ -136,7 +136,7 @@
 		.iconic {
 			fill: #fff;
 			width: 21px;
-			filter: drop-shadow( 0 -1px 0 black(.1) );
+			filter: drop-shadow($shadowLight);
 		}
 	}
 
@@ -148,7 +148,7 @@
 		width: 100%;
 		opacity: 0;
 		border-top: 1px solid white(.02);
-		box-shadow: 0 -1px 0 0 black(.2);
+		box-shadow: $shadow;
 
 		&:first-child {
 			margin-top: 10px;
@@ -162,7 +162,7 @@
 			color: white(.6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 black(.1);
+			text-shadow: $shadow;
 		}
 	}
 

src/styles/_contextmenu.scss

@@ -15,9 +15,9 @@
 	/* Item ------------------------------------------------*/
 	tr {
 		margin-bottom: 2px;
-		color: #eee;
+		color: white(.9);
 		font-size: 14px;
-		text-shadow: 0 -1px 0px black(.1);
+		text-shadow: $shadowLight;
 
 		&.separator {
 			background: black(.2);
@@ -28,7 +28,7 @@
 		tr td {
 			padding: 7px 25px 6px 12px;
 			min-width: auto;
-			color: #fff;
+			color: white(1);
 			border-radius: 0;
 			transition: none;
 

src/styles/_etc.scss

@@ -12,9 +12,13 @@
 }
 
 /* Vars ------------------------------------------------*/
+// Properties
+$shadowLight:	0 -1px 0 black(.1);
+$shadow:		0 -1px 0 black(.2);
+
 // Colors
 $colorBlue:		#2293EC;
-$colorRed:		#d02a32;
+$colorRed:		#d92c34;
 
 // Animations
 $timing:		cubic-bezier(.51, .92, .24, 1);

src/styles/_header.scss

@@ -42,7 +42,7 @@ header {
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 black(.2);
+		text-shadow: $shadow;
 		z-index: 1;
 
 		.iconic {
@@ -50,7 +50,7 @@ header {
 			margin: 0 0 0 10px;
 			width: 10px;
 			fill: white(.5);
-			filter: drop-shadow(0 -1px 0 black(.2));
+			filter: drop-shadow($shadow);
 			transition: fill .2s ease-out;
 		}
 
@@ -84,7 +84,7 @@ header {
 
 		.iconic {
 			fill: white(.5);
-			filter: drop-shadow(0 -1px 0 black(.2));
+			filter: drop-shadow($shadow);
 			transition: fill .2s ease-out;
 		}
 
@@ -149,7 +149,7 @@ header {
 		margin: 13px 9px;
 		color: #888;
 		font-size: 13px;
-		text-shadow: 0 -1px 0 black(.2);
+		text-shadow: $shadow;
 		border-radius: 100px;
 		display: none;
 		cursor: pointer;

src/styles/_infobox.scss

@@ -43,7 +43,7 @@
 
 		.iconic {
 			fill: white(.5);
-			filter: drop-shadow(0 -1px 0 black(.2));
+			filter: drop-shadow($shadow);
 			transition: fill .2s ease-out;
 		}
 
@@ -73,7 +73,7 @@
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 black(.2);
+		text-shadow: $shadow;
 	}
 
 	.header .close {
@@ -84,7 +84,7 @@
 
 		.iconic {
 			fill: #888;
-			filter: drop-shadow(0 -1px 0 black(.2));
+			filter: drop-shadow($shadow);
 			transition: fill .2s ease-out;
 		}
 
@@ -97,7 +97,7 @@
 		padding: 12px 0 8px;
 		width: 100%;
 		border-top: 1px solid white(.02);
-		box-shadow: 0 -1px 0 0 black(.2);
+		box-shadow: $shadow;
 
 		h1 {
 			margin: 0 0 0 20px;

src/styles/_message.scss

@@ -2,6 +2,80 @@
  * @copyright   2014 by Tobias Reich
  */
 
+.basicModalContainer {
+	background-color: black(.85);
+}
+
+.basicModal {
+
+	background: linear-gradient(to bottom, #444, #333);
+
+	border: 1px solid black(.7);
+	border-bottom: 1px solid black(.8);
+	box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
+
+	p {
+		display: block;
+		padding: 42px 30px 40px;
+		color: white(.9);
+		font-size: 14px;
+		text-align: left;
+		text-shadow: $shadow;
+		line-height: 20px;
+
+		b {
+			font-weight: bold;
+			color: white(1);
+		}
+
+		a {
+			color: white(.9);
+			text-decoration: none;
+			border-bottom: 1px dashed #888;
+		}
+	}
+
+	.basicModal__button {
+		padding: 13px 0 15px;
+		background: black(.02);
+		color: white(.5);
+		text-shadow: $shadow;
+		border-top: 1px solid black(.2);
+		box-shadow: inset 0 1px 0 white(.02);
+
+		&:hover { background: white(.02); }
+
+		&:active,
+		&--active { background: black(.1); }
+
+		&#basicModal__action {
+			color: $colorBlue;
+			box-shadow: inset 0 1px 0 white(.02), inset 1px 0 0 black(.2);
+		}
+
+		&#basicModal__action.red { color: $colorRed; }
+
+	}
+
+	/* Input ------------------------------------------------*/
+	input.text {
+		width: calc(100% - 4px);
+		padding: 9px 2px;
+		margin: 10px 0;
+		background-color: transparent;
+		color: #fff;
+		text-shadow: $shadow;
+		border: none;
+		border-bottom: 1px solid black(.4);
+		border-radius: 0;
+		box-shadow: 0 1px 0 white(.08);
+		outline: none;
+
+		&:focus { border-bottom-color: $colorBlue; }
+	}
+
+}
+
 .message_overlay {
 	position: fixed;
 	width: 100%;
@@ -112,7 +186,7 @@
 		margin-top: 10px;
 		background-color: transparent;
 		color: #fff;
-		text-shadow: 0 -1px 0 black(.3);
+		text-shadow: $shadow;
 		border: none;
 		box-shadow: 0 1px 0 white(.1);
 		border-bottom: 1px solid #222;