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