Merge pull request #426 from notmasteryet/zoom

Zoom controls
This commit is contained in:
vingtetun 2011-09-05 08:08:07 -07:00
commit 8505591c59
5 changed files with 985 additions and 17 deletions

436
web/images/zoom-in.svg Normal file
View File

@ -0,0 +1,436 @@
<?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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48px"
height="48px"
id="svg6431"
sodipodi:version="0.32"
inkscape:version="0.46"
sodipodi:docbase="/home/jimmac/src/cvs/tango-icon-theme/scalable/actions"
sodipodi:docname="list-add.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape">
<defs
id="defs6433">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 24 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="48 : 24 : 1"
inkscape:persp3d-origin="24 : 16 : 1"
id="perspective70" />
<linearGradient
inkscape:collect="always"
id="linearGradient2091">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2093" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop2095" />
</linearGradient>
<linearGradient
id="linearGradient7916">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop7918" />
<stop
style="stop-color:#ffffff;stop-opacity:0.34020618;"
offset="1.0000000"
id="stop7920" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient8662">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop8664" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop8666" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
id="radialGradient1503"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,-1.018989e-13,16.87306)"
cx="24.837126"
cy="36.421127"
fx="24.837126"
fy="36.421127"
r="15.644737" />
<linearGradient
inkscape:collect="always"
id="linearGradient2847">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2849" />
<stop
style="stop-color:#3465a4;stop-opacity:0;"
offset="1"
id="stop2851" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2847"
id="linearGradient1488"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-1.000000,0.000000,0.000000,-1.000000,-1.242480,40.08170)"
x1="37.128052"
y1="29.729605"
x2="37.065414"
y2="26.194071" />
<linearGradient
id="linearGradient2831">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2833" />
<stop
id="stop2855"
offset="0.33333334"
style="stop-color:#5b86be;stop-opacity:1;" />
<stop
style="stop-color:#83a8d8;stop-opacity:0;"
offset="1"
id="stop2835" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2831"
id="linearGradient1486"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.30498,-6.043298)"
x1="13.478554"
y1="10.612206"
x2="15.419417"
y2="19.115122" />
<linearGradient
id="linearGradient2380">
<stop
style="stop-color:#b9cfe7;stop-opacity:1"
offset="0"
id="stop2382" />
<stop
style="stop-color:#729fcf;stop-opacity:1"
offset="1"
id="stop2384" />
</linearGradient>
<linearGradient
id="linearGradient2682">
<stop
style="stop-color:#3977c3;stop-opacity:1;"
offset="0"
id="stop2684" />
<stop
style="stop-color:#89aedc;stop-opacity:0;"
offset="1"
id="stop2686" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2682"
id="linearGradient2688"
x1="36.713837"
y1="31.455952"
x2="37.124462"
y2="24.842253"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.77039,-5.765705)" />
<linearGradient
inkscape:collect="always"
id="linearGradient2690">
<stop
style="stop-color:#c4d7eb;stop-opacity:1;"
offset="0"
id="stop2692" />
<stop
style="stop-color:#c4d7eb;stop-opacity:0;"
offset="1"
id="stop2694" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2690"
id="linearGradient2696"
x1="32.647972"
y1="30.748846"
x2="37.124462"
y2="24.842253"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.77039,-5.765705)" />
<linearGradient
inkscape:collect="always"
id="linearGradient2871">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2873" />
<stop
style="stop-color:#3465a4;stop-opacity:1"
offset="1"
id="stop2875" />
</linearGradient>
<linearGradient
id="linearGradient2402">
<stop
style="stop-color:#729fcf;stop-opacity:1;"
offset="0"
id="stop2404" />
<stop
style="stop-color:#528ac5;stop-opacity:1;"
offset="1"
id="stop2406" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2797"
id="linearGradient1493"
gradientUnits="userSpaceOnUse"
x1="5.9649176"
y1="26.048164"
x2="52.854097"
y2="26.048164" />
<linearGradient
inkscape:collect="always"
id="linearGradient2797">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop2799" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop2801" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2797"
id="linearGradient1491"
gradientUnits="userSpaceOnUse"
x1="5.9649176"
y1="26.048164"
x2="52.854097"
y2="26.048164" />
<linearGradient
inkscape:collect="always"
id="linearGradient7179">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop7181" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop7183" />
</linearGradient>
<linearGradient
id="linearGradient2316">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2318" />
<stop
style="stop-color:#ffffff;stop-opacity:0.65979379;"
offset="1"
id="stop2320" />
</linearGradient>
<linearGradient
id="linearGradient1322">
<stop
id="stop1324"
offset="0.0000000"
style="stop-color:#729fcf" />
<stop
id="stop1326"
offset="1.0000000"
style="stop-color:#5187d6;stop-opacity:1.0000000;" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1322"
id="linearGradient4975"
x1="34.892849"
y1="36.422989"
x2="45.918697"
y2="48.547989"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-18.01785,-13.57119)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7179"
id="linearGradient7185"
x1="13.435029"
y1="13.604306"
x2="22.374878"
y2="23.554308"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7179"
id="linearGradient7189"
gradientUnits="userSpaceOnUse"
x1="13.435029"
y1="13.604306"
x2="22.374878"
y2="23.554308"
gradientTransform="matrix(-1.000000,0.000000,0.000000,-1.000000,47.93934,50.02474)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2380"
id="linearGradient7180"
gradientUnits="userSpaceOnUse"
x1="62.513836"
y1="36.061237"
x2="15.984863"
y2="20.60858" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2871"
id="linearGradient7182"
gradientUnits="userSpaceOnUse"
x1="46.834816"
y1="45.264122"
x2="45.380436"
y2="50.939667" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2402"
id="linearGradient7184"
gradientUnits="userSpaceOnUse"
x1="18.935766"
y1="23.667896"
x2="53.588622"
y2="26.649362" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2871"
id="linearGradient7186"
gradientUnits="userSpaceOnUse"
x1="46.834816"
y1="45.264122"
x2="45.380436"
y2="50.939667" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7916"
id="linearGradient7922"
x1="16.874998"
y1="22.851799"
x2="27.900846"
y2="34.976799"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient2091"
id="radialGradient2097"
cx="23.070683"
cy="35.127438"
fx="23.070683"
fy="35.127438"
r="10.319340"
gradientTransform="matrix(0.914812,1.265023e-2,-8.21502e-3,0.213562,2.253914,27.18889)"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="0.15686275"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-123.56934"
inkscape:cy="0.031886897"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:grid-bbox="true"
inkscape:document-units="px"
inkscape:window-width="1280"
inkscape:window-height="818"
inkscape:window-x="0"
inkscape:window-y="30"
showguides="true"
inkscape:guide-bbox="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata6436">
<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>Add</dc:title>
<dc:date>2006-01-04</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Andreas Nilsson</dc:title>
</cc:Agent>
</dc:creator>
<dc:source>http://tango-project.org</dc:source>
<dc:subject>
<rdf:Bag>
<rdf:li>add</rdf:li>
<rdf:li>plus</rdf:li>
</rdf:Bag>
</dc:subject>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<path
sodipodi:type="arc"
style="opacity:0.10824742;fill:url(#radialGradient2097);fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path1361"
sodipodi:cx="22.958872"
sodipodi:cy="34.94062"
sodipodi:rx="10.31934"
sodipodi:ry="2.320194"
d="M 33.278212 34.94062 A 10.31934 2.320194 0 1 1 12.639532,34.94062 A 10.31934 2.320194 0 1 1 33.278212 34.94062 z"
transform="matrix(1.550487,0,0,1.978714,-12.4813,-32.49103)" />
<path
style="font-size:59.901077px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr-tb;text-anchor:start;fill:#75a1d0;fill-opacity:1.0000000;stroke:#3465a4;stroke-width:1.0000004px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans"
d="M 27.514356,37.542682 L 27.514356,28.515722 L 37.492820,28.475543 L 37.492820,21.480219 L 27.523285,21.480219 L 27.514356,11.520049 L 20.498082,11.531210 L 20.502546,21.462362 L 10.512920,21.536022 L 10.477206,28.504561 L 20.511475,28.475543 L 20.518171,37.515896 L 27.514356,37.542682 z "
id="text1314"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="font-size:59.901077px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr-tb;text-anchor:start;opacity:0.40860215;fill:url(#linearGradient4975);fill-opacity:1.0000000;stroke:url(#linearGradient7922);stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans"
d="M 26.498702,36.533920 L 26.498702,27.499738 L 36.501304,27.499738 L 36.494607,22.475309 L 26.507630,22.475309 L 26.507630,12.480335 L 21.512796,12.498193 L 21.521725,22.475309 L 11.495536,22.493166 L 11.468750,27.466256 L 21.533143,27.475185 L 21.519750,36.502670 L 26.498702,36.533920 z "
id="path7076"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="fill:#ffffff;fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;opacity:0.31182796"
d="M 11.000000,25.000000 C 11.000000,26.937500 36.984375,24.031250 36.984375,24.968750 L 36.984375,21.968750 L 27.000000,22.000000 L 27.000000,12.034772 L 21.000000,12.034772 L 21.000000,22.000000 L 11.000000,22.000000 L 11.000000,25.000000 z "
id="path7914"
sodipodi:nodetypes="ccccccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

