mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-18 17:18:43 +02:00
Combine icon and input areas into a single SVG
This commit is contained in:
David Rowe
parent
b166e24ff5
commit
9c52c79fe1
2 changed files with 57 additions and 55 deletions
|
|
@ -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:cx="64"
|
||||
inkscape:cy="144.72072"
|
||||
inkscape:zoom="0.8671875"
|
||||
inkscape:cx="707.02439"
|
||||
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"
|
||||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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
|
||||
property int maximumX: root.parent ? root.parent.width - root.width : 0
|
||||
property int maximumY: root.parent ? root.parent.height - root.height : 0
|
||||
implicitWidth: backgroundImage.width
|
||||
implicitHeight: backgroundImage.height
|
||||
|
||||
implicitWidth: box.width + icon.width - iconOverlap * 2
|
||||
implicitHeight: addressLine.height + hifi.layout.spacing * 2
|
||||
Image {
|
||||
id: backgroundImage
|
||||
|
||||
Border {
|
||||
id: box
|
||||
|
||||
width: 512
|
||||
height: parent.height
|
||||
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
|
||||
}
|
||||
}
|
||||
source: "../images/address-bar.svg"
|
||||
width: 576
|
||||
height: 80
|
||||
property int inputAreaHeight: 56 // Height of the background's input area
|
||||
property int inputAreaStep: (height - inputAreaHeight) / 2
|
||||
|
||||
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
|
||||
bottomMargin: hifi.layout.spacing
|
||||
topMargin: parent.inputAreaStep + 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
|
||||
minimumY: 0
|
||||
maximumX: root.parent ? addressBarDialog.maximumX : 0
|
||||
maximumY: root.parent ? addressBarDialog.maximumY : 0
|
||||
minimumX: -parent.inputAreaStep
|
||||
minimumY: -parent.inputAreaStep
|
||||
maximumX: root.parent ? root.maximumX : 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue