Imageelements example: Update by coding conventions from official doc

- Fix qmllint warning. - string are translated. - JS statements no longer end with semi-colon. Change-Id: I39236ffa20fd1131609f170c64ecb4e68273539a Reviewed-by: Mitch Curtis <mitch.curtis@qt.io> (cherry picked from commit a7248458f7) Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
2023-03-30 16:12:28 +09:00 · 2023-03-30 16:12:28 +09:00 · 8cf93156df
parent 1d91a35736
commit 8cf93156df
13 changed files with 185 additions and 71 deletions
--- a/examples/quick/imageelements/BorderImageSelector.qml
+++ b/examples/quick/imageelements/BorderImageSelector.qml
@ -1,10 +1,12 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

+pragma ComponentBehavior: Bound
 import QtQuick

 Item {
    id: selector
+
    property int curIdx: 0
    property int maxIdx: 3
    property int gridWidth: 240
@ -12,11 +14,11 @@ Item {
    width: parent.width
    height: 64
    function advance(steps) {
-         var nextIdx = curIdx + steps
+         const nextIdx = curIdx + steps
         if (nextIdx < 0 || nextIdx > maxIdx)
-            return;
-         flickable.contentX += gridWidth * steps;
-         curIdx += steps;
+            return
+         flickable.contentX += gridWidth * steps
+         curIdx += steps
    }
    Image {
        source: "pics/arrow.png"
--- a/examples/quick/imageelements/ImageCell.qml
+++ b/examples/quick/imageelements/ImageCell.qml
@ -9,13 +9,17 @@ Item {

    Image {
        id: image
-        width: parent.width; height: parent.height - captionItem.height
+
+        width: parent.width
+        height: parent.height - captionItem.height
        source: "pics/qt-logo.png"
        clip: true      // only makes a difference if mode is PreserveAspectCrop
    }

    Label {
        id: captionItem
-        anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
    }
 }
--- a/examples/quick/imageelements/MyBorderImage.qml
+++ b/examples/quick/imageelements/MyBorderImage.qml
@ -17,32 +17,43 @@ Item {
    property int maxHeight
    property int margin

-    width: 240; height: 200
+    width: 240
+    height: 200

    BorderImage {
-        id: image; anchors.centerIn: parent
+        id: image
+
+        anchors.centerIn: parent

        SequentialAnimation on width {
            loops: Animation.Infinite
            NumberAnimation {
-                from: container.minWidth; to: container.maxWidth
-                duration: 2000; easing.type: Easing.InOutQuad
+                from: container.minWidth
+                to: container.maxWidth
+                duration: 2000
+                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
-                from: container.maxWidth; to: container.minWidth
-                duration: 2000; easing.type: Easing.InOutQuad
+                from: container.maxWidth
+                to: container.minWidth
+                duration: 2000
+                easing.type: Easing.InOutQuad
            }
        }

        SequentialAnimation on height {
            loops: Animation.Infinite
            NumberAnimation {
-                from: container.minHeight; to: container.maxHeight
-                duration: 2000; easing.type: Easing.InOutQuad
+                from: container.minHeight
+                to: container.maxHeight
+                duration: 2000
+                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
-                from: container.maxHeight; to: container.minHeight
-                duration: 2000; easing.type: Easing.InOutQuad
+                from: container.maxHeight
+                to: container.minHeight
+                duration: 2000
+                easing.type: Easing.InOutQuad
            }
        }

--- a/examples/quick/imageelements/ShadowRectangle.qml
+++ b/examples/quick/imageelements/ShadowRectangle.qml
@ -9,11 +9,25 @@ Item {
 //! [shadow]
    BorderImage {
        anchors.fill: rectangle
-        anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
-        border { left: 10; top: 10; right: 10; bottom: 10 }
+        anchors {
+            leftMargin: -6
+            topMargin: -6
+            rightMargin: -8
+            bottomMargin: -8
+        }
+        border {
+            left: 10
+            top: 10
+            right: 10
+            bottom: 10
+        }
        source: "pics/shadow.png"
    }
 //! [shadow]

-    Rectangle { id: rectangle; anchors.fill: parent }
+    Rectangle {
+        id: rectangle
+
+        anchors.fill: parent
+    }
 }
--- a/examples/quick/imageelements/animatedimage.qml
+++ b/examples/quick/imageelements/animatedimage.qml
@ -12,6 +12,7 @@ Column {
 //! [image]
    AnimatedImage {
        id: animation
+
        source: "pics/Uniflow_steam_engine.gif"
        anchors.horizontalCenter: parent.horizontalCenter
        speed: speedSlider.value
@ -23,6 +24,7 @@ Column {

    Rectangle {
        id: timeline
+
        color: "steelblue"
        width: animation.width
        height: 1
@ -32,7 +34,8 @@ Column {

        Rectangle {
            property int frames: animation.frameCount
-            width: 4; height: 8
+            width: 4
+            height: 8
            x: (animation.width - width) * animation.currentFrame / frames
            y: -4
            color: "red"
@ -51,6 +54,7 @@ Column {

        Slider {
            id: speedSlider
+
            from: 0
            to: 5
            value: 1
@ -65,6 +69,7 @@ Column {

        TextMetrics {
            id: fontMetrics
+
            text: "100%"
            font.pointSize: 12
        }
--- a/examples/quick/imageelements/animatedsprite.qml
+++ b/examples/quick/imageelements/animatedsprite.qml
@ -14,6 +14,7 @@ Item {
 //! [sprite]
    AnimatedSprite {
        id: sprite
+
        anchors.centerIn: parent
        source: "pics/speaker.png"
        frameCount: 60
@ -34,21 +35,21 @@ Item {
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
        onClicked: (mouse) => {
            if (!sprite.running) {
-                sprite.start();
+                sprite.start()
            } else if (!sprite.paused) {
-                sprite.pause();
+                sprite.pause()
            } else {
                if (mouse.button === Qt.LeftButton)
-                    sprite.resume();
+                    sprite.resume()
                else if (mouse.button === Qt.MiddleButton)
-                    sprite.advance(-1);
+                    sprite.advance(-1)
                else if (mouse.button === Qt.RightButton)
-                    sprite.advance(1);
+                    sprite.advance(1)
            }
        }
    }

-    Component.onCompleted: console.log("Press Space to toggle visibility. Click with mouse to pause/resume.")
+    Component.onCompleted: console.log(qsTr("Press Space to toggle visibility. Click with mouse to pause/resume."))
    focus: true
    Keys.onSpacePressed: sprite.visible = !sprite.visible
 }
--- a/examples/quick/imageelements/borderimage.qml
+++ b/examples/quick/imageelements/borderimage.qml
@ -5,11 +5,13 @@ import QtQuick

 Rectangle {
    id: page
+
    width: 320
    height: 480

    BorderImageSelector {
        id: selector
+
        curIdx: 0
        maxIdx: 3
        gridWidth: 240
@ -20,6 +22,7 @@ Rectangle {

    Flickable {
        id: mainFlickable
+
        width: parent.width
        anchors.bottom: parent.bottom
        anchors.top: selector.bottom
@ -29,52 +32,91 @@ Rectangle {
        contentWidth: 1030
        contentHeight: 420
        Grid {
-            anchors.centerIn: parent; spacing: 20
+            anchors.centerIn: parent
+            spacing: 20

            MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
+                minWidth: 120
+                maxWidth: 240
+                minHeight: 120
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/colors.png")
+                margin: 30
            }

            MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
-                horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+                minWidth: 120
+                maxWidth: 240
+                minHeight: 120
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/colors.png")
+                margin: 30
+                horizontalMode: BorderImage.Repeat
+                verticalMode: BorderImage.Repeat
            }

            MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
-                horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+                minWidth: 120
+                maxWidth: 240
+                minHeight: 120
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/colors.png")
+                margin: 30
+                horizontalMode: BorderImage.Stretch
+                verticalMode: BorderImage.Repeat
            }

            MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
-                horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+                minWidth: 120
+                maxWidth: 240
+                minHeight: 120
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/colors.png")
+                margin: 30
+                horizontalMode: BorderImage.Round
+                verticalMode: BorderImage.Round
            }

            MyBorderImage {
-                minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
+                minWidth: 60
+                maxWidth: 200
+                minHeight: 40
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/bw.png")
+                margin: 10
            }

            MyBorderImage {
-                minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
-                horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+                minWidth: 60
+                maxWidth: 200
+                minHeight: 40
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/bw.png")
+                margin: 10
+                horizontalMode: BorderImage.Repeat
+                verticalMode: BorderImage.Repeat
            }

            MyBorderImage {
-                minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
-                horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+                minWidth: 60
+                maxWidth: 200
+                minHeight: 40
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/bw.png")
+                margin: 10
+                horizontalMode: BorderImage.Stretch
+                verticalMode: BorderImage.Repeat
            }

            MyBorderImage {
-                minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
-                horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+                minWidth: 60
+                maxWidth: 200
+                minHeight: 40
+                maxHeight: 200
+                source: Qt.resolvedUrl("pics/bw.png")
+                margin: 10
+                horizontalMode: BorderImage.Round
+                verticalMode: BorderImage.Round
            }
        }
    }
--- a/examples/quick/imageelements/framestepping.qml
+++ b/examples/quick/imageelements/framestepping.qml
@ -9,6 +9,7 @@ Rectangle {
    height: 320
    Image {
        id: img
+
        anchors.centerIn: parent
        cache: true
        source: "pics/multi.ico"
@ -30,7 +31,8 @@ Rectangle {
        anchors.bottom: parent.bottom
        anchors.margins: 6
        horizontalAlignment: Text.AlignHCenter
-        text: qsTr("frame " + (img.currentFrame + 1) + " of " + img.frameCount +
-              "\nPress PgUp/PgDn to switch frames")
+        text: qsTr("frame %1 of %2 \nPress PgUp/PgDn to switch frames")
+            .arg(img.currentFrame + 1)
+            .arg(img.frameCount)
    }
 }
--- a/examples/quick/imageelements/image.qml
+++ b/examples/quick/imageelements/image.qml
@ -1,12 +1,15 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

+pragma ComponentBehavior: Bound
 import QtQuick

 Rectangle {
    width: 320
    height: 480
    Grid {
+        id: grid
+
        property int cellWidth: (width - (spacing * (columns - 1))) / columns
        property int cellHeight: (height - (spacing * (rows - 1))) / rows

@ -18,8 +21,8 @@ Rectangle {
        spacing: 30

        component SizedImageCell: ImageCell {
-            width: parent.cellWidth
-            height: parent.cellHeight
+            width: grid.cellWidth
+            height: grid.cellHeight
        }

        SizedImageCell {
--- a/examples/quick/imageelements/imageelements.qml
+++ b/examples/quick/imageelements/imageelements.qml
@ -9,16 +9,17 @@ Item {
    width: 320
    Shared.LauncherList {
        id: ll
+
        anchors.fill: parent
        Component.onCompleted: {
-            addExample("BorderImage", "An image with scaled borders",  Qt.resolvedUrl("borderimage.qml"));
-            addExample("Image", "A showcase of the options available to Image", Qt.resolvedUrl("image.qml"));
-            addExample("Shadows", "Rectangles with a drop-shadow effect", Qt.resolvedUrl("shadows.qml"));
-            addExample("AnimatedImage", "An image which plays animated formats", Qt.resolvedUrl("animatedimage.qml"));
-            addExample("AnimatedSprite", "A simple sprite-based animation", Qt.resolvedUrl("animatedsprite.qml"));
-            addExample("SpriteSequence", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spritesequence.qml"));
-            addExample("FrameStepping", "A multi-frame non-animated image", Qt.resolvedUrl("framestepping.qml"));
-            addExample("MultiBorderImage", "A multi-frame image with scaled borders", Qt.resolvedUrl("multiframeborderimage.qml"));
+            addExample(qsTr("BorderImage"), qsTr("An image with scaled borders"),  Qt.resolvedUrl("borderimage.qml"))
+            addExample(qsTr("Image"), qsTr("A showcase of the options available to Image"), Qt.resolvedUrl("image.qml"))
+            addExample(qsTr("Shadows"), qsTr("Rectangles with a drop-shadow effect"), Qt.resolvedUrl("shadows.qml"))
+            addExample(qsTr("AnimatedImage"), qsTr("An image which plays animated formats"), Qt.resolvedUrl("animatedimage.qml"))
+            addExample(qsTr("AnimatedSprite"), qsTr("A simple sprite-based animation"), Qt.resolvedUrl("animatedsprite.qml"))
+            addExample(qsTr("SpriteSequence"), qsTr("A sprite-based animation with complex transitions"), Qt.resolvedUrl("spritesequence.qml"))
+            addExample(qsTr("FrameStepping"), qsTr("A multi-frame non-animated image"), Qt.resolvedUrl("framestepping.qml"))
+            addExample(qsTr("MultiBorderImage"), qsTr("A multi-frame image with scaled borders"), Qt.resolvedUrl("multiframeborderimage.qml"))
        }
    }
 }
--- a/examples/quick/imageelements/multiframeborderimage.qml
+++ b/examples/quick/imageelements/multiframeborderimage.qml
@ -9,11 +9,17 @@ Rectangle {
    height: 320
    BorderImage {
        id: img
+
        anchors.fill: parent
        anchors.margins: 6
        cache: true
        source: "pics/multi.ico"
-        border { left: 19; top: 19; right: 19; bottom: 19 }
+        border {
+            left: 19
+            top: 19
+            right: 19
+            bottom: 19
+        }
        horizontalTileMode: BorderImage.Stretch

        Shortcut {
--- a/examples/quick/imageelements/shadows.qml
+++ b/examples/quick/imageelements/shadows.qml
@ -6,21 +6,28 @@ import QtQuick
 Rectangle {
    id: window

-    width: 480; height: 320
+    width: 480
+    height: 320
    color: "gray"

    ShadowRectangle {
-        anchors.centerIn: parent; width: 250; height: 250
+        anchors.centerIn: parent
+        width: 250
+        height: 250
        color: "lightsteelblue"
    }

    ShadowRectangle {
-        anchors.centerIn: parent; width: 200; height: 200
+        anchors.centerIn: parent
+        width: 200
+        height: 200
        color: "steelblue"
    }

    ShadowRectangle {
-        anchors.centerIn: parent; width: 150; height: 150
+        anchors.centerIn: parent
+        width: 150
+        height: 150
        color: "thistle"
    }
 }
--- a/examples/quick/imageelements/spritesequence.qml
+++ b/examples/quick/imageelements/spritesequence.qml
@ -6,20 +6,36 @@ Item {
    width: 320
    height: 480
    MouseArea {
-        onClicked: anim.start();
+        onClicked: anim.start()
        anchors.fill: parent
    }
 //! [animation]
    SequentialAnimation {
        id: anim
-        ScriptAction { script: image.goalSprite = "falling"; }
-        NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; }
-        ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
-        PropertyAction { target: image; property: "y"; value: 0 }
+
+        ScriptAction { script: image.goalSprite = "falling" }
+        NumberAnimation {
+            target: image
+            property: "y"
+            to: 480
+            duration: 12000
+        }
+        ScriptAction {
+            script: {
+                image.goalSprite = ""
+                image.jumpTo("still")
+            }
+        }
+        PropertyAction {
+            target: image
+            property: "y"
+            value: 0
+        }
    }
 //! [animation]
    SpriteSequence {
        id: image
+
        width: 256
        height: 256
        anchors.horizontalCenter: parent.horizontalCenter