From aa725f11f80f6430fa3c40c7dff3761efa8e6dbf Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Wed, 28 Aug 2013 17:12:30 +0200
Subject: [PATCH] Adds variable icon sizes.

---
 src/_h5ai/client/css/inc/view-details.less |  58 ++++++
 src/_h5ai/client/css/inc/view-grid.less    |  61 ++++++-
 src/_h5ai/client/css/inc/view-icons.less   |  56 ++++++
 src/_h5ai/client/css/inc/view-list.less    |  67 -------
 src/_h5ai/client/css/inc/view.less         |  37 ----
 src/_h5ai/client/css/styles.less           |   1 -
 src/_h5ai/client/images/size.svg           | 194 +++++++++++++++++++++
 src/_h5ai/client/js/inc/view/viewmode.js   | 101 +++++++++--
 src/_h5ai/conf/options.json                |   7 +-
 9 files changed, 458 insertions(+), 124 deletions(-)
 delete mode 100644 src/_h5ai/client/css/inc/view-list.less
 create mode 100644 src/_h5ai/client/images/size.svg

diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less
index ae81517b..2348cf3c 100644
--- a/src/_h5ai/client/css/inc/view-details.less
+++ b/src/_h5ai/client/css/inc/view-details.less
@@ -65,3 +65,61 @@
 		}
 	}
 }
+
+
+.view-details-sized(@size) {
+
+	li {
+
+		&.item {
+
+			a, a:active, a:visited {
+				height: @size + 6px;
+			}
+
+			.label, .date, .size {
+				padding: ((@size - 16px)/2) 8px;
+			}
+		}
+
+		.icon.square {
+			width: @size;
+
+			img {
+				width: @size;
+				height: @size;
+			}
+		}
+
+		.label {
+			margin: 0 230px 0 (@size + 16px);
+		}
+	}
+}
+
+
+#view.view-details {
+	&.size-16 {
+		.view-details-sized(16px)
+	}
+
+	&.size-24 {
+		.view-details-sized(24px)
+	}
+
+	&.size-32 {
+		.view-details-sized(32px)
+	}
+
+	&.size-48 {
+		.view-details-sized(48px)
+	}
+
+	&.size-64 {
+		.view-details-sized(64px)
+	}
+
+	&.size-96 {
+		.view-details-sized(96px)
+	}
+}
diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less
index 1dca6349..225edad0 100644
--- a/src/_h5ai/client/css/inc/view-grid.less
+++ b/src/_h5ai/client/css/inc/view-grid.less
@@ -9,7 +9,7 @@
 			a, a:active, a:visited {
 				float: left;
 				margin: 2px;
-				width: 218px;
+				width: @small-icon-size + 186px;
 				height: @small-icon-size + 6px;
 				border: 1px solid rgba(0,0,0,0);
 
@@ -50,3 +50,62 @@
 		}
 	}
 }
+
+
+.view-grid-sized(@size) {
+
+	li {
+
+		&.item {
+
+			a, a:active, a:visited {
+				width: @size + 186px;
+				height: @size + 6px;
+			}
+
+			.label, .date, .size {
+				padding: ((@size - 16px)/2) 8px;
+			}
+		}
+
+		.icon.square {
+			width: @size;
+
+			img {
+				width: @size;
+				height: @size;
+			}
+		}
+
+		.label {
+			margin: 0 0 0 (@size + 8px);
+		}
+	}
+}
+
+
+#view.view-grid {
+	&.size-16 {
+		.view-grid-sized(16px)
+	}
+
+	&.size-24 {
+		.view-grid-sized(24px)
+	}
+
+	&.size-32 {
+		.view-grid-sized(32px)
+	}
+
+	&.size-48 {
+		.view-grid-sized(48px)
+	}
+
+	&.size-64 {
+		.view-grid-sized(64px)
+	}
+
+	&.size-96 {
+		.view-grid-sized(96px)
+	}
+}
diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less
index 14148613..a5f48cea 100644
--- a/src/_h5ai/client/css/inc/view-icons.less
+++ b/src/_h5ai/client/css/inc/view-icons.less
@@ -25,6 +25,11 @@
 			display: block;
 			height: @big-icon-size;
 			margin-bottom: 6px;
+
+			img {
+				max-width: @big-icon-size * 2;
+				max-height: @big-icon-size;
+			}
 		}
 
 		.label {
@@ -44,3 +49,54 @@
 		height: 120px;
 	}
 }
