I have made the following changes intended for : CE:UX:MTF / lipstick-colorful-home
Please review and accept or decline. BOSS has already run some checks on this request. See the "Messages from BOSS" section below. https://build.pub.meego.com//request/show/8177 Thank You, Robin Burchell [This message was auto-generated] --- Request # 8177: Messages from BOSS: State: review at 2013-02-22T00:00:29 by bossbot Reviews: accepted by bossbot : Prechecks succeeded. new for CE-maintainers : Please replace this text with a review and approve/reject the review (not the SR). BOSS will take care of the rest Changes: submit: home:w00t:branches:CE:UX:MTF / lipstick-colorful-home -> CE:UX:MTF / lipstick-colorful-home changes files: -------------- --- lipstick-colorful-home.changes +++ lipstick-colorful-home.changes @@ -0,0 +1,11 @@ +* Fri Feb 22 2013 Robin Burchell <[email protected]> - 0.1.2 +- Animate homescreen rotation (from Thomas Perl) +- Use a four column layout on the launcher (from Thomas Perl) +- Use the WallClock elsewhere (from Thomas Perl) +- Make the UI look more like Harmattan (from Thomas Perl) +- Use Qt Components for orientation and status bar (from Thomas Perl) +- Use the close icon from theme (from Thomas Perl) +- Implement a close mode like Harmattan's (from Thomas Perl) +- Always show status bar (from Thomas Perl) +- Make application launcher the initial view on startup (from Thomas Perl) + old: ---- lipstick-colorful-home-0.1.1.tar.bz2 new: ---- lipstick-colorful-home-0.1.2.tar.bz2 spec files: ----------- --- lipstick-colorful-home.spec +++ lipstick-colorful-home.spec @@ -9,7 +9,7 @@ # << macros Summary: A nice homescreen -Version: 0.1.1 +Version: 0.1.2 Release: 1 Group: System/GUI/Other License: BSD other changes: -------------- ++++++ lipstick-colorful-home-0.1.1.tar.bz2 -> lipstick-colorful-home-0.1.2.tar.bz2 --- src/qml/MainScreen.qml +++ src/qml/MainScreen.qml @@ -24,160 +24,85 @@ import QtQuick 1.1 import QtMobility.sensors 1.2 + import org.nemomobile.lipstick 0.1 import org.nemomobile.configuration 1.0 +import org.nemomobile.time 1.0 + +import com.nokia.meego 1.0 + import "./components" import "./pages" // The item representing the main screen; size is constant -Item { +PageStackWindow { id: mainScreen - width: LipstickSettings.screenSize.width - height: LipstickSettings.screenSize.height - // This is used for detecting the current device orientation and - // adjusting the desktop accordingly. - OrientationSensor { - id: orientationSensor - active: true - - onReadingChanged: { - if (reading.orientation === OrientationReading.TopUp && !desktop.isPortrait) { - // The top of the device is upwards - meaning: portrait - desktop.isPortrait = true; - } - if (reading.orientation === OrientationReading.RightUp && desktop.isPortrait) { - // The right side of the device is upwards - meaning: landscape - desktop.isPortrait = false; - } - } + // This is used in the favorites page and in the lock screen + WallClock { + id: wallClock + enabled: true /* XXX: Disable when display is off */ + updateFrequency: WallClock.Minute } - // This is the "desktop" - the item whose size changes when the orientation changes - Item { - property bool isPortrait: LipstickSettings.getIsInPortrait() - - id: desktop - anchors.top: parent.top - anchors.left: parent.left - width: isPortrait ? parent.height : parent.width - height: isPortrait ? parent.width : parent.height - transform: Rotation { - id: desktopRotation - origin.x: mainScreen.height / 2 - origin.y: mainScreen.height / 2 - angle: desktop.isPortrait ? -90 : 0 - } + // This is used in the lock screen + ConfigurationValue { + id: wallpaperSource + key: desktop.isPortrait ? "/desktop/meego/background/portrait/picture_filename" : "/desktop/meego/background/landscape/picture_filename" + defaultValue: "images/graphics-wallpaper-home.jpg" + } - // Black background for the status bar (until it's loaded) - Rectangle { - color: 'black' - anchors.fill: statusBar - z: 10 - } + initialPage: Page { + Item { + id: desktop + property bool isPortrait: width < height + + anchors.fill: parent + + // Pager for swiping between different pages of the home screen + Pager { + id: pager - // System status bar - StatusBar { - id: statusBar - anchors { - top: parent.top - left: parent.left - right: parent.right - } - isPortrait: desktop.isPortrait - z: 10 - } + scale: 0.8 + 0.2 * lockScreen.openingState + opacity: lockScreen.openingState - // Tab bar on the top for a quick way of selecting a page - TabBar { - id: tabBar - anchors { - top: statusBar.bottom - left: parent.left - right: parent.right - } - z: 10 - model: ListModel { -// ListElement { iconUrl: ":/images/icons/star.png" } -// ListElement { iconUrl: ":/images/icons/cloud.png" } - ListElement { iconUrl: ":/images/icons/apps.png" } - ListElement { iconUrl: ":/images/icons/multitask.png" } -// ListElement { iconUrl: ":/images/icons/search.png" } - } + anchors.fill: parent - onCurrentIndexChanged: pager.currentIndex = tabBar.currentIndex - } + model: VisualItemModel { + Favorites { + id: favorites + width: pager.width + height: pager.height + } + AppLauncher { + id: launcher + height: pager.height + } + AppSwitcher { + id: switcher + width: pager.width + height: pager.height + columnNumber: 2 + visibleInHome: x > -width && x < desktop.width + } + } - ConfigurationValue { - id: wallpaperSource - key: desktop.isPortrait ? "/desktop/meego/background/portrait/picture_filename" : "/desktop/meego/background/landscape/picture_filename" - defaultValue: "images/graphics-wallpaper-home.jpg" - } + // Initial view should be the AppLauncher + currentIndex: 1 + } + Lockscreen { + id: lockScreen - // The background image - Image { - id: background - source: "file://" + wallpaperSource.value - fillMode: Image.Stretch - anchors.fill: pager - - // Black overlay for making white text readable - Rectangle { - id: overlay - anchors.fill: parent - opacity: 0.55 - color: 'black' - } - } + width: parent.width + height: parent.height - // Pager for swiping between different pages of the home screen - Pager { - id: pager - anchors { - top: tabBar.bottom - left: parent.left - right: parent.right - bottom: parent.bottom - } - model: VisualItemModel { -/* - Favorites { - id: favorites - width: pager.width - height: pager.height - } - Cloud { - id: cloud - width: pager.width - height: pager.height - } -*/ - AppLauncher { - id: launcher - height: pager.height - } - AppSwitcher { - id: switcher - width: pager.width - height: pager.height - columnNumber: 2 - } -/*y - Search { - id: search - width: pager.width - height: pager.height - } -*/ + z: 200 } - onCurrentIndexChanged: tabBar.currentIndex = pager.currentIndex } + } - Lockscreen { - height: desktop.height - width: desktop.width - z: 200 - } + Component.onCompleted: { + theme.inverted = true; } } --- src/qml/components/Lockscreen.qml +++ src/qml/components/Lockscreen.qml @@ -3,9 +3,16 @@ Image { id: lockScreen source: "file://" + wallpaperSource.value - property bool animating: y != 0 && y != -height + property bool animating: y != parent.y && y != parent.y-height property bool heightIsChanging: false + /** + * openingState should be a value between 0 and 1, where 0 means + * the lockscreen is "down" (obscures the view) and 1 means the + * lockscreen is "up" (not visible). + **/ + property real openingState: (parent.y - y) / height + onHeightChanged: { /* Fixes: https://bugs.nemomobile.org/show_bug.cgi?id=521 */ @@ -23,11 +30,11 @@ } function hide() { - y = -height + y = parent.y-height } function show() { - y = 0 + y = parent.y } // can't use a binding, as we also assign y based on mousearea below --- src/qml/components/LockscreenClock.qml +++ src/qml/components/LockscreenClock.qml @@ -1,6 +1,5 @@ import QtQuick 1.1 -import org.nemomobile.time 1.0 Rectangle { id: lockscreenClock @@ -14,12 +13,6 @@ GradientStop { position: 1.0; color: '#00000000' } } - WallClock { - id: wallClock - enabled: LipstickSettings.lockscreenVisible - updateFrequency: WallClock.Minute - } - Column { id: clockColumn --- src/qml/pages/AppLauncher.qml +++ src/qml/pages/AppLauncher.qml @@ -32,8 +32,8 @@ GridView { id: gridview - cellWidth: 80 + 60 - cellHeight: cellWidth + cellWidth: 80 + 25 + cellHeight: cellWidth + 30 width: Math.floor(parent.width / cellWidth) * cellWidth cacheBuffer: gridview.contentHeight x: (parent.width - width) / 2 // can't use an anchor because we need to animate our position --- src/qml/pages/AppSwitcher.qml +++ src/qml/pages/AppSwitcher.qml @@ -24,6 +24,7 @@ import QtQuick 1.1 import org.nemomobile.lipstick 0.1 +import com.nokia.meego 1.0 import "./AppSwitcher" // App Switcher page @@ -32,10 +33,19 @@ Item { property int columnNumber: 3 property int gridMargin: 20 + property bool closeMode: false + property bool visibleInHome: false id: switcherRoot clip: true + onVisibleInHomeChanged: { + // Exit close mode when scrolling out of view + if (!visibleInHome && closeMode) { + closeMode = false; + } + } + // The actual app switcher grid GridView { id: gridview @@ -44,7 +54,7 @@ cellHeight: (cellWidth - gridMargin / 2) * (desktop.height / desktop.width) + gridMargin / 2 anchors { top: parent.top - bottom: parent.bottom + bottom: switcherRoot.closeMode ? toolBar.top : parent.bottom horizontalCenter: parent.horizontalCenter topMargin: 35 bottomMargin: 35 @@ -66,10 +76,72 @@ } } + Rectangle { + color: 'black' + border { + width: 1 + color: '#333333' + } + + visible: switcherRoot.closeMode + + id: toolBar + height: toolBarDone.height + 2*padding + property int padding: 9 + + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + margins: -1 + bottomMargin: switcherRoot.closeMode ? 0 : -height + } + + Behavior on anchors.bottomMargin { PropertyAnimation { duration: 100 } } + + Button { + id: toolBarDone + width: parent.width / 3 + anchors { + top: parent.top + topMargin: toolBar.padding + right: parent.horizontalCenter + rightMargin: toolBar.padding + } + text: 'Done' + onClicked: { + switcherRoot.closeMode = false; + } + } + + Button { + id: toolBarCloseAll + width: toolBarDone.width + anchors { + top: parent.top + topMargin: toolBar.padding + left: parent.horizontalCenter + leftMargin: toolBar.padding + } + text: 'Close all' + onClicked: { + for (var i=switcherModel.itemCount-1; i>=0; i--) { + windowManager.closeWindow(switcherModel.get(i).window); + } + } + } + } + // Empty switcher indicator Text { anchors.centerIn: parent visible: switcherModel.itemCount === 0 + onVisibleChanged: { + /* When the last window is closed, exit close mode */ + if (visible) { + switcherRoot.closeMode = false; + } + } text: "No apps open" color: "white" font.pixelSize: 30 --- src/qml/pages/AppSwitcher/CloseButton.qml +++ src/qml/pages/AppSwitcher/CloseButton.qml @@ -23,45 +23,11 @@ import QtQuick 1.1 -Rectangle { - signal clicked() - +Image { id: closeButton - width: 54 - height: 54 - radius: 27 - color: 'red' - - Rectangle { - color: 'white' - anchors.centerIn: parent - width: 40 - height: 40 - radius: 20 + signal clicked() - Rectangle { - anchors.centerIn: parent - color: 'red' - width: 34 - height: 8 - transform: Rotation { - angle: 45 - origin.x: 17 - origin.y: 4 - } - } - Rectangle { - anchors.centerIn: parent - color: 'red' - width: 34 - height: 8 - transform: Rotation { - angle: -45 - origin.x: 17 - origin.y: 4 - } - } - } + source: 'image://theme/icon-m-framework-close-thumbnail' MouseArea { anchors.fill: parent --- src/qml/pages/AppSwitcher/SwitcherItem.qml +++ src/qml/pages/AppSwitcher/SwitcherItem.qml @@ -44,16 +44,27 @@ } smooth: true radius: 5 + opacity: switcherRoot.closeMode ? .6 : 1 } } MouseArea { anchors.fill: parent - onClicked: windowManager.windowToFront(model.object.window) + onClicked: { + if (!switcherRoot.closeMode) { + windowManager.windowToFront(model.object.window); + } + } + onPressAndHold: { + switcherRoot.closeMode = true; + } } CloseButton { id: closeButton + Behavior on scale { PropertyAnimation { duration: 300; easing.type: Easing.OutBack } } + scale: switcherRoot.closeMode ? 1 : 0 + opacity: scale anchors { top: parent.top right: parent.right --- src/qml/pages/Favorites.qml +++ src/qml/pages/Favorites.qml @@ -29,14 +29,16 @@ // widgets, notifications, favorite apps, etc. Item { - property variant currentDate: new Date() + id: favorites + property color primaryColor: 'white' + property color secondaryColor: '#888888' // Day of week Text { id: displayDayOfWeek - text: Qt.formatDateTime(currentDate, "dddd") + text: Qt.formatDateTime(wallClock.time, "dddd") font.pixelSize: 40 - color: "white" + color: favorites.primaryColor anchors { top: parent.top left: parent.left @@ -48,9 +50,9 @@ // Current date Text { id: displayCurrentDate - text: Qt.formatDate(currentDate, Qt.SystemLocaleShortDate) - font.pixelSize: 40 - color: "white" + text: Qt.formatDate(wallClock.time, Qt.SystemLocaleShortDate) + font.pixelSize: 25 + color: favorites.secondaryColor anchors { top: displayDayOfWeek.bottom left: parent.left @@ -62,7 +64,7 @@ // Separator thingy Rectangle { height: 2 - color: "white" + color: favorites.secondaryColor anchors { top: displayCurrentDate.bottom left: parent.left @@ -72,11 +74,4 @@ rightMargin: 20 } } - - - Text { - font.pixelSize: 30 - text: "TODO: implement me" - anchors.centerIn: parent - } } ++++++ lipstick-colorful-home.yaml --- lipstick-colorful-home.yaml +++ lipstick-colorful-home.yaml @@ -1,6 +1,6 @@ Name: lipstick-colorful-home Summary: A nice homescreen -Version: 0.1.1 +Version: 0.1.2 Release: 1 Group: System/GUI/Other License: BSD
