Adds variable icon sizes.

lrsjng · Aug 28, 2013 · aa725f1 · aa725f1
1 parent c2f5c46
commit aa725f1
Show file tree

Hide file tree

Showing 9 changed files with 458 additions and 124 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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";