Changeset View
Changeset View
Standalone View
Standalone View
src/controls/templates/AbstractApplicationHeader.qml
| Show First 20 Lines • Show All 47 Lines • ▼ Show 20 Line(s) | 38 | Item { | |||
|---|---|---|---|---|---|
| 48 | 48 | | |||
| 49 | //FIXME: remove | 49 | //FIXME: remove | ||
| 50 | property QtObject __appWindow: applicationWindow(); | 50 | property QtObject __appWindow: applicationWindow(); | ||
| 51 | 51 | | |||
| 52 | anchors { | 52 | anchors { | ||
| 53 | left: parent.left | 53 | left: parent.left | ||
| 54 | right: parent.right | 54 | right: parent.right | ||
| 55 | } | 55 | } | ||
| 56 | height: { | 56 | height: preferredHeight | ||
| 57 | if (!__appWindow.controlsVisible) { | | |||
| 58 | return 1; | | |||
| 59 | } else if (__appWindow.wideScreen || !Settings.isMobile) { | | |||
| 60 | return preferredHeight; | | |||
| 61 | } else { | | |||
| 62 | return 1; | | |||
| 63 | } | | |||
| 64 | } | | |||
| 65 | 57 | | |||
| 66 | /** | 58 | /** | ||
| 67 | * background: Item | 59 | * background: Item | ||
| 68 | * This property holds the background item. | 60 | * This property holds the background item. | ||
| 69 | * Note: the background will be automatically sized as the whole control | 61 | * Note: the background will be automatically sized as the whole control | ||
| 70 | */ | 62 | */ | ||
| 71 | property Item background | 63 | property Item background | ||
| 72 | 64 | | |||
| 73 | onBackgroundChanged: { | 65 | onBackgroundChanged: { | ||
| 74 | background.z = -1; | 66 | background.z = -1; | ||
| 75 | background.parent = headerItem; | 67 | background.parent = headerItem; | ||
| 76 | background.anchors.fill = headerItem; | 68 | background.anchors.fill = headerItem; | ||
| 77 | } | 69 | } | ||
| 78 | 70 | | |||
| 79 | opacity: height > 0 && -translateTransform.y <= height ? 1 : 0 | 71 | opacity: height > 0 ? 1 : 0 | ||
| 80 | Behavior on opacity { | 72 | Behavior on opacity { | ||
| 81 | OpacityAnimator { | 73 | OpacityAnimator { | ||
| 82 | duration: Units.longDuration | 74 | duration: Units.longDuration | ||
| 83 | easing.type: Easing.InOutQuad | 75 | easing.type: Easing.InOutQuad | ||
| 84 | } | 76 | } | ||
| 85 | } | 77 | } | ||
| 86 | 78 | | |||
| 87 | transform: Translate { | 79 | Behavior on height { | ||
| 88 | id: translateTransform | 80 | enabled: __appWindow.pageStack.currentItem && __appWindow.pageStack.currentItem.flickable && !__appWindow.pageStack.currentItem.flickable.moving | ||
davidedmundson: What are these changes in the header about? | |||||
they were done to put the correct vertical margin on top, to have the same amount of space left/top/right in the card, otherwise there was a too big space in the top margin (which was a generic problem, but with cards it became very apparent)  mart: they were done to put the correct vertical margin on top, to have the same amount of space… | |||||
| 89 | y: { | | |||
| 90 | if (__appWindow === undefined) { | | |||
| 91 | return 0; | | |||
| 92 | } | | |||
| 93 | if (!__appWindow.controlsVisible) { | | |||
| 94 | return -headerItem.height - Units.smallSpacing; | | |||
| 95 | } else { | | |||
| 96 | return 0; | | |||
| 97 | } | | |||
| 98 | } | | |||
| 99 | Behavior on y { | | |||
| 100 | NumberAnimation { | 81 | NumberAnimation { | ||
| 101 | duration: Units.longDuration | 82 | duration: Units.longDuration | ||
| 102 | easing.type: translateTransform.y < 0 ? Easing.OutQuad : Easing.InQuad | 83 | easing.type: Easing.InOutQuad | ||
| 103 | } | 84 | } | ||
| 104 | } | 85 | } | ||
| 86 | | ||||
| 87 | Connections { | ||||
| 88 | target: __appWindow | ||||
| 89 | onControlsVisibleChanged: root.height = __appWindow.controlsVisible ? root.preferredHeight : 0; | ||||
| 105 | } | 90 | } | ||
| 106 | 91 | | |||
| 107 | Item { | 92 | Item { | ||
| 108 | id: headerItem | 93 | id: headerItem | ||
| 94 | property real computedRootHeight: root.preferredHeight | ||||
| 109 | anchors { | 95 | anchors { | ||
| 110 | left: parent.left | 96 | left: parent.left | ||
| 111 | right: parent.right | 97 | right: parent.right | ||
| 98 | bottom: parent.bottom | ||||
| 112 | } | 99 | } | ||
| 113 | 100 | | |||
| 114 | height: __appWindow.reachableMode && __appWindow.reachableModeEnabled ? root.maximumHeight : root.preferredHeight | 101 | height: __appWindow.reachableMode && __appWindow.reachableModeEnabled ? root.maximumHeight : root.preferredHeight | ||
| 115 | 102 | | |||
| 116 | function updatePageHeader() { | | |||
| 117 | if (!__appWindow || !__appWindow.pageStack || !__appWindow.pageStack.currentItem || !__appWindow.pageStack.currentItem.header || !__appWindow.pageStack.currentItem.flickable) { | | |||
| 118 | return; | | |||
| 119 | } | | |||
| 120 | | ||||
| 121 | if (__appWindow.wideScreen || !Settings.isMobile) { | | |||
| 122 | __appWindow.pageStack.currentItem.header.y = 0; | | |||
| 123 | } else { | | |||
| 124 | __appWindow.pageStack.currentItem.header.y = headerItem.height + headerItem.y -1; | | |||
| 125 | } | | |||
| 126 | } | | |||
| 127 | onYChanged: updatePageHeader() | | |||
| 128 | onHeightChanged: updatePageHeader() | | |||
| 129 | | ||||
| 130 | Connections { | 103 | Connections { | ||
| 131 | id: headerSlideConnection | 104 | id: headerSlideConnection | ||
| 132 | target: __appWindow.pageStack.currentItem ? __appWindow.pageStack.currentItem.flickable : null | 105 | target: __appWindow.pageStack.currentItem ? __appWindow.pageStack.currentItem.flickable : null | ||
| 133 | property int oldContentY | 106 | property int oldContentY | ||
| 134 | onContentYChanged: { | 107 | onContentYChanged: { | ||
| 135 | if (!__appWindow.pageStack.currentItem) { | 108 | if (!Settings.isMobile || | ||
| 136 | return; | 109 | !__appWindow.controlsVisible || | ||
| 137 | } | 110 | !__appWindow.pageStack.currentItem || | ||
| 138 | if (__appWindow.pageStack.currentItem.flickable.atYBeginning || | 111 | __appWindow.pageStack.currentItem.flickable.atYBeginning || | ||
| 139 | __appWindow.pageStack.currentItem.flickable.atYEnd) { | 112 | __appWindow.pageStack.currentItem.flickable.atYEnd) { | ||
| 140 | return; | 113 | return; | ||
| 114 | //if moves but not dragging, just update oldContentY | ||||
| 115 | } else if (!__appWindow.pageStack.currentItem.flickable.dragging) { | ||||
| 116 | oldContentY = __appWindow.pageStack.currentItem.flickable.contentY; | ||||
| 117 | return; | ||||
| 141 | } | 118 | } | ||
| 142 | 119 | | |||
| 120 | | ||||
| 143 | if (__appWindow.wideScreen || !Settings.isMobile) { | 121 | if (__appWindow.wideScreen || !Settings.isMobile) { | ||
| 144 | headerItem.y = 0; | 122 | root.height = root.preferredHeight; | ||
| 145 | } else { | 123 | } else { | ||
| 146 | headerItem.y = Math.max(root.minimumHeight - root.preferredHeight, Math.min(0, headerItem.y + oldContentY - __appWindow.pageStack.currentItem.flickable.contentY)); | 124 | var oldHeight = root.height; | ||
| 125 | | ||||
| 126 | root.height = Math.max(root.minimumHeight, | ||||
| 127 | Math.min(root.preferredHeight, | ||||
| 128 | root.height + oldContentY - __appWindow.pageStack.currentItem.flickable.contentY)); | ||||
| 147 | 129 | | |||
| 130 | //if the height is changed, use that to simulate scroll | ||||
| 131 | if (oldHeight != height) { | ||||
| 132 | __appWindow.pageStack.currentItem.flickable.contentY = oldContentY; | ||||
| 133 | } else { | ||||
| 148 | oldContentY = __appWindow.pageStack.currentItem.flickable.contentY; | 134 | oldContentY = __appWindow.pageStack.currentItem.flickable.contentY; | ||
| 149 | } | 135 | } | ||
| 150 | } | 136 | } | ||
| 137 | } | ||||
| 151 | onMovementEnded: { | 138 | onMovementEnded: { | ||
| 152 | if (headerItem.y > root.preferredHeight) { | 139 | if (__appWindow.wideScreen || !Settings.isMobile) { | ||
| 153 | //if don't change the position if more then preferredSize is shown | 140 | return; | ||
| 154 | } else if (headerItem.y < -(root.preferredHeight - root.minimumHeight)/2 ) { | 141 | } | ||
| 155 | headerItem.y = root.minimumHeight - root.preferredHeight; | 142 | if (root.height > (root.preferredHeight - root.minimumHeight)/2 ) { | ||
| 143 | root.height = root.preferredHeight; | ||||
| 156 | } else { | 144 | } else { | ||
| 157 | headerItem.y = 0; | 145 | root.height = root.minimumHeight; | ||
| 158 | } | 146 | } | ||
| 159 | } | 147 | } | ||
| 160 | } | 148 | } | ||
| 161 | Connections { | 149 | Connections { | ||
| 162 | target: __appWindow.pageStack | 150 | target: __appWindow.pageStack | ||
| 163 | onCurrentItemChanged: { | 151 | onCurrentItemChanged: { | ||
| 164 | if (!__appWindow.pageStack.currentItem) { | 152 | if (!__appWindow.pageStack.currentItem) { | ||
| 165 | return; | 153 | return; | ||
| 166 | } | 154 | } | ||
| 167 | if (__appWindow.pageStack.currentItem.flickable) { | 155 | if (__appWindow.pageStack.currentItem.flickable) { | ||
| 168 | headerSlideConnection.oldContentY = __appWindow.pageStack.currentItem.flickable.contentY; | 156 | headerSlideConnection.oldContentY = __appWindow.pageStack.currentItem.flickable.contentY; | ||
| 169 | } else { | 157 | } else { | ||
| 170 | headerSlideConnection.oldContentY = 0; | 158 | headerSlideConnection.oldContentY = 0; | ||
| 171 | } | 159 | } | ||
| 172 | headerItem.y = 0; | 160 | root.height = root.preferredHeight; | ||
| 173 | headerItem.updatePageHeader() | | |||
| 174 | } | 161 | } | ||
| 175 | } | 162 | } | ||
| 176 | 163 | | |||
| 177 | Item { | 164 | Item { | ||
| 178 | id: mainItem | 165 | id: mainItem | ||
| 179 | anchors { | 166 | anchors { | ||
| 180 | fill: parent | 167 | fill: parent | ||
| 181 | } | 168 | } | ||
| 182 | } | 169 | } | ||
| 183 | Behavior on y { | | |||
| 184 | enabled: __appWindow.pageStack.currentItem && __appWindow.pageStack.currentItem.flickable && !__appWindow.pageStack.currentItem.flickable.moving | | |||
| 185 | NumberAnimation { | | |||
| 186 | duration: Units.longDuration | | |||
| 187 | easing.type: Easing.InOutQuad | | |||
| 188 | } | | |||
| 189 | } | | |||
| 190 | } | 170 | } | ||
| 191 | } | 171 | } | ||
| 192 | 172 | | |||
What are these changes in the header about?