Cleans CSS, adds new grid and list view, replaces small parent-folder icon.

src/_h5ai/config.js

@@ -42,7 +42,7 @@ var H5AI_CONFIG = {
 		file sizes (see http://en.wikipedia.org/wiki/Binary_prefix).
 		*/
 		"view": {
-			"modes": ["details", "icons"],
+			"modes": ["details", "list", "grid", "icons"],
 			"setParentFolderLabels": true,
 			"binaryPrefix": false
 		},

src/_h5ai/css/inc/extended-details.less

@@ -0,0 +1,47 @@
+
+#extended.view-details {
+
+	li {
+		white-space: nowrap;
+		clear: both;
+
+		&.header {
+			display: list-item;
+		}
+
+		&.entry {
+
+			a, a:active, a:visited {
+				border-bottom: 1px solid #e8e8e8;
+			}
+		}
+
+		.icon, .label, .date, .size {
+			padding: 6px;
+		}
+
+		.icon.small {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: -2px;
+			width: 16px;
+		}
+
+		.label {
+			margin: 0 270px 0 24px;
+		}
+
+		.date {
+			position: absolute;
+			right: 100px;
+			top: 0;
+		}
+
+		.size {
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+}

src/_h5ai/css/inc/extended-grid.less

@@ -0,0 +1,44 @@
+
+#extended.view-grid {
+	padding: 3px;
+
+	li {
+
+		&.entry {
+			float: left;
+
+			a, a:active, a:visited {
+				margin: 2px;
+				padding: 8px;
+				width: 164px;
+				height: 24px;
+				float: left;
+				border-radius: 5px;
+				border: 2px solid rgba(0,0,0,0);
+				white-space: nowrap;
+
+				&:hover, &.hover {
+					border-color: #eee;
+				}
+			}
+		}
+
+		.icon.small {
+			display: inline-block;
+			position: relative;
+			left: 0;
+			top: -2px;
+			width: 16px;
+		}
+
+		.label {
+			display: inline-block;
+			padding-left: 6px;
+			max-width: 140px;
+		}
+
+		.date, .size {
+			display: none;
+		}
+	}
+}

src/_h5ai/css/inc/extended-icons.less

@@ -0,0 +1,48 @@
+
+#extended.view-icons {
+	padding: 3px;
+
+	li {
+
+		&.entry {
+			float: left;
+
+			a, a:active, a:visited {
+				margin: 8px;
+				padding: 8px;
+				width: 100px;
+				height: 120px;
+				float: left;
+				border-radius: 5px;
+				border: 2px solid rgba(0,0,0,0);
+				text-align: center;
+
+				&:hover, &.hover {
+					border-color: #eee;
+				}
+			}
+		}
+
+		.icon.big {
+			display: block;
+			height: 48px;
+			margin-bottom: 6px;
+		}
+
+		.label {
+			text-align: center;
+			word-wrap: break-word;
+			white-space: normal;
+		}
+
+		.date, .size {
+			display: none;
+		}
+	}
+
+	.empty, .no-match {
+		margin: 0 120px;
+		padding: 16px;
+		height: 120px;
+	}
+}

src/_h5ai/css/inc/extended-list.less

@@ -0,0 +1,41 @@
+
+#extended.view-list {
+
+	li {
+		white-space: nowrap;
+		clear: both;
+
+		&.entry {
+
+			a, a:active, a:visited {
+				height: 56px;
+				border-bottom: 1px solid #e8e8e8;
+			}
+		}
+
+		.icon, .label, .date, .size {
+			padding: 6px;
+		}
+
+		.icon.big {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: -2px;
+			width: 100px;
+		}
+
+		.label {
+			margin: 0 270px 0 106px;
+		}
+
+		.date {
+			margin: 0 0 0 106px;
+		}
+
+		.date, .size {
+			position: relative;
+			top: -6px;
+		}
+	}
+}

src/_h5ai/css/inc/extended.less

@@ -9,367 +9,160 @@
 	background-color: rgba(240,100,0,0.2);
 }
 
-
+#extended {
-
-#extended.view-details {
 	display: none;
 
+	a, a:active, a:visited {
+		color: #555;
+		cursor: pointer;
+		text-decoration: none;
+	}
+
 	ul {
 		margin: 0;
 		padding: 0;
 		list-style: none;
+	}
 
