260287a · unity8 · git.iko.soy

git.iko.soy/unity8

on xenial help sign in

Initial implementation of edge demo pages

260287aMichael Terry13 years ago

Components/DemoOverlay.qmlnew file+177

compare with xenial

unifiedsplit

@@ -0,0 +1,177 @@

1+/*

3+ *

4+ * This program is free software; you can redistribute it and/or modify

5+ * it under the terms of the GNU General Public License as published by

6+ * the Free Software Foundation; version 3.

7+ *

8+ * This program is distributed in the hope that it will be useful,

9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of

10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

11+ * GNU General Public License for more details.

12+ *

13+ * You should have received a copy of the GNU General Public License

14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.

15+ */

16+

17+import QtQuick 2.0

18+import QtGraphicalEffects 1.0

19+import GSettings 1.0

20+import Ubuntu.Application 0.1

21+import Ubuntu.Components 0.1

22+

23+Item {

24+ id: overlay

25+

26+ /*

27+ * Valid values are "left", "right", "top", or "bottom".

28+ */

29+ property string edge: "top"

30+

31+ /*

32+ * This is the header displayed, like "Right edge".

33+ */

34+ property string title

35+

36+ /*

37+ * This is the block of text displayed below the header.

38+ */

39+ property string text

40+

41+ property color __orange: Qt.hsla(16.0/360.0, 0.83, 0.47, 1.0)

42+ property color __orange_transparent: Qt.hsla(16.0/360.0, 0.83, 0.47, 0.4)

43+ property int __edge_margin: units.gu(4)

44+ property int __text_margin: units.gu(3)

45+

46+ function __isDemoSkipped() {

47+ // Check global spot, then check gsettings

48+ }

49+

50+ function __setDemoSkipped() {

51+ // We are running in one of two modes:

52+ // 1) As a greeter as the lightdm user

53+ // 2) As a shell as session user

54+ }

55+

56+ Rectangle {

57+ id: backgroundShade

58+ anchors.fill: parent

59+ color: "black"

60+ opacity: 0.8

61+ }

62+

63+ Item {

64+ id: hintGroup

65+ x: 0

66+ y: 0

67+ width: parent.width

68+ height: parent.height

69+

70+ Column {

71+ id: labelGroup

72+ layer.enabled: true // otherwise the underlining on "Skip intro" jumps

73+ spacing: overlay.__text_margin

74+

75+ anchors {

76+ margins: overlay.__edge_margin

77+ left: parent.left

78+ top: overlay.edge == "bottom" ? undefined : parent.top

79+ bottom: overlay.edge == "bottom" ? parent.bottom : undefined

80+ }

81+

82+ Label {

83+ id: titleLabel

84+ text: overlay.title

85+ color: "#B7B3AC"

86+ fontSize: "x-large"

87+ width: units.gu(25)

88+ wrapMode: Text.WordWrap

89+ }

90+

91+ Label {

92+ id: textLabel

93+ text: overlay.text

94+ color: "#B7B3AC"

95+ width: units.gu(25)

96+ wrapMode: Text.WordWrap

97+ }

98+

99+ Label {

100+ id: skipLabel

101+ text: i18n.tr("Skip intro")

102+ color: overlay.__orange

103+ fontSize: "small"

104+ font.underline: true

105+

106+ MouseArea {

107+ anchors.fill: parent

108+ onClicked: {

109+ console.log("Clicked!");

110+ __setDemoSkipped();

111+ overlay.visible = false;

112+ }

113+ }

114+ }

115+ }

116+

117+ LinearGradient {

118+ id: edgeHint

119+ property int size: 1

120+ cached: false

121+ gradient: Gradient {

122+ GradientStop {

123+ position: 0.0

124+ color: overlay.__orange_transparent

125+ }

126+ GradientStop {

127+ position: 1.0

128+ color: "#00000000"

129+ }

130+ }

131+ anchors.fill: parent

132+ start: {

133+ if (overlay.edge == "right") {

134+ return Qt.point(width, 0);

135+ } else if (overlay.edge == "left") {

136+ return Qt.point(0, 0);

137+ } else if (overlay.edge == "top") {

138+ return Qt.point(0, 0);

139+ } else {

140+ return Qt.point(0, height);

141+ }

142+ }

143+ end: {

144+ if (overlay.edge == "right") {

145+ return Qt.point(width - size, 0);

146+ } else if (overlay.edge == "left") {

147+ return Qt.point(size, 0);

148+ } else if (overlay.edge == "top") {

149+ return Qt.point(0, size);

150+ } else {

151+ return Qt.point(0, height - size);

152+ }

153+ }

154+ }

155+ }

156+

157+ SequentialAnimation {

158+ id: hintAnimation

159+ loops: Animation.Infinite

160+ running: true

161+ property string prop: (overlay.edge == "left" || overlay.edge == "right") ? "x" : "y"

162+ property double endVal: units.dp(5) * ((overlay.edge == "left" || overlay.edge == "top") ? 1 : -1)

163+ property double maxGlow: units.dp(20)

164+ property int duration: 1000

165+

166+ ParallelAnimation {

167+ StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: 0; to: hintAnimation.endVal; duration: hintAnimation.duration }

168+ StandardAnimation { target: edgeHint; property: "size"; from: 1; to: hintAnimation.maxGlow; duration: hintAnimation.duration }

169+ }

170+

171+ // Undo the above

172+ ParallelAnimation {

173+ StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: hintAnimation.endVal; to: 0; duration: hintAnimation.duration }

174+ StandardAnimation { target: edgeHint; property: "size"; from: hintAnimation.maxGlow; to: 1; duration: hintAnimation.duration }

175+ }

