Открыть боковую панель
Aurora OS
Demos
UI Component Gallery
Коммиты
5f6f3ccb
Коммит
5f6f3ccb
создал
Янв 24, 2024
по автору
Alexander Kazantcev
Зафиксировано автором
Alexey Andreev
Фев 06, 2024
Просмотр файлов
[Cover] Update covers page.
#29
владелец
e02b4c77
Изменения
4
Скрыть пробелы
Построчно
Рядом
qml/pages/CoverPage.qml
Просмотр файла @
5f6f3ccb
// 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
:
{
applicatio
nWindow
.
cover
=
"
private/DefaultCover.qml
"
;
mai
nWindow
.
cover
=
orientatedCover
;
}
}
MenuItem
{
//% "Component-based blue"
text
:
qsTrId
(
"
ui-component-gallery-cover-component-based-blue
"
)
onClicked
:
{
applicatio
nWindow
.
cover
=
blueCover
;
mai
nWindow
.
cover
=
blueCover
;
}
}
MenuItem
{
//% "Inline green"
text
:
qsTrId
(
"
ui-component-gallery-cover-inline-green
"
)
onClicked
:
{
applicatio
nWindow
.
cover
=
greenCover
;
mai
nWindow
.
cover
=
greenCover
;
}
}
MenuItem
{
//% "External file red (no actions)"
text
:
qsTrId
(
"
ui-component-gallery-cover-external-file-red-no-actions
"
)
onClicked
:
{
applicatio
nWindow
.
cover
=
Qt
.
resolvedUrl
(
"
CoverExample.qml
"
);
mai
nWindow
.
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
(
applicatio
nWindow
.
cover
!==
greenCover
)
applicatio
nWindow
.
cover
=
greenCover
;
if
(
mai
nWindow
.
cover
!==
greenCover
)
mai
nWindow
.
cover
=
greenCover
;
else
applicatio
nWindow
.
cover
=
blueCover
;
mai
nWindow
.
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
"
);
}
}
qml/pages/CoverTemplateExample.qml
0 → 100644
Просмотр файла @
5f6f3ccb
// 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
}
}
}
translations/ru.auroraos.UiComponentGallery-ru.ts
Просмотр файла @
5f6f3ccb
...
...
@@ -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
>
translations/ru.auroraos.UiComponentGallery.ts
Просмотр файла @
5f6f3ccb
...
...
@@ -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.
Сначала завершите редактирование этого сообщения!
Отмена
Пожалуйста,
зарегистрируйтесь
или
войдите
чтобы прокомментировать