From 9d9b0ab5e6ce792c47cf688f1fd9096e0805a1a2 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Tue, 16 Mar 2021 11:19:36 -0400 Subject: [PATCH] fix: fix chat link preview modal Fixes #2001 Fixes icons Fixes Icon border Fixes button hover Fixes list scrolling and overflow --- .../Sections/ChatLinksPreviewModal.qml | 106 ++++++++++++------ ui/app/img/linkPreviewThumbnails/giphy.svg | 18 +++ ui/app/img/linkPreviewThumbnails/github.png | Bin 2650 -> 0 bytes ui/app/img/linkPreviewThumbnails/github.svg | 11 ++ ui/app/img/linkPreviewThumbnails/medium.svg | 4 + ui/app/img/linkPreviewThumbnails/status.svg | 4 + ui/app/img/linkPreviewThumbnails/tenor.svg | 15 +++ ui/app/img/linkPreviewThumbnails/youtube.png | Bin 1394 -> 0 bytes ui/app/img/linkPreviewThumbnails/youtube.svg | 5 + 9 files changed, 129 insertions(+), 34 deletions(-) create mode 100644 ui/app/img/linkPreviewThumbnails/giphy.svg delete mode 100644 ui/app/img/linkPreviewThumbnails/github.png create mode 100644 ui/app/img/linkPreviewThumbnails/github.svg create mode 100644 ui/app/img/linkPreviewThumbnails/medium.svg create mode 100644 ui/app/img/linkPreviewThumbnails/status.svg create mode 100644 ui/app/img/linkPreviewThumbnails/tenor.svg delete mode 100644 ui/app/img/linkPreviewThumbnails/youtube.png create mode 100644 ui/app/img/linkPreviewThumbnails/youtube.svg 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 913e93e1244015639fd1b6ca9ff803e463d96d7a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2650 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 IM6N<$f^s1ayZ`_I 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 2254dbc9b8fcf84f79aa0339a2b57634d267f7df..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1394 zcmV-&1&#WNP)+&Ze8yL!VCw(AMcZ;2ob#Yy02e0tV$nu6CJ*3B*5aY~pZSaZ5zZgj|{ zA@+ZS-KH-LbAn`9dxwTuwVm=I3Tkkijx@*(^jTwsrC-NFq6}WY)F0xl%?|a9U7Fb~dXlhpM`Md_FpE z)}p3n_Xi$xs|9@j4jdfN!#@Di1Z*4dy!PPldC-xyccpDJ8B!1ZVA2k9IUt|^JPfWY)D*c6ydtIsn?x*99Lst&0e`OeUjI%3E{di@lmWdf4L;R zVea}#QRU;u=@aaXPoHAqnN#P;Wg(=ptR!3(T}Nt2LuY)w`20CGr7$NUR`|$ezRhxy zkZ<3R8qb~qYipyEJv@v}Nwk-uN`(w1)v`RuaT^9wV|f{P{Tg`x9=LP~L!(|#oMr|3 z@K$7H(66^F42|2jfiGWxogJW5O23YMZUUsX8!yNM3kY`3qvGyepi%*zJ|(M95n?$Y zB!G_`LMja2f$!ZoSX^vJoB8>ZpFP2rRSe?70!9Ic#&_?4M~{H7DQhlOO`I02C`r`h za1cq3x5I*ucy$%Hb0^??7#f8_ z;&i~83`2uS)+lNhV!pCiL~1;Fg0a9^Q6KoIxn@7Jl&>(iy)X#l3$I?q%y8yRY^vQ< zkSqL|T#)?MZzYhtcoDdK8B+%<{ z$8I+twI2jjEi6>Jlbi`T?trBCs~um)CN4LZ>$0fzjC1by2`1(ILwMEZY@+D@a9{pW$P*qhjBRYUyFM zH*^ikWGVfm2qpd`4&|sMrq?4;LDz{^6#O`u=AI*s8hx=R$#@H2+bI_59nX*$v#O68 zuVrc~(u*dk6uoeYb|oT|tdfJ@~ 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 @@ + + + + +