176+ }

177+}

Panel/Indicators.qml+2−2

@@ -330,7 +330,7 @@ Showable {

330 anchors.right: parent.right

331 height: panelHeight

332 direction: Direction.Downwards

333− enabled: !indicators.shown

333+ enabled: !indicators.shown && indicators.available

334 hintDisplacement: pinnedMode ? indicators.hintValue : 0

335 autoCompleteDragThreshold: maxTotalDragDistance / 2

336 stretch: true

@@ -349,7 +349,7 @@ Showable {

349 anchors.fill: handle

350 height: panelHeight

351 direction: Direction.Upwards

352− enabled: indicators.shown

352+ enabled: indicators.shown && indicators.available

353 hintDisplacement: units.gu(2)

354 autoCompleteDragThreshold: maxTotalDragDistance / 6

355 stretch: true

Shell.qml+70−4

@@ -153,7 +153,7 @@ FocusScope {

153 available: !greeter.shown && !lockscreen.shown

154 hides: [stages, launcher, panel.indicators]

155 shown: disappearingAnimationProgress !== 1.0

156− enabled: disappearingAnimationProgress === 0.0

156+ enabled: disappearingAnimationProgress === 0.0 && !leftEdgeDemo.visible && !topEdgeDemo.visible

157 // FIXME: unfocus all applications when going back to the dash

158 onEnabledChanged: {

159 if (enabled) {

@@ -179,6 +179,40 @@ FocusScope {

179 // FIXME: only necessary because stagesRevealer.animatedProgress and

180 // greeterRevealer.animatedProgress are not animated

181 Behavior on disappearingAnimationProgress { SmoothedAnimation { velocity: 5 }}

182+

183+ DemoOverlay {

184+ id: topEdgeDemo

185+

186+ edge: "top"

187+ title: "Top edge"

188+ text: "Try swiping from the top edge to access the indicators"

189+ anchors.fill: parent

190+

191+ Connections {

192+ target: panel.indicators

193+ onFullyOpenedChanged: topEdgeDemo.visible = false

194+ }

195+ }

196+

197+ DemoOverlay {

198+ id: leftEdgeDemo

199+

200+ edge: "left"

201+ title: "Left edge"

202+ text: "Swipe from the left to reveal the launcher for quick access to apps"

203+ anchors.fill: parent

204+ visible: false

205+

206+ Connections {

207+ target: bottomEdgeDemo

208+ onVisibleChanged: if (!bottomEdgeDemo.visible) leftEdgeDemo.visible = true

209+ }

210+

211+ Connections {

212+ target: launcher

213+ onProgressChanged: if (launcher.progress >= 1.0) leftEdgeDemo.visible = false

214+ }

215+ }

182 }

216 }

183 }

217 }

184

218

@@ -442,11 +476,26 @@ FocusScope {

442 launcher.tease();

476 launcher.tease();

443 }

477 }

444 }

