on xenial help sign in
First set of changes for the SwipeToAct visual update.
5d16e38Mirco Müller
qml/Notifications/SwipeToAct.qml+26−104
@@ -29,81 +29,14 @@ Item {
29
29
30 property string leftIconName
30 property string leftIconName
31 property string rightIconName
31 property string rightIconName
32− readonly property double sliderHeight: units.gu(6)
32+ readonly property double sliderHeight: units.gu(8)
33 readonly property double gap: units.gu(1)
33 readonly property double gap: units.gu(1)
34 readonly property double halfWay: mouseArea.drag.maximumX / 2
34 readonly property double halfWay: mouseArea.drag.maximumX / 2
35
35
36− Rectangle {
37− id: gradient
38− width: parent.width * 5
39− height: sliderHeight
40− visible: false
41− LinearGradient {
42− anchors.fill: parent
43− start: Qt.point(parent.x, parent.y)
44− end: Qt.point(parent.width, parent.y)
45− gradient: Gradient {
46− GradientStop { position: 0.0; color: UbuntuColors.red }
47− GradientStop { position: 0.2; color: UbuntuColors.red }
48− GradientStop { position: 0.4; color: "#dddddd" }
49− GradientStop { position: 0.6; color: "#dddddd" }
50− GradientStop { position: 0.8; color: UbuntuColors.green }
51− GradientStop { position: 1.0; color: UbuntuColors.green }
52− }
53− }
54− }
55−
56− ShaderEffectSource {
57− id: effectSourceGradient
58− sourceItem: gradient
59− width: gradient.width
60− height: gradient.height
61− sourceRect: Qt.rect(0.4 * gradient.width * (slider.x / halfWay), 0, mask.width, mask.height)
62− visible: false
63− hideSource: true
64− }
65−
66 UbuntuShape {
36 UbuntuShape {
67− id: mask
68− color: "black"
69 width: parent.width
37 width: parent.width
70 height: sliderHeight
38 height: sliderHeight
71− borderSource: "none"
39+ color: "#f4f4f4"
72− visible: false
73− }
74−
75− ShaderEffectSource {
76− id: effectSourceMask
77− sourceItem: mask
78− width: mask.width
79− height: mask.height
80− visible: false
81− hideSource: true
82− }
83−
84− ShaderEffect {
85− width: parent.width
86− height: sliderHeight
87− property variant mask: effectSourceMask
88− property variant gradient: effectSourceGradient
89− vertexShader: "
90− uniform highp mat4 qt_Matrix;
91− attribute highp vec4 qt_Vertex;
92− attribute highp vec2 qt_MultiTexCoord0;
93− varying highp vec2 coord;
94− void main() {
95− coord = qt_MultiTexCoord0;
96− gl_Position = qt_Matrix * qt_Vertex;
97− }"
98− fragmentShader: "
99− varying highp vec2 coord;
100− uniform sampler2D mask;
101− uniform sampler2D gradient;
102− void main() {
103− lowp vec4 texMask = texture2D(mask, coord);
104− lowp vec4 texGradient = texture2D(gradient, coord);
105− gl_FragColor = texGradient.rgba * texMask.a ;
106− }"
107
40
108 Row {
41 Row {
109 id: row
42 id: row
@@ -118,11 +51,11 @@ Item {
118 name: "normal"
51 name: "normal"
119 PropertyChanges {
52 PropertyChanges {
120 target: leftShape
53 target: leftShape
121− color: UbuntuColors.red
54+ color: "#df382c" //UbuntuColors.red
122 }
55 }
123 PropertyChanges {
56 PropertyChanges {
124 target: innerLeftShape
57 target: innerLeftShape
125− color: UbuntuColors.red
58+ color: "#df382c" //UbuntuColors.red
126 visible: false
59 visible: false
127 }
60 }
128 },
61 },
@@ -134,15 +67,15 @@ Item {
134 }
67 }
135 PropertyChanges {
68 PropertyChanges {
136 target: innerLeftShape
69 target: innerLeftShape
137− color: UbuntuColors.red
70+ color: "#df382c" //UbuntuColors.red
138 visible: true
71 visible: true
139 }
72 }
140 }
73 }
141 ]
74 ]
142 state: "normal"
75 state: "normal"
143− height: units.gu(4)
76+ height: units.gu(6)
144− width: units.gu(7)
77+ width: units.gu(6)
145− borderSource: "none"
78+ radius: "medium"
146 opacity: slider.x <= halfWay ? 1.0 : 1.0 - ((slider.x - halfWay) / halfWay)
79 opacity: slider.x <= halfWay ? 1.0 : 1.0 - ((slider.x - halfWay) / halfWay)
147 UbuntuShape {
80 UbuntuShape {
148 id: innerLeftShape
81 id: innerLeftShape
@@ -153,8 +86,8 @@ Item {
153 }
86 }
154 Icon {
87 Icon {
155 anchors.centerIn: parent
88 anchors.centerIn: parent
156− width: units.gu(2)
89+ width: units.gu(3.5)
157− height: units.gu(2)
90+ height: units.gu(3.5)
158 name: leftIconName
91 name: leftIconName
159 color: "white"
92 color: "white"
160 }
93 }
@@ -196,27 +129,16 @@ Item {
196 }
129 }
197
130
198 z: 1
131 z: 1
199− color: "white"
132+ color: "#b2b2b2"
200− height: units.gu(4)
133+ height: units.gu(6)
201− width: units.gu(7)
134+ width: units.gu(6)
202 borderSource: "none"
135 borderSource: "none"
203− Row {
136+ radius: "medium"
137+ Icon {
204 anchors.fill: parent
138 anchors.fill: parent
205− spacing: 2 * gap
206− anchors.leftMargin: units.gu(.5)
139+ anchors.margins: units.gu(1.5)
207− anchors.rightMargin: units.gu(.5)
140+ source: "grip-large.svg"
208− Icon {
141+ color: "white"
209− anchors.verticalCenter: parent.verticalCenter
210− name: "back"
211− width: units.gu(2)
212− height: units.gu(2)
213− }
214− Icon {
215− anchors.verticalCenter: parent.verticalCenter
216− name: "next"
217− width: units.gu(2)
218− height: units.gu(2)
219− }
220 }
142 }
221 }
143 }
222
144
@@ -234,11 +156,11 @@ Item {
234 name: "normal"
156 name: "normal"
235 PropertyChanges {
157 PropertyChanges {
236 target: rightShape
158 target: rightShape
237− color: UbuntuColors.green
159+ color: "#38b44a" // UbuntuColors.green
238 }
160 }
239 PropertyChanges {
161 PropertyChanges {
240 target: innerRightShape
162 target: innerRightShape
241− color: UbuntuColors.green
163+ color: "#38b44a" // UbuntuColors.green
242 visible: false
164 visible: false
243 }
165 }
244 },
166 },
@@ -250,15 +172,15 @@ Item {
250 }
172 }
251 PropertyChanges {
173 PropertyChanges {
252 target: innerRightShape
174 target: innerRightShape
253− color: UbuntuColors.green
175+ color: "#38b44a" // UbuntuColors.green
254 visible: true
176 visible: true
255 }
177 }
256 }
178 }
257 ]
179 ]
258 state: "normal"
180 state: "normal"
259− height: units.gu(4)
181+ height: units.gu(6)
260− width: units.gu(7)
182+ width: units.gu(6)
261− borderSource: "none"
183+ radius: "medium"
262 opacity: slider.x >= halfWay ? 1.0 : slider.x / halfWay
184 opacity: slider.x >= halfWay ? 1.0 : slider.x / halfWay
263 UbuntuShape {
185 UbuntuShape {
264 id: innerRightShape
186 id: innerRightShape
@@ -269,8 +191,8 @@ Item {
269 }
191 }
270 Icon {
192 Icon {
271 anchors.centerIn: parent
193 anchors.centerIn: parent
272− width: units.gu(2)
194+ width: units.gu(3.5)
273− height: units.gu(2)
195+ height: units.gu(3.5)
274 name: rightIconName
196 name: rightIconName
275 color: "white"
197 color: "white"
276 }
198 }
qml/Notifications/grip-large.svgnew file+150
@@ -0,0 +1,150 @@
1+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2+<!-- Created with Inkscape (http://www.inkscape.org/) -->
3+
4+<svg
5+ xmlns:dc="http://purl.org/dc/elements/1.1/"
6+ xmlns:cc="http://creativecommons.org/ns#"
7+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8+ xmlns:svg="http://www.w3.org/2000/svg"
9+ xmlns="http://www.w3.org/2000/svg"
10+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12+ width="90"
13+ height="90"
14+ id="svg4874"
15+ version="1.1"
16+ inkscape:version="0.91+devel r"
17+ viewBox="0 0 90 90.000001"
18+ sodipodi:docname="grip-large01.svg">
19+ <defs
20+ id="defs4876" />
21+ <sodipodi:namedview
22+ id="base"
23+ pagecolor="#ffffff"
24+ bordercolor="#666666"
25+ borderopacity="1.0"
26+ inkscape:pageopacity="0.0"
27+ inkscape:pageshadow="2"
28+ inkscape:zoom="7.9580786"
29+ inkscape:cx="13.632541"
30+ inkscape:cy="49.591116"
31+ inkscape:document-units="px"
32+ inkscape:current-layer="g1708"
33+ showgrid="true"
34+ showborder="true"
35+ fit-margin-top="0"
36+ fit-margin-left="0"
37+ fit-margin-right="0"
38+ fit-margin-bottom="0"
39+ inkscape:snap-bbox="true"
40+ inkscape:bbox-paths="true"
41+ inkscape:bbox-nodes="true"
42+ inkscape:snap-bbox-edge-midpoints="true"
43+ inkscape:snap-bbox-midpoints="true"
44+ inkscape:object-paths="true"
45+ inkscape:snap-intersection-paths="true"
46+ inkscape:object-nodes="true"
47+ inkscape:snap-smooth-nodes="true"
48+ inkscape:snap-midpoints="true"
49+ inkscape:snap-object-midpoints="true"
50+ inkscape:snap-center="true"
51+ showguides="true"
52+ inkscape:guide-bbox="true">
53+ <inkscape:grid
54+ type="xygrid"
55+ id="grid5451"
56+ empspacing="6" />
57+ <sodipodi:guide
58+ orientation="1,0"
59+ position="6,77"
60+ id="guide4063" />
61+ <sodipodi:guide
62+ orientation="1,0"
63+ position="3,78"
64+ id="guide4065" />
65+ <sodipodi:guide
66+ orientation="0,1"
67+ position="55,84"
68+ id="guide4067" />
69+ <sodipodi:guide
70+ orientation="0,1"
71+ position="53,87"
72+ id="guide4069" />
73+ <sodipodi:guide
74+ orientation="0,1"
75+ position="20,3"
76+ id="guide4071" />
77+ <sodipodi:guide
78+ orientation="0,1"
79+ position="20,6"
80+ id="guide4073" />
81+ <sodipodi:guide
82+ orientation="1,0"
83+ position="87,7"
84+ id="guide4075" />
85+ <sodipodi:guide
86+ orientation="1,0"
87+ position="84,7"
88+ id="guide4077" />
89+ <sodipodi:guide
90+ orientation="0,1"
91+ position="58,81"
92+ id="guide4074" />
93+ <sodipodi:guide
94+ orientation="1,0"
95+ position="9,74"
96+ id="guide4076" />
97+ <sodipodi:guide
98+ orientation="0,1"
99+ position="21,9"
100+ id="guide4078" />
101+ <sodipodi:guide
102+ orientation="1,0"
103+ position="81,4"
104+ id="guide4080" />
105+ </sodipodi:namedview>
106+ <metadata
107+ id="metadata4879">
108+ <rdf:RDF>
109+ <cc:Work
110+ rdf:about="">
111+ <dc:format>image/svg+xml</dc:format>
112+ <dc:type
113+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
114+ <dc:title></dc:title>
115+ </cc:Work>
116+ </rdf:RDF>
117+ </metadata>
118+ <g
119+ inkscape:label="Layer 1"
120+ inkscape:groupmode="layer"
121+ id="layer1"
122+ transform="translate(67.857146,-84.50504)">
123+ <g
124+ transform="matrix(0,-1,-1,0,373.50506,516.50504)"
125+ id="g4845"
126+ style="display:inline">
127+ <g
128+ inkscape:label="Layer 1"
129+ id="g1708"
130+ transform="matrix(0,-1,-1,0,1394.3622,441.36221)"
131+ inkscape:export-filename="add01.png"
132+ inkscape:export-xdpi="90"
133+ inkscape:export-ydpi="90">
134+ <rect
135+ style="color:#000000;fill:none;stroke:none;stroke-width:7.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
136+ id="rect1710"
137+ width="90"
138+ height="90"
139+ x="0"
140+ y="962.36218" />
141+ <path
142+ style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
143+ d="m 9.000004,971.3622 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m -72,16 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.79086 -4,4 0,2.20914 1.790861,4 4,4 2.209139,0 4,-1.79086 4,-4 0,-2.20914 -1.790861,-4 -4,-4 z m -72,16 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m -72,16 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m -72,16 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 18.199219,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z m 17.800781,0 c -2.209139,0 -4,1.7909 -4,4 0,2.2091 1.790861,4 4,4 2.209139,0 4,-1.7909 4,-4 0,-2.2091 -1.790861,-4 -4,-4 z"
144+ id="path4169"
145+ inkscape:connector-curvature="0"
146+ sodipodi:nodetypes="sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
147+ </g>
148+ </g>
149+ </g>
150+</svg>