mirror
/
nheko
mirror of https://github.com/Nheko-Reborn/nheko
2
0
Fork 1
Code Issues Releases Wiki Activity

Format qml

Browse Source
pull/812/head
Nicolas Werner 3 years ago
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
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      resources/qml/CommunitiesList.qml
  2. 56
      resources/qml/delegates/PlayableMediaMessage.qml
  3. 7
      resources/qml/dialogs/ReadReceipts.qml
  4. 22
      resources/qml/ui/NhekoSlider.qml
  5. 105
      resources/qml/ui/media/MediaControls.qml

13
resources/qml/CommunitiesList.qml
Unescape 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
}
} }
} }

56
resources/qml/delegates/PlayableMediaMessage.qml
Unescape View File

@ -21,14 +21,13 @@ 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 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 { MxcMedia {
id: mxcmedia id: mxcmedia
@ -44,16 +43,14 @@ 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
@ -72,34 +69,31 @@ Item {
flushMode: VideoOutput.FirstFrame 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 // information about file name and file size
Label { Label {
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

7
resources/qml/dialogs/ReadReceipts.qml
Unescape 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
}
} }
} }

22
resources/qml/ui/NhekoSlider.qml
Unescape 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
padding: 0 value: 0
implicitHeight: sliderRadius
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
} }
} }

105
resources/qml/ui/media/MediaControls.qml
Unescape 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,95 +92,87 @@ 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)
return ":/icons/icons/ui/pause-symbol.png"; return ":/icons/icons/ui/pause-symbol.png";
else else
return ":/icons/icons/ui/play-sign.png"; return ":/icons/icons/ui/play-sign.png";
} else { } else {
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 {
state: "" id: volumeSlider
states: State { property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
name: "shown"
when: Settings.mobileMode || volumeButton.hovered || volumeSlider.hovered || volumeSlider.pressed
PropertyChanges {target: volumeSlider; Layout.preferredWidth: 100}
PropertyChanges {target: volumeSlider; opacity: 1}
}
state: ""
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
}
}
} }

Write Preview
Loading…
Cancel
Save