Combine icon and input areas into a single SVG

interface/resources/images/address-bar.svg

@@ -8,14 +8,14 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    version="1.1"
-   width="200"
+   width="1440"
    height="200"
    data-icon="map-marker"
    data-container-transform="translate(24)"
-   viewBox="0 0 200 200"
+   viewBox="0 0 1440 200"
    id="svg4136"
    inkscape:version="0.91 r13725"
-   sodipodi:docname="address-icon.svg">
+   sodipodi:docname="address-bar.svg">
   <metadata
      id="metadata4144">
     <rdf:RDF>
@@ -24,7 +24,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -43,13 +43,22 @@
      inkscape:window-height="1057"
      id="namedview4140"
      showgrid="false"
-     inkscape:zoom="0.43359375"
+     inkscape:zoom="0.8671875"
-     inkscape:cx="64"
+     inkscape:cx="707.02439"
-     inkscape:cy="144.72072"
+     inkscape:cy="52.468468"
      inkscape:window-x="72"
      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" />
   <circle
      style="fill:#b8b8b8;fill-opacity:1;stroke:none;stroke-opacity:1"
      id="path4146"

interface/resources/qml/AddressBarDialog.qml

@@ -28,48 +28,34 @@ Item {
 
     x: parent ? parent.width / 2 - width / 2 : 0
     y: parent ? parent.height / 2 - height / 2 : 0
+    property int maximumX: parent ? parent.width - width : 0
+    property int maximumY: parent ? parent.height - height : 0
 
     AddressBarDialog {
         id: addressBarDialog
 
-        property int iconOverlap: 15  // Let the circle overlap window edges and rectangular part of dialog
+        implicitWidth: backgroundImage.width
-        property int maximumX: root.parent ? root.parent.width - root.width : 0
+        implicitHeight: backgroundImage.height
-        property int maximumY: root.parent ? root.parent.height - root.height : 0
 
-        implicitWidth: box.width + icon.width - iconOverlap * 2
+        Image {
-        implicitHeight: addressLine.height + hifi.layout.spacing * 2
+            id: backgroundImage
 
-        Border {
+            source: "../images/address-bar.svg"
-			id: box
+            width: 576
-
+            height: 80
-            width: 512
+            property int inputAreaHeight: 56  // Height of the background's input area
-            height: parent.height
+            property int inputAreaStep: (height - inputAreaHeight) / 2
-            border.width: 0
-            radius: 6
-            color: "#ededee"
-
-            x: icon.width - addressBarDialog.iconOverlap * 2  // Relative to addressBarDialog
-
-			MouseArea {
-                anchors.fill: parent
-                drag {
-					target: root
-                    minimumX: 0
-                    minimumY: 0
-                    maximumX: root.parent ? addressBarDialog.maximumX : 0
-                    maximumY: root.parent ? addressBarDialog.maximumY : 0
-                }
-			}
 
             TextInput {
-				id: addressLine
+                id: addressLine
 
                 anchors {
                     fill: parent
-                    leftMargin: addressBarDialog.iconOverlap + hifi.layout.spacing * 2
+                    leftMargin: parent.height + hifi.layout.spacing * 2
                     rightMargin: hifi.layout.spacing * 2
-                    topMargin: hifi.layout.spacing
+                    topMargin: parent.inputAreaStep + hifi.layout.spacing
-                    bottomMargin: hifi.layout.spacing
+                    bottomMargin: parent.inputAreaStep + hifi.layout.spacing
+
                 }
 
                 font.pointSize: 15
@@ -78,29 +64,36 @@ Item {
                 onAccepted: {
                     event.accepted = true  // Generates erroneous error in program log, "ReferenceError: event is not defined".
                     addressBarDialog.loadAddress(addressLine.text)
-				}
+                }
-			}
-		}
-
-        Image {
-            id: icon
-            source: "../images/address-bar-icon.svg"
-            width: 80
-            height: 80
-            anchors {
-                right: box.left
-                rightMargin: -addressBarDialog.iconOverlap
-                verticalCenter: parent.verticalCenter
             }
 
             MouseArea {
-                anchors.fill: parent
+                // Drag the icon
+                width: parent.height
+                height: parent.height
+                x: 0
+                y: 0
                 drag {
                     target: root
-                    minimumX: 0
+                    minimumX: -parent.inputAreaStep
-                    minimumY: 0
+                    minimumY: -parent.inputAreaStep
-                    maximumX: root.parent ? addressBarDialog.maximumX : 0
+                    maximumX: root.parent ? root.maximumX : 0
-                    maximumY: root.parent ? addressBarDialog.maximumY : 0
+                    maximumY: root.parent ? root.maximumY + parent.inputAreaStep : 0
+                }
+            }
+
+            MouseArea {
+                // Drag the input rectangle
+                width: parent.width - parent.height
+                height: parent.inputAreaHeight
+                x: parent.height
+                y: parent.inputAreaStep
+                drag {
+                    target: root
+                    minimumX: -parent.inputAreaStep
+                    minimumY: -parent.inputAreaStep
+                    maximumX: root.parent ? root.maximumX : 0
+                    maximumY: root.parent ? root.maximumY + parent.inputAreaStep : 0
                 }
             }
         }