mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2024-11-28 13:10:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

sync with mobilecomponents 9d8bf6d77d

Browse source 
- Fixes interactivity in context drawer.

- These are mostly cleanups that have been done pre-merge of these
components. This now is the state of master in plasma-mobile.

- makes navigation a bit more intuitive

Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Sebastian Kügler 2015-12-04 00:27:35 +01:00
parent 72411eee63
commit b6f5f235f0
9 changed files with 74 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
qt-mobile/qml/mobilecomponents/ApplicationWindow.qml
View file

@ -38,9 +38,9 @@ ApplicationWindow {
property alias initialPage: __pageStack.initialPage
/**
* The stack used to allocate the pages nd to manage the transitions
* The stack used to allocate the pages and to manage the transitions
* between them.
* It's using a PageRow, while having the same aPI as PageStack,
* It's using a PageRow, while having the same API as PageStack,
* it positions the pages as adjacent columns, with as many columns
* as can fit in the screen. An handheld device would usually have a single
* fullscreen column, a tablet device would have many tiled columns.
@ -57,11 +57,6 @@ ApplicationWindow {
event.accepted = true;
}
}
onLastVisiblePageChanged: {
if (lastVisiblePage != null) {
pop(lastVisiblePage)
}
}
}
property AbstractDrawer globalDrawer

1
qt-mobile/qml/mobilecomponents/ContextDrawer.qml
View file

@ -35,6 +35,7 @@ OverlayDrawer {
contentItem: QtControls.ScrollView {
ListView {
id: menu
interactive: contentHeight > height
model: {
if (root.actions.length == 0) {
return null;

12
qt-mobile/qml/mobilecomponents/GlobalDrawer.qml
View file

@ -46,7 +46,7 @@ OverlayDrawer {
Layout.preferredWidth: title.implicitWidth
Layout.preferredHeight: bannerImageSource != "" ? Math.max(title.implicitHeight, Math.floor(width / (sourceSize.width/sourceSize.height))) : title.implicitHeight
Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing*2
Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing * 2
fillMode: Image.PreserveAspectCrop
asynchronous: true
@ -97,8 +97,8 @@ OverlayDrawer {
color: bannerImageSource != "" ? "white" : Theme.textColor
}
Item {
height: parent.height
Layout.minimumWidth: height
height: 1
Layout.minimumWidth: heading.height
}
}
}
@ -157,9 +157,7 @@ OverlayDrawer {
source: "go-previous"
}
Label {
// Weird, this doesn't work
//text: (typeof(i18n) != undefined) ? i18n("Back") : "Back"
text: "Back"
text: typeof i18n !== "undefined" ? i18n("Back") : "Back"
}
}
onClicked: pageRow.pop()
@ -167,7 +165,7 @@ OverlayDrawer {
delegate: ListItem {
enabled: true
RowLayout {
height: implicitHeight + Units.smallSpacing*2
height: implicitHeight + Units.smallSpacing * 2
anchors {
left: parent.left
right: parent.right

6
qt-mobile/qml/mobilecomponents/Heading.qml
View file

@ -30,12 +30,10 @@ import org.kde.plasma.mobilecomponents 0.2
* Example usage:
*
* @code
* import org.kde.plasma.extras 2.0 as PlasmaExtras
* import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
* [...]
* Column {
* PlasmaExtras.Title { text: "Fruit sweetness on the rise" }
* PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 }
* PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" }
* MobileComponents.Heading { text: "Apples in the sunlight"; level: 2 }
* [...]
* }
* @endcode

37
qt-mobile/qml/mobilecomponents/IconGrid.qml
View file

@ -28,11 +28,11 @@ Item {
property Component delegate
property QtObject model
property int pageSize: Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
property int delegateWidth: Units.iconSizes.huge + Units.gridUnit*2
property int delegateHeight: Units.iconSizes.huge + Units.gridUnit*2
property int pageSize: Math.floor(iconView.width / main.delegateWidth) * Math.floor(iconView.height / main.delegateHeight)
property int delegateWidth: Units.iconSizes.huge + Units.gridUnit * 2
property int delegateHeight: Units.iconSizes.huge + Units.gridUnit * 2
property alias currentPage: iconView.currentIndex
property int pagesCount: Math.ceil(model.count/pageSize)
property int pagesCount: Math.ceil(model.count / pageSize)
property int count: model.count
property alias contentX: iconView.contentX
clip: true
@ -47,7 +47,7 @@ Item {
running: true
interval: 100
onTriggered: {
main.pageSize = Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
main.pageSize = Math.floor(iconView.width / main.delegateWidth) * Math.floor(iconView.height / main.delegateHeight)
if (iconView.currentItem) {
iconView.currentItem.width = iconView.width
iconView.currentItem.height = iconView.height
@ -59,8 +59,8 @@ Item {
id: iconView
objectName: "iconView"
pressDelay: 200
cacheBuffer: 100
highlightMoveDuration: 250
cacheBuffer: Units.gridUnit * 8
highlightMoveDuration: Units.shortDuration
anchors.fill: parent
onWidthChanged: resizeTimer.restart()
onHeightChanged: resizeTimer.restart()
@ -103,8 +103,8 @@ Item {
Repeater {
id: iconRepeater
model: pagedProxyModel
property int columns: Math.min(count, Math.floor(delegatePage.width/main.delegateWidth))
property int suggestedWidth: main.delegateWidth*columns
property int columns: Math.min(count, Math.floor(delegatePage.width / main.delegateWidth))
property int suggestedWidth: main.delegateWidth * columns
//property int suggestedHeight: main.delegateHeight*Math.floor(count/columns)
delegate: main.delegate
@ -123,7 +123,7 @@ Item {
right: parent.right
bottom: parent.bottom
}
height: Math.max( 16, iconView.height - Math.floor(iconView.height/delegateHeight)*delegateHeight)
height: Math.max(16, iconView.height - Math.floor(iconView.height / delegateHeight) * delegateHeight)
property int pageCount: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
@ -145,15 +145,14 @@ Item {
Rectangle {
id: barRectangle
color: Theme.textColor
opacity: 2.05
height: 4
radius: 2
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
leftMargin: (parent.width/pageCount/2)
rightMargin: (parent.width/pageCount/2)
leftMargin: (parent.width / pageCount / 2)
rightMargin: (parent.width / pageCount / 2)
}
}
Rectangle {
@ -162,10 +161,10 @@ Item {
width: height
radius: 4
anchors.verticalCenter: parent.verticalCenter
x: parent.width/(pageCount/(iconView.currentIndex+1)) - (parent.width/pageCount/2) - 4
x: parent.width / (pageCount / (iconView.currentIndex+1)) - (parent.width / pageCount / 2) - 4
Behavior on x {
NumberAnimation {
duration: 250
duration: Units.shortDuration
easing.type: Easing.InOutQuad
}
}
@ -192,7 +191,7 @@ Item {
Item {
Row {
anchors.centerIn: parent
spacing: 20
spacing: units.gridUnit
Repeater {
model: scrollArea.pageCount
@ -209,13 +208,13 @@ Item {
Behavior on scale {
NumberAnimation {
duration: 250
duration: units.shortDuration
easing.type: Easing.InOutQuad
}
}
Behavior on opacity {
NumberAnimation {
duration: 250
duration: units.shortDuration
easing.type: Easing.InOutQuad
}
}
@ -223,7 +222,7 @@ Item {
MouseArea {
anchors {
fill: parent
margins: -10
margins: Units.gridUnit / 2
}
onClicked: {

19
qt-mobile/qml/mobilecomponents/ListItemWithActions.qml
View file

@ -50,7 +50,6 @@ Item {
*/
signal clicked
/**
* The user pressed the item with the mouse and didn't release it for a
* certain amount of time.
@ -93,9 +92,9 @@ Item {
}
width: parent ? parent.width : childrenRect.width
height: paddingItem.childrenRect.height + Units.smallSpacing*2
height: paddingItem.childrenRect.height + Units.smallSpacing * 2
property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2
property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing * 2
Rectangle {
@ -114,7 +113,7 @@ Item {
verticalCenter: parent.verticalCenter
rightMargin: y
}
height: Math.min( parent.height/1.5, Units.iconSizes.medium)
height: Math.min( parent.height / 1.5, Units.iconSizes.medium)
property bool exclusive: false
property Item checkedButton
spacing: 0
@ -151,10 +150,10 @@ Item {
}
InnerShadow {
anchors.fill: parent
radius: Units.smallSpacing*2
radius: Units.smallSpacing * 2
samples: 16
horizontalOffset: 0
verticalOffset: Units.smallSpacing/2
verticalOffset: Units.smallSpacing / 2
color: Qt.rgba(0, 0, 0, 0.3)
source: background
}
@ -162,7 +161,7 @@ Item {
id: shadow
//TODO: depends from app layout
property bool inverse: true
width: Units.smallSpacing*2
width: Units.smallSpacing * 2
anchors {
right: shadow.inverse ? undefined : itemMouse.left
left: shadow.inverse ? itemMouse.right : undefined
@ -210,7 +209,7 @@ Item {
id : item
color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor
anchors.fill: parent
visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true
Behavior on color {
ColorAnimation { duration: Units.longDuration }
@ -242,14 +241,14 @@ Item {
if (itemMouse.x > -itemMouse.width/2) {
itemMouse.x = 0;
} else {
itemMouse.x = -itemMouse.width + width*2
itemMouse.x = -itemMouse.width + width * 2
}
}
onClicked: {
if (itemMouse.x < -itemMouse.width/2) {
itemMouse.x = 0;
} else {
itemMouse.x = -itemMouse.width + width*2
itemMouse.x = -itemMouse.width + width * 2
}
}
Icon {

14
qt-mobile/qml/mobilecomponents/OverlayDrawer.qml
View file

@ -28,14 +28,20 @@ Imports:
QtQuick 2.1
Description:
Overlay Drawers are used to expose additional UI elements needed for small secondary tasks for which the main UI elements are not needed. For example in Okular Active, an Overlay Drawer is used to display thumbnails of all pages within a document along with a search field. This is used for the distinct task of navigating to another page.
Overlay Drawers are used to expose additional UI elements needed for
small secondary tasks for which the main UI elements are not needed.
For example in Okular Active, an Overlay Drawer is used to display
thumbnails of all pages within a document along with a search field.
This is used for the distinct task of navigating to another page.
Properties:
bool opened:
If true the drawer is open showing the contents of the "drawer" component.
If true the drawer is open showing the contents of the "drawer"
component.
Item page:
It's the default property. it's the main content of the drawer page, the part that is always shown
It's the default property. it's the main content of the drawer page,
the part that is always shown
Item contentItem:
It's the part that can be pulled in and out, will act as a sidebar.
@ -218,7 +224,7 @@ AbstractDrawer {
onStateChanged: open = (state != "Closed")
property bool open: false
onOpenChanged: {
if (drawerPage.children.length == 0) {
if (browserFrame.state == "Dragging" || drawerPage.children.length == 0) {
return;
}

19
qt-mobile/qml/mobilecomponents/PageRow.qml
View file

@ -82,6 +82,7 @@ Item {
// Returns the page instance.
function push(page, properties, immediate)
{
pop(lastVisiblePage, true);
scrollAnimation.running = false;
var item = Engine.push(page, properties, false, immediate)
scrollToLevel(depth)
@ -102,6 +103,7 @@ Item {
// See push() for details.
function replace(page, properties, immediate)
{
pop(lastVisiblePage, true);
scrollAnimation.running = false;
var item = Engine.push(page, properties, true, immediate);
scrollToLevel(depth)
@ -147,6 +149,11 @@ Item {
}
ScriptAction {
script: {
//At startup sometimes the contentX is NaN for an instant
if (isNaN(mainFlickable.contentX)) {
return;
}
actualRoot.lastVisiblePage = root.children[Math.floor((mainFlickable.contentX + mainFlickable.width - 1)/columnWidth)].page
}
}
@ -211,8 +218,8 @@ Item {
contentHeight: height
Row {
id: root
spacing: -100
width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - 100)
spacing: -Units.gridUnit * 8
width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - Units.gridUnit * 8)
height: parent.height
Behavior on width {
@ -238,7 +245,7 @@ Item {
Item {
id: container
implicitWidth: actualContainer.width + 100
implicitWidth: actualContainer.width + Units.gridUnit * 8
width: implicitWidth
height: parent ? parent.height : 0
@ -293,7 +300,7 @@ Item {
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: 100
rightMargin: Units.gridUnit * 8
}
property int takenColumns: {
@ -413,13 +420,13 @@ Item {
State {
name: "Left"
PropertyChanges { target: container; opacity: 0 }
PropertyChanges { target: container; width: 100}
PropertyChanges { target: container; width: Units.gridUnit * 8}
},
// Start state for push entry, end state for pop exit.
State {
name: "Right"
PropertyChanges { target: container; opacity: 0 }
PropertyChanges { target: container; width: 100}
PropertyChanges { target: container; width: Units.gridUnit * 8}
},
// Inactive state.
State {

19
qt-mobile/qml/mobilecomponents/private/ActionButton.qml
View file

@ -25,6 +25,8 @@ import org.kde.plasma.mobilecomponents 0.2
MouseArea {
id: button
property alias iconSource: icon.source
property bool checkable: false
property bool checked: false
Layout.minimumWidth: Units.iconSizes.large
Layout.maximumWidth: Layout.minimumWidth
implicitWidth: Units.iconSizes.large
@ -35,9 +37,9 @@ MouseArea {
minimumX: contextDrawer ? 0 : parent.width/2 - width/2
maximumX: globalDrawer ? parent.width : parent.width/2 - width/2
}
function toggle() {
function toggleVisibility() {
showAnimation.running = false;
if (transform[0].y < button.height) {
if (translateTransform.y < button.height) {
showAnimation.to = button.height;
} else {
showAnimation.to = 0;
@ -45,7 +47,9 @@ MouseArea {
showAnimation.running = true;
}
transform: Translate {}
transform: Translate {
id: translateTransform
}
onReleased: {
if (globalDrawer && x > Math.min(parent.width/4*3, parent.width/2 + globalDrawer.contentItem.width/2)) {
globalDrawer.open();
@ -66,6 +70,11 @@ MouseArea {
}
}
}
onClicked: {
if (checkable) {
checked = !checked;
}
}
Connections {
target: globalDrawer
onPositionChanged: {
@ -99,7 +108,7 @@ MouseArea {
NumberAnimation {
id: showAnimation
target: button.transform[0]
target: translateTransform
properties: "y"
duration: Units.longDuration
easing.type: Easing.InOutQuad
@ -116,7 +125,7 @@ MouseArea {
anchors.centerIn: parent
height: parent.height - Units.smallSpacing*2
width: height
color: button.pressed ? Theme.highlightColor : Theme.backgroundColor
color: button.pressed || button.checked ? Theme.highlightColor : Theme.backgroundColor
Icon {
id: icon
anchors {