mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 20:44:53 -04:00
Adds variable icon sizes.
This commit is contained in:
Lars Jung
parent
c2f5c46451
commit
aa725f11f8
9 changed files with 458 additions and 124 deletions
|
|
@ -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 {
|
a, a:active, a:visited {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
width: 218px;
|
width: @small-icon-size + 186px;
|
||||||
height: @small-icon-size + 6px;
|
height: @small-icon-size + 6px;
|
||||||
border: 1px solid rgba(0,0,0,0);
|
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;
|
display: block;
|
||||||
height: @big-icon-size;
|
height: @big-icon-size;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: @big-icon-size * 2;
|
||||||
|
max-height: @big-icon-size;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|
@ -44,3 +49,54 @@
|
||||||
height: 120px;
|
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-background-col-sel: rgba(0,0,0,0.02);
|
||||||
@item-border-col-sel: @col-border-strong;
|
@item-border-col-sel: @col-border-strong;
|
||||||
|
|
||||||
// @small-icon-size: 16px;
|
|
||||||
@small-icon-size: 32px;
|
@small-icon-size: 32px;
|
||||||
@big-icon-size: 48px;
|
@big-icon-size: 48px;
|
||||||
// @big-icon-size: 56px;
|
|
||||||
// @big-icon-size: 64px;
|
|
||||||
// @big-icon-size: 80px;
|
|
||||||
// @big-icon-size: 96px;
|
|
||||||
|
|
||||||
|
|
||||||
#view {
|
#view {
|
||||||
|
|
@ -178,38 +173,6 @@
|
||||||
box-shadow: 0 0 0 1px #ddd;
|
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 {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@
|
||||||
@import "inc/view";
|
@import "inc/view";
|
||||||
@import "inc/view-details";
|
@import "inc/view-details";
|
||||||
@import "inc/view-icons";
|
@import "inc/view-icons";
|
||||||
@import "inc/view-list";
|
|
||||||
@import "inc/view-grid";
|
@import "inc/view-grid";
|
||||||
// @import "inc/context-menu";
|
// @import "inc/context-menu";
|
||||||
@import "inc/dropbox";
|
@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) {
|
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({}, {
|
settings = _.extend({}, {
|
||||||
modes: modes
|
modes: modes,
|
||||||
|
sizes: sizes
|
||||||
}, allsettings.view),
|
}, allsettings.view),
|
||||||
|
|
||||||
storekey = 'viewmode',
|
storekey = 'viewmode',
|
||||||
|
|
@ -16,6 +18,32 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||||
'</a>' +
|
'</a>' +
|
||||||
'</li>',
|
'</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 () {
|
adjustSpacing = function () {
|
||||||
|
|
||||||
var contentWidth = $('#content').width(),
|
var contentWidth = $('#content').width(),
|
||||||
|
|
@ -25,20 +53,40 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||||
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
||||||
},
|
},
|
||||||
|
|
||||||
update = function (viewmode) {
|
updateMode = function (mode) {
|
||||||
|
|
||||||
var $view = $('#view');
|
var $view = $('#view');
|
||||||
|
|
||||||
viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
|
mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
|
||||||
store.put(storekey, viewmode);
|
store.put(storekey, mode);
|
||||||
|
|
||||||
_.each(modes, function (mode) {
|
_.each(modes, function (m) {
|
||||||
if (mode === viewmode) {
|
if (m === mode) {
|
||||||
$('#view-' + mode).addClass('current');
|
$('#view-' + m).addClass('current');
|
||||||
$view.addClass('view-' + mode).show();
|
$view.addClass('view-' + m).show();
|
||||||
} else {
|
} else {
|
||||||
$('#view-' + mode).removeClass('current');
|
$('#view-' + m).removeClass('current');
|
||||||
$view.removeClass('view-' + mode);
|
$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);
|
settings.modes = _.intersection(settings.modes, modes);
|
||||||
|
|
||||||
if (settings.modes.length > 1) {
|
if (settings.modes.length) {
|
||||||
_.each(modes.reverse(), function (mode) {
|
_.each(modes.slice(0).reverse(), function (mode) {
|
||||||
if (_.indexOf(settings.modes, mode) >= 0) {
|
if (_.contains(settings.modes, mode)) {
|
||||||
$(template.replace(/\[MODE\]/g, mode))
|
$(template.replace(/\[MODE\]/g, mode))
|
||||||
.appendTo($navbar)
|
.appendTo($navbar)
|
||||||
.on('click', 'a', function (event) {
|
.on('click', 'a', function (event) {
|
||||||
update(mode);
|
updateMode(mode);
|
||||||
event.preventDefault();
|
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);
|
event.sub('location.changed', adjustSpacing);
|
||||||
$(window).on('resize', adjustSpacing);
|
$(window).on('resize', adjustSpacing);
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,13 @@ Options
|
||||||
/*
|
/*
|
||||||
General view 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
|
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.
|
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
|
The user selected view mode is also stored local in modern browsers
|
||||||
so that it will be persistent.
|
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
|
- setParentFolderLabels: set parent folder labels to real folder names
|
||||||
- hideParentFolderLinks: hide parent folder links
|
- hideParentFolderLinks: hide parent folder links
|
||||||
- binaryPrefix: set to true uses 1024B=1KiB when formatting file sizes (see http://en.wikipedia.org/wiki/Binary_prefix)
|
- 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
|
- extInNewWindow: open non-h5ai links in new window/tab
|
||||||
*/
|
*/
|
||||||
"view": {
|
"view": {
|
||||||
"modes": ["details", "icons", "grid", "list"],
|
"modes": ["details", "grid", "icons"],
|
||||||
|
"sizes": [16, 24, 32, 48, 64, 96],
|
||||||
"setParentFolderLabels": true,
|
"setParentFolderLabels": true,
|
||||||
"hideParentFolderLinks": false,
|
"hideParentFolderLinks": false,
|
||||||
"binaryPrefix": false,
|
"binaryPrefix": false,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue