diff --git a/resources/qml/CommunitiesList.qml b/resources/qml/CommunitiesList.qml
index 6a2c642c..0a8587b3 100644
--- a/resources/qml/CommunitiesList.qml
+++ b/resources/qml/CommunitiesList.qml
@@ -56,15 +56,13 @@ Page {
property color bubbleBackground: Nheko.colors.highlight
property color bubbleText: Nheko.colors.highlightedText
- background: Rectangle {
- color: backgroundColor
- }
-
height: avatarSize + 2 * Nheko.paddingMedium
width: ListView.view.width
state: "normal"
ToolTip.visible: hovered && collapsed
ToolTip.text: model.tooltip
+ onClicked: Communities.setCurrentTagId(model.id)
+ onPressAndHold: communityContextMenu.show(model.id)
states: [
State {
name: "highlight"
@@ -108,9 +106,6 @@ Page {
}
- onClicked: Communities.setCurrentTagId(model.id)
- onPressAndHold: communityContextMenu.show(model.id)
-
RowLayout {
spacing: Nheko.paddingMedium
anchors.fill: parent
@@ -149,6 +144,10 @@ Page {
}
+ background: Rectangle {
+ color: backgroundColor
+ }
+
}
}
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index 99c82a9b..c738e5b4 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -21,14 +21,13 @@ Item {
required property string url
required property string body
required property string filesize
+ property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth)
+ property double tempHeight: tempWidth * proportionalHeight
+ property double divisor: isReply ? 4 : 2
+ property bool tooHigh: tempHeight > timelineRoot.height / divisor
- property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth)
- property double tempHeight: tempWidth * proportionalHeight
- property double divisor: isReply ? 4 : 2
- property bool tooHigh: tempHeight > timelineRoot.height / divisor
-
- height: (type == MtxEvent.VideoMessage ? tooHigh ? timelineRoot.height / divisor : tempHeight : 80) + fileInfoLabel.height
- width: type == MtxEvent.VideoMessage ? tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth : 250
+ height: (type == MtxEvent.VideoMessage ? tooHigh ? timelineRoot.height / divisor : tempHeight : 80) + fileInfoLabel.height
+ width: type == MtxEvent.VideoMessage ? tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth : 250
MxcMedia {
id: mxcmedia
@@ -44,16 +43,14 @@ Item {
Rectangle {
id: videoContainer
+
color: type == MtxEvent.VideoMessage ? Nheko.colors.window : "transparent"
width: parent.width
height: parent.height - fileInfoLabel.height
-
- TapHandler {
- onTapped: mediaControls.showControls();
- }
-
-
+ TapHandler {
+ onTapped: mediaControls.showControls()
+ }
Image {
anchors.fill: parent
@@ -72,34 +69,31 @@ Item {
flushMode: VideoOutput.FirstFrame
}
-
}
}
- MediaControls {
- id: mediaControls
-
- anchors.left: content.left
- anchors.right: content.right
- anchors.bottom: fileInfoLabel.top
-
- playingVideo: type == MtxEvent.VideoMessage
- positionValue: mxcmedia.position
- duration: mxcmedia.duration
- mediaLoaded: mxcmedia.loaded
- mediaState: mxcmedia.state
- onPositionChanged: mxcmedia.position = position
- onPlayPauseActivated: mxcmedia.state == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play()
- onLoadActivated: mxcmedia.eventId = eventId
- }
+ MediaControls {
+ id: mediaControls
+
+ anchors.left: content.left
+ anchors.right: content.right
+ anchors.bottom: fileInfoLabel.top
+ playingVideo: type == MtxEvent.VideoMessage
+ positionValue: mxcmedia.position
+ duration: mxcmedia.duration
+ mediaLoaded: mxcmedia.loaded
+ mediaState: mxcmedia.state
+ onPositionChanged: mxcmedia.position = position
+ onPlayPauseActivated: mxcmedia.state == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play()
+ onLoadActivated: mxcmedia.eventId = eventId
+ }
// information about file name and file size
Label {
id: fileInfoLabel
anchors.bottom: content.bottom
-
text: body + " [" + filesize + "]"
textFormat: Text.PlainText
elide: Text.ElideRight
diff --git a/resources/qml/dialogs/ReadReceipts.qml b/resources/qml/dialogs/ReadReceipts.qml
index f551bae9..1bfdae84 100644
--- a/resources/qml/dialogs/ReadReceipts.qml
+++ b/resources/qml/dialogs/ReadReceipts.qml
@@ -66,9 +66,6 @@ ApplicationWindow {
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: model.mxid
- background: Rectangle {
- color: readReceiptsRoot.color
- }
RowLayout {
id: receiptLayout
@@ -113,6 +110,10 @@ ApplicationWindow {
cursorShape: Qt.PointingHandCursor
}
+ background: Rectangle {
+ color: readReceiptsRoot.color
+ }
+
}
}
diff --git a/resources/qml/ui/NhekoSlider.qml b/resources/qml/ui/NhekoSlider.qml
index 6cf1fd2d..23e22f51 100644
--- a/resources/qml/ui/NhekoSlider.qml
+++ b/resources/qml/ui/NhekoSlider.qml
@@ -8,23 +8,23 @@ import im.nheko 1.0
Slider {
id: control
- value: 0
- property color progressColor: Nheko.colors.highlight
+ property color progressColor: Nheko.colors.highlight
property bool alwaysShowSlider: true
property int sliderRadius: 16
- implicitHeight: sliderRadius
- padding: 0
+ value: 0
+ implicitHeight: sliderRadius
+ padding: 0
background: Rectangle {
- x: control.leftPadding + handle.width/2
+ x: control.leftPadding + handle.width / 2
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 200
- implicitHeight: control.sliderRadius/4
+ implicitHeight: control.sliderRadius / 4
width: control.availableWidth - handle.width
height: implicitHeight
- radius: height/2
+ radius: height / 2
color: Nheko.colors.buttonText
Rectangle {
@@ -33,6 +33,7 @@ Slider {
color: control.progressColor
radius: 2
}
+
}
handle: Rectangle {
@@ -40,9 +41,10 @@ Slider {
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: control.sliderRadius
implicitHeight: control.sliderRadius
- radius: control.sliderRadius/2
- color: control.progressColor
- visible: Settings.mobileMode || control.alwaysShowSlider || control.hovered || control.pressed
+ radius: control.sliderRadius / 2
+ color: control.progressColor
+ visible: Settings.mobileMode || control.alwaysShowSlider || control.hovered || control.pressed
border.color: control.progressColor
}
+
}
diff --git a/resources/qml/ui/media/MediaControls.qml b/resources/qml/ui/media/MediaControls.qml
index 00ccdd26..7216e552 100644
--- a/resources/qml/ui/media/MediaControls.qml
+++ b/resources/qml/ui/media/MediaControls.qml
@@ -22,12 +22,6 @@ Rectangle {
property var positionValue: 0
property var position
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 loadActivated()
@@ -55,19 +49,25 @@ Rectangle {
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 {
id: playerMouseArea
property bool shouldShowControls: hovered || controlHideTimer.running || control.mediaState != MediaPlayer.PlayingState
- onHoveredChanged: showControls();
+ onHoveredChanged: showControls()
}
ColumnLayout {
-
id: controlLayout
- enabled: control.shouldShowControls
+ enabled: control.shouldShowControls
spacing: 0
anchors.bottom: control.bottom
anchors.left: control.left
@@ -77,9 +77,7 @@ Rectangle {
Layout.fillWidth: true
Layout.leftMargin: Nheko.paddingSmall
Layout.rightMargin: Nheko.paddingSmall
-
enabled: control.mediaLoaded
-
value: control.positionValue
onMoved: control.position = value
from: 0
@@ -87,7 +85,6 @@ Rectangle {
alwaysShowSlider: false
}
-
RowLayout {
Layout.margins: Nheko.paddingSmall
spacing: Nheko.paddingSmall
@@ -95,95 +92,87 @@ Rectangle {
// Cache/Play/pause button
ImageButton {
- Layout.alignment: Qt.AlignLeft
id: playbackStateImage
+ Layout.alignment: Qt.AlignLeft
buttonTextColor: Nheko.colors.text
Layout.preferredHeight: 24
Layout.preferredWidth: 24
-
image: {
if (control.mediaLoaded) {
if (control.mediaState == MediaPlayer.PlayingState)
- return ":/icons/icons/ui/pause-symbol.png";
+ return ":/icons/icons/ui/pause-symbol.png";
else
- return ":/icons/icons/ui/play-sign.png";
+ return ":/icons/icons/ui/play-sign.png";
} else {
return ":/icons/icons/ui/arrow-pointing-down.png";
}
}
-
- onClicked: control.mediaLoaded ? control.playPauseActivated() : control.loadActivated();
-
+ onClicked: control.mediaLoaded ? control.playPauseActivated() : control.loadActivated()
}
ImageButton {
- Layout.alignment: Qt.AlignLeft
id: volumeButton
+ Layout.alignment: Qt.AlignLeft
buttonTextColor: Nheko.colors.text
Layout.preferredHeight: 24
Layout.preferredWidth: 24
-
image: {
- if (control.muted || control.desiredVolume <= 0) {
+ if (control.muted || control.desiredVolume <= 0)
return ":/icons/icons/ui/volume-off-indicator.png";
- } else {
+ else
return ":/icons/icons/ui/volume-up.png";
- }
}
-
onClicked: control.muted = !control.muted
-
}
NhekoSlider {
- state: ""
+ id: volumeSlider
- states: State {
- name: "shown"
- when: Settings.mobileMode || volumeButton.hovered || volumeSlider.hovered || volumeSlider.pressed
- PropertyChanges {target: volumeSlider; Layout.preferredWidth: 100}
- PropertyChanges {target: volumeSlider; opacity: 1}
- }
+ property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
+ state: ""
Layout.alignment: Qt.AlignLeft
Layout.preferredWidth: 0
opacity: 0
- id: volumeSlider
orientation: Qt.Horizontal
- property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
value: 1
-
onDesiredVolumeChanged: {
control.muted = !(desiredVolume > 0);
}
-
transitions: [
Transition {
from: ""
to: "shown"
SequentialAnimation {
- PauseAnimation { duration: 50 }
+ PauseAnimation {
+ duration: 50
+ }
+
NumberAnimation {
duration: 100
properties: "opacity"
- easing.type: Easing.InQuad
+ easing.type: Easing.InQuad
}
+
}
NumberAnimation {
properties: "Layout.preferredWidth"
duration: 150
}
+
},
Transition {
from: "shown"
to: ""
SequentialAnimation {
- PauseAnimation { duration: 100 }
+ PauseAnimation {
+ duration: 100
+ }
ParallelAnimation {
NumberAnimation {
@@ -196,16 +185,34 @@ Rectangle {
properties: "Layout.preferredWidth"
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 {
Layout.alignment: Qt.AlignRight
-
text: (!control.mediaLoaded) ? "-- / --" : (durationToString(control.positionValue) + " / " + durationToString(control.duration))
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
Timer {
id: controlHideTimer
@@ -234,4 +233,12 @@ Rectangle {
repeat: false
}
+ // Fade controls in/out
+ Behavior on opacity {
+ OpacityAnimator {
+ duration: 100
+ }
+
+ }
+
}
|