+
+
+.view-icons-sized(@size) {
+
+	li {
+
+		&.item {
+
+			a, a:active, a:visited {
+				width: @size * 2;
+				height: @size + 72px;
+			}
+		}
+
+		.icon.rational {
+			height: @size;
+
+			img {
+				max-width: @size * 2;
+				max-height: @size;
+			}
+		}
+	}
+}
+
+
+#view.view-icons {
+	&.size-16 {
+		.view-icons-sized(16px)
+	}
+
+	&.size-24 {
+		.view-icons-sized(24px)
+	}
+
+	&.size-32 {
+		.view-icons-sized(32px)
+	}
+
+	&.size-48 {
+		.view-icons-sized(48px)
+	}
+
+	&.size-64 {
+		.view-icons-sized(64px)
+	}
+
+	&.size-96 {
+		.view-icons-sized(96px)
+	}
+}
diff --git a/src/_h5ai/client/css/inc/view-list.less b/src/_h5ai/client/css/inc/view-list.less
deleted file mode 100644
index 4c2cd539..00000000
--- a/src/_h5ai/client/css/inc/view-list.less
+++ /dev/null
@@ -1,67 +0,0 @@
-
-#view.view-list {
-
-	li {
-
-		&.header {
-			display: list-item;
-		}
-
-		&.item {
-
-			a, a:active, a:visited {
-				border-top: 1px solid @item-border-col-sep;
-				border-bottom: 1px solid @item-border-col-sep;
-				height: @big-icon-size + 6px;
-
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
-
-			// needs to be here, to not conflict with header fields
-			.icon {
-				padding: 8px;
-			}
-			.label, .date, .size {
-				padding: ((@big-icon-size - 16px)/2) 8px;
-			}
-		}
-
-		&.item + .item {
-
-			a, a:active, a:visited {
-				border-top: none;
-			}
-		}
-
-		.icon.square {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -5px;
-			width: @big-icon-size;
-
-			img {
-				width: @big-icon-size;
-				height: @big-icon-size;
-			}
-		}
-
-		.label {
-			margin: 0 230px 0 (@big-icon-size + 16px);
-		}
-
-		.date {
-			position: absolute;
-			right: 100px;
-			top: 0;
-		}
-
-		.size {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
-}
diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less
index 44ee1f15..c26bd130 100644
--- a/src/_h5ai/client/css/inc/view.less
+++ b/src/_h5ai/client/css/inc/view.less
@@ -56,13 +56,8 @@
 @item-background-col-sel: rgba(0,0,0,0.02);
 @item-border-col-sel: @col-border-strong;
 
-// @small-icon-size: 16px;
 @small-icon-size: 32px;
 @big-icon-size: 48px;
-// @big-icon-size: 56px;
-// @big-icon-size: 64px;
-// @big-icon-size: 80px;
-// @big-icon-size: 96px;
 
 
 #view {
@@ -178,38 +173,6 @@
 					box-shadow: 0 0 0 1px #ddd;
 				}
 			}
