improved notifications UI

- small changes / additions
This commit is contained in:
molan-git 2020-06-08 17:34:32 +02:00
parent 9fb1efc189
commit d0125d86ac
5 changed files with 68 additions and 27 deletions

View file

@ -53,6 +53,7 @@ HEADERS += src/dbusAdaptor.h
HEADERS += src/dbus.h
DISTFILES += qml/harbour-tooter.qml \
qml/images/tooter-cover.svg \
qml/pages/ConversationPage.qml \
qml/pages/ProfilePage.qml \
qml/pages/SettingsPage.qml \
@ -75,7 +76,6 @@ DISTFILES += qml/harbour-tooter.qml \
qml/pages/Browser.qml \
qml/lib/API.js \
qml/images/icon-s-following \
qml/images/tooter.svg \
qml/images/icon-m-emoji.svg \
qml/images/icon-m-profile.svg \
qml/images/icon-l-profile.svg \

View file

@ -46,19 +46,21 @@ CoverBackground {
break;
}
}
Image {
id: bg
source: "../images/tooter-cover.svg"
horizontalAlignment: Image.AlignLeft
verticalAlignment: Image.AlignBottom
fillMode: Image.PreserveAspectFit
anchors {
bottom : parent.bottom
left: parent.left
right: parent.right
top: parent.top
}
horizontalAlignment: Image.AlignLeft
verticalAlignment: Image.AlignBottom
fillMode: Image.PreserveAspectFit
source: "../images/tooter.svg"
}
Timer {
id: timer
interval: 60*1000
@ -69,34 +71,34 @@ CoverBackground {
Image {
id: iconNot
source: "image://theme/icon-s-alarm?" + Theme.highlightColor
anchors {
left: parent.left
top: parent.top
leftMargin: Theme.paddingLarge
topMargin: Theme.paddingLarge
}
source: "image://theme/icon-s-alarm?" + Theme.highlightColor
}
Label {
id: notificationsLbl
text: " "
color: Theme.highlightColor
anchors {
left: iconNot.right
leftMargin: Theme.paddingMedium
verticalCenter: iconNot.verticalCenter
}
text: " "
color: Theme.highlightColor
}
Label {
text: "Tooter"
color: Theme.secondaryColor
anchors {
right: parent.right
rightMargin: Theme.paddingLarge
verticalCenter: iconNot.verticalCenter
}
text: "Tooter"
color: Theme.primaryColor
}
signal activateapp(string person, string notice)

View file

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -5,12 +5,12 @@ import QtMultimedia 5.0
FullscreenContentPage {
id: mediaPage
allowedOrientations: Orientation.All
property string type: ""
property string previewURL: ""
property string mediaURL: ""
allowedOrientations: Orientation.All
Component.onCompleted: function(){
console.log(type)
console.log(previewURL)
@ -27,12 +27,12 @@ FullscreenContentPage {
}
Flickable {
id: videoFlickable
id: videoFlickable
visible: false
anchors.fill: parent
clip: true
contentWidth: imageContainer.width
contentHeight: imageContainer.height
clip: true
anchors.fill: parent
Image {
id: videoPreview
@ -45,7 +45,7 @@ FullscreenContentPage {
id: video
anchors.fill: parent
onErrorStringChanged: function(){
videoError.visible = true;
videoError.visible = true
}
onStatusChanged: {
console.log(status)
@ -83,19 +83,22 @@ FullscreenContentPage {
playerProgress.value = position
}
}
onStopped: function(){
stop()
onStopped: function() {
if (video.duration < 30000)
video.play()
else
video.stop()
}
IconButton {
id: playerIcon
icon.source: "image://theme/icon-m-play"
anchors {
left: parent.left
bottom: parent.bottom
leftMargin: Theme.horizontalPageMargin
bottomMargin: Theme.horizontalPageMargin
}
icon.source: "image://theme/icon-m-play"
onClicked: function() {
if (video.playbackState === MediaPlayer.PlayingState)
video.pause()
@ -161,7 +164,7 @@ FullscreenContentPage {
clip: true
anchors.fill: parent
onHeightChanged: if (imagePreview.status === Image.Ready) {
imagePreview.fitToScreen();
imagePreview.fitToScreen()
}
Item {
@ -218,11 +221,11 @@ FullscreenContentPage {
PinchArea {
id: pinchArea
opacity: 0.3
property real minScale: 1.0
property real maxScale: 3.0
opacity: 0.3
anchors.fill: parent
enabled: imagePreview.status === Image.Ready
pinch.target: imagePreview

View file

@ -12,7 +12,7 @@ BackgroundItem {
width: parent.width
height: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
mnu.height + miniHeader.height + Theme.paddingLarge + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
} else mnu.height + miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
} else mnu.height + miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0) + (iconDirectMsg.visible ? iconDirectMsg.height : 0)
Rectangle {
id: bgDirect
x: 0
@ -39,7 +39,7 @@ BackgroundItem {
} */
Rectangle {
id: bgDelegate
id: bgNotifications
x: 0
y: 0
visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
@ -118,7 +118,22 @@ BackgroundItem {
}
}
Image {
id: iconDirectMsg
visible: status_visibility == 'direct'
width: Theme.iconSizeMedium
height: width
source: "image://theme/icon-m-mail"
anchors {
horizontalCenter: avatar.horizontalCenter
top: avatar.bottom
topMargin: Theme.paddingMedium
left: avatar.left
}
}
Rectangle {
id: bgReblogAvatar
color: Theme.highlightDimmerColor
width: Theme.iconSizeSmall
height: width
@ -141,14 +156,35 @@ BackgroundItem {
width: Theme.iconSizeSmall
height: width
}
}
Rectangle {
visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
opacity: 0.5
color: Theme.highlightDimmerColor
anchors.fill: reblogAvatar
Rectangle {
id: bgBotIcon
color: Theme.highlightDimmerColor
radius: Theme.paddingSmall
width: Theme.iconSizeSmall
height: width
visible: true //typeof status_reblog !== "undefined" && status_reblog
anchors {
top: parent.top
topMargin: -width/3
left: parent.left
leftMargin: -width/3
}
Image {
id: botIcon
asynchronous: true
smooth: true
opacity: status === Image.Ready ? 1.0 : 0.0
Behavior on opacity { FadeAnimator {} }
source: "image://theme/icon-s-alarm?" //typeof reblog_account_avatar !== "undefined" ? reblog_account_avatar : ''
visible: typeof bot === true //typeof status_reblog !== "undefined" && status_reblog
width: Theme.iconSizeSmall
height: width
}
}
}
MiniHeader {