diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml index 3ee0ac05cf..dda552db50 100644 --- a/ui/app/AppLayouts/Profile/ProfileLayout.qml +++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml @@ -7,6 +7,7 @@ import "./Sections" SplitView { property int contentMargin: 120 + property int topMargin: 46 property alias changeProfileSection: leftTab.changeProfileSection id: profileView diff --git a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml index 18dd7b083b..7aaaebc56b 100644 --- a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml @@ -14,7 +14,7 @@ Item { Column { id: generalColumn anchors.top: parent.top - anchors.topMargin: 46 + anchors.topMargin: topMargin anchors.left: parent.left anchors.leftMargin: contentMargin anchors.right: parent.right diff --git a/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml b/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml index 438fd84c53..0c6a3ff688 100644 --- a/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/BrowserContainer.qml @@ -20,7 +20,7 @@ Item { Item { anchors.top: parent.top - anchors.topMargin: 46 + anchors.topMargin: topMargin anchors.left: parent.left anchors.leftMargin: contentMargin anchors.right: parent.right diff --git a/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml b/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml new file mode 100644 index 0000000000..ec93d7fe8a --- /dev/null +++ b/ui/app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml @@ -0,0 +1,169 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import "../../../../imports" +import "../../../../shared" +import "../../../../shared/status" + +ModalPopup { + id: popup + + title: qsTr("Chat link previews") + + onClosed: { + destroy() + } + + function populatePreviewableSites() { + let whitelist = JSON.parse(profileModel.getLinkPreviewWhitelist()) + whitelist.forEach(entry => { + entry.isWhitelisted = appSettings.whitelistedUnfurlingSites[entry.address] || false + previewableSites.append(entry) + }) + } + + onOpened: { + populatePreviewableSites() + } + + Column { + anchors.fill: parent + spacing: Style.current.bigPadding + + StatusSectionHeadline { + id: labelWebsites + text: qsTr("Websites") + width: parent.width + + StatusButton { + text: qsTr("Enable all") + type: "secondary" + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + flat: true + onClicked: { + const count = sitesListView.count + for (let i = 0; i < count; i++) { + sitesListView.itemAtIndex(i).toggleSetting(true) + } + } + } + } + + ListModel { + id: previewableSites + } + + Connections { + target: applicationWindow + onSettingsLoaded: { + popup.populatePreviewableSites() + } + } + + ListView { + id: sitesListView + width: parent.width + model: previewableSites + interactive: false + height: childrenRect.height + spacing: Style.current.padding + + delegate: Component { + Item { + width: parent.width + height: linkLine.height + function toggleSetting(newState) { + if (newState !== undefined) { + settingSwitch.checked = newState + return + } + settingSwitch.checked = !settingSwitch.checked + } + + Item { + id: linkLine + width: parent.width + height: childrenRect.height + + SVGImage { + id: thumbnail + width: 40 + height: 40 + source: { + let filename; + switch (title.toLowerCase()) { + case "youtube": + case "youtube shortener": + filename = "youtube.png"; break; + case "github": + filename = "github.png"; break; + // TODO get a good default icon + default: filename = "../globe.svg" + } + return `../../../img/linkPreviewThumbnails/${filename}` + } + anchors.top: parent.top + anchors.left: parent.left + } + + StyledText { + id: siteTitle + text: title + font.pixelSize: 15 + font.weight: Font.Medium + anchors.top: thumbnail.top + anchors.left: thumbnail.right + anchors.leftMargin: Style.current.padding + } + + StyledText { + text: address + font.pixelSize: 15 + font.weight: Font.Thin + color: Style.current.secondaryText + anchors.top: siteTitle.bottom + anchors.left: siteTitle.left + } + + StatusSwitch { + id: settingSwitch + checked: !!isWhitelisted + onCheckedChanged: function () { + if (appSettings.whitelistedUnfurlingSites[address] === this.checked) { + return + } + + const settings = appSettings.whitelistedUnfurlingSites + settings[address] = this.checked + appSettings.whitelistedUnfurlingSites = settings + } + anchors.verticalCenter: siteTitle.bottom + anchors.right: parent.right + } + } + + MouseArea { + anchors.fill: linkLine + cursorShape: Qt.PointingHandCursor + onClicked: toggleSetting() + } + } + } + } + + StyledText { + text: qsTr("Previewing links from these websites may share your metadata with their owners.") + width: parent.width + wrapMode: Text.WordWrap + font.weight: Font.Thin + color: Style.current.secondaryText + font.pixelSize: 15 + } + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml index 42912dec24..51cc0f6b8e 100644 --- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml @@ -11,15 +11,11 @@ Item { Layout.fillHeight: true Layout.fillWidth: true - ListModel { - id: previewableSites - } - Column { id: containerColumn - spacing: Style.current.padding + spacing: 30 anchors.top: parent.top - anchors.topMargin: Style.current.padding + anchors.topMargin: topMargin anchors.right: parent.right anchors.rightMargin: contentMargin anchors.left: parent.left @@ -49,12 +45,6 @@ Item { Separator { id: separator - Layout.topMargin: Style.current.bigPadding - containerColumn.spacing - } - - Separator { - id: separator2 - Layout.topMargin: Style.current.bigPadding - containerColumn.spacing } StatusSectionHeadline { @@ -114,6 +104,16 @@ Item { } } + StatusSettingsLineButton { + text: qsTr("Chat link previews") + onClicked: openPopup(chatLinksPreviewModal) + } + + Component { + id: chatLinksPreviewModal + ChatLinksPreviewModal {} + } + Component { id: openLinksWithModal OpenLinksWithModal {} @@ -124,81 +124,6 @@ Item { currentValue: appSettings.openLinksInStatus ? "Status" : qsTr("My default browser") onClicked: openPopup(openLinksWithModal) } - - StatusSectionHeadline { - id: labelURLUnfurling - text: qsTr("Chat link previews") - font.pixelSize: 17 - font.weight: Font.Bold - color: Style.current.textColor - } - - StatusSectionHeadline { - id: labelWebsites - text: qsTr("Websites") - } - - Connections { - target: applicationWindow - onSettingsLoaded: { - let whitelist = JSON.parse(profileModel.getLinkPreviewWhitelist()) - whitelist.forEach(entry => { - entry.isWhitelisted = appSettings.whitelistedUnfurlingSites[entry.address] || false - previewableSites.append(entry) - }) - } - } - - ListView { - id: sitesListView - width: parent.width - model: previewableSites - interactive: false - height: childrenRect.height - spacing: Style.current.padding - - delegate: Component { - Item { - width: parent.width - height: childrenRect.height - - StyledText { - id: siteTitle - text: title - font.pixelSize: 15 - font.weight: Font.Medium - } - - StyledText { - text: address - font.pixelSize: 15 - font.weight: Font.Thin - color: Style.current.secondaryText - anchors.top: siteTitle.bottom - } - - StatusSwitch { - checked: !!isWhitelisted - onCheckedChanged: function () { - const settings = appSettings.whitelistedUnfurlingSites - settings[address] = this.checked - appSettings.whitelistedUnfurlingSites = settings - } - anchors.verticalCenter: siteTitle.bottom - anchors.right: parent.right - } - } - } - } - - StyledText { - text: qsTr("Previewing links from these websites may share your metadata with their owners.") - width: parent.width - wrapMode: Text.WordWrap - font.weight: Font.Thin - color: Style.current.secondaryText - font.pixelSize: 15 - } } } diff --git a/ui/app/img/linkPreviewThumbnails/github.png b/ui/app/img/linkPreviewThumbnails/github.png new file mode 100644 index 0000000000..913e93e124 Binary files /dev/null and b/ui/app/img/linkPreviewThumbnails/github.png differ diff --git a/ui/app/img/linkPreviewThumbnails/youtube.png b/ui/app/img/linkPreviewThumbnails/youtube.png new file mode 100644 index 0000000000..2254dbc9b8 Binary files /dev/null and b/ui/app/img/linkPreviewThumbnails/youtube.png differ diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 74b51a4ea7..201aa3f685 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -210,6 +210,7 @@ DISTFILES += \ app/AppLayouts/Profile/Sections/BrowserModals/HomepageModal.qml \ app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml \ app/AppLayouts/Profile/Sections/ChangeProfilePicModal.qml \ + app/AppLayouts/Profile/Sections/ChatLinksPreviewModal.qml \ app/AppLayouts/Profile/Sections/MyProfileContainer.qml \ app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml \ app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml \