movable stripe with launch icons

This commit is contained in:
Aaron Seigo 2014-09-29 21:09:50 +02:00
parent ff07551373
commit 8eee53a039
3 changed files with 313 additions and 8 deletions

View file

@ -2,6 +2,7 @@ import QtQuick 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
Item {
id: root
width: parent.width / parent.columns
height: parent.buttonHeight
property var callback
@ -19,6 +20,9 @@ Item {
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
drag.target: stripe
drag.axis: Drag.YAxis
onClicked: {
if (callback) {
callback();
@ -27,11 +31,9 @@ Item {
}
}
onPressAndHold: {
if (parent.sub.length > 0) {
addNumber(parent.sub);
} else {
addNumber(parent.text);
onReleased: {
if (drag.active) {
}
}
}

View file

@ -0,0 +1,260 @@
<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="972.16351"
height="203.95906"
id="svg4025"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 4">
<defs
id="defs4027" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="423.57766"
inkscape:cy="19.47953"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="3200"
inkscape:window-height="1768"
inkscape:window-x="0"
inkscape:window-y="-3"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata4030">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-259.63254,-347.88266)">
<g
transform="translate(207.79603,359.47951)"
id="email"
inkscape:label="#g3960">
<path
transform="matrix(2.6315789,0,0,2.6315789,1578.5263,1202.8885)"
d="m -308,-422 c 0,20.98682 -17.01318,38 -38,38 -20.98682,0 -38,-17.01318 -38,-38 0,-20.98682 17.01318,-38 38,-38 20.98682,0 38,17.01318 38,38 z"
sodipodi:ry="38"
sodipodi:rx="38"
sodipodi:cy="-422"
sodipodi:cx="-346"
id="path5038-4"
style="opacity:0.8;fill:#000000;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<g
id="g3953">
<g
id="layer1-8"
transform="matrix(3.0415044,0,0,3.0415044,593.47877,17.283066)"
style="fill:#f2d842;fill-opacity:1">
<path
d="M 0,0 0,30 13.334,15.0012 z"
transform="translate(5,9)"
id="path4127"
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd" />
<path
d="M 0,0 17.6439,17 19,18.3 20.3561,17 38,0 z"
transform="translate(5,9)"
id="path4125"
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd" />
<path
d="M 13.334,0 0,15.0012 13.334,30 z"
transform="translate(29.666,9)"
id="path4123"
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd" />
<path
d="M 15.2227,0 0,12.6309 l 37.5547,0 L 22.332,0 18.7773,3.36719 z"
transform="translate(5.22266,26.3691)"
id="rect3260"
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd" />
</g>
</g>
</g>
<g
transform="translate(919.2246,317.33665)"
id="phone"
inkscape:label="#g3944">
<path
transform="matrix(2.6315789,0,0,2.6315789,350.93424,1241.0723)"
d="m -308,-422 c 0,20.98682 -17.01318,38 -38,38 -20.98682,0 -38,-17.01318 -38,-38 0,-20.98682 17.01318,-38 38,-38 20.98682,0 38,17.01318 38,38 z"
sodipodi:ry="38"
sodipodi:rx="38"
sodipodi:cy="-422"
sodipodi:cx="-346"
id="path5038"
style="opacity:0.8;fill:#000000;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<path
inkscape:connector-curvature="0"
id="path4128-0-9"
d="m -583.50447,76.46575 c -1.86372,-0.0072 -27.21217,10.305195 -28.75978,11.703933 -1.84203,1.665344 0.23482,13.309167 4.59876,25.744457 9.88137,28.17454 35.33169,53.80871 63.99465,64.45741 8.30341,3.08482 24.41316,6.96228 26.66305,6.41896 0.66145,-0.16041 3.89288,-6.89324 7.18318,-14.96835 l 0,0 c 3.29029,-8.07514 5.98019,-14.84698 5.98019,-15.05083 0,-0.20303 -7.38909,-4.03543 -16.42151,-8.51508 l -16.42115,-8.14392 -7.88437,7.73158 -7.87713,7.72473 -4.95604,-3.40189 c -5.58462,-3.83035 -18.54569,-16.86252 -22.01662,-22.1433 l -2.28202,-3.4775 7.7879,-7.78658 7.78791,-7.7797 -8.22791,-16.25353 c -4.52616,-8.939403 -8.64517,-16.257572 -9.15599,-16.26039 z"
style="fill:#f2d842;fill-opacity:1"
sodipodi:nodetypes="cccscccscccccccccccc" />
</g>
<g
transform="translate(207.79603,359.47951)"
id="web"
inkscape:label="#g3969">
<path
transform="matrix(2.6315789,0,0,2.6315789,1834.5263,1202.8885)"
d="m -308,-422 c 0,20.98682 -17.01318,38 -38,38 -20.98682,0 -38,-17.01318 -38,-38 0,-20.98682 17.01318,-38 38,-38 20.98682,0 38,17.01318 38,38 z"
sodipodi:ry="38"
sodipodi:rx="38"
sodipodi:cy="-422"
sodipodi:cx="-346"
id="path5038-8"
style="opacity:0.8;fill:#000000;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<g
transform="matrix(8.6577389,0,0,8.6577389,6742.4809,7725.3521)"
id="g5084">
<rect
style="fill:none;stroke:none"
id="rect3260-3"
width="15"
height="15"
x="-679.5"
y="-889.13782" />
<rect
ry="2"
y="-878.13782"
x="-674"
height="4"
width="4"
id="rect3292"
style="fill:none;stroke:none" />
<path
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m -672,-889.1378 c -4.155,0 -7.5,3.345 -7.5,7.5 0,4.155 3.345,7.5 7.5,7.5 4.155,0 7.5,-3.345 7.5,-7.5 0,-4.155 -3.345,-7.5 -7.5,-7.5 z m 0,2 c 3.047,0 5.5,2.453 5.5,5.5 0,3.047 -2.453,5.5 -5.5,5.5 -3.047,0 -5.5,-2.453 -5.5,-5.5 0,-3.047 2.453,-5.5 5.5,-5.5 z"
id="rect3272" />
<rect
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="rect3279"
width="12"
height="1"
x="-678"
y="-882.13782"
ry="0" />
<rect
ry="0"
y="-672.5"
x="875.63782"
height="1"
width="12"
id="rect3281"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd;stroke:none"
transform="matrix(0,-1,1,0,0,0)" />
<rect
ry="1"
y="-876.13782"
x="-673"
height="2"
width="2"
id="rect3274"
style="fill:none;stroke:none" />
<rect
style="fill:none;stroke:none"
id="rect3283"
width="0.99999976"
height="0.99999976"
x="-672.5"
y="-875.13806"
ry="0.49999988" />
<rect
ry="2"
y="-883.63782"
x="-679.5"
height="4"
width="4"
id="rect3296"
style="fill:none;stroke:none" />
<rect
style="fill:none;stroke:none"
id="rect3300"
width="4"
height="4"
x="-668.5"
y="-883.63782"
ry="2" />
<path
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m -675.39648,-885.964 c 1.02033,0.5192 2.1688,0.8262 3.39648,0.8262 1.22768,0 2.37615,-0.307 3.39648,-0.8262 -0.31154,-0.2446 -0.65081,-0.4535 -1.01171,-0.6269 -0.73773,0.2908 -1.54073,0.4531 -2.38477,0.4531 -0.84404,0 -1.64704,-0.1623 -2.38477,-0.4531 -0.3609,0.1734 -0.70017,0.3823 -1.01171,0.6269 z"
id="path3330" />
<rect
style="fill:none;stroke:none"
id="rect3290"
width="4"
height="4"
x="-674"
y="-889.13782"
ry="2" />
<path
inkscape:connector-curvature="0"
style="fill:#f2d842;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m -675.3965,-877.3116 c 1.0203,-0.5192 2.1688,-0.8262 3.3965,-0.8262 1.2277,0 2.3762,0.307 3.3965,0.8262 -0.3116,0.2446 -0.6508,0.4535 -1.0117,0.6269 -0.7378,-0.2908 -1.5408,-0.4531 -2.3848,-0.4531 -0.844,0 -1.647,0.1623 -2.3848,0.4531 -0.3609,-0.1734 -0.7001,-0.3823 -1.0117,-0.6269 z"
id="path3336" />
</g>
</g>
<g
transform="translate(207.79603,359.47951)"
id="messaging"
inkscape:label="#g3948">
<path
transform="matrix(2.6315789,0,0,2.6315789,1322.5263,1202.8885)"
d="m -308,-422 c 0,20.98682 -17.01318,38 -38,38 -20.98682,0 -38,-17.01318 -38,-38 0,-20.98682 17.01318,-38 38,-38 20.98682,0 38,17.01318 38,38 z"
sodipodi:ry="38"
sodipodi:rx="38"
sodipodi:cy="-422"
sodipodi:cx="-346"
id="path5038-9"
style="opacity:0.8;fill:#000000;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<g
style="fill:#f2d842;fill-opacity:1;stroke:none"
inkscape:label="Capa 1"
id="layer1-70"
transform="matrix(6.5577152,0,0,6.5577152,340.06797,-6731.8963)">
<path
style="fill:#f2d842;fill-opacity:1;stroke:none"
d="m 11,1033.3622 c -4.4181661,0 -8.0000011,2.6867 -8.0000001,6.0003 0,3.2629 3.475447,5.9116 7.8001261,5.9921 l 0,4.0076 C 19.016547,1044.6185 19,1041.6283 19,1039.3625 c 0,-3.3136 -3.581835,-6.0003 -8,-6.0003 z m -3.7407741,3.0651 3.0823081,0 0,3.0833 -0.01015,0 c 0.0065,0.073 0.01015,0.1459 0.01015,0.2202 0,1.2634 -0.9671911,2.2993 -2.2016481,2.4106 l 0,-0.8918 c 0.745998,-0.1077 1.320989,-0.743 1.320989,-1.5188 0,-0.075 -0.0088,-0.148 -0.01928,-0.2202 l -2.182372,0 0,-3.0833 z m 4.3992391,0 3.082308,0 0,3.0833 -0.01014,0 c 0.0065,0.073 0.01014,0.1459 0.01014,0.2202 0,1.2634 -0.967191,2.2993 -2.201648,2.4106 l 0,-0.8918 c 0.745998,-0.1077 1.320989,-0.743 1.320989,-1.5188 0,-0.075 -0.0088,-0.148 -0.01928,-0.2202 l -2.182372,0 0,-3.0833 z"
id="path4084-3"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -233,13 +233,56 @@ Item {
id: stripe
z: 1
MouseArea {
PlasmaCore.Svg {
id: stripeIcons
imagePath: Qt.resolvedUrl("../images/homescreenicons.svg")
}
Row {
anchors.fill: parent
onPressed: {
property int columns: 4
property alias buttonHeight: stripe.height
HomeLauncherSvg {
id: phoneIcon
svg: stripeIcons
elementId: "phone"
callback: function() { console.log("Start phone") }
}
onReleased: {
HomeLauncherSvg {
id: messagingIcon
svg: stripeIcons
elementId: "messaging"
callback: function() { console.log("Start messaging") }
}
HomeLauncherSvg {
id: emailIcon
svg: stripeIcons
elementId: "email"
callback: function() { console.log("Start email") }
}
HomeLauncherSvg {
id: webIcon
svg: stripeIcons
elementId: "web"
callback: function() { console.log("Start web") }
}
}
}
Grid {
id: applications
z: 1
anchors {
top: stripe.bottom
bottom: parent.bottom
left: parent.left
right: parent.right
}
}