mirror of
https://github.com/Nheko-Reborn/nheko.git
synced 2024-11-22 11:00:48 +03:00
Format qml
This commit is contained in:
Nicolas Werner
parent
435047b1ba
commit
b7b4fd0e9b
5 changed files with 103 additions and 100 deletions
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue