Changeset View
Changeset View
Standalone View
Standalone View
qmlUiKirigami/ImageViewer.qml
| Show All 20 Lines | |||||
| 21 | * | 21 | * | ||
| 22 | */ | 22 | */ | ||
| 23 | 23 | | |||
| 24 | import QtQuick 2.7 | 24 | import QtQuick 2.7 | ||
| 25 | import QtQuick.Window 2.2 | 25 | import QtQuick.Window 2.2 | ||
| 26 | import QtQuick.Controls 2.0 as Controls | 26 | import QtQuick.Controls 2.0 as Controls | ||
| 27 | import org.kde.kirigami 2.0 as Kirigami | 27 | import org.kde.kirigami 2.0 as Kirigami | ||
| 28 | import org.kde.koko 0.1 as Koko | 28 | import org.kde.koko 0.1 as Koko | ||
| 29 | import org.kde.kquickcontrolsaddons 2.0 as KQA | ||||
| 29 | 30 | | |||
| 30 | Kirigami.Page { | 31 | Kirigami.Page { | ||
| 31 | id: root | 32 | id: root | ||
| 32 | 33 | | |||
| 33 | property alias sourceModel: imagesListModel.sourceModel | 34 | property alias sourceModel: imagesListModel.sourceModel | ||
| 34 | property int indexValue | 35 | property int indexValue | ||
| 35 | 36 | | |||
| 36 | property int imageWidth | 37 | property int imageWidth | ||
| ▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Line(s) | 143 | ListView { | |||
| 148 | 149 | | |||
| 149 | model: Koko.SortModel { | 150 | model: Koko.SortModel { | ||
| 150 | id: imagesListModel | 151 | id: imagesListModel | ||
| 151 | filterRole: Koko.Roles.MimeTypeRole | 152 | filterRole: Koko.Roles.MimeTypeRole | ||
| 152 | filterRegExp: /image\// | 153 | filterRegExp: /image\// | ||
| 153 | } | 154 | } | ||
| 154 | currentIndex: model.proxyIndex( indexValue) | 155 | currentIndex: model.proxyIndex( indexValue) | ||
| 155 | 156 | | |||
| 157 | Timer { | ||||
| 158 | id: timer | ||||
| 159 | interval: 2000 | ||||
| 160 | onTriggered: footerList.opacity = 0 | ||||
| 161 | } | ||||
| 162 | | ||||
| 156 | onCurrentIndexChanged: { | 163 | onCurrentIndexChanged: { | ||
| 157 | currentImage.index = model.sourceIndex( currentIndex) | 164 | currentImage.index = model.sourceIndex( currentIndex) | ||
| 158 | listView.positionViewAtIndex(currentIndex, ListView.Beginning) | 165 | listView.positionViewAtIndex(currentIndex, ListView.Beginning) | ||
| 166 | footerList.opacity = 1.0 | ||||
| 167 | timer.restart() | ||||
| 159 | } | 168 | } | ||
| 160 | 169 | | |||
| 161 | delegate: Flickable { | 170 | delegate: Flickable { | ||
| 162 | id: flick | 171 | id: flick | ||
| 163 | width: imageWidth | 172 | width: imageWidth | ||
| 164 | height: imageHeight | 173 | height: imageHeight | ||
| 165 | contentWidth: imageWidth | 174 | contentWidth: imageWidth | ||
| 166 | contentHeight: imageHeight | 175 | contentHeight: imageHeight | ||
| ▲ Show 20 Lines • Show All 132 Lines • ▼ Show 20 Line(s) | 286 | onWheel: { | |||
| 299 | } | 308 | } | ||
| 300 | } | 309 | } | ||
| 301 | } | 310 | } | ||
| 302 | } | 311 | } | ||
| 303 | } | 312 | } | ||
| 304 | } | 313 | } | ||
| 305 | } | 314 | } | ||
| 306 | 315 | | |||
| 316 | PathView { | ||||
mart: i don't like the image being resized to make space for this. (content should take every… | |||||
| 317 | id: footerList | ||||
| 318 | height: Kirigami.Units.gridUnit * 4 | ||||
| 319 | model: listView.model | ||||
| 320 | currentIndex: listView.currentIndex | ||||
| 321 | pathItemCount: applicationWindow().width / (Kirigami.Units.gridUnit * 5) | ||||
| 322 | interactive: false | ||||
| 323 | | ||||
| 324 | preferredHighlightBegin: 0.5 | ||||
| 325 | preferredHighlightEnd: 0.5 | ||||
| 326 | highlightRangeMode: PathView.StrictlyEnforceRange | ||||
| 327 | | ||||
| 328 | Behavior on opacity { OpacityAnimator { duration: 500}} | ||||
| 329 | | ||||
| 330 | path: Path { | ||||
| 331 | startX: 0 | ||||
| 332 | startY: applicationWindow().height - (Kirigami.Units.gridUnit * 5) | ||||
| 333 | PathAttribute { name: "iconScale"; value: 0.5 } | ||||
| 334 | PathLine { | ||||
| 335 | x: applicationWindow().width / 2 | ||||
| 336 | y: applicationWindow().height - (Kirigami.Units.gridUnit * 5) | ||||
| 337 | } | ||||
or should we just remove the highlight atulsharma: or should we just remove the highlight
and try to keep the currentItem in the horizontalCenter… | |||||
atulsharma: but not sure how? | |||||
perhaps the highlight could even be an ivisible item, then we could try to abuse preferredhighlightbegin/preferredhighlightend mart: perhaps the highlight could even be an ivisible item, then we could try to abuse… | |||||
| 338 | PathAttribute { name: "iconScale"; value: 1.5 } | ||||
this breaks the currentIndex change when the main image is changed due to flicking atulsharma: this breaks the currentIndex change when the main image is changed due to flicking | |||||
| 339 | PathLine { | ||||
| 340 | x: applicationWindow().width | ||||
| 341 | y: applicationWindow().height - (Kirigami.Units.gridUnit * 5) | ||||
| 342 | } | ||||
| 343 | PathAttribute { name: "iconScale"; value: 0.5 } | ||||
| 344 | } | ||||
| 345 | | ||||
| 346 | delegate: Item { | ||||
| 347 | scale: PathView.iconScale | ||||
| 348 | height: Kirigami.Units.gridUnit * 4 | ||||
| 349 | width: height | ||||
| 350 | KQA.QImageItem { | ||||
| 351 | height: Kirigami.Units.gridUnit * 3.8 | ||||
| 352 | width: height | ||||
| 353 | anchors.centerIn: parent | ||||
| 354 | image: model.thumbnail | ||||
| 355 | } | ||||
| 356 | } | ||||
| 357 | } | ||||
| 358 | | ||||
| 307 | //FIXME: placeholder, will have to use the state machine | 359 | //FIXME: placeholder, will have to use the state machine | ||
| 308 | Controls.Button { | 360 | Controls.Button { | ||
| 309 | text: i18n("Back") | 361 | text: i18n("Back") | ||
| 310 | onClicked: root.state = "closed" | 362 | onClicked: root.state = "closed" | ||
| 311 | } | 363 | } | ||
| 312 | } | 364 | } | ||
i don't like the image being resized to make space for this. (content should take every available pixel)
i think this should either go over the other item or if stays in the footer, the foother should be an item of 0 height, and this overflowing from it.
by default this shouldn't be visible, perhaps should be shown only when the image changes for few seconds then autohide (or mouse cursor going to bottom margin when in full screen, like an autohide panel)