mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-03-22 05:19:56 +01:00
Adds variable icon sizes.
This commit is contained in:
Lars Jung
parent
c2f5c46451
commit
aa725f11f8
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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";
|
||||
|
||||
194
src/_h5ai/client/images/size.svg
Normal file
194
src/_h5ai/client/images/size.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
@ -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);
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user