478 }

479+

480+ DemoOverlay {

481+ id: rightEdgeDemo

482+

483+ edge: "right"

484+ title: "Right edge"

485+ text: "Try swiping from the right edge to unlock the phone"

486+ anchors.fill: parent

487+

488+ Connections {

489+ target: greeter

490+ onUnlocked: rightEdgeDemo.visible = false

491+ onShownChanged: if (!greeter.shown) rightEdgeDemo.visible = false

492+ }

493+ }

445 }

494 }

446

495

447 InputFilterArea {

496 InputFilterArea {

448− anchors.fill: parent

449 blockInput: greeter.shown || lockscreen.shown

497 blockInput: greeter.shown || lockscreen.shown

498+ anchors.fill: parent

450 }

499 }

451

500

452 Item {

501 Item {

@@ -460,6 +509,7 @@ FocusScope {

460 indicatorsMenuWidth: parent.width > units.gu(60) ? units.gu(40) : parent.width

509 indicatorsMenuWidth: parent.width > units.gu(60) ? units.gu(40) : parent.width

461 indicators {

510 indicators {

462 hides: [launcher]

511 hides: [launcher]

512+ available: !rightEdgeDemo.visible && !leftEdgeDemo.visible

463 }

513 }

464 fullscreenMode: shell.fullscreenMode

514 fullscreenMode: shell.fullscreenMode

465 searchVisible: !greeter.shown && !lockscreen.shown

515 searchVisible: !greeter.shown && !lockscreen.shown

@@ -468,6 +518,22 @@ FocusScope {

468 anchors.fill: parent

518 anchors.fill: parent

469 blockInput: panel.indicators.shown

519 blockInput: panel.indicators.shown

470 }

520 }

521+

522+ DemoOverlay {

523+ id: bottomEdgeDemo

524+

525+ edge: "bottom"

526+ title: "Close"

527+ text: "Swipe up again to close the settings screen"

528+ anchors.fill: panel.indicators

529+ visible: false

530+

531+ Connections {

532+ target: panel.indicators

533+ onFullyOpenedChanged: if (panel.indicators.fullyOpened) bottomEdgeDemo.visible = true

534+ onPartiallyOpenedChanged: if (!panel.indicators.partiallyOpened && !panel.indicators.fullyOpened) bottomEdgeDemo.visible = false

535+ }

536+ }

471 }

537 }

472

538

473 Hud {

539 Hud {

@@ -476,7 +542,7 @@ FocusScope {

476 width: parent.width > units.gu(60) ? units.gu(40) : parent.width

542 width: parent.width > units.gu(60) ? units.gu(40) : parent.width

477 height: parent.height

543 height: parent.height

478

544

479− available: !greeter.shown && !panel.indicators.shown && !lockscreen.shown

545+ available: !greeter.shown && !panel.indicators.shown && !lockscreen.shown && !topEdgeDemo.visible

480 shown: false

546 shown: false

481 showAnimation: StandardAnimation { property: "y"; duration: hud.showableAnimationDuration; to: 0; easing.type: Easing.Linear }

547 showAnimation: StandardAnimation { property: "y"; duration: hud.showableAnimationDuration; to: 0; easing.type: Easing.Linear }

482 hideAnimation: StandardAnimation { property: "y"; duration: hud.showableAnimationDuration; to: hudRevealer.closedValue; easing.type: Easing.Linear }

548 hideAnimation: StandardAnimation { property: "y"; duration: hud.showableAnimationDuration; to: hudRevealer.closedValue; easing.type: Easing.Linear }

@@ -534,7 +600,7 @@ FocusScope {

534 anchors.bottom: parent.bottom

600 anchors.bottom: parent.bottom

535 width: parent.width

601 width: parent.width

536 dragAreaWidth: shell.edgeSize

602 dragAreaWidth: shell.edgeSize

537− available: !greeter.locked

603+ available: !greeter.locked && !rightEdgeDemo.visible && !topEdgeDemo.visible && !bottomEdgeDemo.visible

538 onDashItemSelected: {

604 onDashItemSelected: {

539 greeter.hide()

605 greeter.hide()

540 // Animate if moving between application and dash

606 // Animate if moving between application and dash