dc39ffd · unity8 · git.iko.soy

20Item {

21 id: swipeToAct

22

23− width: parent.width

24 height: childrenRect.height

23 height: childrenRect.height

25

24

26 signal leftTriggered()

25 signal leftTriggered()

28

27

29 property string leftIconName

28 property string leftIconName

30 property string rightIconName

29 property string rightIconName

31− property double opacityDelta

32− readonly property double sliderHeight: units.gu(8)

33− readonly property double gap: units.gu(1)

34− readonly property color sliderMainColor: "#b2b2b2"

35− readonly property color sliderBGColor: "#f4f4f4"

36− readonly property double halfWay: mouseArea.drag.maximumX / 2

37−

38− // linearly interpolate between start- and end-color

39− // with a normalized weight-factor

40− // 0.0 meaning just the start-color being taken into

41− // account and 1.0 only taking the end-color into

42− // account

43− function interpolate(start, end, factor) {

44− var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r

45− var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g

46− var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b

47− var adiff = start.a > end.a ? end.a - start.a : end.a - start.a

48− var r = start.r + factor * rdiff

49− var g = start.g + factor * gdiff

50− var b = start.b + factor * bdiff

51− var a = start.a + factor * adiff

52− return Qt.rgba(r,g,b,a)

53− }

54

30

31+ QtObject {

32+ id: priv

33+

34+ property double opacityDelta

35+ readonly property double sliderHeight: units.gu(8)

36+ readonly property double gap: units.gu(1)

37+ readonly property color sliderMainColor: "#b2b2b2"

38+ readonly property color sliderBGColor: "#f4f4f4"

39+ readonly property double halfWay: mouseArea.drag.maximumX / 2

40+

55− UbuntuNumberAnimation on opacityDelta {

41+ UbuntuNumberAnimation on opacityDelta {

56− from: 0

42+ from: 0

57− to: .5

43+ to: .5

58− loops: Animation.Infinite

44+ loops: Animation.Infinite

59− duration: UbuntuAnimation.SleepyDuration

45+ duration: UbuntuAnimation.SleepyDuration

60− easing.type: Easing.Linear

46+ easing.type: Easing.Linear

47+ }

48+

49+ // linearly interpolate between start- and end-color

50+ // with a normalized weight-factor

51+ // 0.0 meaning just the start-color being taken into

52+ // account and 1.0 only taking the end-color into

53+ // account

54+ function interpolate(start, end, factor) {

55+ var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r

56+ var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g

57+ var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b

58+ var adiff = start.a > end.a ? end.a - start.a : end.a - start.a

59+ var r = start.r + factor * rdiff

60+ var g = start.g + factor * gdiff

61+ var b = start.b + factor * bdiff

62+ var a = start.a + factor * adiff

63+ return Qt.rgba(r,g,b,a)

64+ }

61 }

65 }

62

66

63 UbuntuShape {

67 UbuntuShape {

64 id: row

68 id: row

65 width: parent.width

69 width: parent.width

66− height: sliderHeight

70+ height: priv.sliderHeight

67− color: sliderBGColor

71+ color: priv.sliderBGColor

68 borderSource: "none"

72 borderSource: "none"

69

73

70− UbuntuShape {

74+ UbuntuShape {

71− id: leftShape

75+ id: leftShape

72− anchors.top: parent.top

76+ anchors.top: parent.top

73− anchors.left: parent.left

77+ anchors.left: parent.left

74− anchors.margins: gap

78+ anchors.margins: priv.gap

75− color: UbuntuColors.red

79+ color: UbuntuColors.red

76− borderSource: "none"

80+ borderSource: "none"

77−

81+

78− state: "normal"

82+ state: "normal"

79− height: units.gu(6)

83+ height: units.gu(6)

80− width: units.gu(6)

84+ width: units.gu(6)

81− radius: "medium"

85+ radius: "medium"

82− opacity: slider.x <= halfWay ? 1.0 : 1.0 - ((slider.x - halfWay) / halfWay)

86+ opacity: slider.x <= priv.halfWay ? 1.0 : 1.0 - ((slider.x - priv.halfWay) / priv.halfWay)

83− UbuntuShape {

87+

84− id: innerLeftShape

85− anchors.centerIn: parent

86− borderSource: "none"

87− width: parent.width - units.gu(.5)

88− height: parent.height - units.gu(.5)

89− }

90− Icon {

88+ Icon {

91− anchors.centerIn: parent

89+ anchors.centerIn: parent

92− width: units.gu(3.5)

90+ width: units.gu(3.5)

93− height: units.gu(3.5)

91+ height: units.gu(3.5)

94− name: leftIconName

92+ name: leftIconName

95− color: "white"

93+ color: "white"

96− }

97 }

94 }

95+ }

98

96

99− Row {

97+ Row {

100− anchors.verticalCenter: parent.verticalCenter

98+ anchors.verticalCenter: parent.verticalCenter

101− anchors.right: slider.left

99+ anchors.right: slider.left

102− anchors.rightMargin: units.gu(1.5)

100+ anchors.rightMargin: units.gu(1.5)

103− spacing: -units.gu(1)

101+ spacing: -units.gu(1)

104− visible: slider.x === halfWay

102+ visible: slider.x === priv.halfWay

105− Icon {

103+ Icon {

106− name: "back"

104+ name: "back"

107− height: units.gu(2.5)

105+ height: units.gu(2.5)

108− color: sliderMainColor

106+ color: priv.sliderMainColor

109− opacity: .5 + opacityDelta

107+ opacity: .5 + priv.opacityDelta

110− }

108+ }

111− Icon {

109+ Icon {

112− name: "back"

110+ name: "back"

113− height: units.gu(2.5)

111+ height: units.gu(2.5)

114− color: sliderMainColor

112+ color: priv.sliderMainColor

115− opacity: 1 - opacityDelta

113+ opacity: 1 - priv.opacityDelta

116− }

117 }

114 }

115+ }

118

116

119− UbuntuShape {

117+ UbuntuShape {

120− id: slider

118+ id: slider

121− objectName: "slider"

119+ objectName: "slider"

122− anchors.top: parent.top

120+ anchors.top: parent.top

123− anchors.margins: gap

121+ anchors.margins: priv.gap

124− x: halfWay

122+ x: priv.halfWay

125

123

126− Component.onCompleted: {

124+ Component.onCompleted: {

127− xBehavior.enabled = true

125+ xBehavior.enabled = true

128− }

126+ }

129

127

130− Behavior on x {

128+ Behavior on x {

131− id: xBehavior

129+ id: xBehavior

132− enabled: false

130+ enabled: false

133− UbuntuNumberAnimation {

131+ UbuntuNumberAnimation {

134− duration: UbuntuAnimation.FastDuration

132+ duration: UbuntuAnimation.FastDuration

135− easing.type: Easing.OutBounce

133+ easing.type: Easing.OutBounce

136− }

137 }

134 }

135+ }

138

136

139− Behavior on opacity {

137+ Behavior on opacity {

140− UbuntuNumberAnimation {

138+ UbuntuNumberAnimation {

141− duration: UbuntuAnimation.FastDuration

139+ duration: UbuntuAnimation.FastDuration

142− }

143 }

140 }

141+ }

144

142

145− onXChanged: {

143+ onXChanged: {

146− var factor

144+ var factor

147− if (slider.x <= gap + leftShape.width)

145+ if (slider.x <= priv.gap + leftShape.width)

148− {

146+ {

149− factor = (slider.x - gap) / leftShape.width

147+ factor = (slider.x - priv.gap) / leftShape.width

150− slider.color = interpolate(leftShape.color, sliderMainColor, factor)

148+ slider.color = priv.interpolate(leftShape.color, priv.sliderMainColor, factor)

151− } else if (slider.x >= rightShape.x - slider.width) {

149+ } else if (slider.x >= rightShape.x - slider.width) {

152− factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width

150+ factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width

153− slider.color = interpolate(sliderMainColor, rightShape.color, factor)

151+ slider.color = priv.interpolate(priv.sliderMainColor, rightShape.color, factor)

154− } else {

152+ } else {

155− slider.color = sliderMainColor

153+ slider.color = priv.sliderMainColor

156− }

157 }

154 }

155+ }

158

156

159− z: 1

157+ z: 1

160− color: sliderMainColor

158+ color: priv.sliderMainColor

161− height: units.gu(6)

159+ height: units.gu(6)

162− width: units.gu(6)

160+ width: units.gu(6)

163− borderSource: "none"

161+ borderSource: "none"

164− radius: "medium"

162+ radius: "medium"

165− Icon {

163+ Icon {

166− anchors.fill: parent

164+ anchors.fill: parent

167− anchors.margins: units.gu(1.5)

165+ anchors.margins: units.gu(1.5)

168− source: "grip-large.svg"

166+ source: "grip-large.svg"

169− color: "white"

167+ color: "white"

170− }

171 }

168 }

169+ }

172− Row {

170+ Row {

173− anchors.verticalCenter: parent.verticalCenter

171+ anchors.verticalCenter: parent.verticalCenter

174− anchors.left: slider.right

172+ anchors.left: slider.right

175− anchors.leftMargin: units.gu(1.5)

173+ anchors.leftMargin: units.gu(1.5)

176− spacing: -units.gu(1)

174+ spacing: -units.gu(1)

177− visible: slider.x === halfWay

175+ visible: slider.x === priv.halfWay

178− Icon {

176+ Icon {

179− name: "next"

177+ name: "next"

180− height: units.gu(2.5)

178+ height: units.gu(2.5)

181− color: sliderMainColor

179+ color: priv.sliderMainColor

182− opacity: 1 - opacityDelta

183− }

184− Icon {

185− name: "next"

186− height: units.gu(2.5)

187− color: sliderMainColor

188− opacity: 0.5 + opacityDelta

180+ opacity: 1 - priv.opacityDelta

189− }

190 }

181 }

182+ Icon {

183+ name: "next"

184+ height: units.gu(2.5)

185+ color: priv.sliderMainColor

186+ opacity: 0.5 + priv.opacityDelta

187+ }

188+ }

191

189

192− UbuntuShape {

190+ UbuntuShape {

193− id: rightShape

191+ id: rightShape

194− anchors.top: parent.top

192+ anchors.top: parent.top

195− anchors.right: parent.right

193+ anchors.right: parent.right

196− anchors.margins: gap

194+ anchors.margins: priv.gap

197− color: UbuntuColors.green

195+ color: UbuntuColors.green

198− borderSource: "none"

196+ borderSource: "none"

199−

197+

200− state: "normal"

198+ state: "normal"

201− height: units.gu(6)

199+ height: units.gu(6)

202− width: units.gu(6)

200+ width: units.gu(6)

203− radius: "medium"

201+ radius: "medium"

204− opacity: slider.x >= halfWay ? 1.0 : slider.x / halfWay

202+ opacity: slider.x >= priv.halfWay ? 1.0 : slider.x / priv.halfWay

205− UbuntuShape {

203+

206− id: innerRightShape

207− anchors.centerIn: parent

208− borderSource: "none"

209− width: parent.width - units.gu(.5)

210− height: parent.height - units.gu(.5)

211− }

212− Icon {

204+ Icon {

213− anchors.centerIn: parent

205+ anchors.centerIn: parent

214− width: units.gu(3.5)

206+ width: units.gu(3.5)

215− height: units.gu(3.5)

207+ height: units.gu(3.5)

216− name: rightIconName

208+ name: rightIconName

217− color: "white"

209+ color: "white"

218− }

219 }

210 }

220 }

211 }

212+ }

221

213

222− MouseArea {

214+ MouseArea {

223− id: mouseArea

215+ id: mouseArea

224− objectName: "swipeMouseArea"

216+ objectName: "swipeMouseArea"

225

217

226− anchors.fill: row

218+ anchors.fill: row

227− drag.target: slider

219+ drag.target: slider

228− drag.axis: Drag.XAxis

220+ drag.axis: Drag.XAxis

229− drag.minimumX: gap

221+ drag.minimumX: priv.gap

230− drag.maximumX: row.width - slider.width - gap

222+ drag.maximumX: row.width - slider.width - priv.gap

231

223

232− onReleased: {

224+ onReleased: {

233− if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {

225+ if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {

234− slider.x = halfWay

226+ slider.x = priv.halfWay

235− }

236− if (slider.x === drag.minimumX) {

237− slider.x = drag.minimumX

238− enabled = false

239− leftTriggered()

240− }

241− if (slider.x === drag.maximumX) {

242− slider.x = drag.maximumX

243− enabled = false

244− rightTriggered()

245− }

246 }

227 }

228+ if (slider.x === drag.minimumX) {

229+ slider.x = drag.minimumX

230+ enabled = false

231+ leftTriggered()

232+ }

233+ if (slider.x === drag.maximumX) {

234+ slider.x = drag.maximumX

235+ enabled = false

236+ rightTriggered()

237+ }

238+ }

247 }

239 }

248}

240}