Коммит 5f6f3ccb создал по автору Alexander Kazantcev's avatar Alexander Kazantcev Зафиксировано автором Alexey Andreev
Просмотр файлов

[Cover] Update covers page. #29

владелец e02b4c77
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <community@omp.ru>
// SPDX-FileCopyrightText: 2023 - 2024 Open Mobile Platform LLC <community@omp.ru>
// SPDX-FileCopyrightText: 2013 Jolla Ltd
// SPDX-License-Identifier: BSD-3-Clause
......@@ -8,20 +8,17 @@ import Sailfish.Silica 1.0
Page {
id: coverPage
property Item templateCoverObject: coverCombo.currentItem === templateCover ? mainWindow._coverObject : null
//% "Hello, Covers!"
property string message: qsTrId("ui-component-gallery-cover-hello-covers")
function displayAction(text) {
message = text;
clearActionTimer.start();
}
onStatusChanged: {
if (status == PageStatus.Deactivating) {
applicationWindow.cover = "private/DefaultCover.qml";
oneCoverAction.enabled = false;
twoCoverActions.enabled = false;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
function updateCover(actionText, counterEnabled) {
if (actionText) {
message = actionText;
clearActionTimer.start();
}
if (templateCoverObject) {
templateCoverObject.counterEnabled = counterEnabled;
}
}
......@@ -35,45 +32,71 @@ Page {
id: twoCoverActions
enabled: false
iconBackground: iconBackgroundSwitch.checked
CoverAction {
iconSource: "image://theme/icon-cover-pause"
//% "Pause"
onTriggered: displayAction(qsTrId("ui-component-gallery-cover-pause"))
onTriggered: updateCover(qsTrId("ui-component-gallery-cover-pause"), false)
}
CoverAction {
iconSource: "image://theme/icon-cover-next"
//% "Next"
onTriggered: displayAction(qsTrId("ui-component-gallery-cover-next"))
onTriggered: updateCover(qsTrId("ui-component-gallery-cover-next"), true)
}
}
CoverActionList {
id: oneCoverAction
property bool next: true
enabled: false
iconBackground: iconBackgroundSwitch.checked
CoverAction {
property bool next: true
iconSource: next ? "image://theme/icon-cover-next" : "image://theme/icon-cover-pause"
iconSource: oneCoverAction.next ? "image://theme/icon-cover-next" : "image://theme/icon-cover-pause"
onTriggered: {
if (next) {
updateCover(oneCoverAction.next ?
//% "Next"
displayAction(qsTrId("ui-component-gallery-cover-next"));
} else {
qsTrId("ui-component-gallery-cover-next") :
//% "Pause"
displayAction(qsTrId("ui-component-gallery-cover-pause"));
}
next = !next;
qsTrId("ui-component-gallery-cover-pause"), oneCoverAction.next);
oneCoverAction.next = !oneCoverAction.next;
}
}
}
CoverActionList {
id: threeCoverAction
enabled: false
iconBackground: iconBackgroundSwitch.checked
CoverAction {
iconSource: "image://theme/icon-cover-pause"
//% "Pause"
onTriggered: updateCover(qsTrId("ui-component-gallery-cover-pause"), false)
}
CoverAction {
iconSource: "image://theme/icon-cover-refresh"
onTriggered: mainWindow.activate()
}
CoverAction {
iconSource: "image://theme/icon-cover-next"
//% "Next"
onTriggered: updateCover(qsTrId("ui-component-gallery-cover-next"), true)
}
}
CoverActionList {
id: changeCoverActionA
enabled: false
iconBackground: iconBackgroundSwitch.checked
CoverAction {
iconSource: "image://theme/icon-cover-next"
......@@ -81,7 +104,7 @@ Page {
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = true;
//% "A"
displayAction(qsTrId("ui-component-gallery-cover-a"));
updateCover(qsTrId("ui-component-gallery-cover-a"), true);
}
}
}
......@@ -90,6 +113,7 @@ Page {
id: changeCoverActionB
enabled: false
iconBackground: iconBackgroundSwitch.checked
CoverAction {
iconSource: "image://theme/icon-cover-pause"
......@@ -97,7 +121,7 @@ Page {
changeCoverActionB.enabled = false;
changeCoverActionA.enabled = true;
//% "B"
displayAction(qsTrId("ui-component-gallery-cover-b"));
updateCover(qsTrId("ui-component-gallery-cover-b"), false);
}
}
}
......@@ -109,46 +133,57 @@ Page {
id: column
width: parent.width
PageHeader {
//% "Covers"
title: qsTrId("ui-component-gallery-cover-covers")
title: "Covers"
}
ComboBox {
id: coverCombo
//% "Select cover:"
label: qsTrId("ui-component-gallery-cover-select-cover")
label: "Select cover:"
width: parent.width
menu: ContextMenu {
MenuItem {
// Do not set the default cover in an application,
// the path may change without prior notice.
// The default cover is included only to provide an idea
// what a coverless application will show in the switcher.
//% "Default cover (no actions)"
text: qsTrId("ui-component-gallery-cover-default-cover-no-actions")
//% "No cover"
text: qsTrId("ui-component-gallery-cover-no-cover")
onClicked: {
mainWindow.cover = null;
}
}
MenuItem {
id: templateCover
//% "CoverTemplate-based"
text: qsTrId("ui-component-gallery-cover-cover-template-based")
onClicked: {
mainWindow.cover = Qt.resolvedUrl("CoverTemplateExample.qml");
}
}
MenuItem {
// Available only for tablet devices.
//% "Orientation dependent"
text: qsTrId("ui-component-gallery-cover-orientation-dependent")
onClicked: {
applicationWindow.cover = "private/DefaultCover.qml";
mainWindow.cover = orientatedCover;
}
}
MenuItem {
//% "Component-based blue"
text: qsTrId("ui-component-gallery-cover-component-based-blue")
onClicked: {
applicationWindow.cover = blueCover;
mainWindow.cover = blueCover;
}
}
MenuItem {
//% "Inline green"
text: qsTrId("ui-component-gallery-cover-inline-green")
onClicked: {
applicationWindow.cover = greenCover;
mainWindow.cover = greenCover;
}
}
MenuItem {
//% "External file red (no actions)"
text: qsTrId("ui-component-gallery-cover-external-file-red-no-actions")
onClicked: {
applicationWindow.cover = Qt.resolvedUrl("CoverExample.qml");
mainWindow.cover = Qt.resolvedUrl("CoverExample.qml");
}
}
MenuItem {
......@@ -156,27 +191,30 @@ Page {
//% "Altering blue and green"
text: qsTrId("ui-component-gallery-cover-altering-blue-and-green")
}
MenuItem {
//% "No cover"
text: qsTrId("ui-component-gallery-cover-no-cover")
onClicked: {
applicationWindow.cover = null;
}
}
}
}
ComboBox {
//% "Actions:"
label: qsTrId("ui-component-gallery-cover-actions")
id: actionsCombo
onCurrentIndexChanged: {
iconBackgroundSwitch.enabled = actionsCombo.currentIndex > 0;
if (!iconBackgroundSwitch.enabled) {
iconBackgroundSwitch.checked = false;
}
}
label: "Actions:"
width: parent.width
menu: ContextMenu {
MenuItem {
//% "No actions"
text: qsTrId("ui-component-gallery-cover-no-actions")
onClicked: {
updateCover(undefined, false);
oneCoverAction.enabled = false;
twoCoverActions.enabled = false;
threeCoverAction.enabled = false;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
}
......@@ -185,8 +223,10 @@ Page {
//% "One action (next)"
text: qsTrId("ui-component-gallery-cover-one-action-next")
onClicked: {
updateCover(undefined, !oneCoverAction.next);
oneCoverAction.enabled = true;
twoCoverActions.enabled = false;
threeCoverAction.enabled = false;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
}
......@@ -195,8 +235,22 @@ Page {
//% "Two actions (pause, next)"
text: qsTrId("ui-component-gallery-cover-two-actions-pause-next")
onClicked: {
updateCover(undefined, true);
oneCoverAction.enabled = false;
twoCoverActions.enabled = true;
threeCoverAction.enabled = false;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
}
}
MenuItem {
//% "Thee actions (pause, activate, next)"
text: qsTrId("ui-component-gallery-cover-thee-actions-pause-activate-next")
onClicked: {
updateCover(undefined, true);
oneCoverAction.enabled = false;
twoCoverActions.enabled = false;
threeCoverAction.enabled = true;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
}
......@@ -205,14 +259,24 @@ Page {
//% "Dynamically changing actions"
text: qsTrId("ui-component-gallery-cover-dynamically-changing-actions")
onClicked: {
twoCoverActions.enabled = false;
updateCover(undefined, false);
oneCoverAction.enabled = false;
twoCoverActions.enabled = false;
threeCoverAction.enabled = false;
changeCoverActionB.enabled = false;
changeCoverActionA.enabled = true;
}
}
}
}
TextSwitch {
id: iconBackgroundSwitch
//% "Show cover actions background"
text: qsTrId("ui-component-gallery-cover-show-cover-actions-background")
enabled: false
}
}
}
......@@ -226,10 +290,10 @@ Page {
}
onTriggered: {
if (applicationWindow.cover !== greenCover)
applicationWindow.cover = greenCover;
if (mainWindow.cover !== greenCover)
mainWindow.cover = greenCover;
else
applicationWindow.cover = blueCover;
mainWindow.cover = blueCover;
}
}
......@@ -259,4 +323,69 @@ Page {
}
}
}
Component {
id: orientatedCover
Cover {
property bool isVerticalCover: orientation === Cover.Vertical
Grid {
anchors.fill: parent
columns: isVerticalCover ? 1 : 2
spacing: 0
Rectangle {
id: firstRect
width: isVerticalCover ? parent.width : parent.width / 2
height: isVerticalCover ? parent.height / 2 : parent.height
color: Theme.highlightColor
}
Rectangle {
// second rect
width: firstRect.width
height: firstRect.height
color: Theme.secondaryColor
}
}
Label {
anchors.centerIn: parent
text: isVerticalCover ?
//% "Vertical cover"
qsTrId("ui-component-gallery-cover-vertical-cover") :
//% "Horizontal cover"
qsTrId("ui-component-gallery-cover-horizontal-cover")
color: "black"
}
Rectangle {
anchors {
fill: parent
margins: Theme.paddingCover
}
color: "transparent"
border.color: "red"
}
}
}
Component.onCompleted: {
// Set the default application cover ("No cover") for current page
mainWindow.cover = null;
}
Component.onDestruction: {
oneCoverAction.enabled = false;
twoCoverActions.enabled = false;
threeCoverAction.enabled = false;
changeCoverActionA.enabled = false;
changeCoverActionB.enabled = false;
// Restore to default application cover
mainWindow.cover = Qt.resolvedUrl("Cover.qml");
}
}
// SPDX-FileCopyrightText: 2023 - 2024 Open Mobile Platform LLC <community@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
import QtQuick 2.6
import Sailfish.Silica 1.0
CoverBackground {
id: cover
property bool counterEnabled: true
property int counter
CoverTemplate {
id: template
primaryText: cover.counter
//% "Multiline secondary text"
secondaryText: qsTrId("ui-component-gallery-cover-template-example-multiline-secondary-text")
//% "Multiline long long long description text"
description: qsTrId("ui-component-gallery-cover-template-example-multiline-long-long-long-description-text")
icon.source: "image://theme/icon-splus-error"
}
Timer {
onTriggered: cover.counter++
running: cover.counterEnabled
repeat: true
interval: 500
}
SequentialAnimation {
running: true
loops: Animation.Infinite
FadeAnimation {
target: template.icon
duration: 1000
to: 0
}
FadeAnimation {
target: template.icon
duration: 1000
to: 1
}
}
}
......@@ -390,18 +390,6 @@
<source>B</source>
<translation>B</translation>
</message>
<message id="ui-component-gallery-cover-covers">
<source>Covers</source>
<translation>Обложки</translation>
</message>
<message id="ui-component-gallery-cover-select-cover">
<source>Select cover:</source>
<translation>Выберите обложку:</translation>
</message>
<message id="ui-component-gallery-cover-default-cover-no-actions">
<source>Default cover (no actions)</source>
<translation>Обложка по умолчанию (без действий)</translation>
</message>
<message id="ui-component-gallery-cover-component-based-blue">
<source>Component-based blue</source>
<translation>Синяя на основе компонента</translation>
......@@ -422,10 +410,6 @@
<source>No cover</source>
<translation>Без обложки</translation>
</message>
<message id="ui-component-gallery-cover-actions">
<source>Actions:</source>
<translation>Действия:</translation>
</message>
<message id="ui-component-gallery-cover-no-actions">
<source>No actions</source>
<translation>Без действий</translation>
......@@ -3970,5 +3954,37 @@
<source>Custom Item</source>
<translation>Произвольный элемент</translation>
</message>
<message id="ui-component-gallery-cover-cover-template-based">
<source>CoverTemplate-based</source>
<translation>Обложка на основе шаблона</translation>
</message>
<message id="ui-component-gallery-cover-orientation-dependent">
<source>Orientation dependent</source>
<translation>В зависимости от поворота экрана</translation>
</message>
<message id="ui-component-gallery-cover-thee-actions-pause-activate-next">
<source>Thee actions (pause, activate, next)</source>
<translation>Три действия (пауза, активировать, далее)</translation>
</message>
<message id="ui-component-gallery-cover-show-cover-actions-background">
<source>Show cover actions background</source>
<translation>Показать фон для действий обложки</translation>
</message>
<message id="ui-component-gallery-cover-vertical-cover">
<source>Vertical cover</source>
<translation>Вертикальная обложка</translation>
</message>
<message id="ui-component-gallery-cover-horizontal-cover">
<source>Horizontal cover</source>
<translation>Горизонтальная обложка</translation>
</message>
<message id="ui-component-gallery-cover-template-example-multiline-secondary-text">
<source>Multiline secondary text</source>
<translation>Многострочный дополнительный текст</translation>
</message>
<message id="ui-component-gallery-cover-template-example-multiline-long-long-long-description-text">
<source>Multiline long long long description text</source>
<translation>Многострочный длинный длинный длинный текст описания</translation>
</message>
</context>
</TS>
......@@ -390,18 +390,6 @@
<source>B</source>
<translation>B</translation>
</message>
<message id="ui-component-gallery-cover-covers">
<source>Covers</source>
<translation>Covers</translation>
</message>
<message id="ui-component-gallery-cover-select-cover">
<source>Select cover:</source>
<translation>Select cover:</translation>
</message>
<message id="ui-component-gallery-cover-default-cover-no-actions">
<source>Default cover (no actions)</source>
<translation>Default cover (no actions)</translation>
</message>
<message id="ui-component-gallery-cover-component-based-blue">
<source>Component-based blue</source>
<translation>Component-based blue</translation>
......@@ -422,10 +410,6 @@
<source>No cover</source>
<translation>No cover</translation>
</message>
<message id="ui-component-gallery-cover-actions">
<source>Actions:</source>
<translation>Actions:</translation>
</message>
<message id="ui-component-gallery-cover-no-actions">
<source>No actions</source>
<translation>No actions</translation>
......@@ -3970,5 +3954,37 @@
<source>Custom Item</source>
<translation>Custom Item</translation>
</message>
<message id="ui-component-gallery-cover-cover-template-based">
<source>CoverTemplate-based</source>
<translation>CoverTemplate-based</translation>
</message>
<message id="ui-component-gallery-cover-orientation-dependent">
<source>Orientation dependent</source>
<translation>Orientation dependent</translation>
</message>
<message id="ui-component-gallery-cover-thee-actions-pause-activate-next">
<source>Thee actions (pause, activate, next)</source>
<translation>Thee actions (pause, activate, next)</translation>
</message>
<message id="ui-component-gallery-cover-show-cover-actions-background">
<source>Show cover actions background</source>
<translation>Show cover actions background</translation>
</message>
<message id="ui-component-gallery-cover-vertical-cover">
<source>Vertical cover</source>
<translation>Vertical cover</translation>
</message>
<message id="ui-component-gallery-cover-horizontal-cover">
<source>Horizontal cover</source>
<translation>Horizontal cover</translation>
</message>
<message id="ui-component-gallery-cover-template-example-multiline-secondary-text">
<source>Multiline secondary text</source>
<translation>Multiline secondary text</translation>
</message>
<message id="ui-component-gallery-cover-template-example-multiline-long-long-long-description-text">
<source>Multiline long long long description text</source>
<translation>Multiline long long long description text</translation>
</message>
</context>
</TS>
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать