mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-11-23 03:18:49 +03:00
Format qml
This commit is contained in:
parent
435047b1ba
commit
b7b4fd0e9b
5 changed files with 103 additions and 100 deletions
|
@ -56,15 +56,13 @@ Page {
|
||||||
property color bubbleBackground: Nheko.colors.highlight
|
property color bubbleBackground: Nheko.colors.highlight
|
||||||
property color bubbleText: Nheko.colors.highlightedText
|
property color bubbleText: Nheko.colors.highlightedText
|
||||||
|
|
||||||
background: Rectangle {
|
|
||||||
color: backgroundColor
|
|
||||||
}
|
|
||||||
|
|
||||||
height: avatarSize + 2 * Nheko.paddingMedium
|
height: avatarSize + 2 * Nheko.paddingMedium
|
||||||
width: ListView.view.width
|
width: ListView.view.width
|
||||||
state: "normal"
|
state: "normal"
|
||||||
ToolTip.visible: hovered && collapsed
|
ToolTip.visible: hovered && collapsed
|
||||||
ToolTip.text: model.tooltip
|
ToolTip.text: model.tooltip
|
||||||
|
onClicked: Communities.setCurrentTagId(model.id)
|
||||||
|
onPressAndHold: communityContextMenu.show(model.id)
|
||||||
states: [
|
states: [
|
||||||
State {
|
State {
|
||||||
name: "highlight"
|
name: "highlight"
|
||||||
|
@ -108,9 +106,6 @@ Page {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClicked: Communities.setCurrentTagId(model.id)
|
|
||||||
onPressAndHold: communityContextMenu.show(model.id)
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
spacing: Nheko.paddingMedium
|
spacing: Nheko.paddingMedium
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
@ -149,6 +144,10 @@ Page {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
color: backgroundColor
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,7 +21,6 @@ Item {
|
||||||
required property string url
|
required property string url
|
||||||
required property string body
|
required property string body
|
||||||
required property string filesize
|
required property string filesize
|
||||||
|
|
||||||
property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth)
|
property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth)
|
||||||
property double tempHeight: tempWidth * proportionalHeight
|
property double tempHeight: tempWidth * proportionalHeight
|
||||||
property double divisor: isReply ? 4 : 2
|
property double divisor: isReply ? 4 : 2
|
||||||
|
@ -44,17 +43,15 @@ Item {
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: videoContainer
|
id: videoContainer
|
||||||
|
|
||||||
color: type == MtxEvent.VideoMessage ? Nheko.colors.window : "transparent"
|
color: type == MtxEvent.VideoMessage ? Nheko.colors.window : "transparent"
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - fileInfoLabel.height
|
height: parent.height - fileInfoLabel.height
|
||||||
|
|
||||||
|
|
||||||
TapHandler {
|
TapHandler {
|
||||||
onTapped: mediaControls.showControls();
|
onTapped: mediaControls.showControls()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
source: thumbnailUrl.replace("mxc://", "image://MxcImage/")
|
source: thumbnailUrl.replace("mxc://", "image://MxcImage/")
|
||||||
|
@ -72,7 +69,6 @@ Item {
|
||||||
flushMode: VideoOutput.FirstFrame
|
flushMode: VideoOutput.FirstFrame
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -83,7 +79,6 @@ Item {
|
||||||
anchors.left: content.left
|
anchors.left: content.left
|
||||||
anchors.right: content.right
|
anchors.right: content.right
|
||||||
anchors.bottom: fileInfoLabel.top
|
anchors.bottom: fileInfoLabel.top
|
||||||
|
|
||||||
playingVideo: type == MtxEvent.VideoMessage
|
playingVideo: type == MtxEvent.VideoMessage
|
||||||
positionValue: mxcmedia.position
|
positionValue: mxcmedia.position
|
||||||
duration: mxcmedia.duration
|
duration: mxcmedia.duration
|
||||||
|
@ -99,7 +94,6 @@ Item {
|
||||||
id: fileInfoLabel
|
id: fileInfoLabel
|
||||||
|
|
||||||
anchors.bottom: content.bottom
|
anchors.bottom: content.bottom
|
||||||
|
|
||||||
text: body + " [" + filesize + "]"
|
text: body + " [" + filesize + "]"
|
||||||
textFormat: Text.PlainText
|
textFormat: Text.PlainText
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
|
|
|
@ -66,9 +66,6 @@ ApplicationWindow {
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
ToolTip.visible: hovered
|
ToolTip.visible: hovered
|
||||||
ToolTip.text: model.mxid
|
ToolTip.text: model.mxid
|
||||||
background: Rectangle {
|
|
||||||
color: readReceiptsRoot.color
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
id: receiptLayout
|
id: receiptLayout
|
||||||
|
@ -113,6 +110,10 @@ ApplicationWindow {
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
color: readReceiptsRoot.color
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,23 +8,23 @@ import im.nheko 1.0
|
||||||
|
|
||||||
Slider {
|
Slider {
|
||||||
id: control
|
id: control
|
||||||
value: 0
|
|
||||||
|
|
||||||
property color progressColor: Nheko.colors.highlight
|
property color progressColor: Nheko.colors.highlight
|
||||||
property bool alwaysShowSlider: true
|
property bool alwaysShowSlider: true
|
||||||
property int sliderRadius: 16
|
property int sliderRadius: 16
|
||||||
implicitHeight: sliderRadius
|
|
||||||
|
|
||||||
|
value: 0
|
||||||
|
implicitHeight: sliderRadius
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
x: control.leftPadding + handle.width/2
|
x: control.leftPadding + handle.width / 2
|
||||||
y: control.topPadding + control.availableHeight / 2 - height / 2
|
y: control.topPadding + control.availableHeight / 2 - height / 2
|
||||||
implicitWidth: 200
|
implicitWidth: 200
|
||||||
implicitHeight: control.sliderRadius/4
|
implicitHeight: control.sliderRadius / 4
|
||||||
width: control.availableWidth - handle.width
|
width: control.availableWidth - handle.width
|
||||||
height: implicitHeight
|
height: implicitHeight
|
||||||
radius: height/2
|
radius: height / 2
|
||||||
color: Nheko.colors.buttonText
|
color: Nheko.colors.buttonText
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
|
@ -33,6 +33,7 @@ Slider {
|
||||||
color: control.progressColor
|
color: control.progressColor
|
||||||
radius: 2
|
radius: 2
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handle: Rectangle {
|
handle: Rectangle {
|
||||||
|
@ -40,9 +41,10 @@ Slider {
|
||||||
y: control.topPadding + control.availableHeight / 2 - height / 2
|
y: control.topPadding + control.availableHeight / 2 - height / 2
|
||||||
implicitWidth: control.sliderRadius
|
implicitWidth: control.sliderRadius
|
||||||
implicitHeight: control.sliderRadius
|
implicitHeight: control.sliderRadius
|
||||||
radius: control.sliderRadius/2
|
radius: control.sliderRadius / 2
|
||||||
color: control.progressColor
|
color: control.progressColor
|
||||||
visible: Settings.mobileMode || control.alwaysShowSlider || control.hovered || control.pressed
|
visible: Settings.mobileMode || control.alwaysShowSlider || control.hovered || control.pressed
|
||||||
border.color: control.progressColor
|
border.color: control.progressColor
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,12 +22,6 @@ Rectangle {
|
||||||
property var positionValue: 0
|
property var positionValue: 0
|
||||||
property var position
|
property var position
|
||||||
property bool shouldShowControls: !playingVideo || playerMouseArea.shouldShowControls || volumeSlider.state == "shown"
|
property bool shouldShowControls: !playingVideo || playerMouseArea.shouldShowControls || volumeSlider.state == "shown"
|
||||||
color: {
|
|
||||||
var wc = Nheko.colors.alternateBase;
|
|
||||||
return Qt.rgba(wc.r, wc.g, wc.b, 0.5);
|
|
||||||
}
|
|
||||||
opacity: control.shouldShowControls ? 1 : 0
|
|
||||||
height: controlLayout.implicitHeight
|
|
||||||
|
|
||||||
signal playPauseActivated()
|
signal playPauseActivated()
|
||||||
signal loadActivated()
|
signal loadActivated()
|
||||||
|
@ -55,19 +49,25 @@ Rectangle {
|
||||||
return hh + ":" + mm + ":" + ss;
|
return hh + ":" + mm + ":" + ss;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
color: {
|
||||||
|
var wc = Nheko.colors.alternateBase;
|
||||||
|
return Qt.rgba(wc.r, wc.g, wc.b, 0.5);
|
||||||
|
}
|
||||||
|
opacity: control.shouldShowControls ? 1 : 0
|
||||||
|
height: controlLayout.implicitHeight
|
||||||
|
|
||||||
HoverHandler {
|
HoverHandler {
|
||||||
id: playerMouseArea
|
id: playerMouseArea
|
||||||
|
|
||||||
property bool shouldShowControls: hovered || controlHideTimer.running || control.mediaState != MediaPlayer.PlayingState
|
property bool shouldShowControls: hovered || controlHideTimer.running || control.mediaState != MediaPlayer.PlayingState
|
||||||
|
|
||||||
onHoveredChanged: showControls();
|
onHoveredChanged: showControls()
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
|
|
||||||
id: controlLayout
|
id: controlLayout
|
||||||
enabled: control.shouldShowControls
|
|
||||||
|
|
||||||
|
enabled: control.shouldShowControls
|
||||||
spacing: 0
|
spacing: 0
|
||||||
anchors.bottom: control.bottom
|
anchors.bottom: control.bottom
|
||||||
anchors.left: control.left
|
anchors.left: control.left
|
||||||
|
@ -77,9 +77,7 @@ Rectangle {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.leftMargin: Nheko.paddingSmall
|
Layout.leftMargin: Nheko.paddingSmall
|
||||||
Layout.rightMargin: Nheko.paddingSmall
|
Layout.rightMargin: Nheko.paddingSmall
|
||||||
|
|
||||||
enabled: control.mediaLoaded
|
enabled: control.mediaLoaded
|
||||||
|
|
||||||
value: control.positionValue
|
value: control.positionValue
|
||||||
onMoved: control.position = value
|
onMoved: control.position = value
|
||||||
from: 0
|
from: 0
|
||||||
|
@ -87,7 +85,6 @@ Rectangle {
|
||||||
alwaysShowSlider: false
|
alwaysShowSlider: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
Layout.margins: Nheko.paddingSmall
|
Layout.margins: Nheko.paddingSmall
|
||||||
spacing: Nheko.paddingSmall
|
spacing: Nheko.paddingSmall
|
||||||
|
@ -95,13 +92,12 @@ Rectangle {
|
||||||
|
|
||||||
// Cache/Play/pause button
|
// Cache/Play/pause button
|
||||||
ImageButton {
|
ImageButton {
|
||||||
Layout.alignment: Qt.AlignLeft
|
|
||||||
id: playbackStateImage
|
id: playbackStateImage
|
||||||
|
|
||||||
|
Layout.alignment: Qt.AlignLeft
|
||||||
buttonTextColor: Nheko.colors.text
|
buttonTextColor: Nheko.colors.text
|
||||||
Layout.preferredHeight: 24
|
Layout.preferredHeight: 24
|
||||||
Layout.preferredWidth: 24
|
Layout.preferredWidth: 24
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
if (control.mediaLoaded) {
|
if (control.mediaLoaded) {
|
||||||
if (control.mediaState == MediaPlayer.PlayingState)
|
if (control.mediaState == MediaPlayer.PlayingState)
|
||||||
|
@ -112,78 +108,71 @@ Rectangle {
|
||||||
return ":/icons/icons/ui/arrow-pointing-down.png";
|
return ":/icons/icons/ui/arrow-pointing-down.png";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
onClicked: control.mediaLoaded ? control.playPauseActivated() : control.loadActivated()
|
||||||
onClicked: control.mediaLoaded ? control.playPauseActivated() : control.loadActivated();
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ImageButton {
|
ImageButton {
|
||||||
Layout.alignment: Qt.AlignLeft
|
|
||||||
id: volumeButton
|
id: volumeButton
|
||||||
|
|
||||||
|
Layout.alignment: Qt.AlignLeft
|
||||||
buttonTextColor: Nheko.colors.text
|
buttonTextColor: Nheko.colors.text
|
||||||
Layout.preferredHeight: 24
|
Layout.preferredHeight: 24
|
||||||
Layout.preferredWidth: 24
|
Layout.preferredWidth: 24
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
if (control.muted || control.desiredVolume <= 0) {
|
if (control.muted || control.desiredVolume <= 0)
|
||||||
return ":/icons/icons/ui/volume-off-indicator.png";
|
return ":/icons/icons/ui/volume-off-indicator.png";
|
||||||
} else {
|
else
|
||||||
return ":/icons/icons/ui/volume-up.png";
|
return ":/icons/icons/ui/volume-up.png";
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
onClicked: control.muted = !control.muted
|
onClicked: control.muted = !control.muted
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
NhekoSlider {
|
NhekoSlider {
|
||||||
|
id: volumeSlider
|
||||||
|
|
||||||
|
property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
|
||||||
|
|
||||||
state: ""
|
state: ""
|
||||||
|
|
||||||
states: State {
|
|
||||||
name: "shown"
|
|
||||||
when: Settings.mobileMode || volumeButton.hovered || volumeSlider.hovered || volumeSlider.pressed
|
|
||||||
PropertyChanges {target: volumeSlider; Layout.preferredWidth: 100}
|
|
||||||
PropertyChanges {target: volumeSlider; opacity: 1}
|
|
||||||
}
|
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignLeft
|
Layout.alignment: Qt.AlignLeft
|
||||||
Layout.preferredWidth: 0
|
Layout.preferredWidth: 0
|
||||||
opacity: 0
|
opacity: 0
|
||||||
id: volumeSlider
|
|
||||||
orientation: Qt.Horizontal
|
orientation: Qt.Horizontal
|
||||||
property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
|
|
||||||
value: 1
|
value: 1
|
||||||
|
|
||||||
onDesiredVolumeChanged: {
|
onDesiredVolumeChanged: {
|
||||||
control.muted = !(desiredVolume > 0);
|
control.muted = !(desiredVolume > 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
transitions: [
|
transitions: [
|
||||||
Transition {
|
Transition {
|
||||||
from: ""
|
from: ""
|
||||||
to: "shown"
|
to: "shown"
|
||||||
|
|
||||||
SequentialAnimation {
|
SequentialAnimation {
|
||||||
PauseAnimation { duration: 50 }
|
PauseAnimation {
|
||||||
|
duration: 50
|
||||||
|
}
|
||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 100
|
duration: 100
|
||||||
properties: "opacity"
|
properties: "opacity"
|
||||||
easing.type: Easing.InQuad
|
easing.type: Easing.InQuad
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
properties: "Layout.preferredWidth"
|
properties: "Layout.preferredWidth"
|
||||||
duration: 150
|
duration: 150
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
Transition {
|
Transition {
|
||||||
from: "shown"
|
from: "shown"
|
||||||
to: ""
|
to: ""
|
||||||
|
|
||||||
SequentialAnimation {
|
SequentialAnimation {
|
||||||
PauseAnimation { duration: 100 }
|
PauseAnimation {
|
||||||
|
duration: 100
|
||||||
|
}
|
||||||
|
|
||||||
ParallelAnimation {
|
ParallelAnimation {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
|
@ -196,16 +185,34 @@ Rectangle {
|
||||||
properties: "Layout.preferredWidth"
|
properties: "Layout.preferredWidth"
|
||||||
duration: 150
|
duration: 150
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
states: State {
|
||||||
|
name: "shown"
|
||||||
|
when: Settings.mobileMode || volumeButton.hovered || volumeSlider.hovered || volumeSlider.pressed
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: volumeSlider
|
||||||
|
Layout.preferredWidth: 100
|
||||||
|
}
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: volumeSlider
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
Layout.alignment: Qt.AlignRight
|
Layout.alignment: Qt.AlignRight
|
||||||
|
|
||||||
text: (!control.mediaLoaded) ? "-- / --" : (durationToString(control.positionValue) + " / " + durationToString(control.duration))
|
text: (!control.mediaLoaded) ? "-- / --" : (durationToString(control.positionValue) + " / " + durationToString(control.duration))
|
||||||
color: Nheko.colors.text
|
color: Nheko.colors.text
|
||||||
}
|
}
|
||||||
|
@ -218,14 +225,6 @@ Rectangle {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fade controls in/out
|
|
||||||
Behavior on opacity {
|
|
||||||
OpacityAnimator {
|
|
||||||
duration: 100
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// For hiding controls on stationary cursor
|
// For hiding controls on stationary cursor
|
||||||
Timer {
|
Timer {
|
||||||
id: controlHideTimer
|
id: controlHideTimer
|
||||||
|
@ -234,4 +233,12 @@ Rectangle {
|
||||||
repeat: false
|
repeat: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fade controls in/out
|
||||||
|
Behavior on opacity {
|
||||||
|
OpacityAnimator {
|
||||||
|
duration: 100
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue