Format qml

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
+            }
+
         }
 
     }

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)
+    height: (type == MtxEvent.VideoMessage ? tooHigh ? timelineRoot.height / divisor : tempHeight : 80) + fileInfoLabel.height
-        property double tempHeight: tempWidth * proportionalHeight
+    width: type == MtxEvent.VideoMessage ? tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth : 250
-        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
 
     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 {
-    TapHandler {
+            onTapped: mediaControls.showControls()
-        onTapped: mediaControls.showControls();
+        }
-    }
-
-
 
         Image {
             anchors.fill: parent
@@ -72,34 +69,31 @@ Item {
                 flushMode: VideoOutput.FirstFrame
             }
 
-
         }
 
     }
 
-            MediaControls {
+    MediaControls {
-                id: mediaControls
+        id: mediaControls
 
-                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
+        mediaLoaded: mxcmedia.loaded
-                mediaLoaded: mxcmedia.loaded
+        mediaState: mxcmedia.state
-                mediaState: mxcmedia.state
+        onPositionChanged: mxcmedia.position = position
-                onPositionChanged: mxcmedia.position = position
+        onPlayPauseActivated: mxcmedia.state == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play()
-                onPlayPauseActivated: mxcmedia.state == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play()
+        onLoadActivated: mxcmedia.eventId = eventId
-                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

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
+                    }
+
                 }
 
             }

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
+        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
     }
+
 }

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 {
+                id: volumeSlider
+
+                property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
+
                 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.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
+        }
+
+    }
+
 }