Merge lp:~3v1n0/ubuntu-settings-components/new-calendar-design into lp:ubuntu-settings-components
- new-calendar-design
- Merge into trunk
| Status: | Merged | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Approved by: | Lukáš Tinkl | ||||||||||||||||||||||||
| Approved revision: | 333 | ||||||||||||||||||||||||
| Merged at revision: | 170 | ||||||||||||||||||||||||
| Proposed branch: | lp:~3v1n0/ubuntu-settings-components/new-calendar-design | ||||||||||||||||||||||||
| Merge into: | lp:ubuntu-settings-components | ||||||||||||||||||||||||
| Prerequisite: | lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles | ||||||||||||||||||||||||
| Diff against target: |
1004 lines (+552/-198) 9 files modified
debian/bileto_pre_release_hook (+4/-0) examples/OtherComponents.qml (+7/-0) examples/SettingsComponents.qml (+13/-1) plugins/Ubuntu/Settings/Components/Calendar.js (+23/-0) plugins/Ubuntu/Settings/Components/Calendar.qml (+265/-117) plugins/Ubuntu/Settings/Components/plugin.cpp (+16/-0) plugins/Ubuntu/Settings/Menus/CalendarMenu.qml (+91/-35) tests/qmltests/Components/tst_Calendar.qml (+88/-32) tests/qmltests/Menus/tst_CalendarMenu.qml (+45/-13) |
||||||||||||||||||||||||
| To merge this branch: | bzr merge lp:~3v1n0/ubuntu-settings-components/new-calendar-design | ||||||||||||||||||||||||
| Related bugs: |
|
| Reviewer | Review Type | Date Requested | Status |
|---|---|---|---|
| Lukáš Tinkl (community) | Approve | ||
| Unity8 CI Bot | continuous-integration | Approve | |
|
Review via email:
|
|||
Commit message
Calendar: update to new style with weekdays header and Month selection
Description of the change
* Are there any related MPs required for this MP to build/function as expected? Please list.
N/A
* Did you perform an exploratory manual test run of your code change and any related functionality?
Yep, ran in both laptop and phone
* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
N/A
* If you changed the UI, has there been a design review?
Implemented new calendar look as defined in this doc:
I've not added the month selection dropdown since it would increase the complexity for something that is just an temporary solution (since new calendar SDK item should land soon, and thus this component should be dropped too).
* If you changed localized strings, has the POT file been updated?
N/A
- 300. By Marco Trevisan (Treviño)
-
CalendarMenu: correctly theme the icon
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:300
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Lukáš Tinkl (lukas-kde) wrote : | # |
A couple of inline comments
| Lukáš Tinkl (lukas-kde) wrote : | # |
It's not possible to pick an arbitrary month/year. According to Patty, this should use some new date/time picker: https:/
Is this going to be implemented at this stage?
| Lukáš Tinkl (lukas-kde) wrote : | # |
The month name in the calendar header should imho use some smaller font, it looks different than on the screenshots.
| Marco Trevisan (Treviño) (3v1n0) wrote : | # |
> It's not possible to pick an arbitrary month/year. According to Patty, this
> should use some new date/time picker: https:/
> FColFvHuBpUcXyp
> p
>
>
> Is this going to be implemented at this stage?
As I wrote in the description, since this component is something that is going to be replaced soon by default SDK one (which is in the works and that will be ready in some weeks), I didn't want to spend too much time for that...
So, I think for now this should be enough (as there's no regression anyway), while this will be then replaced.
> The month name in the calendar header should imho use some smaller font, it
> looks different than on the screenshots.
Mh, might be... But in the specs I have (see the linked doc above), it was marked as "Small" font. I've used XSmall instead since it looked more similar to the designs, but if you think it's better I can switch to XXSmall (it would be http://
| Marco Trevisan (Treviño) (3v1n0) wrote : | # |
> It's not possible to pick an arbitrary month/year. According to Patty, this
> should use some new date/time picker: https:/
> FColFvHuBpUcXyp
> p
>
>
> Is this going to be implemented at this stage?
As I wrote in the description, since this component is something that is going to be replaced soon by default SDK one (which is in the works and that will be ready in some weeks), I didn't want to spend too much time for that...
So, I think for now this should be enough (as there's no regression anyway), while this will be then replaced.
> The month name in the calendar header should imho use some smaller font, it
> looks different than on the screenshots.
Mh, might be... But in the specs I have (see the linked doc above), it was marked as "Small" font. I've used XSmall instead since it looked more similar to the designs, but if you think it's better I can switch to XXSmall (it would be http://
| Marco Trevisan (Treviño) (3v1n0) wrote : | # |
> A couple of inline comments
Replied to these too.
- 301. By Marco Trevisan (Treviño)
-
Calendar: use standaloneDayName instead of dayName
- 302. By Marco Trevisan (Treviño)
-
Calendar: set livetimer back to Minute frequency to avoid bugs
| Lukáš Tinkl (lukas-kde) wrote : | # |
Found a bug: when you click around the days in the calendar, the view animates smoothly left/right if the date selection falls into previous/next month. However, if you use the arrows to switch the month, the whole animation breaks from this point on and the month isn't switched at all.
| Lukáš Tinkl (lukas-kde) wrote : | # |
Also, the doubled binding on color, think it could be collapsed into one, without the "when" condition?
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:301
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:302
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 303. By Marco Trevisan (Treviño)
-
Calendar: ensure that currentDate is updated when selectedDate changes if they differs
There was an initial binding that might break once the user switch month
- 304. By Marco Trevisan (Treviño)
-
Calendar: toggle selection on selected days when re-clicking on them
- 305. By Marco Trevisan (Treviño)
-
testCalendar: verify that currentDate matches selectedDate when changed
- 306. By Marco Trevisan (Treviño)
-
CalendarMenu: update currentDate manually on icon clicks so we've proper animation
And update tests accordingly
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:305
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
FAILED: Continuous integration, rev:306
https:/
Executed test runs:
SUCCESS: https:/
UNSTABLE: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:306
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Marco Trevisan (Treviño) (3v1n0) wrote : | # |
> Also, the doubled binding on color, think it could be collapsed into one,
> without the "when" condition?
I thought it was clearer to read... But as you prefer.
| Lukáš Tinkl (lukas-kde) wrote : | # |
Waiting for the design to come up with week numbers and events highlight specification.
- 307. By Marco Trevisan (Treviño)
-
Merged touch+pointer-
styles into new-calendar- design. - 308. By Marco Trevisan (Treviño)
-
CalendarMenu: use proper color for layout title
- 309. By Marco Trevisan (Treviño)
-
Calendar: add marker to days that have planned events and expose eventDays
- 310. By Marco Trevisan (Treviño)
-
testCalendar: verify events marker visibility
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:310
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 311. By Marco Trevisan (Treviño)
-
Calendar: use relative positioning for the event shape
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:311
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Lukáš Tinkl (lukas-kde) wrote : | # |
In the light theme, the "overflowing" days (those that fall in the previous/next months) are not visible
- 312. By Marco Trevisan (Treviño)
-
Calendar: update the selectedDate if currentDate changed to ensure it will point to the first day of the month
- 313. By Marco Trevisan (Treviño)
-
Calendar: use better colors that work with both Ambiance and Suru
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
FAILED: Continuous integration, rev:313
https:/
Executed test runs:
SUCCESS: https:/
UNSTABLE: https:/
UNSTABLE: https:/
UNSTABLE: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 314. By Marco Trevisan (Treviño)
-
Calendar: use zeroDigit from locale
- 315. By Marco Trevisan (Treviño)
-
Calendar.js: add toDate method to Day object
- 316. By Marco Trevisan (Treviño)
-
Calendar: add support for showing week numbers
Week number has to be properly computed yet, though.
- 317. By Marco Trevisan (Treviño)
-
Components: expose QtDate::weekNumber function to QML
- 318. By Marco Trevisan (Treviño)
-
Calendar: use QtDateFunctions
.weekNumber to get the proper value for the current date - 319. By Marco Trevisan (Treviño)
-
Calendar: use toLocaleString to get proper day visualization
- 320. By Marco Trevisan (Treviño)
-
Calendar: add comment for translators
- 321. By Marco Trevisan (Treviño)
-
Calendar: make some local properties readonly
- 322. By Marco Trevisan (Treviño)
-
Calendar: use formattedWeekNumber to pad the week number with 0's
- 323. By Marco Trevisan (Treviño)
-
Calendar: properly translate the header text with comment
And don't keep a Day and Date instance, just do it once.
- 324. By Marco Trevisan (Treviño)
-
debian/
bileto_ pre_release_ hook: run po/update-usc-pot on release
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
FAILED: Continuous integration, rev:319
https:/
Executed test runs:
SUCCESS: https:/
UNSTABLE: https:/
UNSTABLE: https:/
UNSTABLE: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
FAILED: Continuous integration, rev:324
https:/
Executed test runs:
SUCCESS: https:/
UNSTABLE: https:/
UNSTABLE: https:/
UNSTABLE: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 325. By Marco Trevisan (Treviño)
-
testCalendarMenu: update test for currentDate setting
- 326. By Marco Trevisan (Treviño)
-
testCalendar: add tests for week numbers visibility
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:325
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:326
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 327. By Marco Trevisan (Treviño)
-
Calendar: add the weekNumber Column to a loader
So it will be loaded only when needed
- 328. By Marco Trevisan (Treviño)
-
Calendar: add the today shapes to a loader
Since there will be only one for list, it should save something
- 329. By Marco Trevisan (Treviño)
-
Calendar: put event markers into a loader
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:329
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 330. By Marco Trevisan (Treviño)
-
Merged touch+pointer-
styles into new-calendar- design.
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:330
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 331. By Marco Trevisan (Treviño)
-
Calendar: use quicker animation to switch month
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:331
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
- 332. By Marco Trevisan (Treviño)
-
Calendar: use proper color for the eventMarker when selected
- 333. By Marco Trevisan (Treviño)
-
Calendar: reposition the eventMarker going more down that we can
| Unity8 CI Bot (unity8-ci-bot) wrote : | # |
PASSED: Continuous integration, rev:333
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/
| Lukáš Tinkl (lukas-kde) wrote : | # |
Yup, quite happy with this atm, thanks!
- 334. By Marco Trevisan (Treviño)
-
Calendar: don't try to update value if not ready, and set selectedDate to currentDate
- 335. By Marco Trevisan (Treviño)
-
Calendar: implement Month::firstDay and use it instead of relying on model valueOf
Model's month can be undefined in certain cases, but this will ensure that binding won't
be broken in case. - 336. By Marco Trevisan (Treviño)
-
Calendar: remove unused minimum, maximum date properties
They overcomplicate the logic without any actual need
- 337. By Marco Trevisan (Treviño)
-
CalendarMenu: remove unneded extra column as mainSlot
- 338. By Marco Trevisan (Treviño)
-
CalendarMenu: Qt 5.4 needs this extra item to correctly fill the width, so let's be conservative
- 339. By Marco Trevisan (Treviño)
-
Calendar: put the delegate inside a loader, it workarounds QTBUG-49224
- 340. By Marco Trevisan (Treviño)
-
Calendar: Binding doesn't work well with new Loader, use more complex binding instead
- 341. By Marco Trevisan (Treviño)
-
Calendar: only show the abstract button on current month view
This fixes possible edge clicks being recorded.
- 342. By Marco Trevisan (Treviño)
-
Calendar: make the AbstractButton to fill the dayNumber instead of the whole day box
- 343. By Marco Trevisan (Treviño)
-
CalendarMenu: tapping on month date updates the selected date to month start
- 344. By Marco Trevisan (Treviño)
-
Calendar: When changing months, always set the current date to first Day
- 345. By Marco Trevisan (Treviño)
-
Calendar: reset the selected date to today if we're on current month
- 346. By Marco Trevisan (Treviño)
-
Calendar: ensure we always set back currentDate to today when changing month
- 347. By Marco Trevisan (Treviño)
-
Calendar: add toDate method to Month
Preview Diff
| 1 | === added file 'debian/bileto_pre_release_hook' |
| 2 | --- debian/bileto_pre_release_hook 1970-01-01 00:00:00 +0000 |
| 3 | +++ debian/bileto_pre_release_hook 2016-11-15 18:02:52 +0000 |
| 4 | @@ -0,0 +1,4 @@ |
| 5 | +#!/bin/sh |
| 6 | + |
| 7 | +set -eux |
| 8 | +sh ./po/update-usc-pot |
| 9 | |
| 10 | === modified file 'examples/OtherComponents.qml' |
| 11 | --- examples/OtherComponents.qml 2016-11-15 18:02:52 +0000 |
| 12 | +++ examples/OtherComponents.qml 2016-11-15 18:02:52 +0000 |
| 13 | @@ -153,6 +153,13 @@ |
| 14 | |
| 15 | CalendarMenu { |
| 16 | id: calendar |
| 17 | + eventDays: currentDate.getMonth() % 2 ? [5, 20] : [] |
| 18 | + } |
| 19 | + |
| 20 | + SwitchMenu { |
| 21 | + text: i18n.tr("Show week numbers in calendar") |
| 22 | + checked: calendar.showWeekNumbers |
| 23 | + onCheckedChanged: calendar.showWeekNumbers = checked |
| 24 | } |
| 25 | |
| 26 | UserSessionMenu { |
| 27 | |
| 28 | === modified file 'examples/SettingsComponents.qml' |
| 29 | --- examples/SettingsComponents.qml 2016-11-15 18:02:52 +0000 |
| 30 | +++ examples/SettingsComponents.qml 2016-11-15 18:02:52 +0000 |
| 31 | @@ -48,11 +48,23 @@ |
| 32 | id: header |
| 33 | title: listView.currentItem ? listView.currentItem.item.title : "Components" |
| 34 | |
| 35 | - leadingActionBar.actions: [ |
| 36 | + trailingActionBar.actions: [ |
| 37 | Action { |
| 38 | iconName: mainView.pointerMode ? "input-mouse-symbolic" : "input-touchpad-symbolic" |
| 39 | text: mainView.pointerMode ? "Pointer mode" : "Touch mode" |
| 40 | onTriggered: mainView.pointerMode = !mainView.pointerMode |
| 41 | + }, |
| 42 | + Action { |
| 43 | + text: i18n.tr('Use dark theme') |
| 44 | + iconName: 'torch-on' |
| 45 | + visible: theme.name == 'Ubuntu.Components.Themes.Ambiance' |
| 46 | + onTriggered: theme.name = 'Ubuntu.Components.Themes.SuruDark' |
| 47 | + }, |
| 48 | + Action { |
| 49 | + text: i18n.tr('Use light theme') |
| 50 | + iconName: 'torch-off' |
| 51 | + visible: theme.name == 'Ubuntu.Components.Themes.SuruDark' |
| 52 | + onTriggered: theme.name = 'Ubuntu.Components.Themes.Ambiance' |
| 53 | } |
| 54 | ] |
| 55 | } |
| 56 | |
| 57 | === modified file 'plugins/Ubuntu/Settings/Components/Calendar.js' |
| 58 | --- plugins/Ubuntu/Settings/Components/Calendar.js 2016-09-06 13:54:51 +0000 |
| 59 | +++ plugins/Ubuntu/Settings/Components/Calendar.js 2016-11-15 18:02:52 +0000 |
| 60 | @@ -25,6 +25,10 @@ |
| 61 | return new Month(date.getFullYear(), date.getMonth()); |
| 62 | } |
| 63 | |
| 64 | +Month.prototype.firstDay = function() { |
| 65 | + return new Day(this.year, this.month, 1) |
| 66 | +} |
| 67 | + |
| 68 | Month.prototype.toString = function() { |
| 69 | return JSON.stringify(this); |
| 70 | } |
| 71 | @@ -33,6 +37,17 @@ |
| 72 | return this.year * 12 + this.month; |
| 73 | } |
| 74 | |
| 75 | +Month.prototype.equals = function(other) { |
| 76 | + if (other instanceof Month) { |
| 77 | + return other.valueOf() == this.valueOf(); |
| 78 | + } |
| 79 | + return false; |
| 80 | +} |
| 81 | + |
| 82 | +Month.prototype.toDate = function() { |
| 83 | + return new Date(this.year, this.month) |
| 84 | +} |
| 85 | + |
| 86 | function Day(arg1, arg2, arg3) { |
| 87 | if (arg1 === undefined) { |
| 88 | var date = new Date(); |
| 89 | @@ -65,6 +80,10 @@ |
| 90 | return new Day(date.getFullYear(), date.getMonth(), date.getDate()); |
| 91 | } |
| 92 | |
| 93 | +Day.prototype.getMonth = function() { |
| 94 | + return new Month(this.year, this.month) |
| 95 | +} |
| 96 | + |
| 97 | Day.prototype.dayofweek = function () /* 1 <= m <= 12, y > 1752 (in the U.K.) */ |
| 98 | { |
| 99 | var t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]; |
| 100 | @@ -99,3 +118,7 @@ |
| 101 | } |
| 102 | return false; |
| 103 | } |
| 104 | + |
| 105 | +Day.prototype.toDate = function() { |
| 106 | + return new Date(this.year, this.month, this.day) |
| 107 | +} |
| 108 | |
| 109 | === modified file 'plugins/Ubuntu/Settings/Components/Calendar.qml' |
| 110 | --- plugins/Ubuntu/Settings/Components/Calendar.qml 2016-09-06 13:48:32 +0000 |
| 111 | +++ plugins/Ubuntu/Settings/Components/Calendar.qml 2016-11-15 18:02:52 +0000 |
| 112 | @@ -1,5 +1,5 @@ |
| 113 | /* |
| 114 | - * Copyright 2013 Canonical Ltd. |
| 115 | + * Copyright 2013-2016 Canonical Ltd. |
| 116 | * |
| 117 | * This program is free software; you can redistribute it and/or modify |
| 118 | * it under the terms of the GNU Lesser General Public License as published by |
| 119 | @@ -12,26 +12,41 @@ |
| 120 | * |
| 121 | * You should have received a copy of the GNU Lesser General Public License |
| 122 | * along with this program. If not, see <http://www.gnu.org/licenses/>. |
| 123 | + * |
| 124 | + * Authors: |
| 125 | + * Andrea Cimitan <andrea.cimitan@canonical.com> |
| 126 | + * Marco Trevisan <marco.trevisan@canonical.com> |
| 127 | */ |
| 128 | |
| 129 | import QtQuick 2.4 |
| 130 | import Ubuntu.Components 1.3 |
| 131 | +import Ubuntu.Settings.Components 0.1 |
| 132 | import "dateExt.js" as DateExt |
| 133 | import "Calendar.js" as Cal |
| 134 | |
| 135 | ListView { |
| 136 | - id: monthView |
| 137 | + id: calendar |
| 138 | |
| 139 | - property bool collapsed: false |
| 140 | - property var currentDate: new Date(priv.selectedDay.year, priv.selectedDay.month, 1) |
| 141 | + property var currentDate: priv.today.toDate() |
| 142 | property int firstDayOfWeek: Qt.locale(i18n.language).firstDayOfWeek |
| 143 | - property var maximumDate |
| 144 | - property var minimumDate |
| 145 | - property var selectedDate: new Date(priv.today.year, priv.today.month, priv.today.day) |
| 146 | + property var selectedDate: currentDate |
| 147 | + property var eventDays: new Array() |
| 148 | + property bool showWeekNumbers: false |
| 149 | |
| 150 | function reset() { |
| 151 | if (!priv.ready) return; |
| 152 | - currentDate = new Date(priv.today.year, priv.today.month, 1) |
| 153 | + currentDate = priv.today.toDate() |
| 154 | + } |
| 155 | + |
| 156 | + function moveToMonth(delta) { |
| 157 | + if (!priv.ready) return; |
| 158 | + priv.__setCurrentDateFromMonth(priv.currentMonth.addMonths(delta)) |
| 159 | + } |
| 160 | + |
| 161 | + function selectFistDayOfTheMonth() { |
| 162 | + if (!priv.ready) return; |
| 163 | + priv.userSelected = false |
| 164 | + selectedDate = currentItem.month.toDate() |
| 165 | } |
| 166 | |
| 167 | Component.onCompleted: { |
| 168 | @@ -40,8 +55,23 @@ |
| 169 | |
| 170 | onCurrentIndexChanged: { |
| 171 | if (!priv.ready) return; |
| 172 | - |
| 173 | - currentDate = new Date(currentItem.month.year, currentItem.month.month, 1); |
| 174 | + priv.__setCurrentDateFromMonth(currentItem.month) |
| 175 | + } |
| 176 | + |
| 177 | + onSelectedDateChanged: { |
| 178 | + if (!priv.ready) return; |
| 179 | + |
| 180 | + if (currentDate != selectedDate) |
| 181 | + currentDate = selectedDate |
| 182 | + } |
| 183 | + |
| 184 | + onCurrentDateChanged: { |
| 185 | + if (!priv.ready) return; |
| 186 | + |
| 187 | + if (selectedDate != currentDate) { |
| 188 | + priv.userSelected = false |
| 189 | + selectedDate = currentDate |
| 190 | + } |
| 191 | } |
| 192 | |
| 193 | ListModel { |
| 194 | @@ -50,57 +80,39 @@ |
| 195 | |
| 196 | QtObject { |
| 197 | id: priv |
| 198 | + objectName: "calendarPriv" |
| 199 | |
| 200 | property bool ready: false |
| 201 | - property int squareUnit: monthView.width / 7 |
| 202 | - property int verticalMargin: units.gu(1) |
| 203 | + property bool userSelected: false |
| 204 | property var today: new Cal.Day().fromDate((new Date())) |
| 205 | + property real weekDaysHeight: 0 |
| 206 | + readonly property real squareUnit: units.gu(3) |
| 207 | + readonly property real todayRingThickness: units.gu(.1) |
| 208 | + readonly property int days: 7 |
| 209 | + readonly property int weeks: 6 |
| 210 | |
| 211 | property var currentMonth: new Cal.Month().fromDate(currentDate) |
| 212 | property var selectedDay: new Cal.Day().fromDate(selectedDate) |
| 213 | - property var minimumMonth: minimumDate ? new Cal.Month().fromDate(minimumDate) : undefined |
| 214 | - property var maximumMonth: maximumDate ? new Cal.Month().fromDate(maximumDate) : undefined |
| 215 | - |
| 216 | - property var minimumDay: minimumDate ? new Cal.Day().fromDate(minimumDate) : undefined |
| 217 | - property var maximumDay: maximumDate ? new Cal.Day().fromDate(maximumDate) : undefined |
| 218 | |
| 219 | onCurrentMonthChanged: { |
| 220 | if (!ready) return |
| 221 | __populateModel(); |
| 222 | } |
| 223 | - onSelectedDayChanged: { |
| 224 | - if (!ready) return |
| 225 | - __populateModel(); |
| 226 | - } |
| 227 | - onMinimumMonthChanged: { |
| 228 | - if (!ready) return |
| 229 | - __populateModel(); |
| 230 | - } |
| 231 | - onMaximumMonthChanged: { |
| 232 | - if (!ready) return |
| 233 | - __populateModel(); |
| 234 | - } |
| 235 | - |
| 236 | - function __getRealMinimumMonth(month) { |
| 237 | - if (minimumMonth !== undefined && minimumMonth > month) { |
| 238 | - return minimumMonth; |
| 239 | - } |
| 240 | - return month; |
| 241 | - } |
| 242 | - |
| 243 | - function __getRealMaximumMonth(month) { |
| 244 | - if (maximumMonth !== undefined && maximumMonth < month) { |
| 245 | - return maximumMonth; |
| 246 | - } |
| 247 | - return month; |
| 248 | + |
| 249 | + function __setCurrentDateFromMonth(month) { |
| 250 | + if (month.equals(priv.today.getMonth())) { |
| 251 | + currentDate = priv.today.toDate() |
| 252 | + } else { |
| 253 | + currentDate = month.toDate() |
| 254 | + } |
| 255 | } |
| 256 | |
| 257 | function __populateModel() { |
| 258 | // disable the onCurrentIndexChanged logic |
| 259 | priv.ready = false; |
| 260 | |
| 261 | - var minimumMonth = __getRealMinimumMonth(currentMonth.addMonths(-2)); |
| 262 | - var maximumMonth = __getRealMaximumMonth(currentMonth.addMonths(2)); |
| 263 | + var minimumMonth = currentMonth.addMonths(-2); |
| 264 | + var maximumMonth = currentMonth.addMonths(2); |
| 265 | |
| 266 | // Remove old minimum months |
| 267 | while (calendarModel.count > 0 && new Cal.Month(calendarModel.get(0).month) < minimumMonth) { |
| 268 | @@ -140,7 +152,7 @@ |
| 269 | } |
| 270 | |
| 271 | LiveTimer { |
| 272 | - frequency: monthView.visible ? LiveTimer.Minute : LiveTimer.Disabled |
| 273 | + frequency: calendar.visible ? LiveTimer.Minute : LiveTimer.Disabled |
| 274 | onFrequencyChanged: trigger() |
| 275 | onTrigger: { |
| 276 | Date.timeZoneUpdated(); // FIXME remove when fixed in UITK |
| 277 | @@ -152,9 +164,9 @@ |
| 278 | } |
| 279 | } |
| 280 | |
| 281 | - width: parent.width |
| 282 | - height: priv.squareUnit * (collapsed ? 1 : 6) + priv.verticalMargin * 2 |
| 283 | - interactive: !collapsed |
| 284 | + implicitWidth: priv.squareUnit * priv.days |
| 285 | + implicitHeight: priv.squareUnit * priv.weeks + priv.weekDaysHeight |
| 286 | + interactive: true |
| 287 | clip: true |
| 288 | cacheBuffer: Math.max((width+1) * 3, 0) // one page left, one page right |
| 289 | highlightRangeMode: ListView.StrictlyEnforceRange |
| 290 | @@ -165,93 +177,227 @@ |
| 291 | snapMode: ListView.SnapOneItem |
| 292 | focus: true |
| 293 | highlightFollowsCurrentItem: true |
| 294 | + highlightMoveDuration: UbuntuAnimation.FastDuration |
| 295 | |
| 296 | Keys.onLeftPressed: selectedDate.addDays(-1) |
| 297 | Keys.onRightPressed: selectedDate.addDays(1) |
| 298 | |
| 299 | - delegate: Item { |
| 300 | - id: monthItem |
| 301 | - |
| 302 | - property int currentWeekRow: Math.floor((priv.selectedDay - gridStart) / 7) |
| 303 | - property var gridStart: monthStart.weekStart(firstDayOfWeek) |
| 304 | - property var monthEnd: monthStart.addMonths(1) |
| 305 | - property var monthStart: new Cal.Day(model.month.year, model.month.month, 1) |
| 306 | - |
| 307 | - property var month: new Cal.Month(model.month) |
| 308 | - |
| 309 | - width: monthView.width |
| 310 | - height: monthView.height |
| 311 | + // This is a workaround for bug https://bugreports.qt.io/browse/QTBUG-49224 |
| 312 | + delegate: Loader { |
| 313 | + id: monthDelegateLoader |
| 314 | + sourceComponent: monthComponent |
| 315 | + |
| 316 | + readonly property var month: new Cal.Month(model.month) |
| 317 | + |
| 318 | + Binding { |
| 319 | + target: monthDelegateLoader.item |
| 320 | + property: "monthIndex" |
| 321 | + value: index |
| 322 | + when: monthDelegateLoader.status == Loader.Ready |
| 323 | + } |
| 324 | + |
| 325 | + Binding { |
| 326 | + target: monthDelegateLoader.item |
| 327 | + property: "month" |
| 328 | + value: month |
| 329 | + when: monthDelegateLoader.status == Loader.Ready |
| 330 | + } |
| 331 | + } |
| 332 | + |
| 333 | +Component { |
| 334 | + id: monthComponent |
| 335 | + Row { |
| 336 | + objectName: "monthRow" + monthIndex |
| 337 | + property int monthIndex: 0 |
| 338 | + property var month: new Cal.Month() |
| 339 | + readonly property var monthStart: month.firstDay() |
| 340 | + readonly property var monthEnd: monthStart.addMonths(1) |
| 341 | + readonly property var gridStart: monthStart.weekStart(firstDayOfWeek) |
| 342 | + |
| 343 | + Loader { |
| 344 | + id: weekNumbersLoader |
| 345 | + objectName: "weekNumbersLoader" + monthIndex |
| 346 | + active: calendar.showWeekNumbers |
| 347 | + visible: active |
| 348 | + |
| 349 | + sourceComponent: Column { |
| 350 | + id: weekNumbersColumn |
| 351 | + objectName: "weekNumbersColumn" + monthIndex |
| 352 | + spacing: monthGrid.rowSpacing |
| 353 | + |
| 354 | + Row { |
| 355 | + Column { |
| 356 | + Label { |
| 357 | + objectName: "weekDay" + monthIndex |
| 358 | + text: i18n.ctr("Header text: keep it short and upper case", "WEEK") |
| 359 | + textSize: Label.XSmall |
| 360 | + // FIXME: There's no good palette that covers both |
| 361 | + // Ambiance (Ash) and Suru (Silk) |
| 362 | + color: theme.palette.disabled.base |
| 363 | + } |
| 364 | + |
| 365 | + Repeater { |
| 366 | + id: weekNumbers |
| 367 | + model: priv.weeks |
| 368 | + delegate: Item { |
| 369 | + readonly property var rowDate: monthStart.addDays(index * priv.days).toDate() |
| 370 | + width: priv.squareUnit |
| 371 | + height: priv.squareUnit |
| 372 | + |
| 373 | + Label { |
| 374 | + id: weekNumberLabel |
| 375 | + anchors.centerIn: parent |
| 376 | + text: QtDateFunctions.formattedWeekNumber(rowDate) |
| 377 | + textSize: Label.Medium |
| 378 | + color: theme.palette.normal.backgroundTertiaryText |
| 379 | + } |
| 380 | + } |
| 381 | + } |
| 382 | + } |
| 383 | + |
| 384 | + Column { |
| 385 | + Item { |
| 386 | + width: units.gu(2) |
| 387 | + height: weekNumbersColumn.height |
| 388 | + |
| 389 | + Rectangle { |
| 390 | + color: theme.palette.disabled.base |
| 391 | + anchors.fill: parent |
| 392 | + anchors.topMargin: units.gu(0.5) |
| 393 | + anchors.bottomMargin: anchors.topMargin |
| 394 | + anchors.leftMargin: units.gu(0.9) |
| 395 | + anchors.rightMargin: anchors.leftMargin |
| 396 | + } |
| 397 | + } |
| 398 | + } |
| 399 | + } |
| 400 | + } |
| 401 | + } |
| 402 | |
| 403 | Grid { |
| 404 | id: monthGrid |
| 405 | |
| 406 | - rows: 6 |
| 407 | - columns: 7 |
| 408 | - y: priv.verticalMargin |
| 409 | - width: priv.squareUnit * columns |
| 410 | - height: priv.squareUnit * rows |
| 411 | - |
| 412 | - Repeater { |
| 413 | - model: monthGrid.rows * monthGrid.columns |
| 414 | + columns: priv.days |
| 415 | + columnSpacing: (calendar.width - calendar.implicitWidth - (weekNumbersLoader.visible ? weekNumbersLoader.width : 0)) / (columns - 1) |
| 416 | + |
| 417 | + rows: priv.weeks + 1 /* the weekDays header */ |
| 418 | + rowSpacing: (calendar.height - calendar.implicitHeight) / (rows - 1) |
| 419 | + |
| 420 | + verticalItemAlignment: Grid.AlignVCenter |
| 421 | + horizontalItemAlignment: Grid.AlignHCenter |
| 422 | + |
| 423 | + Repeater { |
| 424 | + id: daysHeader |
| 425 | + model: priv.days |
| 426 | + |
| 427 | + delegate: Label { |
| 428 | + objectName: "weekDay" + index |
| 429 | + text: Qt.locale(i18n.language).standaloneDayName((index + firstDayOfWeek) % priv.days, Locale.ShortFormat).toUpperCase() |
| 430 | + textSize: Label.XSmall |
| 431 | + // FIXME: There's no good palette that covers both |
| 432 | + // Ambiance (Ash) and Suru (Silk) |
| 433 | + color: theme.palette.highlighted.base |
| 434 | + onHeightChanged: priv.weekDaysHeight = Math.max(height, priv.weekDaysHeight) |
| 435 | + } |
| 436 | + } |
| 437 | + |
| 438 | + Repeater { |
| 439 | + model: priv.days * priv.weeks |
| 440 | delegate: Item { |
| 441 | id: dayItem |
| 442 | objectName: "dayItem" + index |
| 443 | |
| 444 | - property bool isCurrent: dayStart.equals(priv.selectedDay) |
| 445 | - property bool isCurrentMonth: (monthStart < dayStart || monthStart.equals(dayStart)) && dayStart < monthEnd |
| 446 | - property bool isCurrentWeek: row == currentWeekRow |
| 447 | - property bool isSunday: weekday == 0 |
| 448 | - property bool isToday: dayStart.equals(priv.today) |
| 449 | - property bool isWithinBounds: (priv.minimumDay === undefined || dayStart >= priv.minimumDay) && |
| 450 | - (priv.maximumDay === undefined || dayStart <= priv.maximumDay) |
| 451 | - property int row: Math.floor(index / 7) |
| 452 | - property int weekday: (index % 7 + firstDayOfWeek) % 7 |
| 453 | - property real bottomMargin: (row == 5 || (collapsed && isCurrentWeek)) ? -priv.verticalMargin : 0 |
| 454 | - property real topMargin: (row == 0 || (collapsed && isCurrentWeek)) ? -priv.verticalMargin : 0 |
| 455 | - property var dayStart: gridStart.addDays(index) |
| 456 | + readonly property int weekday: (index % priv.days + firstDayOfWeek) % priv.days |
| 457 | + readonly property var dayStart: gridStart.addDays(index) |
| 458 | + readonly property bool isSelected: priv.userSelected && dayStart.equals(priv.selectedDay) |
| 459 | + readonly property bool isCurrentMonth: (monthStart < dayStart || monthStart.equals(dayStart)) && dayStart < monthEnd |
| 460 | + readonly property bool isWeekend: weekday == 0 || weekday == 6 |
| 461 | + readonly property bool isToday: dayStart.equals(priv.today) |
| 462 | + readonly property bool hasEvent: isCurrentMonth && eventDays.indexOf(dayStart.day) != -1 |
| 463 | |
| 464 | - visible: collapsed ? isCurrentWeek : true |
| 465 | width: priv.squareUnit |
| 466 | height: priv.squareUnit |
| 467 | |
| 468 | - Item { |
| 469 | - anchors { |
| 470 | - fill: parent |
| 471 | - topMargin: dayItem.topMargin |
| 472 | - bottomMargin: dayItem.bottomMargin |
| 473 | - } |
| 474 | - |
| 475 | - Rectangle { |
| 476 | - anchors.fill: parent |
| 477 | - visible: isSunday |
| 478 | - opacity: 0.1 |
| 479 | - color: UbuntuColors.warmGrey |
| 480 | - } |
| 481 | - |
| 482 | - Label { |
| 483 | - anchors.centerIn: parent |
| 484 | - text: dayStart.day |
| 485 | - font.pixelSize: units.dp(isCurrent ? 36 : 20) |
| 486 | - color: isCurrentMonth && isWithinBounds ? isToday ? UbuntuColors.green : |
| 487 | - theme.palette.normal.backgroundText : |
| 488 | - theme.palette.disabled.backgroundText |
| 489 | - opacity: isWithinBounds ? 1. : 0.33 |
| 490 | - |
| 491 | - Behavior on font.pixelSize { |
| 492 | - NumberAnimation { duration: 50 } |
| 493 | - } |
| 494 | - } |
| 495 | - } |
| 496 | - |
| 497 | - MouseArea { |
| 498 | - anchors { |
| 499 | - fill: parent |
| 500 | - topMargin: dayItem.topMargin |
| 501 | - bottomMargin: dayItem.bottomMargin |
| 502 | - } |
| 503 | + Loader { |
| 504 | + id: todayMarkerLoader |
| 505 | + objectName: "todayMarkerLoader" + index |
| 506 | + active: isToday |
| 507 | + visible: active |
| 508 | + anchors.fill: parent |
| 509 | + sourceComponent: UbuntuShape { |
| 510 | + aspect: UbuntuShape.Flat |
| 511 | + radius: "small" |
| 512 | + color: dayNumber.color |
| 513 | + |
| 514 | + UbuntuShape { |
| 515 | + // XXX: since we can't just colorize the shape border |
| 516 | + // we need another one to fill the center with bg color |
| 517 | + id: currentDayShape |
| 518 | + radius: parent.radius |
| 519 | + aspect: parent.aspect |
| 520 | + backgroundColor: theme.palette.normal.background |
| 521 | + |
| 522 | + anchors.fill: parent |
| 523 | + anchors.margins: priv.todayRingThickness |
| 524 | + } |
| 525 | + } |
| 526 | + } |
| 527 | + |
| 528 | + Label { |
| 529 | + id: dayNumber |
| 530 | + anchors.centerIn: parent |
| 531 | + text: dayStart.toDate().toLocaleDateString(Qt.locale(), "dd") |
| 532 | + textSize: Label.Medium |
| 533 | + color: { |
| 534 | + if (!isCurrentMonth) { |
| 535 | + // FIXME: There's no good palette that covers both |
| 536 | + // Ambiance (silk) and Suru (inkstone) |
| 537 | + return theme.palette.disabled.base |
| 538 | + } |
| 539 | + if (isSelected) { |
| 540 | + return theme.palette.normal.positionText |
| 541 | + } |
| 542 | + if (isWeekend) { |
| 543 | + return theme.palette.normal.backgroundTertiaryText |
| 544 | + } |
| 545 | + |
| 546 | + return theme.palette.normal.backgroundText |
| 547 | + } |
| 548 | + } |
| 549 | + |
| 550 | + Loader{ |
| 551 | + objectName: "eventMarkerLoader"+index |
| 552 | + active: hasEvent |
| 553 | + visible: active |
| 554 | + width: units.gu(0.4) |
| 555 | + height: width |
| 556 | + y: dayNumber.height + (parent.height - dayNumber.height) / 2 - priv.todayRingThickness |
| 557 | + anchors.horizontalCenter: parent.horizontalCenter |
| 558 | + |
| 559 | + sourceComponent: UbuntuShape { |
| 560 | + objectName: "eventMarker"+index |
| 561 | + aspect: UbuntuShape.Flat |
| 562 | + radius: "small" |
| 563 | + color: isSelected ? dayNumber.color : theme.palette.selected.baseText |
| 564 | + } |
| 565 | + } |
| 566 | + |
| 567 | + AbstractButton { |
| 568 | + anchors.fill: dayNumber |
| 569 | + visible: (currentIndex == monthIndex) |
| 570 | |
| 571 | onClicked: { |
| 572 | - if (isWithinBounds) monthView.selectedDate = new Date(dayStart.year, dayStart.month, dayStart.day) |
| 573 | + if (!isSelected) { |
| 574 | + priv.userSelected = true |
| 575 | + calendar.selectedDate = new Date(dayStart.year, dayStart.month, dayStart.day) |
| 576 | + } else if (priv.userSelected) { |
| 577 | + if (priv.today.getMonth().equals(month)) { |
| 578 | + calendar.selectedDate = priv.today.toDate() |
| 579 | + } else { |
| 580 | + calendar.selectedDate = new Date(dayStart.year, dayStart.month) |
| 581 | + } |
| 582 | + priv.userSelected = false |
| 583 | + } |
| 584 | } |
| 585 | } |
| 586 | } |
| 587 | @@ -259,3 +405,5 @@ |
| 588 | } |
| 589 | } |
| 590 | } |
| 591 | + |
| 592 | +} |
| 593 | |
| 594 | === modified file 'plugins/Ubuntu/Settings/Components/plugin.cpp' |
| 595 | --- plugins/Ubuntu/Settings/Components/plugin.cpp 2015-08-04 14:57:35 +0000 |
| 596 | +++ plugins/Ubuntu/Settings/Components/plugin.cpp 2016-11-15 18:02:52 +0000 |
| 597 | @@ -20,8 +20,24 @@ |
| 598 | |
| 599 | // Qt |
| 600 | #include <QtQml/qqml.h> |
| 601 | +#include <QDate> |
| 602 | + |
| 603 | +class QtDateFunctions : public QObject |
| 604 | +{ |
| 605 | + Q_OBJECT |
| 606 | +public: |
| 607 | + QtDateFunctions(QObject * parent = nullptr) : QObject(parent) {} |
| 608 | + ~QtDateFunctions() = default; |
| 609 | + |
| 610 | + Q_INVOKABLE int weekNumber(const QDate &date) const { return date.weekNumber(); } |
| 611 | + Q_INVOKABLE QString formattedWeekNumber(const QDate &date) const { return QString("%1").arg(date.weekNumber(), 2, 10, QChar('0')); } |
| 612 | +}; |
| 613 | |
| 614 | void UbuntuSettingsComponentsPlugin::registerTypes(const char *uri) |
| 615 | { |
| 616 | qmlRegisterType<ServerPropertySynchroniser>(uri, 0, 1, "ServerPropertySynchroniser"); |
| 617 | + qmlRegisterSingletonType<QtDateFunctions>(uri, 0, 1, "QtDateFunctions", |
| 618 | + [](QQmlEngine*, QJSEngine*) -> QObject* { return new QtDateFunctions; }); |
| 619 | } |
| 620 | + |
| 621 | +#include "plugin.moc" |
| 622 | |
| 623 | === modified file 'plugins/Ubuntu/Settings/Menus/CalendarMenu.qml' |
| 624 | --- plugins/Ubuntu/Settings/Menus/CalendarMenu.qml 2016-11-15 18:02:52 +0000 |
| 625 | +++ plugins/Ubuntu/Settings/Menus/CalendarMenu.qml 2016-11-15 18:02:52 +0000 |
| 626 | @@ -1,5 +1,5 @@ |
| 627 | /* |
| 628 | - * Copyright 2013 Canonical Ltd. |
| 629 | + * Copyright 2013-2016 Canonical Ltd. |
| 630 | * |
| 631 | * This program is free software; you can redistribute it and/or modify |
| 632 | * it under the terms of the GNU Lesser General Public License as published by |
| 633 | @@ -13,7 +13,9 @@ |
| 634 | * You should have received a copy of the GNU Lesser General Public License |
| 635 | * along with this program. If not, see <http://www.gnu.org/licenses/>. |
| 636 | * |
| 637 | - * Authored by Andrea Cimitan <andrea.cimitan@canonical.com> |
| 638 | + * Authors: |
| 639 | + * Andrea Cimitan <andrea.cimitan@canonical.com> |
| 640 | + * Marco Trevisan <marco.trevisan@canonical.com> |
| 641 | */ |
| 642 | |
| 643 | import QtQuick 2.4 |
| 644 | @@ -23,42 +25,96 @@ |
| 645 | BaseMenu { |
| 646 | id: menu |
| 647 | |
| 648 | - property alias collapsed: calendar.collapsed |
| 649 | property alias currentDate: calendar.currentDate |
| 650 | property alias firstDayOfWeek: calendar.firstDayOfWeek |
| 651 | - property alias maximumDate: calendar.maximumDate |
| 652 | - property alias minimumDate: calendar.minimumDate |
| 653 | property alias selectedDate: calendar.selectedDate |
| 654 | - |
| 655 | - menuHeight: slotsLayout.height |
| 656 | - |
| 657 | - StyledSlotsLayout { |
| 658 | - id: slotsLayout |
| 659 | - objectName: "calenderMenuSlotsLayout" |
| 660 | - style: menuStyle |
| 661 | - |
| 662 | - mainSlot: Column { |
| 663 | - id: column |
| 664 | - spacing: units.gu(1) |
| 665 | - |
| 666 | - Label { |
| 667 | - id: label |
| 668 | - anchors { |
| 669 | - left: parent.left |
| 670 | - right: parent.right |
| 671 | - } |
| 672 | - fontSize: "large" |
| 673 | - text: i18n.ctr("%1=month name, %2=4-digit year", "%1 %2") |
| 674 | - .arg(Qt.locale().standaloneMonthName(calendar.currentDate.getMonth(), Locale.LongFormat)) |
| 675 | - .arg(calendar.currentDate.getFullYear()) |
| 676 | - } |
| 677 | - |
| 678 | - Calendar { |
| 679 | - id: calendar |
| 680 | - objectName: "calendar" |
| 681 | - anchors { |
| 682 | - left: parent.left |
| 683 | - right: parent.right |
| 684 | + property alias showWeekNumbers: calendar.showWeekNumbers |
| 685 | + property alias eventDays: calendar.eventDays |
| 686 | + |
| 687 | + menuHeight: layout.height |
| 688 | + highlightWhenPressed: false |
| 689 | + |
| 690 | + Column { |
| 691 | + id: layout |
| 692 | + |
| 693 | + anchors { |
| 694 | + left: parent.left |
| 695 | + right: parent.right |
| 696 | + } |
| 697 | + |
| 698 | + ListItemLayout { |
| 699 | + id: monthLayout |
| 700 | + objectName: "monthLayout" |
| 701 | + |
| 702 | + padding { |
| 703 | + top: menuStyle.padding.top |
| 704 | + bottom: menuStyle.padding.bottom |
| 705 | + leading: menuStyle.padding.leading |
| 706 | + trailing: menuStyle.padding.trailing |
| 707 | + } |
| 708 | + |
| 709 | + title.horizontalAlignment: Text.AlignHCenter |
| 710 | + title.font.pixelSize: menuStyle.fontSize |
| 711 | + title.color: menuStyle.foregroundColor |
| 712 | + title.text: i18n.ctr("%1=month name, %2=4-digit year", "%1 %2") |
| 713 | + .arg(Qt.locale().standaloneMonthName(calendar.currentDate.getMonth(), Locale.LongFormat)) |
| 714 | + .arg(calendar.currentDate.getFullYear()) |
| 715 | + |
| 716 | + title.children: [ |
| 717 | + AbstractButton { |
| 718 | + x: (parent.width - width) / 2 |
| 719 | + width: parent.contentWidth |
| 720 | + height: parent.contentHeight |
| 721 | + onClicked: calendar.selectFistDayOfTheMonth() |
| 722 | + } |
| 723 | + ] |
| 724 | + |
| 725 | + Icon { |
| 726 | + objectName: "goPreviousMonth" |
| 727 | + name: "go-previous" |
| 728 | + width: menuStyle.iconSize |
| 729 | + height: menuStyle.iconSize |
| 730 | + color: menuStyle.iconColor |
| 731 | + SlotsLayout.position: SlotsLayout.Leading |
| 732 | + |
| 733 | + AbstractButton { |
| 734 | + anchors.fill: parent |
| 735 | + onClicked: calendar.moveToMonth(-1) |
| 736 | + } |
| 737 | + } |
| 738 | + |
| 739 | + Icon { |
| 740 | + objectName: "goNextMonth" |
| 741 | + name: "go-next" |
| 742 | + width: menuStyle.iconSize |
| 743 | + height: menuStyle.iconSize |
| 744 | + color: menuStyle.iconColor |
| 745 | + SlotsLayout.position: SlotsLayout.Trailing |
| 746 | + |
| 747 | + AbstractButton { |
| 748 | + anchors.fill: parent |
| 749 | + onClicked: calendar.moveToMonth(1) |
| 750 | + } |
| 751 | + } |
| 752 | + } |
| 753 | + |
| 754 | + StyledSlotsLayout { |
| 755 | + id: slotsLayout |
| 756 | + objectName: "calenderMenuSlotsLayout" |
| 757 | + style: menuStyle |
| 758 | + |
| 759 | + mainSlot: Item { |
| 760 | + // XXX: this extra Item seems to be needed by Qt 5.4, |
| 761 | + // we can remove it once migrated to new versions |
| 762 | + height: calendar.height |
| 763 | + Calendar { |
| 764 | + id: calendar |
| 765 | + objectName: "calendar" |
| 766 | + interactive: !pointerMode |
| 767 | + anchors { |
| 768 | + left: parent.left |
| 769 | + right: parent.right |
| 770 | + } |
| 771 | } |
| 772 | } |
| 773 | } |
| 774 | |
| 775 | === modified file 'tests/qmltests/Components/tst_Calendar.qml' |
| 776 | --- tests/qmltests/Components/tst_Calendar.qml 2016-08-17 09:46:20 +0000 |
| 777 | +++ tests/qmltests/Components/tst_Calendar.qml 2016-11-15 18:02:52 +0000 |
| 778 | @@ -55,17 +55,6 @@ |
| 779 | |
| 780 | function init() { |
| 781 | calendar.selectedDate = new Date(2013, 4, 10); |
| 782 | - calendar.maximumDate = undefined; |
| 783 | - calendar.minimumDate = undefined; |
| 784 | - } |
| 785 | - |
| 786 | - function test_collapsed() { |
| 787 | - calendar.collapsed = true; |
| 788 | - compare(calendar.interactive, false, "Calendar should not be interactive"); |
| 789 | - var collapsedHeight = calendar.height; |
| 790 | - calendar.collapsed = false; |
| 791 | - verify(calendar.height > collapsedHeight * 4 && calendar.height < collapsedHeight * 6, "Height did not expand properly"); |
| 792 | - compare(calendar.interactive, true, "Calendar should be interactive"); |
| 793 | } |
| 794 | |
| 795 | function test_selectedDate_data() { |
| 796 | @@ -79,8 +68,8 @@ |
| 797 | function test_selectedDate(data) { |
| 798 | calendar.selectedDate = data.date; |
| 799 | |
| 800 | - compare(calendar.currentItem.monthStart.year, data.date.getFullYear(), "Current year does no correspond to set date"); |
| 801 | - compare(calendar.currentItem.monthStart.month, data.date.getMonth(), "Current month does no correspond to set date"); |
| 802 | + compare(calendar.currentItem.month.firstDay().year, data.date.getFullYear(), "Current year does no correspond to set date"); |
| 803 | + compare(calendar.currentItem.month.firstDay().month, data.date.getMonth(), "Current month does no correspond to set date"); |
| 804 | } |
| 805 | |
| 806 | function test_firstDayOfWeek_data() { |
| 807 | @@ -102,29 +91,96 @@ |
| 808 | } |
| 809 | } |
| 810 | |
| 811 | - function test_minMaxDate_data() { |
| 812 | + function test_selectedDateUpdatesCurrent_data() { |
| 813 | return [ |
| 814 | - {tag: "Min=-0", date: new Date(), minDate: new Date(), maxDate: undefined, count: 3}, |
| 815 | - {tag: "Min=-1", date: new Date(), minDate: new Date().addMonths(-1), maxDate: undefined, count: 4}, |
| 816 | - {tag: "Min=-22", date: new Date(), minDate: new Date().addMonths(-22), maxDate: undefined, count: 5}, // max out at +-2 |
| 817 | - |
| 818 | - {tag: "Max=+0", date: new Date(), minDate: undefined, maxDate: new Date(), count: 3}, |
| 819 | - {tag: "Max=+1", date: new Date(), minDate: undefined, maxDate: new Date().addMonths(1), count: 4}, |
| 820 | - {tag: "Max=+22", date: new Date(), minDate: undefined, maxDate: new Date().addMonths(22), count: 5}, // max out at +-2 |
| 821 | - |
| 822 | - {tag: "Min=-0,Max=+0", date: new Date(), minDate: new Date(), maxDate: new Date(), count: 1}, |
| 823 | - {tag: "Min=-1,Max=+1", date: new Date(), minDate: new Date().addMonths(-1), maxDate: new Date().addMonths(1), count: 3}, |
| 824 | - {tag: "Min=-22,Max=+1", date: new Date(), minDate: new Date().addMonths(-22), maxDate: new Date().addMonths(1), count: 4}, // max out at +-2 |
| 825 | - {tag: "Min=-1,Max=+22", date: new Date(), minDate: new Date().addMonths(-1), maxDate: new Date().addMonths(22), count: 4}, // max out at +-2 |
| 826 | - {tag: "Min=-22,Max=+22", date: new Date(), minDate: new Date().addMonths(-22), maxDate: new Date().addMonths(22), count: 5}, // max out at +-2 |
| 827 | + { date: new Date(2010, 4, 10) }, |
| 828 | + { date: new Date() }, |
| 829 | + { date: new Date(2020, 10, 31)}, |
| 830 | ]; |
| 831 | } |
| 832 | |
| 833 | - function test_minMaxDate(data) { |
| 834 | - calendar.selectedDate = data.date; |
| 835 | - calendar.minimumDate = data.minDate; |
| 836 | - calendar.maximumDate = data.maxDate; |
| 837 | - compare(calendar.count, data.count, "The number of months should have changed"); |
| 838 | + function test_selectedDateUpdatesCurrent(data) { |
| 839 | + calendar.selectedDate = data.date |
| 840 | + compare(calendar.currentDate, data.date) |
| 841 | + } |
| 842 | + |
| 843 | + function test_eventsMarker_data() |
| 844 | + { |
| 845 | + var values = [] |
| 846 | + for (var i = 0; i < 20; ++i) { |
| 847 | + values.push({tag: "eventDay "+i+": "+(i % 2 != 0), idx: i, dayEvent: (i % 2 != 0)}) |
| 848 | + } |
| 849 | + |
| 850 | + return values |
| 851 | + } |
| 852 | + |
| 853 | + function test_eventsMarker(data) { |
| 854 | + var eventMarkerLoader = findChild(calendar, "eventMarkerLoader"+data.idx) |
| 855 | + verify(eventMarkerLoader) |
| 856 | + |
| 857 | + var expected = data.dayEvent |
| 858 | + |
| 859 | + if (data.dayEvent) { |
| 860 | + var dayItem = findChild(calendar, "dayItem"+data.idx) |
| 861 | + verify(dayItem) |
| 862 | + |
| 863 | + calendar.eventDays = [dayItem.dayStart.day] |
| 864 | + expected = dayItem.isCurrentMonth |
| 865 | + } |
| 866 | + |
| 867 | + compare(eventMarkerLoader.visible, expected) |
| 868 | + var eventMarker = findChild(eventMarkerLoader, "eventMarker"+data.idx) |
| 869 | + verify(expected ? eventMarker : eventMarker === undefined) |
| 870 | + } |
| 871 | + |
| 872 | + function test_showWeeksNumber_data() { |
| 873 | + return [{tag: "visible", visible: true}, {tag: "not visible", visible: false}] |
| 874 | + } |
| 875 | + |
| 876 | + function test_showWeeksNumber(data) { |
| 877 | + var weekNumbersLoader = findChild(calendar, "weekNumbersLoader"+calendar.currentIndex) |
| 878 | + verify(weekNumbersLoader) |
| 879 | + |
| 880 | + calendar.showWeekNumbers = data.visible |
| 881 | + var weekNumbersColumn = findChild(weekNumbersLoader, "weekNumbersColumn"+calendar.currentIndex) |
| 882 | + verify(data.visible ? weekNumbersColumn !== undefined : weekNumbersColumn === undefined) |
| 883 | + } |
| 884 | + |
| 885 | + function test_isToday() { |
| 886 | + for (var i = 0; i < 7*6; ++i) { |
| 887 | + var dayItem = findChild(calendar, "dayItem"+i) |
| 888 | + verify(dayItem) |
| 889 | + var todayMarkerLoader = findChild(dayItem, "todayMarkerLoader"+i) |
| 890 | + verify(todayMarkerLoader) |
| 891 | + |
| 892 | + compare(todayMarkerLoader.visible, dayItem.isToday) |
| 893 | + compare(todayMarkerLoader.active, dayItem.isToday) |
| 894 | + } |
| 895 | + } |
| 896 | + |
| 897 | + function test_moveToMonth_data() { |
| 898 | + var tests = [] |
| 899 | + |
| 900 | + for (var i = 1; i <= 15; ++i) { |
| 901 | + tests.push({tag: "previous "+i, delta: -i }) |
| 902 | + tests.push({tag: "next "+i, delta: i }) |
| 903 | + } |
| 904 | + |
| 905 | + return tests |
| 906 | + } |
| 907 | + |
| 908 | + function test_moveToMonth(data) { |
| 909 | + var expected = calendar.currentDate.addMonths(data.delta) |
| 910 | + var now = new Date() |
| 911 | + |
| 912 | + if (expected.getFullYear() != now.getFullYear() || expected.getMonth() != now.getMonth()) { |
| 913 | + expected.setDate(1) |
| 914 | + } else { |
| 915 | + expected.setDate(now.getDate()) |
| 916 | + } |
| 917 | + |
| 918 | + calendar.moveToMonth(data.delta) |
| 919 | + compare(calendar.currentDate, expected) |
| 920 | } |
| 921 | } |
| 922 | } |
| 923 | |
| 924 | === modified file 'tests/qmltests/Menus/tst_CalendarMenu.qml' |
| 925 | --- tests/qmltests/Menus/tst_CalendarMenu.qml 2016-09-07 09:14:24 +0000 |
| 926 | +++ tests/qmltests/Menus/tst_CalendarMenu.qml 2016-11-15 18:02:52 +0000 |
| 927 | @@ -56,9 +56,16 @@ |
| 928 | |
| 929 | property var calendar: findChild(calendarMenu, "calendar") |
| 930 | |
| 931 | - function test_collapsed() { |
| 932 | - calendarMenu.collapsed = true |
| 933 | - compare(calendar.collapsed, true, "Cannot set collapsed") |
| 934 | + function test_interactive_data() { |
| 935 | + return [ |
| 936 | + {tag: "pointer", pointer: true, expected: false }, |
| 937 | + {tag: "touch", pointer: false, expected: true } |
| 938 | + ] |
| 939 | + } |
| 940 | + |
| 941 | + function test_interactive(data) { |
| 942 | + calendarMenu.pointerMode = data.pointer |
| 943 | + compare(calendar.interactive, data.expected, "Cannot use interactive") |
| 944 | } |
| 945 | |
| 946 | function test_currentDate() { |
| 947 | @@ -71,16 +78,6 @@ |
| 948 | compare(calendar.firstDayOfWeek, 5, "Cannot set firstDayOfWeek") |
| 949 | } |
| 950 | |
| 951 | - function test_maximumDate() { |
| 952 | - calendarMenu.maximumDate = date3 |
| 953 | - compare(calendar.maximumDate, date3, "Cannot set maximumDate") |
| 954 | - } |
| 955 | - |
| 956 | - function test_minimumDate() { |
| 957 | - calendar.minimumDate = date1 |
| 958 | - compare(calendar.minimumDate, date1, "Cannot set minimumDate") |
| 959 | - } |
| 960 | - |
| 961 | function test_selectedDate() { |
| 962 | calendar.selectedDate = date2 |
| 963 | compare(calendar.selectedDate, date2, "Cannot set selectedDate") |
| 964 | @@ -92,5 +89,40 @@ |
| 965 | calendar.selectedDate = calendar.selectedDate.addDays(1); |
| 966 | compare(calendar.selectedDate, date5, "The next day after 2016-10-30 is not 2016-10-31"); |
| 967 | } |
| 968 | + |
| 969 | + function test_SwitchMonth_data() { |
| 970 | + var tests = [] |
| 971 | + |
| 972 | + for (var i = 1; i <= 15; ++i) { |
| 973 | + tests.push({tag: "previous "+i, buttonName: "goPreviousMonth", delta: -i }) |
| 974 | + tests.push({tag: "next "+i, buttonName: "goNextMonth", delta: i }) |
| 975 | + } |
| 976 | + |
| 977 | + return tests |
| 978 | + } |
| 979 | + |
| 980 | + function test_SwitchMonth(data) { |
| 981 | + var button = findChild(calendarMenu, data.buttonName); |
| 982 | + var monthLayout = findChild(calendarMenu, "monthLayout") |
| 983 | + verify(button) |
| 984 | + verify(monthLayout) |
| 985 | + |
| 986 | + var expected = calendar.currentDate.addMonths(data.delta) |
| 987 | + var now = new Date() |
| 988 | + |
| 989 | + if (expected.getFullYear() != now.getFullYear() || expected.getMonth() != now.getMonth()) { |
| 990 | + expected.setDate(1) |
| 991 | + } else { |
| 992 | + expected.setDate(now.getDate()) |
| 993 | + } |
| 994 | + |
| 995 | + for (var i = 0; i < Math.abs(data.delta); ++i) |
| 996 | + mouseClick(button, button.width / 2, button.height / 2) |
| 997 | + |
| 998 | + compare(calendar.currentDate, expected) |
| 999 | + compare(monthLayout.title.text, i18n.ctr("%1=month name, %2=4-digit year", "%1 %2") |
| 1000 | + .arg(Qt.locale().standaloneMonthName(expected.getMonth(), Locale.LongFormat)) |
| 1001 | + .arg(expected.getFullYear())) |
| 1002 | + } |
| 1003 | } |
| 1004 | } |
PASSED: Continuous integration, rev:299
https:/
Executed test runs:
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
SUCCESS: https:/
deb: https:/
Click here to trigger a rebuild:
https:/