424
web/images/zoom-out.svg Normal file
View File

@ -0,0 +1,424 @@
<?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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48px"
height="48px"
id="svg6431"
sodipodi:version="0.32"
inkscape:version="0.46"
sodipodi:docbase="/home/jimmac/src/cvs/tango-icon-theme/scalable/actions"
sodipodi:docname="list-remove.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape">
<defs
id="defs6433">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 24 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="48 : 24 : 1"
inkscape:persp3d-origin="24 : 16 : 1"
id="perspective69" />
<linearGradient
inkscape:collect="always"
id="linearGradient2091">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2093" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop2095" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient2091"
id="radialGradient2097"
cx="23.070683"
cy="35.127438"
fx="23.070683"
fy="35.127438"
r="10.319340"
gradientTransform="matrix(0.914812,1.265023e-2,-8.21502e-3,0.213562,2.253914,27.18889)"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient7916">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop7918" />
<stop
style="stop-color:#ffffff;stop-opacity:0.34020618;"
offset="1.0000000"
id="stop7920" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient8662">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop8664" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop8666" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient8662"
id="radialGradient1503"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.000000,0.000000,0.000000,0.536723,-1.018989e-13,16.87306)"
cx="24.837126"
cy="36.421127"
fx="24.837126"
fy="36.421127"
r="15.644737" />
<linearGradient
inkscape:collect="always"
id="linearGradient2847">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2849" />
<stop
style="stop-color:#3465a4;stop-opacity:0;"
offset="1"
id="stop2851" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2847"
id="linearGradient1488"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-1.000000,0.000000,0.000000,-1.000000,-1.242480,40.08170)"
x1="37.128052"
y1="29.729605"
x2="37.065414"
y2="26.194071" />
<linearGradient
id="linearGradient2831">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2833" />
<stop
id="stop2855"
offset="0.33333334"
style="stop-color:#5b86be;stop-opacity:1;" />
<stop
style="stop-color:#83a8d8;stop-opacity:0;"
offset="1"
id="stop2835" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2831"
id="linearGradient1486"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.30498,-6.043298)"
x1="13.478554"
y1="10.612206"
x2="15.419417"
y2="19.115122" />
<linearGradient
id="linearGradient2380">
<stop
style="stop-color:#b9cfe7;stop-opacity:1"
offset="0"
id="stop2382" />
<stop
style="stop-color:#729fcf;stop-opacity:1"
offset="1"
id="stop2384" />
</linearGradient>
<linearGradient
id="linearGradient2682">
<stop
style="stop-color:#3977c3;stop-opacity:1;"
offset="0"
id="stop2684" />
<stop
style="stop-color:#89aedc;stop-opacity:0;"
offset="1"
id="stop2686" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2682"
id="linearGradient2688"
x1="36.713837"
y1="31.455952"
x2="37.124462"
y2="24.842253"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.77039,-5.765705)" />
<linearGradient
inkscape:collect="always"
id="linearGradient2690">
<stop
style="stop-color:#c4d7eb;stop-opacity:1;"
offset="0"
id="stop2692" />
<stop
style="stop-color:#c4d7eb;stop-opacity:0;"
offset="1"
id="stop2694" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2690"
id="linearGradient2696"
x1="32.647972"
y1="30.748846"
x2="37.124462"
y2="24.842253"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-48.77039,-5.765705)" />
<linearGradient
inkscape:collect="always"
id="linearGradient2871">
<stop
style="stop-color:#3465a4;stop-opacity:1;"
offset="0"
id="stop2873" />
<stop
style="stop-color:#3465a4;stop-opacity:1"
offset="1"
id="stop2875" />
</linearGradient>
<linearGradient
id="linearGradient2402">
<stop
style="stop-color:#729fcf;stop-opacity:1;"
offset="0"
id="stop2404" />
<stop
style="stop-color:#528ac5;stop-opacity:1;"
offset="1"
id="stop2406" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2797"
id="linearGradient1493"
gradientUnits="userSpaceOnUse"
x1="5.9649176"
y1="26.048164"
x2="52.854097"
y2="26.048164" />
<linearGradient
inkscape:collect="always"
id="linearGradient2797">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop2799" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop2801" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2797"
id="linearGradient1491"
gradientUnits="userSpaceOnUse"
x1="5.9649176"
y1="26.048164"
x2="52.854097"
y2="26.048164" />
<linearGradient
inkscape:collect="always"
id="linearGradient7179">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop7181" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop7183" />
</linearGradient>
<linearGradient
id="linearGradient2316">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2318" />
<stop
style="stop-color:#ffffff;stop-opacity:0.65979379;"
offset="1"
id="stop2320" />
</linearGradient>
<linearGradient
id="linearGradient1322">
<stop
id="stop1324"
offset="0.0000000"
style="stop-color:#729fcf" />
<stop
id="stop1326"
offset="1.0000000"
style="stop-color:#5187d6;stop-opacity:1.0000000;" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1322"
id="linearGradient4975"
x1="34.892849"
y1="36.422989"
x2="45.918697"
y2="48.547989"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-18.01785,-13.57119)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7179"
id="linearGradient7185"
x1="13.435029"
y1="13.604306"
x2="22.374878"
y2="23.554308"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7179"
id="linearGradient7189"
gradientUnits="userSpaceOnUse"
x1="13.435029"
y1="13.604306"
x2="22.374878"
y2="23.554308"
gradientTransform="matrix(-1.000000,0.000000,0.000000,-1.000000,47.93934,50.02474)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2380"
id="linearGradient7180"
gradientUnits="userSpaceOnUse"
x1="62.513836"
y1="36.061237"
x2="15.984863"
y2="20.60858" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2871"
id="linearGradient7182"
gradientUnits="userSpaceOnUse"
x1="46.834816"
y1="45.264122"
x2="45.380436"
y2="50.939667" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2402"
id="linearGradient7184"
gradientUnits="userSpaceOnUse"
x1="18.935766"
y1="23.667896"
x2="53.588622"
y2="26.649362" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2871"
id="linearGradient7186"
gradientUnits="userSpaceOnUse"
x1="46.834816"
y1="45.264122"
x2="45.380436"
y2="50.939667" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7916"
id="linearGradient7922"
x1="16.874998"
y1="22.851799"
x2="27.900846"
y2="34.976799"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="0.10980392"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-123.27226"
inkscape:cy="26.474252"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:grid-bbox="true"
inkscape:document-units="px"
inkscape:window-width="1280"
inkscape:window-height="818"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:showpageshadow="false" />
<metadata
id="metadata6436">
<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>Remove</dc:title>
<dc:date>2006-01-04</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Andreas Nilsson</dc:title>
</cc:Agent>
</dc:creator>
<dc:source>http://tango-project.org</dc:source>
<dc:subject>
<rdf:Bag>
<rdf:li>remove</rdf:li>
<rdf:li>delete</rdf:li>
</rdf:Bag>
</dc:subject>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<path
style="font-size:59.901077px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr-tb;text-anchor:start;fill:#75a1d0;fill-opacity:1.0000000;stroke:#3465a4;stroke-width:1.0000004px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans"
d="M 27.514356,28.359472 L 39.633445,28.475543 L 39.633445,21.480219 L 27.523285,21.480219 L 20.502546,21.462362 L 8.5441705,21.489147 L 8.5084565,28.457686 L 20.511475,28.475543 L 27.514356,28.359472 z "
id="text1314"
sodipodi:nodetypes="ccccccccc" />
<path
style="font-size:59.901077px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr-tb;text-anchor:start;opacity:0.40860215;fill:url(#linearGradient4975);fill-opacity:1.0000000;stroke:url(#linearGradient7922);stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans"
d="M 38.579429,27.484113 L 38.588357,22.475309 L 9.5267863,22.493166 L 9.5000003,27.466256 L 38.579429,27.484113 z "
id="path7076"
sodipodi:nodetypes="ccccc" />
<path
style="fill:#ffffff;fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;opacity:0.31182796"
d="M 9.0000000,25.000000 C 9.0000000,26.937500 39.125000,24.062500 39.125000,25.000000 L 39.125000,22.000000 L 9.0000000,22.000000 L 9.0000000,25.000000 z "
id="path7914"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -21,6 +21,8 @@ body {
height: 40px;
width: 100%;
z-index: 1;
white-space:nowrap;
overflow: hidden;
}
.separator {
@ -230,6 +232,14 @@ canvas {
-webkit-box-shadow: 0px 2px 10px #ff0;
}
#pageWidthOption {
border-top: 1px solid black;
}
#customScaleOption {
display: none;
}
/* === Printed media overrides === */
@media print {
#sidebar {

View File

@ -33,13 +33,25 @@
<div class="separator"></div>
<select id="scaleSelect" onchange="PDFView.scale = parseInt(this.value);">
<option value="50">50%</option>
<option value="75">75%</option>
<option value="100">100%</option>
<option value="125">125%</option>
<option value="150" selected="selected">150%</option>
<option value="200">200%</option>
<button id="next" title="Zoom Out" onclick="PDFView.zoomOut();">
<img src="images/zoom-out.svg" align="top" height="32"/>
</button>
<button id="next" title="Zoom In" onclick="PDFView.zoomIn();">
<img src="images/zoom-in.svg" align="top" height="32"/>
</button>
<div class="separator"></div>
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);">
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5" selected="selected">150%</option>
<option value="2">200%</option>
<option id="pageWidthOption" value="page-width">Page Width</option>
<option id="pageFitOption" value="page-fit">Page Fit</option>
</select>
<div class="separator"></div>

