diff --git a/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml b/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml
index c8738a1301..6cff199424 100644
--- a/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml
+++ b/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml
@@ -26,9 +26,8 @@ ModalPopup {
populatePreviewableSites()
}
- Column {
+ Item {
anchors.fill: parent
- spacing: Style.current.bigPadding
StatusSectionHeadline {
id: labelWebsites
@@ -63,50 +62,83 @@ ModalPopup {
}
}
- ListView {
- id: sitesListView
+ ScrollView {
width: parent.width
- model: previewableSites
- interactive: false
- height: childrenRect.height
- spacing: Style.current.padding
+ anchors.top: labelWebsites.bottom
+ anchors.topMargin: Style.current.bigPadding
+ anchors.bottom: infoText.top
+ anchors.bottomMargin: Style.current.bigPadding
+ ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+ ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+ clip: true
- delegate: Component {
- Item {
- width: parent.width
- height: linkLine.height
- function toggleSetting(newState) {
- if (newState !== undefined) {
- settingSwitch.checked = newState
- return
- }
- settingSwitch.checked = !settingSwitch.checked
- }
+ ListView {
+ id: sitesListView
+ anchors.fill: parent
+ anchors.rightMargin: Style.current.padding
+ model: previewableSites
+ spacing: 0
- Item {
- id: linkLine
+ delegate: Component {
+ Rectangle {
+ property bool isHovered: false
+ id: linkRectangle
width: parent.width
- height: childrenRect.height
+ height: 64
+ color: isHovered ? Style.current.backgroundHover : Style.current.transparent
+ radius: Style.current.radius
+ border.width: 0
+
+ function toggleSetting(newState) {
+ if (newState !== undefined) {
+ settingSwitch.checked = newState
+ return
+ }
+ settingSwitch.checked = !settingSwitch.checked
+ }
SVGImage {
id: thumbnail
width: 40
height: 40
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.leftMargin: Style.current.padding
+
source: {
let filename;
switch (title.toLowerCase()) {
case "youtube":
case "youtube shortener":
- filename = "youtube.png"; break;
+ filename = "youtube.svg"; break;
case "github":
- filename = "github.png"; break;
- // TODO get a good default icon
+ filename = "github.svg"; break;
+ case "medium":
+ filename = "medium.svg"; break;
+ case "tenor gifs":
+ filename = "tenor.svg"; break;
+ case "giphy gifs":
+ case "giphy gifs shortener":
+ case "giphy gifs subdomain":
+ filename = "giphy.svg"; break;
+ case "github":
+ filename = "github.svg"; break;
+ case "status":
+ filename = "status.svg"; break;
+ // TODO get a good default icon
default: filename = "../globe.svg"
}
return `../../../img/linkPreviewThumbnails/${filename}`
}
- anchors.top: parent.top
- anchors.left: parent.left
+
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: width / 2
+ color: Style.current.transparent
+ border.color: Style.current.border
+ border.width: 1
+ }
}
StyledText {
@@ -131,6 +163,9 @@ ModalPopup {
StatusSwitch {
id: settingSwitch
checked: !!isWhitelisted
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: Style.current.padding
onCheckedChanged: function () {
if (appSettings.whitelistedUnfurlingSites[address] === this.checked) {
return
@@ -140,21 +175,23 @@ ModalPopup {
settings[address] = this.checked
appSettings.whitelistedUnfurlingSites = settings
}
- anchors.verticalCenter: siteTitle.bottom
- anchors.right: parent.right
}
- }
- MouseArea {
- anchors.fill: linkLine
- cursorShape: Qt.PointingHandCursor
- onClicked: toggleSetting()
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ hoverEnabled: true
+ onEntered: linkRectangle.isHovered = true
+ onExited: linkRectangle.isHovered = false
+ onClicked: toggleSetting()
+ }
}
}
}
}
StyledText {
+ id: infoText
//% "Previewing links from these websites may share your metadata with their owners."
text: qsTrId("previewing-links-from-these-websites-may-share-your-metadata-with-their-owners-")
width: parent.width
@@ -162,6 +199,7 @@ ModalPopup {
font.weight: Font.Thin
color: Style.current.secondaryText
font.pixelSize: 15
+ anchors.bottom: parent.bottom
}
}
}
diff --git a/ui/app/img/linkPreviewThumbnails/giphy.svg b/ui/app/img/linkPreviewThumbnails/giphy.svg
new file mode 100644
index 0000000000..385a5c8394
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/giphy.svg
@@ -0,0 +1,18 @@
+
diff --git a/ui/app/img/linkPreviewThumbnails/github.png b/ui/app/img/linkPreviewThumbnails/github.png
deleted file mode 100644
index 913e93e124..0000000000
Binary files a/ui/app/img/linkPreviewThumbnails/github.png and /dev/null differ
diff --git a/ui/app/img/linkPreviewThumbnails/github.svg b/ui/app/img/linkPreviewThumbnails/github.svg
new file mode 100644
index 0000000000..8615317964
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/github.svg
@@ -0,0 +1,11 @@
+
diff --git a/ui/app/img/linkPreviewThumbnails/medium.svg b/ui/app/img/linkPreviewThumbnails/medium.svg
new file mode 100644
index 0000000000..b7bd8d6676
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/medium.svg
@@ -0,0 +1,4 @@
+
diff --git a/ui/app/img/linkPreviewThumbnails/status.svg b/ui/app/img/linkPreviewThumbnails/status.svg
new file mode 100644
index 0000000000..710a16e942
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/status.svg
@@ -0,0 +1,4 @@
+
diff --git a/ui/app/img/linkPreviewThumbnails/tenor.svg b/ui/app/img/linkPreviewThumbnails/tenor.svg
new file mode 100644
index 0000000000..3e441d5bfb
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/tenor.svg
@@ -0,0 +1,15 @@
+
diff --git a/ui/app/img/linkPreviewThumbnails/youtube.png b/ui/app/img/linkPreviewThumbnails/youtube.png
deleted file mode 100644
index 2254dbc9b8..0000000000
Binary files a/ui/app/img/linkPreviewThumbnails/youtube.png and /dev/null differ
diff --git a/ui/app/img/linkPreviewThumbnails/youtube.svg b/ui/app/img/linkPreviewThumbnails/youtube.svg
new file mode 100644
index 0000000000..b34a6810ae
--- /dev/null
+++ b/ui/app/img/linkPreviewThumbnails/youtube.svg
@@ -0,0 +1,5 @@
+