From 3238e18d6b0dc45d2e765fb0b93da5cbf3f396ec Mon Sep 17 00:00:00 2001 From: Bumjoon Park Date: Thu, 23 Mar 2023 17:11:12 +0900 Subject: Keyinteraction example: Update by coding conventions from official doc - string are translated. - JS statements no longer end with semi-colon. - Fix qmllint warning. Change-Id: I83f2b702c9bb9f02f86728e2277297272cd75251 Reviewed-by: Mitch Curtis (cherry picked from commit 023849fce46d25edc41db7b7c9e275cb0de5c189) Reviewed-by: Qt Cherry-pick Bot --- examples/quick/keyinteraction/ContextMenu.qml | 9 ++- examples/quick/keyinteraction/GridMenu.qml | 52 +++++++++++--- examples/quick/keyinteraction/ListMenu.qml | 82 +++++++++++++++++----- examples/quick/keyinteraction/ListViewDelegate.qml | 30 ++++++-- examples/quick/keyinteraction/TabMenu.qml | 45 +++++++++--- examples/quick/keyinteraction/focus.qml | 40 ++++++++--- 6 files changed, 204 insertions(+), 54 deletions(-) diff --git a/examples/quick/keyinteraction/ContextMenu.qml b/examples/quick/keyinteraction/ContextMenu.qml index 6364118602..22d149fd9d 100644 --- a/examples/quick/keyinteraction/ContextMenu.qml +++ b/examples/quick/keyinteraction/ContextMenu.qml @@ -5,6 +5,7 @@ import QtQuick FocusScope { id: container + required property Item keyRightTarget property bool open: false @@ -19,10 +20,14 @@ FocusScope { Keys.onRightPressed: container.keyRightTarget.focus = true Text { - anchors { top: parent.top; horizontalCenter: parent.horizontalCenter; margins: 30 } + anchors { + top: parent.top + horizontalCenter: parent.horizontalCenter + margins: 30 + } color: "black" font.pixelSize: 14 - text: "Context Menu" + text: qsTr("Context Menu") } } } diff --git a/examples/quick/keyinteraction/GridMenu.qml b/examples/quick/keyinteraction/GridMenu.qml index d21f846089..b17a72bdc8 100644 --- a/examples/quick/keyinteraction/GridMenu.qml +++ b/examples/quick/keyinteraction/GridMenu.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 FocusScope { id: menu + property alias interactive: gridView.interactive required property Item keyUpTarget required property Item keyDownTarget @@ -14,14 +16,24 @@ FocusScope { anchors.fill: parent clip: true gradient: Gradient { - GradientStop { position: 0.0; color: "#193441" } - GradientStop { position: 1.0; color: Qt.darker("#193441") } + GradientStop { + position: 0.0 + color: "#193441" + } + GradientStop { + position: 1.0 + color: Qt.darker("#193441") + } } GridView { id: gridView - anchors.fill: parent; anchors.leftMargin: 20; anchors.rightMargin: 20 - cellWidth: 152; cellHeight: 152 + + anchors.fill: parent + anchors.leftMargin: 20 + anchors.rightMargin: 20 + cellWidth: 152 + cellHeight: 152 focus: true model: 12 @@ -31,22 +43,36 @@ FocusScope { delegate: Item { id: container - width: GridView.view.cellWidth - height: GridView.view.cellHeight + + width: gridView.cellWidth + height: gridView.cellHeight required property int index Rectangle { id: content + color: "transparent" antialiasing: true - anchors.fill: parent; anchors.margins: 20; radius: 10 + anchors.fill: parent + anchors.margins: 20 + radius: 10 - Rectangle { color: "#91AA9D"; anchors.fill: parent; anchors.margins: 3; radius: 8; antialiasing: true } - Image { source: "images/qt-logo.png"; anchors.centerIn: parent } + Rectangle { + color: "#91AA9D" + anchors.fill: parent + anchors.margins: 3 + radius: 8 + antialiasing: true + } + Image { + source: "images/qt-logo.png" + anchors.centerIn: parent + } } MouseArea { id: mouseArea + anchors.fill: parent hoverEnabled: true @@ -57,7 +83,8 @@ FocusScope { } states: State { - name: "active"; when: container.activeFocus + name: "active" + when: container.activeFocus PropertyChanges { content { color: "#FCFFF5" @@ -67,7 +94,10 @@ FocusScope { } transitions: Transition { - NumberAnimation { properties: "scale"; duration: 100 } + NumberAnimation { + properties: "scale" + duration: 100 + } } } } diff --git a/examples/quick/keyinteraction/ListMenu.qml b/examples/quick/keyinteraction/ListMenu.qml index 47201099ff..0f4763e1b2 100644 --- a/examples/quick/keyinteraction/ListMenu.qml +++ b/examples/quick/keyinteraction/ListMenu.qml @@ -6,67 +6,117 @@ import QtQuick FocusScope { id: menu + clip: true required property Item keyUpTarget required property Item keyLeftTarget ListView { id: list1 - y: activeFocus ? 10 : 40; width: parent.width / 3; height: parent.height - 20 + + y: activeFocus ? 10 : 40 + width: parent.width / 3 + height: parent.height - 20 focus: true + KeyNavigation.up: menu.keyUpTarget KeyNavigation.left: menu.keyLeftTarget KeyNavigation.right: list2 - model: 10; cacheBuffer: 200 + + model: 10 + cacheBuffer: 200 delegate: ListViewDelegate {} Behavior on y { - NumberAnimation { duration: 600; easing.type: Easing.OutQuint } + NumberAnimation { + duration: 600 + easing.type: Easing.OutQuint + } } } ListView { id: list2 - y: activeFocus ? 10 : 40; x: parseInt(parent.width / 3); width: parent.width / 3; height: parent.height - 20 + + y: activeFocus ? 10 : 40 + x: parseInt(parent.width / 3) + width: parent.width / 3 + height: parent.height - 20 + KeyNavigation.up: menu.keyUpTarget KeyNavigation.left: list1 KeyNavigation.right: list3 - model: 10; cacheBuffer: 200 + + model: 10 + cacheBuffer: 200 delegate: ListViewDelegate {} Behavior on y { - NumberAnimation { duration: 600; easing.type: Easing.OutQuint } + NumberAnimation { + duration: 600 + easing.type: Easing.OutQuint + } } } ListView { id: list3 - y: activeFocus ? 10 : 40; x: parseInt(2 * parent.width / 3); width: parent.width / 3; height: parent.height - 20 + + y: activeFocus ? 10 : 40 + x: parseInt(2 * parent.width / 3) + width: parent.width / 3 + height: parent.height - 20 + KeyNavigation.up: menu.keyUpTarget KeyNavigation.left: list2 - model: 10; cacheBuffer: 200 + + model: 10 + cacheBuffer: 200 delegate: ListViewDelegate {} Behavior on y { - NumberAnimation { duration: 600; easing.type: Easing.OutQuint } + NumberAnimation { + duration: 600 + easing.type: Easing.OutQuint + } } } - Rectangle { width: parent.width; height: 1; color: "#D1DBBD" } + Rectangle { + width: parent.width + height: 1 + color: "#D1DBBD" + } Rectangle { - y: 1; width: parent.width; height: 10 + y: 1 + width: parent.width + height: 10 gradient: Gradient { - GradientStop { position: 0.0; color: "#3E606F" } - GradientStop { position: 1.0; color: "transparent" } + GradientStop { + position: 0.0 + color: "#3E606F" + } + GradientStop { + position: 1.0 + color: "transparent" + } } } Rectangle { - y: parent.height - 10; width: parent.width; height: 10 + y: parent.height - 10 + width: parent.width + height: 10 gradient: Gradient { - GradientStop { position: 1.0; color: "#3E606F" } - GradientStop { position: 0.0; color: "transparent" } + GradientStop { + position: 1.0 + color: "#3E606F" + } + GradientStop { + position: 0.0 + color: "transparent" + } } } } diff --git a/examples/quick/keyinteraction/ListViewDelegate.qml b/examples/quick/keyinteraction/ListViewDelegate.qml index 4b2424f393..8ae43c8ab5 100644 --- a/examples/quick/keyinteraction/ListViewDelegate.qml +++ b/examples/quick/keyinteraction/ListViewDelegate.qml @@ -7,28 +7,42 @@ Item { id: container required property int index - width: ListView.view.width; height: 60; anchors.leftMargin: 10; anchors.rightMargin: 10 + width: ListView.view.width + height: 60 + anchors.leftMargin: 10 + anchors.rightMargin: 10 Rectangle { id: content - anchors.centerIn: parent; width: container.width - 40; height: container.height - 10 + + anchors.centerIn: parent + width: container.width - 40 + height: container.height - 10 color: "transparent" antialiasing: true radius: 10 - Rectangle { anchors.fill: parent; anchors.margins: 3; color: "#91AA9D"; antialiasing: true; radius: 8 } + Rectangle { + anchors.fill: parent + anchors.margins: 3 + color: "#91AA9D" + antialiasing: true + radius: 8 + } } Text { id: label + anchors.centerIn: content - text: "List element " + (container.index + 1) + text: qsTr("List element ") + (container.index + 1) color: "#193441" font.pixelSize: 14 } MouseArea { id: mouseArea + anchors.fill: parent hoverEnabled: true @@ -39,7 +53,8 @@ Item { } states: State { - name: "active"; when: container.activeFocus + name: "active" + when: container.activeFocus PropertyChanges { content { color: "#FCFFF5" @@ -50,6 +65,9 @@ Item { } transitions: Transition { - NumberAnimation { properties: "scale"; duration: 100 } + NumberAnimation { + properties: "scale" + duration: 100 + } } } diff --git a/examples/quick/keyinteraction/TabMenu.qml b/examples/quick/keyinteraction/TabMenu.qml index e3c622aca1..04451b3206 100644 --- a/examples/quick/keyinteraction/TabMenu.qml +++ b/examples/quick/keyinteraction/TabMenu.qml @@ -1,6 +1,7 @@ // Copyright (C) 2021 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +pragma ComponentBehavior: Bound import QtQuick FocusScope { @@ -12,19 +13,30 @@ FocusScope { anchors.fill: parent clip: true gradient: Gradient { - GradientStop { position: 0.0; color: "#193441" } - GradientStop { position: 1.0; color: Qt.darker("#193441") } + GradientStop { + position: 0.0 + color: "#193441" + } + GradientStop { + position: 1.0 + color: Qt.darker("#193441") + } } Row { id: tabView - anchors.fill: parent; anchors.leftMargin: 20; anchors.rightMargin: 20 + + anchors.fill: parent + anchors.leftMargin: 20 + anchors.rightMargin: 20 Repeater { activeFocusOnTab: false model: 5 Item { id: container - width: 152; height: 152 + + width: 152 + height: 152 activeFocusOnTab: true focus: true @@ -35,10 +47,21 @@ FocusScope { id: content color: "transparent" antialiasing: true - anchors.fill: parent; anchors.margins: 20; radius: 10 + anchors.fill: parent + anchors.margins: 20 + radius: 10 - Rectangle { color: "#91AA9D"; anchors.fill: parent; anchors.margins: 3; radius: 8; antialiasing: true } - Image { source: "images/qt-logo.png"; anchors.centerIn: parent } + Rectangle { + color: "#91AA9D" + anchors.fill: parent + anchors.margins: 3 + radius: 8 + antialiasing: true + } + Image { + source: "images/qt-logo.png" + anchors.centerIn: parent + } } MouseArea { @@ -52,7 +75,8 @@ FocusScope { } states: State { - name: "active"; when: container.activeFocus + name: "active" + when: container.activeFocus PropertyChanges { content { color: "#FCFFF5" @@ -62,7 +86,10 @@ FocusScope { } transitions: Transition { - NumberAnimation { properties: "scale"; duration: 100 } + NumberAnimation { + properties: "scale" + duration: 100 + } } } } diff --git a/examples/quick/keyinteraction/focus.qml b/examples/quick/keyinteraction/focus.qml index 385f35d05b..42edcb5f01 100644 --- a/examples/quick/keyinteraction/focus.qml +++ b/examples/quick/keyinteraction/focus.qml @@ -7,18 +7,23 @@ import QtQuick Rectangle { id: window - width: 800; height: 640 + width: 800 + height: 640 color: "#3E606F" FocusScope { id: mainView - width: parent.width; height: parent.height + width: parent.width + height: parent.height focus: true TabMenu { id: tabMenu - y: 160; width: parent.width; height: 160 + + y: 160 + width: parent.width + height: 160 keyUpTarget: listMenu keyDownTarget: gridMenu @@ -34,7 +39,10 @@ Rectangle { GridMenu { id: gridMenu - y: 320; width: parent.width; height: 320 + + y: 320 + width: parent.width + height: 320 activeFocusOnTab: true keyUpTarget: tabMenu @@ -49,7 +57,10 @@ Rectangle { ListMenu { id: listMenu - y: 640; width: parent.width; height: 320 + + y: 640 + width: parent.width + height: 320 activeFocusOnTab: true keyUpTarget: gridMenu @@ -72,7 +83,7 @@ Rectangle { State { name: "showTabViews" PropertyChanges { - tabMenu.y: 160 + tabMenu.y: 160 gridMenu.y: 320 listMenu.y: 640 } @@ -81,7 +92,7 @@ Rectangle { State { name: "showGridViews" PropertyChanges { - tabMenu.y: 0 + tabMenu.y: 0 gridMenu.y: 160 listMenu.y: 480 } @@ -98,7 +109,11 @@ Rectangle { ] transitions: Transition { - NumberAnimation { properties: "y"; duration: 600; easing.type: Easing.OutQuint } + NumberAnimation { + properties: "y" + duration: 600 + easing.type: Easing.OutQuint + } } } @@ -108,7 +123,8 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter MouseArea { - anchors.fill: parent; anchors.margins: -10 + anchors.fill: parent + anchors.margins: -10 onClicked: contextMenu.focus = true } } @@ -135,6 +151,10 @@ Rectangle { } transitions: Transition { - NumberAnimation { properties: "x,opacity"; duration: 600; easing.type: Easing.OutQuint } + NumberAnimation { + properties: "x,opacity" + duration: 600 + easing.type: Easing.OutQuint + } } } -- cgit v1.2.3