Improves selectors.

src/_h5ai/client/css/inc/general.less

@@ -4,6 +4,7 @@
 @col-hover: rgb(29,119,194);
 @col-border: rgba(0,0,0,0.05);
 @col-border-strong: rgba(0,0,0,0.15);
+@col-border-stronger: rgba(0,0,0,0.3);
 
 @col-error: rgb(204,51,51);
 

src/_h5ai/client/css/inc/view-grid.less

@@ -8,7 +8,7 @@
 			margin: 2px;
 
 			a, a:active, a:visited {
-				width: @icon-size + 186px;
+				width: @icon-size + 182px;
 				height: @icon-size + 6px;
 				border: 1px solid rgba(0,0,0,0);
 
@@ -58,7 +58,7 @@
 		&.item {
 
 			a, a:active, a:visited {
-				width: @size + 186px;
+				width: @size + 182px;
 				height: @size + 6px;
 			}
 

src/_h5ai/client/css/inc/view.less

@@ -21,47 +21,6 @@
 	background-color: rgba(0,0,0,0.01);
 }
 
-#selector {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 24px;
-	height: 24px;
-	margin-top: -3px;
-	margin-left: -3px;
-	background-color: #f8f8f8;
-	border: 1px solid rgba(0,0,0,0.3);
-	border-radius: 3px;
-	opacity: 0.6;
-	cursor: pointer;
-	.transition(all 0.2s ease-in-out);
-
-	.on-selected, .on-not-selected {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.item.selected {
-	#selector {
-		.on-not-selected {
-			display: none;
-		}
-	}
-}
-.item:not(.selected) {
-	#selector {
-		.on-selected {
-			display: none;
-		}
-	}
-}
-
 
 #view {
 	display: none;
@@ -124,6 +83,10 @@
 					color: @col-hover;
 					background-color: @item-background-col-hover;
 					border-color: @item-border-col-hover;
+
+					.selector {
+						display: block;
+					}
 				}
 			}
 
@@ -138,6 +101,15 @@
 						border-color: @item-border-col-sel;
 					}
 				}
+
+				.selector {
+					display: block;
+					// border-color: @col-border-stronger;
+
+					img {
+						display: block;
+					}
+				}
 			}
 		}
 
@@ -194,6 +166,29 @@
 			text-align: right;
 			width: 80px;
 		}
+
+		.selector {
+			display: none;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 18px;
+			height: 18px;
+			background-color: #fff;
+			border: 1px solid @col-border-strong;
+			cursor: pointer;
+			.transition(all 0.2s ease-in-out);
+
+			&:hover {
+				border-color: @col-border-stronger;
+			}
+
+			img {
+				display: none;
+				width: 100%;
+				height: 100%;
+			}
+		}
 	}
 
 	.empty, .no-match {

src/_h5ai/client/js/inc/ext/select.js

@@ -115,31 +115,14 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
 		initItem = function (item) {
 
 			if (item.$view) {
-				item.$view.find('a')
+				item.$view.find('.selector').on('click', function (event) {
-					.on('mouseenter', function () {
 
-						var $icon = item.$view.find('.icon');
+					event.stopImmediatePropagation();
+					event.preventDefault();
 
-						$('#selector').remove();
+					item.$view.toggleClass('selected');
-						$('<div id="selector">' +
+					publish();
-							'<img src="' + resource.image('select') + '" class="on-selected" alt="selected" />' +
+				});
-							'<img src="' + resource.image('blank') + '" class="on-not-selected" alt="not-selected" />' +
-							'</div>')
-							.on('click', function (event) {
-
-								event.stopImmediatePropagation();
-								event.preventDefault();
-
-								item.$view.toggleClass('selected');
-								publish();
-							})
-							.appendTo(item.$view.find('a'));
-					})
-					.on('mouseleave', function () {
-
-						$('.hover').removeClass('hover');
-						$('#selector').remove();
-					});
 			}
 		},
 

src/_h5ai/client/js/inc/view/items.js

@@ -15,6 +15,9 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
 							'<span class="label"/>' +
 							'<span class="date"/>' +
 							'<span class="size"/>' +
+							'<span class="selector">' +
+								'<img src="' + resource.image('select') + '" alt="selected"/>' +
+							'</span>' +
 						'</a>' +
 					'</li>',
 		hintTemplate = '<span class="hint"/>',
@@ -72,6 +75,7 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
 					$label.addClass('l10n-parentDirectory');
 				}
 				$html.addClass('folder-parent');
+				$html.find('.selector').remove();
 			}
 
 			if (item.$view) {

src/_h5ai/client/js/inc/view/viewmode.js

@@ -29,7 +29,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 
 			var contentWidth = $('#content').width(),
 				$view = $('#view'),
-				itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).width() || 1) : 1;
+				itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).outerWidth(true) || 1) : 1;
 
 			$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
 		},