View File

@ -4,8 +4,10 @@
'use strict';
var kDefaultURL = 'compressed.tracemonkey-pldi-09.pdf';
var kDefaultScale = 150;
var kDefaultScale = 1.5;
var kDefaultScaleDelta = 1.1;
var kCacheSize = 20;
var kCssUnits = 96.0 / 72.0;
var Cache = function(size) {
var data = [];
@ -21,12 +23,13 @@ var cache = new Cache(kCacheSize);
var PDFView = {
pages: [],
thumbnails: [],
currentScale: kDefaultScale,
set scale(val) {
setScale: function(val, resetAutoSettings) {
var pages = this.pages;
var cssUnits = 96.0 / 72.0;
for (var i = 0; i < pages.length; i++)
pages[i].update(val / 100 * cssUnits);
pages[i].update(val * kCssUnits);
this.currentScale = val;
if (document.location.hash == '#' + this.page)
this.pages[this.page - 1].draw();
@ -35,10 +38,42 @@ var PDFView = {
document.location.hash = this.page;
var event = document.createEvent('UIEvents');
event.initUIEvent('scalechange', false, false, window, val);
event.initUIEvent('scalechange', false, false, window, 0);
event.scale = val;
event.resetAutoSettings = resetAutoSettings;
window.dispatchEvent(event);
},
parseScale: function(value) {
if ('custom' == value)
return;
var scale = parseFloat(value);
if (scale) {
this.setScale(scale, true);
return;
}
var currentPage = this.pages[this.page - 1];
var scrollbarPadding = 40;
var pageWidthScale = (window.innerWidth - scrollbarPadding) /
currentPage.width / kCssUnits;
var pageHeightScale = (window.innerHeight - scrollbarPadding) /
currentPage.height / kCssUnits;
if ('page-width' == value)
this.setScale(pageWidthScale);
else if ('page-fit' == value)
this.setScale(Math.min(pageWidthScale, pageHeightScale));
},
zoomIn: function() {
this.setScale(this.currentScale * kDefaultScaleDelta, true);
},
zoomOut: function() {
this.setScale(this.currentScale / kDefaultScaleDelta, true);
},
set page(val) {
var pages = this.pages;
var input = document.getElementById('pageNumber');
@ -129,7 +164,7 @@ var PDFView = {
pagesRefMap[pageRef.num + ' ' + pageRef.gen + ' R'] = i;
}
this.scale = (scale || kDefaultScale);
this.setScale(scale || kDefaultScale, true);
this.page = parseInt(document.location.hash.substring(1)) || 1;
this.pagesRefMap = pagesRefMap;
this.destinations = pdf.catalog.destinations;
@ -355,7 +390,7 @@ window.addEventListener('load', function(evt) {
params[unescape(param[0])] = unescape(param[1]);
}
PDFView.open(params.file || kDefaultURL, parseInt(params.scale));
PDFView.open(params.file || kDefaultURL, parseFloat(params.scale));
if (!window.File || !window.FileReader || !window.FileList || !window.Blob)
document.getElementById('fileInput').style.display = 'none';
@ -367,7 +402,7 @@ window.addEventListener('pdfloaded', function(evt) {
PDFView.load(evt.detail);
}, true);
window.addEventListener('scroll', function onscroll(evt) {
function updateViewarea() {
var visiblePages = PDFView.getVisiblePages();
for (var i = 0; i < visiblePages.length; i++) {
var page = visiblePages[i];
@ -385,8 +420,19 @@ window.addEventListener('scroll', function onscroll(evt) {
PDFView.page = lastPage.id;
else if (currentId < firstPage.id)
PDFView.page = firstPage.id;
}
window.addEventListener('scroll', function onscroll(evt) {
updateViewarea();
}, true);
window.addEventListener('resize', function onscroll(evt) {
if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected)
PDFView.parseScale(document.getElementById('scaleSelect').value);
updateViewarea();
});
window.addEventListener('hashchange', function(evt) {
PDFView.page = PDFView.page;
});
@ -432,13 +478,36 @@ window.addEventListener('transitionend', function(evt) {
}, 500);
}, true);
window.addEventListener('scalechange', function scalechange(evt) {
var customScaleOption = document.getElementById('customScaleOption');
customScaleOption.selected = false;
if (!evt.resetAutoSettings &&
(document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected)) {
updateViewarea();
return;
}
var options = document.getElementById('scaleSelect').options;
var predefinedValueFound = false;
var value = '' + evt.scale;
for (var i = 0; i < options.length; i++) {
var option = options[i];
option.selected = (option.value == evt.detail);
if (option.value != value) {
option.selected = false;
continue;
}
option.selected = true;
predefinedValueFound = true;
}
if (!predefinedValueFound) {
customScaleOption.textContent = Math.round(evt.scale * 10000) / 100 + '%';
customScaleOption.selected = true;
}
updateViewarea();
}, true);
window.addEventListener('pagechange', function pagechange(evt) {
@ -448,3 +517,20 @@ window.addEventListener('pagechange', function pagechange(evt) {
document.getElementById('previous').disabled = (page == 1);
document.getElementById('next').disabled = (page == PDFView.pages.length);
}, true);
window.addEventListener('keydown', function keydown(evt) {
switch(evt.keyCode) {
case 61: // FF/Mac '='
case 107: // FF '+' and '='
case 187: // Chrome '+'
PDFView.zoomIn();
break;
case 109: // FF '-'
case 189: // Chrome '-'
PDFView.zoomOut();
break;
case 48: // '0'
PDFView.setScale(kDefaultScale, true);
break;
}
});