Format qml

This commit is contained in:
Nicolas Werner 2021-11-11 21:32:38 +01:00
parent 435047b1ba
commit b7b4fd0e9b
No known key found for this signature in database
GPG key ID: C8D75E610773F2D9
5 changed files with 103 additions and 100 deletions

View file

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

View file

@ -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

View file

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

View file

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

View file

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