New address bar layout with back and forward buttons

This commit is contained in:
Niraj Venkat 2015-06-12 17:45:18 -07:00
parent fcd4dd32ef
commit 7142be07b6
6 changed files with 134 additions and 15 deletions

View file

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
version="1.1"
width="1440"
height="200"
data-icon="map-marker"
data-container-transform="translate(24)"
viewBox="0 0 1440 200"
id="svg4136"
inkscape:version="0.91 r13725"
sodipodi:docname="address-bar.001.svg">
<metadata
id="metadata4144">
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4142" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1835"
inkscape:window-height="1057"
id="namedview4140"
showgrid="false"
inkscape:zoom="0.8671875"
inkscape:cx="536.9343"
inkscape:cy="52.468468"
inkscape:window-x="77"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg4136" />
<rect
style="fill:#ededed;fill-opacity:1;stroke:none;stroke-linejoin:round;stroke-opacity:1"
id="rect4141"
width="1280"
height="140"
x="160"
y="30"
rx="16.025024"
ry="17.019567" />
<rect
style="fill:#dadada;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.33821851;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
id="rect4135"
width="292.86267"
height="139.66179"
x="150.32542"
y="30.169102"
rx="16.817432"
ry="20.612938" />
<circle
style="fill:#b8b8b8;fill-opacity:1;stroke:none;stroke-opacity:1"
id="path4146"
cx="100"
cy="100"
r="100" />
<path
d="m 100,36.000005 c -22.1,0 -40,17.9 -40,39.999995 0,30 40,88 40,88 0,0 40,-58 40,-88 0,-22.099995 -17.9,-39.999995 -40,-39.999995 z m 0,22 c 9.9,0 18,8.099995 18,17.999995 0,9.9 -8.1,18 -18,18 -9.9,0 -18,-8.1 -18,-18 0,-9.9 8.1,-17.999995 18,-17.999995 z"
id="path4138"
inkscape:connector-curvature="0" />
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 369 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 369 B

View file

@ -1,3 +1,11 @@
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="377 474 22 34" width="22pt" height="34pt"><metadata xmlns:dc="http://purl.org/dc/elements/1.1/"><dc:date>2015-06-12 18:23Z</dc:date><!-- Produced by OmniGraffle Professional 5.4.4 --></metadata><defs></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="1728" height="1466"/><g><title> Navi Bar</title><path d="M 377.10582 474.23472 L 398.3595 490.9286 L 377.10582 507.62248 L 377.10582 474.23472 Z" fill="#7e7e7e"/></g></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:xl="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="133.1 714.2 21.3 33.4"
enable-background="new 133.1 714.2 21.3 33.4" xml:space="preserve">
<g>
<g>
<path fill="#7E7E7E" d="M133.1,714.2l21.3,16.7l-21.3,16.7V714.2z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 746 B

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 B

View file

@ -39,12 +39,13 @@ DialogContainer {
Image {
id: backgroundImage
source: "../images/address-bar.svg"
source: "../images/address-bar.001.svg"
width: 576 * root.scale
height: 80 * root.scale
property int inputAreaHeight: 56.0 * root.scale // Height of the background's input area
property int inputAreaStep: (height - inputAreaHeight) / 2
/*
Image {
id: arrowContainer
@ -57,21 +58,50 @@ DialogContainer {
topMargin: parent.inputAreaStep + hifi.layout.spacing
bottomMargin: parent.inputAreaStep + hifi.layout.spacing
}
}*/
Image {
id: darkGreyArrowBack
source: "../images/darkgreyarrow.png"
anchors {
fill: parent
leftMargin: parent.height + hifi.layout.spacing * 2
rightMargin: parent.height + hifi.layout.spacing * 60
topMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
bottomMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
}
}
//Image {
// id: darkGreyArrowBack
Image {
id: seperator
// source: "../images/darkgreyarrow.svg"
source: "../images/sepline.png"
//anchors {
// fill: parent
// leftMargin: parent.height + hifi.layout.spacing * 4
// rightMargin: parent.height + hifi.layout.spacing * 55
// topMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
// bottomMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
//}
//}
anchors {
fill: parent
leftMargin: parent.height + hifi.layout.spacing * 7
rightMargin: parent.height + hifi.layout.spacing * 57
topMargin: parent.inputAreaStep + hifi.layout.spacing
bottomMargin: parent.inputAreaStep + hifi.layout.spacing
}
}
Image {
id: lightGreyArrowForward
source: "../images/lightgreyarrow.png"
anchors {
fill: parent
leftMargin: parent.height + hifi.layout.spacing * 10
rightMargin: parent.height + hifi.layout.spacing * 52
topMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
bottomMargin: parent.inputAreaStep + parent.inputAreaStep + hifi.layout.spacing
}
}
TextInput {
id: addressLine