now Esc clears preview filters + minor refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/features/keyboard.js

@@ -56,6 +56,16 @@ module.GLOBAL_KEYBOARD = {
 		L: 'toggleSlideshowLooping -- Toggle slideshow looping',
 	},
 
+	'Preview filter': {
+		doc: 'Preview filter applied',
+		pattern: '.filter-applied',
+		drop: [
+			'Esc',
+		],
+
+		Esc: 'togglePreviewFilter: "No filters" -- Clear preview filter',
+	},
+
 	// XXX do we need to prevent up/down navigation here, it may get confusing?
 	// XXX do we need to disable fast sorting here???
 	'Single Image': {
@@ -442,6 +452,8 @@ module.GLOBAL_KEYBOARD = {
 
 
 		// filters...
+		// NOTE: Esc will also clear the filter (see "Preview filter" mode above)...
+		shift_F: 'browseActions: "/Image/Preview filter/" -- Preview filters...',
 		';': 'togglePreviewFilter: "Show shadows" -- Preview shadows',
 		':': 'togglePreviewFilter: "Show highlights" -- Preview highlights',
 		'caps+:': ':',

ui (gen4)/features/ui.js

@@ -2144,10 +2144,14 @@ module.PreviewFilters = core.ImageGridFeatures.Feature({
 
 	config: {
 		'preview-filters': {
-			'Black and white': 'image-bw',
+			// exposure aids...
 			'Show shadows': 'image-show-shadows',
 			'Show highlights': 'image-show-highlights',
+
+			// sharpness aids...
+			'Black and white': 'image-bw',
 			'Edge detect': 'image-edge-detect',
+
 			'No filters': 'none',
 		},
 	},
@@ -2193,15 +2197,29 @@ module.PreviewFilters = core.ImageGridFeatures.Feature({
 					var classes = Object.values(filters)
 						.filter(function(c){ return c != cls })
 					this.dom
-						.find('.'+ classes.join(', .'))
+						.find('.filter-applied')
-							.removeClass(classes.join(' '))
+							.removeClass(classes.join(' ') +' filter-applied')
 
 					// toggle filter...
-					if(state in filters){
+					if(cls != 'none' && state in filters){
-						img.toggleClass(cls)
+						// NOTE: we are not using .toggleClass(..) here 
+						// 		because we need to ensure *both* the cls 
+						// 		and '.filter-applied' classes are set to
+						// 		the same state...
+						if(img.hasClass(cls)){
+							img.removeClass(cls +' filter-applied')
+
+						} else {
+							img.addClass(cls +' filter-applied')
+							return state
+						}
 					}
 
-					return img.hasClass(cls) ? state : 'No filters'
+					// XXX not sure if this is needed...
+					//return (cls != 'none' && img.hasClass(cls)) ? 
+					//	state 
+					//	: 'No filters'
+					return 'No filters'
 				},
 				function(){ 
 					return Object.keys(this.config['preview-filters']) })],