-
-			&.small {
-
-				img {
-					max-width: @small-icon-size * 2;
-					max-height: @small-icon-size;
-				}
-			}
-
-			&.big {
-
-				img {
-					max-width: @big-icon-size * 2;
-					max-height: @big-icon-size;
-				}
-			}
-
-			&.square {
-
-				img {
-					max-width: @big-icon-size;
-					max-height: @big-icon-size;
-				}
-			}
-
-			&.rational {
-
-				img {
-					max-width: @big-icon-size * 2;
-					max-height: @big-icon-size;
-				}
-			}
 		}
 
 		.label {
diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less
index 057d3dc3..b2fba482 100644
--- a/src/_h5ai/client/css/styles.less
+++ b/src/_h5ai/client/css/styles.less
@@ -20,7 +20,6 @@
 @import "inc/view";
 @import "inc/view-details";
 @import "inc/view-icons";
-@import "inc/view-list";
 @import "inc/view-grid";
 // @import "inc/context-menu";
 @import "inc/dropbox";
diff --git a/src/_h5ai/client/images/size.svg b/src/_h5ai/client/images/size.svg
new file mode 100644
index 00000000..4d2b849b
--- /dev/null
+++ b/src/_h5ai/client/images/size.svg
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="size.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.48.4 r9939"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="0.26014369"
+     inkscape:cy="4.4087936"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     showborder="true"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1056"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1871"
+     inkscape:window-x="49"
+     inkscape:window-y="24"
+     inkscape:zoom="22.627417"
+     borderlayer="true">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="200px"
+       originy="550px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-41.0002,-767)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-41.0002,-767)">
+    <path
+       inkscape:connector-curvature="0"
+       d="M 42.78125,776 A 1.0001,1.0001 0 0 0 42,777 l 0,4 a 1.0001,1.0001 0 0 0 1,1 l 4,0 a 1.0001,1.0001 0 1 0 0,-2 l -3,0 0,-3 a 1.0001,1.0001 0 0 0 -1.21875,-1 z"
+       id="path12113"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 47.375,775.5 a 1.0001,1.0001 0 0 0 -0.59375,0.28125 l -4.5,4.5 a 1.016466,1.016466 0 1 0 1.4375,1.4375 l 4.5,-4.5 A 1.0001,1.0001 0 0 0 47.375,775.5 z"
+       id="path12147"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <rect
+       height="1"
+       id="rect12919"
+       style="color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="1"
+       x="42.000198"
+       y="781" />
+    <path
+       inkscape:connector-curvature="0"
+       d="M 50.90625,768 A 1.001098,1.001098 0 1 0 51,770 l 3,0 0,3 a 1.0001,1.0001 0 1 0 2,0 l 0,-4 a 1.0001,1.0001 0 0 0 -1,-1 l -4,0 a 1.0001,1.0001 0 0 0 -0.09375,0 z"
+       id="path12111"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <rect
+       height="1"
+       id="rect12923"
+       style="color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="1"
+       x="55.000198"
+       y="768" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 54.78125,768 a 1.0001,1.0001 0 0 0 -0.5,0.28125 l -4.5,4.46875 a 1.016466,1.016466 0 1 0 1.4375,1.4375 l 4.5,-4.46875 A 1.0001,1.0001 0 0 0 54.78125,768 z"
+       id="path12925"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+    <rect
+       height="1"
+       id="rect4479-2"
+       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       width="1"
+       x="42.000198"
+       y="776" />
+    <rect
+       height="1"
+       id="rect4479-2-9"
+       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       width="1"
+       x="47.000198"
+       y="781" />
+    <rect
+       height="1"
+       id="rect4479-2-9-9-0-8"
+       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       width="1"
+       x="55.000198"
+       y="773" />
+    <rect
+       height="1"
+       id="rect4479-2-9-9-0-8-1"
+       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       width="1"
+       x="50.000198"
+       y="768" />
+  </g>
+</svg>
diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index 045f8bf9..35048745 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -1,10 +1,12 @@
 
 modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event'], function (_, $, allsettings, resource, store, event) {
 
-	var modes = ['details', 'list', 'grid', 'icons'],
+	var modes = ['details', 'grid', 'icons'],
+		sizes = [16, 24, 32, 48, 64, 96],
 
 		settings = _.extend({}, {
-			modes: modes
+			modes: modes,
+			sizes: sizes
 		}, allsettings.view),
 
 		storekey = 'viewmode',
@@ -16,6 +18,32 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 						'</a>' +
 					'</li>',
 
+		sizeTemplate = '<li id="view-[SIZE]" class="view">' +
+							'<a href="#">' +
+								'<img src="' + resource.image('size') + '" alt="size"/>' +
+								'<span>[SIZE]</span>' +
+							'</a>' +
+						'</li>',
+
+		// sizeSelectorTemplate = '<li id="sizeSelector" class="view">' +
+		// 							'<span class="element">' +
+		// 								'<img src="' + resource.image('size') + '" alt="size"/>' +
+		// 								'<span class="size-current">small</span>' +
+		// 							'</span>' +
+		// 							'<span class="sizeOptions hidden"><ul/></span>' +
+		// 						'</li>',
+		// sizeOptionTemplate = '<li class="sizeOption"/>',
+
+		// viewSelectorTemplate = '<li id="viewSelector" class="view">' +
+		// 							'<span class="element">' +
+		// 								'<img src="' + resource.image('view-details') + '" alt="view-details"/>' +
+		// 								'<span class="view-current">details</span>' +
+		// 							'</span>' +
+		// 							'<span class="viewOptions hidden"><ul/></span>' +
+		// 						'</li>',
+		// viewOptionTemplate = '<li class="viewOption"/>',
+
+
 		adjustSpacing = function () {
 
 			var contentWidth = $('#content').width(),
@@ -25,20 +53,40 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 			$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
 		},
 
-		update = function (viewmode) {
+		updateMode = function (mode) {
 
 			var $view = $('#view');
 
-			viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
-			store.put(storekey, viewmode);
+			mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
+			store.put(storekey, mode);
 
-			_.each(modes, function (mode) {
-				if (mode === viewmode) {
-					$('#view-' + mode).addClass('current');
-					$view.addClass('view-' + mode).show();
+			_.each(modes, function (m) {
+				if (m === mode) {
+					$('#view-' + m).addClass('current');
+					$view.addClass('view-' + m).show();
 				} else {
-					$('#view-' + mode).removeClass('current');
-					$view.removeClass('view-' + mode);
+					$('#view-' + m).removeClass('current');
+					$view.removeClass('view-' + m);
+				}
+			});
+
+			adjustSpacing();
+		},
+
+		updateSize = function (size) {
+
+			var $view = $('#view');
+
+			size = _.contains(settings.sizes, size) ? size : settings.sizes[0];
+			// store.put(storekey, viewmode);
+
+			_.each(sizes, function (s) {
+				if (s === size) {
+					$('#view-' + s).addClass('current');
+					$view.addClass('size-' + s).show();
+				} else {
+					$('#view-' + s).removeClass('current');
+					$view.removeClass('size-' + s);
 				}
 			});
 
@@ -51,20 +99,41 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 
 			settings.modes = _.intersection(settings.modes, modes);
 
-			if (settings.modes.length > 1) {
-				_.each(modes.reverse(), function (mode) {
-					if (_.indexOf(settings.modes, mode) >= 0) {
+			if (settings.modes.length) {
+				_.each(modes.slice(0).reverse(), function (mode) {
+					if (_.contains(settings.modes, mode)) {
 						$(template.replace(/\[MODE\]/g, mode))
 							.appendTo($navbar)
 							.on('click', 'a', function (event) {
-								update(mode);
+								updateMode(mode);
 								event.preventDefault();
 							});
 					}
 				});
 			}
 
-			update(store.get(storekey));
+
+			if (settings.sizes.length) {
+				_.each(sizes.slice(0).reverse(), function (size) {
+					if (_.contains(settings.sizes, size)) {
+						$(sizeTemplate.replace(/\[SIZE\]/g, size))
+							.appendTo($navbar)
+							.on('click', 'a', function (event) {
+								updateSize(size);
+								event.preventDefault();
+							});
+					}
+				});
+			}
+
+			// $(sizeSelectorTemplate)
+			// 	.appendTo($navbar);
+
+			// $(viewSelectorTemplate)
+			// 	.appendTo($navbar);
+
+			updateMode(store.get(storekey));
+			updateSize(sizes[0]);
 
 			event.sub('location.changed', adjustSpacing);
 			$(window).on('resize', adjustSpacing);
diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json
index ba881e15..e91dbd30 100644
--- a/src/_h5ai/conf/options.json
+++ b/src/_h5ai/conf/options.json
@@ -23,11 +23,13 @@ Options
 	/*
 	General view options.
 
-	- modes: array of "details", "icons", "grid" and/or "list"
+	- modes: array of "details", "grid" and/or "icons"
 		the first value indicates the default view mode. If only one value
 		is given the view mode is fixed and the selector buttons are hidden.
 		The user selected view mode is also stored local in modern browsers
 		so that it will be persistent.
+	- sizes: array of numbers
+		the numbers seen below are the only accepted values, you may only remove some
 	- setParentFolderLabels: set parent folder labels to real folder names
 	- hideParentFolderLinks: hide parent folder links
 	- binaryPrefix: set to true uses 1024B=1KiB when formatting file sizes (see http://en.wikipedia.org/wiki/Binary_prefix)
@@ -37,7 +39,8 @@ Options
 	- extInNewWindow: open non-h5ai links in new window/tab
 	*/
 	"view": {
-		"modes": ["details", "icons", "grid", "list"],
+		"modes": ["details", "grid", "icons"],
+		"sizes": [16, 24, 32, 48, 64, 96],
 		"setParentFolderLabels": true,
 		"hideParentFolderLinks": false,
 		"binaryPrefix": false,