Add icon to address bar dialog

This commit is contained in:
David Rowe 2015-05-30 12:01:50 -07:00
parent 881941b64d
commit 05e251eba4
4 changed files with 102 additions and 45 deletions

View file

@ -0,0 +1,63 @@
<?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="200"
height="200"
data-icon="map-marker"
data-container-transform="translate(24)"
viewBox="0 0 200 200"
id="svg4136"
inkscape:version="0.91 r13725"
sodipodi:docname="address-icon.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></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="1840"
inkscape:window-height="1057"
id="namedview4140"
showgrid="false"
inkscape:zoom="0.43359375"
inkscape:cx="64"
inkscape:cy="144.72072"
inkscape:window-x="72"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg4136" />
<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 KiB

View file

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 49 49" enable-background="new 0 0 49 49" xml:space="preserve">
<g>
<g>
<path fill="#333" d="M49,46c0,1.7-1.3,3-3,3H3c-1.7,0-3-1.3-3-3V3c0-1.7,1.3-3,3-3h43c1.7,0,3,1.3,3,3V46z"/>
</g>
<g>
<g id="Your_Icon_11_">
<g>
<polygon fill="#E7EEEE" points="23.6,19.9 15.1,19.9 15.1,27.8 23.6,27.8 23.6,33.8 33,23.9 23.6,14 "/>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 759 B

View file

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 49 49" enable-background="new 0 0 49 49" xml:space="preserve">
<g>
<g>
<path fill="#0E7077" d="M49,46c0,1.7-1.3,3-3,3H3c-1.7,0-3-1.3-3-3V3c0-1.7,1.3-3,3-3h43c1.7,0,3,1.3,3,3V46z"/>
</g>
<g>
<g id="Your_Icon_11_">
<g>
<polygon fill="#E7EEEE" points="23.6,19.9 15.1,19.9 15.1,27.8 23.6,27.8 23.6,33.8 33,23.9 23.6,14 "/>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 762 B

View file

@ -23,8 +23,12 @@ Item {
AddressBarDialog {
id: addressBarDialog
implicitWidth: box.width
implicitHeight: addressLine.height + hifi.layout.spacing * 2
property int iconOverlap: 15 // Let the circle overlap window edges and rectangular part of dialog
property int maximumX: root.parent.width - root.width
property int maximumY: root.parent.height - root.height
implicitWidth: box.width + icon.width - iconOverlap * 2
implicitHeight: addressLine.height + hifi.layout.spacing * 2
Border {
id: box
@ -35,6 +39,8 @@ Item {
radius: 6
color: "#ededee"
x: icon.width - addressBarDialog.iconOverlap * 2 // W.r.t. addressBarDialog
MouseArea {
id: boxDrag
@ -42,18 +48,18 @@ Item {
drag {
target: root
minimumX: 0
minimumY: 0
maximumX: root.parent ? root.parent.width - root.width : 0
maximumY: root.parent ? root.parent.height - root.height : 0
}
minimumX: 0
minimumY: 0
maximumX: root.parent ? addressBarDialog.maximumX : 0
maximumY: root.parent ? addressBarDialog.maximumY : 0
}
}
TextInput {
id: addressLine
anchors.fill: parent
anchors.leftMargin: hifi.layout.spacing * 2
anchors.leftMargin: addressBarDialog.iconOverlap + hifi.layout.spacing * 2
anchors.rightMargin: hifi.layout.spacing * 2
anchors.topMargin: hifi.layout.spacing
anchors.bottomMargin: hifi.layout.spacing
@ -67,7 +73,31 @@ Item {
}
}
}
}
Image {
id: icon
source: "../images/address-bar-icon.svg"
width: 80
height: 80
anchors.right: box.left
anchors.rightMargin: -addressBarDialog.iconOverlap
anchors.verticalCenter: parent.verticalCenter
MouseArea {
id: iconDrag
anchors.fill: parent
drag {
target: root
minimumX: 0
minimumY: 0
maximumX: root.parent ? addressBarDialog.maximumX : 0
maximumY: root.parent ? addressBarDialog.maximumY : 0
}
}
}
}
// The UI enables an object, rather than manipulating its visibility, so that we can do animations in both directions.
// Because visibility and enabled are booleans, they cannot be animated. So when enabled is changed, we modify a property