-		li {
+	li {
-			position: relative;
+		position: relative;
-			white-space: nowrap;
-			clear: both;
 
-			&.header {
+		&.header {
-				font-size: 13px;
+			display: none;
+			font-size: 13px;
 
-				a, a:active, a:visited {
+			a, a:active, a:visited {
-					padding-bottom: 18px;
+				padding-bottom: 18px;
+				opacity: 0.4;
+				.transition(all 0.2s ease-in-out);
+
+				img.ascending, img.descending {
+					position: relative;
+					top: -2px;
+					display: none;
+					width: 12px;
+					height: 12px;
+					padding: 0 8px;
+				}
+				&:hover {
 					color: #555;
-					text-decoration: none;
+					opacity: 0.9;
-					opacity: 0.4;
+				}
-					cursor: pointer;
+				&.ascending img.ascending {
-					.transition(all 0.2s ease-in-out);
+					display: inline;
-
+				}
-					img.ascending, img.descending {
+				&.descending img.descending {
-						position: relative;
+					display: inline;
-						top: -2px;
-						display: none;
-						width: 12px;
-						height: 12px;
-						padding: 0 8px;
-					}
-					&:hover {
-						color: #555;
-						opacity: 0.9;
-					}
-					&.ascending img.ascending {
-						display: inline;
-					}
-					&.descending img.descending {
-						display: inline;
-					}
 				}
 			}
-			&.entry {
+		}
-				a, a:active, a:visited {
-					display: block;
-					color: #555;
-					text-decoration: none;
-					cursor: pointer;
-					border-bottom: 1px solid #e8e8e8;
 
-					&:hover, &.hover {
+		&.entry {
-						background-color: #f6f6f6;
+
-						color: #e80;
+			a, a:active, a:visited {
-					}
+				display: block;
+				overflow: hidden;
+
+				&:hover, &.hover {
+					color: #e80;
+					background-color: #f6f6f6;
 				}
-				&.selected:not(.selecting) a, &.selecting:not(.selected) a {
+			}
+
+			&.selected:not(.selecting), &.selecting:not(.selected) {
+
+				a, a:active, a:visited {
 					border-color: rgba(240,100,0,0.2);
 					background-color: rgba(240,100,0,0.2);
-				}
-				&.error {
-					a, a:active, a:visited {
-						color: #aaa;
 
-						.label {
+					&:hover, &.hover {
-							.hint {
+						border-color: rgba(240,100,0,0.2);
-								margin-left: 12px;
+						background-color: rgba(240,100,0,0.2);
-								font-size: 0.9em;
-								color: #c55;
-							}
-						}
-						&:hover, &.hover {
-							opacity: 1;
-							background-color: #f6f6f6;
-							color: #e80;
-						}
-					}
-				}
-				&.folder-parent {
-					.date, .size {
-						display: none;
 					}
 				}
 			}
-			.icon, .label, .date, .size {
+		}
-				padding: 6px;
+
+		&.error {
+
+			a, a:active, a:visited {
+				color: #aaa;
+
+				&:hover, &.hover {
+					color: #e80;
+				}
 			}
-			.icon {
+
-				display: inline-block;
+			.label .hint {
-				position: absolute;
+				padding: 0 6px;
-				left: 0;
+				font-size: 0.9em;
-				top: -2px;
+				color: #c55;
-				width: 16px;
+			}
-				text-align: center;
+		}
+
+		&.folder-parent {
+
+			.date, .size {
+				display: none;
+			}
+		}
+
+		.icon {
+			display: none;
+			text-align: center;
+
+			img {
+
+				&.thumb {
+					.box-shadow(0 0 0 1px #ddd);
+				}
+			}
+
+			&.small {
 
 				img {
 					max-width: 16px;
 					max-height: 16px;
-					&.thumb {
-						.box-shadow(0 0 0 1px #ddd);
-					}
 				}
 			}
-			.icon.big {
-				display: none;
-			}
-			.label {
-				display: block;
-				margin: 0 270px 0 24px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-align: left;
-			}
-			.date {
-				position: absolute;
-				right: 100px;
-				top: 0;
-				text-align: right;
-				width: 160px;
-				white-space: nowrap;
-			}
-			.size {
-				position: absolute;
-				right: 0;
-				top: 0;
-				text-align: right;
-				width: 80px;
-				white-space: nowrap;
-			}
-		}
-	}
-	.empty, .no-match {
-		text-align: center;
-		margin: 50px 0;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-	.no-match {
-		display: none;
-	}
-}
 
-
+			&.big {
-
-
-#extended.view-list {
-	display: none;
-
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-
-		li {
-			position: relative;
-			white-space: nowrap;
-			clear: both;
-
-			&.header {
-				display: none;
-			}
-			&.entry {
-				a, a:active, a:visited {
-					display: block;
-					color: #555;
-					text-decoration: none;
-					cursor: pointer;
-					border-bottom: 1px solid #e8e8e8;
-					height: 56px;
-
-					&:hover, &.hover {
-						background-color: #f6f6f6;
-						color: #e80;
-					}
-				}
-				&.selected:not(.selecting) a, &.selecting:not(.selected) a {
-					border-color: rgba(240,100,0,0.2);
-					background-color: rgba(240,100,0,0.2);
-				}
-				&.error {
-					a, a:active, a:visited {
-						color: #aaa;
-
-						.label {
-							.hint {
-								margin-left: 12px;
-								font-size: 0.9em;
-								color: #c55;
-							}
-						}
-						&:hover, &.hover {
-							opacity: 1;
-							background-color: #f6f6f6;
-							color: #e80;
-						}
-					}
-				}
-				&.folder-parent {
-					.date, .size {
-						display: none;
-					}
-				}
-			}
-			.icon, .label, .date, .size {
-				padding: 6px;
-			}
-			.icon {
-				display: inline-block;
-				position: absolute;
-				left: 0;
-				top: -2px;
-				width: 100px;
-				text-align: center;
 
 				img {
 					max-width: 100px;
 					max-height: 48px;
-					&.thumb {
-						.box-shadow(0 0 0 1px #ddd);
-					}
 				}
 			}
-			.icon.small {
+		}
-				display: none;
+
-			}
+		.label {
-			.label {
+			display: block;
-				display: block;
+			overflow: hidden;
-				margin: 0 270px 0 106px;
+			text-align: left;
-				overflow: hidden;
+			white-space: nowrap;
-				white-space: nowrap;
+		}
-				text-align: left;
+
-			}
+		.date {
-			.date {
+			text-align: right;
-				margin: 0 0 0 106px;
+			width: 160px;
-				text-align: right;
+			white-space: nowrap;
-				width: 160px;
+		}
-				white-space: nowrap;
+
-			}
+		.size {
-			.size {
+			text-align: right;
-				text-align: right;
+			width: 80px;
-				width: 80px;
+			white-space: nowrap;
-				white-space: nowrap;
-			}
 		}
 	}
+
 	.empty, .no-match {
-		text-align: center;
 		margin: 50px 0;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-	.no-match {
-		display: none;
-	}
-}
-
-
-
-
-#extended.view-icons {
-	display: none;
-	padding: 3px;
-
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-
-		li {
-			position: relative;
-
-			&.header {
-				display: none;
-			}
-			&.entry {
-				float: left;
-
-				a, a:active, a:visited {
-					display: block;
-					margin: 8px;
-					padding: 8px;
-					width: 100px;
-					height: 120px;
-					float: left;
-					text-align: center;
-					text-decoration: none;
-					overflow: hidden;
-					border-radius: 5px;
-					color: #555;
-					cursor: pointer;
-					border: 2px solid rgba(0,0,0,0);
-
-					&:hover, &.hover {
-						color: #e80;
-						border-color: #eee;
-						background-color: #f6f6f6;
-					}
-					.icon {
-						display: block;
-						height: 48px;
-						margin-bottom: 6px;
-
-						img {
-							max-width: 100px;
-							max-height: 48px;
-							&.thumb {
-								.box-shadow(0 0 0 1px #ddd);
-							}
-						}
-					}
-					.icon.small {
-						display: none;
-					}
-					.label {
-						display: block;
-						word-wrap: break-word;
-					}
-					.date, .size {
-						display: none;
-					}
-				}
-				&.selected:not(.selecting) a, &.selecting:not(.selected) a {
-					border-color: rgba(240,100,0,0.2);
-					background-color: rgba(240,100,0,0.2);
-				}
-				&.error {
-					a, a:active, a:visited {
-						color: #aaa;
-						text-decoration: none;
-
-						.label {
-							.hint {
-								padding: 0 6px;
-								font-size: 0.9em;
-								color: #c55;
-							}
-						}
-						&:hover, &.hover {
-							color: #e80;
-							border-color: #eee;
-							background-color: #f6f6f6;
-						}
-					}
-				}
-			}
-		}
-	}
-	.empty, .no-match {
-		margin: 0 120px;
-		padding: 16px;
-		height: 120px;
 		text-align: center;
 		color: #ddd;
 		font-size: 5em;
 		font-weight: bold;
 	}
+
 	.no-match {
 		display: none;
 	}

src/_h5ai/css/styles.less

@@ -14,6 +14,10 @@
 
 @import "inc/content";
 @import "inc/extended";
+@import "inc/extended-details";
+@import "inc/extended-icons";
+@import "inc/extended-list";
+@import "inc/extended-grid";
 @import "inc/context-menu";
 @import "inc/dropbox";
 

src/_h5ai/js/inc/ext/l10n.js

@@ -10,6 +10,8 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form
 		defaultTranslations = {
 			lang: 'english',
 			details: 'details',
+			list: "list",
+			grid: "grid",
 			icons: 'icons',
 			name: 'Name',
 			lastModified: 'Last modified',

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

@@ -2,7 +2,7 @@
 modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store'], function (_, $, allsettings, resource, store) {
 
 	var defaults = {
-			modes: ['details', 'list', 'icons'],
+			modes: ['details', 'list', 'grid', 'icons'],
 			setParentFolderLabels: false
 		},
 

src/_h5ai/l10n/de.json

@@ -1,6 +1,8 @@
 {
 	"lang": "deutsch",
 	"details": "Details",
+	"list": "Liste",
+	"grid": "Gitter",
 	"icons": "Icons",
 	"name": "Name",
 	"lastModified": "Geändert",

src/_h5ai/l10n/en.json

@@ -2,6 +2,8 @@
 {
 	"lang": "english",
 	"details": "details",
+	"list": "list",
+	"grid": "grid",
 	"icons": "icons",
 	"name": "Name",
 	"lastModified": "Last modified",