mirror of
https://github.com/subsurface/subsurface.git
synced 2024-12-01 06:30:26 +00:00
sync with mobilecomponents 9d8bf6d77d
- 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
parent
72411eee63
commit
b6f5f235f0
9 changed files with 74 additions and 62 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ OverlayDrawer {
|
|||
contentItem: QtControls.ScrollView {
|
||||
ListView {
|
||||
id: menu
|
||||
interactive: contentHeight > height
|
||||
model: {
|
||||
if (root.actions.length == 0) {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue