Permalink
Browse files

Adds variable icon sizes.

  • Loading branch information...
1 parent c2f5c46 commit aa725f11f80f6430fa3c40c7dff3761efa8e6dbf @lrsjng committed Aug 28, 2013
View
58 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)
+ }
+}
View
61 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)
+ }
+}
View
56 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)
+ }
+}
View
67 src/_h5ai/client/css/inc/view-list.less
@@ -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;
- }
- }
-}
View
37 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 {
View
1 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";
View
194 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>
View
101 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');
+
+ mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
+ store.put(storekey, mode);
+
+ _.each(modes, function (m) {
+ if (m === mode) {
+ $('#view-' + m).addClass('current');
+ $view.addClass('view-' + m).show();
+ } else {
+ $('#view-' + m).removeClass('current');
+ $view.removeClass('view-' + m);
+ }
+ });
+
+ adjustSpacing();
+ },
+
+ updateSize = function (size) {
var $view = $('#view');
- viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
- store.put(storekey, viewmode);
+ size = _.contains(settings.sizes, size) ? size : settings.sizes[0];
+ // store.put(storekey, viewmode);
- _.each(modes, function (mode) {
- if (mode === viewmode) {
- $('#view-' + mode).addClass('current');
- $view.addClass('view-' + mode).show();
+ _.each(sizes, function (s) {
+ if (s === size) {
+ $('#view-' + s).addClass('current');
+ $view.addClass('size-' + s).show();
} else {
- $('#view-' + mode).removeClass('current');
- $view.removeClass('view-' + mode);
+ $('#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();
+ });
+ }
+ });
+ }
+
+
+ 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();
});
}
});
}
- update(store.get(storekey));
+ // $(sizeSelectorTemplate)
+ // .appendTo($navbar);
+
+ // $(viewSelectorTemplate)
+ // .appendTo($navbar);
+
+ updateMode(store.get(storekey));
+ updateSize(sizes[0]);
event.sub('location.changed', adjustSpacing);
$(window).on('resize', adjustSpacing);
View
7 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,

0 comments on commit aa725f1

Please sign in to comment.