diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml index 6325eff816..ddd06837a9 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/LinksMessage.qml @@ -1,4 +1,5 @@ import QtQuick 2.3 +import QtGraphicalEffects 1.13 import "../../../../../imports" import "../../../../../shared" import "../../../../../shared/status" @@ -93,7 +94,7 @@ Item { sourceComponent: Component { Rectangle { id: rectangle - width: 200 + width: 300 height: childrenRect.height + Style.current.halfPadding radius: 16 clip: true @@ -106,27 +107,45 @@ Item { id: linkImage source: linkData.thumbnailUrl fillMode: Image.PreserveAspectFit - width: 200 + width: parent.width + + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Item { + width: linkImage.width + height: linkImage.height + Rectangle { + anchors.centerIn: parent + width: linkImage.width + height: linkImage.height + radius: 16 + } + } + } } StyledText { id: linkTitle text: linkData.title + font.pixelSize: 13 + font.weight: Font.Medium elide: Text.ElideRight anchors.left: parent.left anchors.right: parent.right anchors.top: linkImage.bottom - anchors.rightMargin: Style.current.halfPadding - anchors.leftMargin: Style.current.halfPadding - anchors.topMargin: Style.current.halfPadding + anchors.rightMargin: Style.current.smallPadding + anchors.leftMargin: Style.current.smallPadding + anchors.topMargin: Style.current.smallPadding } StyledText { id: linkSite text: linkData.site + font.pixelSize: 12 + font.weight: Font.Thin color: Style.current.secondaryText anchors.top: linkTitle.bottom - anchors.topMargin: Style.current.halfPadding + anchors.topMargin: 2 anchors.left: linkTitle.left } @@ -146,49 +165,90 @@ Item { Component { id: enableLinkComponent Rectangle { - width: 200 - height: enableColumn.height + 2 * Style.current.halfPadding + width: 300 + height: childrenRect.height + Style.current.smallPadding radius: 16 border.width: 1 border.color: Style.current.border color:Style.current.background - // TODO add image once Simon gives us the design - Column { - id: enableColumn - spacing: Style.current.halfPadding + StatusIconButton { + icon.name: "close" + icon.width: 20 + icon.height: 20 anchors.top: parent.top - anchors.topMargin: Style.current.halfPadding - width: parent.width - 2 * Style.current.halfPadding - anchors.horizontalCenter: parent.horizontalCenter - - StyledText { - text: qsTr("Enable link previews in chat?") - horizontalAlignment: Text.AlignHCenter - } - StyledText { - text: qsTr("Once enabled, links posted in the chat may share your metadata with the site") - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.WordWrap - width: parent.width - color: Style.current.secondaryText - } - StatusButton { - text: qsTr("Enable in Settings") - onClicked: { - appMain.changeAppSection(Constants.profile) - profileLayoutContainer.changeProfileSection(ProfileConstants.PRIVACY_AND_SECURITY) - } - } - StatusButton { - text: qsTr("Don't ask me again") - onClicked: { - appSettings.neverAskAboutUnfurlingAgain = true - } - } + anchors.topMargin: Style.current.smallPadding + anchors.right: parent.right + anchors.rightMargin: Style.current.smallPadding } + Image { + id: unfurlingImage + source: "../../../../img/unfurling-image.png" + width: 132 + height: 94 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: Style.current.smallPadding + } + StyledText { + id: enableText + text: qsTr("Enable link previews in chat?") + horizontalAlignment: Text.AlignHCenter + width: parent.width + wrapMode: Text.WordWrap + anchors.top: unfurlingImage.bottom + anchors.topMargin: Style.current.halfPadding + font.pixelSize: 15 + } + + StyledText { + id: infoText + text: qsTr("Once enabled, links posted in the chat may share your metadata with their owners") + horizontalAlignment: Text.AlignHCenter + width: parent.width + wrapMode: Text.WordWrap + anchors.top: enableText.bottom + font.pixelSize: 13 + color: Style.current.secondaryText + } + + Separator { + id: sep1 + anchors.top: infoText.bottom + anchors.topMargin: Style.current.smallPadding + } + + StatusButton { + id: enableBtn + text: qsTr("Enable in Settings") + type: "secondary" + onClicked: { + appMain.changeAppSection(Constants.profile) + profileLayoutContainer.changeProfileSection(ProfileConstants.PRIVACY_AND_SECURITY) + } + width: parent.width +// height: 43 + anchors.top: sep1.bottom + } + + Separator { + id: sep2 + anchors.top: enableBtn.bottom + anchors.topMargin: 0 + } + + StatusButton { + text: qsTr("Don't ask me again") + type: "secondary" + onClicked: { + appSettings.neverAskAboutUnfurlingAgain = true + } + width: parent.width +// height: 43 + anchors.top: sep2.bottom + } } } } diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml index fcb70fa5c2..4e4f7de12d 100644 --- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml @@ -174,7 +174,15 @@ Item { StatusSectionHeadline { id: labelURLUnfurling - text: qsTr("URL Previews") + text: qsTr("Chat link previews") + font.pixelSize: 17 + font.weight: Font.Bold + color: Style.current.textColor + } + + StatusSectionHeadline { + id: labelWebsites + text: qsTr("Websites") } ListView { @@ -183,26 +191,48 @@ Item { model: previewableSites interactive: false height: childrenRect.height + spacing: Style.current.padding delegate: Component { - RowLayout { - id: displayYoutubeSettings + Item { + width: parent.width + height: childrenRect.height + StyledText { - text: qsTr("Display %1 previews").arg(title) + 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: !!appSettings.whitelistedUnfurlingSites[address] onCheckedChanged: function () { changeUnfurlingWhitelist(address, this.checked) } - } - StyledText { - //% "under development" - text: qsTrId("under-development") + 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/unfurling-image.png b/ui/app/img/unfurling-image.png new file mode 100644 index 0000000000..da01162e65 Binary files /dev/null and b/ui/app/img/unfurling-image.png differ