fix: fix chat link preview modal
Fixes #2001 Fixes icons Fixes Icon border Fixes button hover Fixes list scrolling and overflow
This commit is contained in:
Jonathan Rainville
Iuri Matias
parent
9621230e6d
commit
9d9b0ab5e6
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="black"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1709 12.2861H25.83V27.7142H14.1699L14.1709 12.2861Z" fill="black"/>
|
||||
<path d="M11.8398 11.7139H14.1708V28.2859H11.8398V11.7139Z" fill="#04FF8E"/>
|
||||
<path d="M25.8291 16.2861H28.16V28.286H25.8291V16.2861Z" fill="#8E2EFF"/>
|
||||
<path d="M11.8398 27.7139H28.1598V30H11.8398V27.7139Z" fill="#00C5FF"/>
|
||||
<path d="M11.8398 10H21.1658V12.286H11.8398V10Z" fill="#FFF152"/>
|
||||
<path d="M25.829 14.571V12.286H23.497V10H21.166V16.857H28.16V14.571" fill="#FF5B5B"/>
|
||||
<path d="M25.8291 19.1434V16.8574H28.16" fill="#551C99"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1661 10V12.286H18.834" fill="#999131"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white" transform="translate(10 10)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 957 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="white"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0555 3.38867C10.617 3.38867 2.99805 11.0076 2.99805 20.4461C2.99805 27.9513 7.88784 34.3194 14.7108 36.5938C15.6205 36.7075 15.848 36.2526 15.848 35.7977V32.8411C11.0719 33.8646 10.0484 30.5668 10.0484 30.5668C9.25243 28.6336 8.11527 28.065 8.11527 28.065C6.52324 27.0416 8.22899 27.0416 8.22899 27.0416C9.93473 27.1553 10.8445 28.7473 10.8445 28.7473C12.3228 31.3628 14.8245 30.5668 15.848 30.1119C15.9617 28.9748 16.4165 28.2925 16.9851 27.8376C13.2325 27.3828 9.25243 25.9044 9.25243 19.4226C9.25243 17.6032 9.93473 16.0112 10.9582 14.874C10.7307 14.4191 10.1622 12.7134 11.0719 10.3253C11.0719 10.3253 12.5502 9.87049 15.7342 12.0311C17.0988 11.6899 18.5771 11.4625 20.0555 11.4625C21.5338 11.4625 23.0121 11.6899 24.3767 12.0311C27.6744 9.87049 29.039 10.3253 29.039 10.3253C29.9488 12.7134 29.3802 14.4191 29.1527 14.874C30.2899 16.0112 30.8585 17.6032 30.8585 19.4226C30.8585 26.0182 26.8784 27.3828 23.1258 27.8376C23.6944 28.4062 24.2629 29.4296 24.2629 31.0217V35.684C24.2629 36.1389 24.6041 36.7075 25.4001 36.48C32.2231 34.2057 36.9991 27.8376 36.9991 20.3324C37.1129 11.0076 29.4939 3.38867 20.0555 3.38867Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="34" height="34" fill="white" transform="translate(3 3)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="white"/>
|
||||
<path d="M13.897 12C18.2584 12 21.7937 15.567 21.7937 19.9667C21.7937 24.3665 18.2581 27.9332 13.897 27.9332C9.53585 27.9332 6 24.3665 6 19.9667C6 15.567 9.53558 12 13.897 12ZM26.5079 12.4667C28.6886 12.4667 30.4564 15.8242 30.4564 19.9667H30.4566C30.4566 24.1082 28.6888 27.4668 26.5082 27.4668C24.3275 27.4668 22.5597 24.1082 22.5597 19.9667C22.5597 15.8253 24.3272 12.4667 26.5079 12.4667ZM32.6113 13.2479C33.3781 13.2479 34 16.2559 34 19.9667C34 23.6764 33.3784 26.6856 32.6113 26.6856C31.8443 26.6856 31.2229 23.6772 31.2229 19.9667C31.2229 16.2562 31.8445 13.2479 32.6113 13.2479Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 758 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 8.76657e-09C8.95419 -0.000323511 0 8.95374 0 19.9997C0 31.0456 8.95419 39.9997 20 39.9997C31.0458 39.9997 40 31.0453 40 19.9997C40 8.95406 31.0458 8.76657e-09 20 8.76657e-09Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3735 19.8153C20.9765 19.9534 19.4742 19.395 17.0768 19.5335C16.4822 19.5669 15.8917 19.6531 15.3123 19.791C15.6661 15.3575 18.8039 11.4791 23.0706 11.2326C25.689 11.0815 28.3061 12.6982 28.4481 15.3225C28.5877 17.902 26.621 19.6276 23.3739 19.8149L23.3735 19.8153ZM16.9365 28.8839C14.4281 29.0256 11.9213 27.5121 11.7852 25.0563C11.6513 22.6422 13.5358 21.0272 16.6465 20.8518C18.9426 20.7224 20.3819 21.2452 22.6781 21.1155C23.2474 21.0843 23.8129 21.0036 24.3684 20.8745C24.03 25.0236 21.0242 28.6535 16.9365 28.8839ZM20 0.000323516C8.95419 -4.18056e-09 0 8.95406 0 20C0 31.0459 8.95419 40 20 40C31.0458 40 40 31.0456 40 20C40 8.95438 31.0458 0 20 0" fill="#4360DF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="white"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4595 21.2914C11.5025 21.6135 11.5955 21.9017 11.7602 22.1612C12.1468 22.7715 12.7087 23.0614 13.4282 23.056C14.0188 23.0524 14.5253 22.8377 14.962 22.4439C15.1911 22.2363 15.5132 22.2757 15.6743 22.5245C15.7906 22.7034 15.7674 22.92 15.6063 23.0811C15.1177 23.5697 14.536 23.8739 13.847 23.958C13.396 24.0135 12.9468 24.0028 12.5083 23.8668C11.5096 23.5571 10.8457 22.8949 10.5504 21.8999C10.2049 20.7312 10.3893 19.6448 11.2036 18.7106C11.7566 18.0788 12.4725 17.7782 13.3155 17.7925C14.0421 17.805 14.6756 18.052 15.1857 18.58C15.6099 19.0184 15.8443 19.5536 15.9517 20.1477C15.9929 20.3732 16.0108 20.6023 16.0215 20.8314C16.034 21.0838 15.8372 21.2806 15.5848 21.2932C15.549 21.2949 15.5132 21.2932 15.4774 21.2932H11.5866C11.5508 21.2914 11.5132 21.2914 11.4595 21.2914ZM14.953 20.3911C14.9262 20.1585 14.86 19.9437 14.7723 19.7343C14.2497 18.5048 12.8913 18.4726 12.1933 19.0721C11.8264 19.3871 11.6099 19.7898 11.5025 20.2551C11.4917 20.2981 11.4882 20.341 11.4792 20.3911H14.953Z" fill="#007ADD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1924 20.8548C23.1942 19.2727 24.4201 17.7855 26.2957 17.7891C28.0443 17.7909 29.3848 19.1457 29.3812 20.9067C29.3776 22.6374 28.0103 23.9868 26.2582 23.9886C24.5705 23.9886 23.1888 22.5783 23.1924 20.8548ZM28.3217 20.9372C28.3127 20.3233 28.1356 19.8114 27.7472 19.3783C26.9544 18.4924 25.5065 18.5264 24.7459 19.4392C24.1123 20.1998 24.0676 21.5421 24.8031 22.3689C25.4582 23.1063 26.6358 23.2584 27.4376 22.6857C28.0479 22.249 28.3038 21.6316 28.3217 20.9372Z" fill="#007ADD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0582 18.6588C18.171 18.5514 18.2622 18.4601 18.3571 18.3742C18.8153 17.9554 19.3629 17.7836 19.9732 17.789C20.4546 17.7944 20.9074 17.9017 21.3083 18.1809C21.8059 18.5281 22.0761 19.0203 22.1817 19.6055C22.2157 19.7953 22.2336 19.9903 22.2354 20.1836C22.2408 21.2789 22.2372 22.3724 22.2372 23.4677C22.2372 23.6771 22.1047 23.8758 21.9097 23.9474C21.7056 24.0225 21.5141 23.9921 21.3566 23.8346C21.2457 23.7255 21.1974 23.5876 21.1974 23.4302C21.1992 22.4154 21.2027 21.4024 21.1938 20.3876C21.192 20.1872 21.1634 19.9814 21.115 19.7881C20.9629 19.1957 20.5388 18.836 19.932 18.7662C19.5007 18.7161 19.0909 18.7841 18.7311 19.0454C18.2533 19.3926 18.0618 19.8865 18.06 20.4592C18.0564 21.4579 18.06 22.4583 18.0582 23.457C18.0582 23.84 17.686 24.0888 17.3316 23.9438C17.1437 23.8668 17.0166 23.6628 17.0166 23.4337V21.8498V18.3152C17.0166 18.1129 17.1097 17.959 17.2815 17.8588C17.4587 17.755 17.643 17.7604 17.8166 17.8695C17.9651 17.9644 18.0546 18.1022 18.0582 18.2847C18.06 18.4029 18.0582 18.5174 18.0582 18.6588Z" fill="#007ADD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.06052 17.911H8.17685H9.46544C9.65873 17.911 9.81622 17.9736 9.91644 18.1472C10.0829 18.4389 9.91287 18.7915 9.57998 18.8416C9.52808 18.8488 9.4726 18.8506 9.41891 18.8506H8.17506H8.06052V18.9508V22.1454C8.06052 22.3602 8.09452 22.566 8.23949 22.7414C8.35761 22.8846 8.51689 22.9454 8.69049 22.9723C8.95 23.0134 9.20772 22.9919 9.46007 22.9132C9.69989 22.8362 9.93613 22.9436 10.0167 23.1673C10.099 23.3946 9.98266 23.6183 9.76074 23.7257C9.46007 23.8725 9.14508 23.9369 8.81219 23.9548C7.94955 23.9978 7.17461 23.3714 7.04396 22.5159C7.02606 22.4049 7.0207 22.2904 7.0207 22.1776C7.01891 21.1128 7.01891 20.0479 7.01891 18.983V18.8595C6.97953 18.8577 6.94732 18.8541 6.91689 18.8541C6.72002 18.8541 6.52316 18.8577 6.32629 18.8524C6.00414 18.8434 5.79654 18.6018 5.84486 18.2975C5.87886 18.0828 6.07394 17.9217 6.31913 17.9145C6.51242 17.9092 6.7075 17.9128 6.90079 17.9128C7.01891 17.9128 7.01891 17.9128 7.01891 17.7893V16.5454C7.01891 16.2412 7.23904 16.0085 7.53255 16.0049C7.82606 16.0013 8.05694 16.2358 8.05873 16.5436C8.06052 16.9606 8.05873 17.3794 8.05873 17.7964C8.06052 17.8304 8.06052 17.8662 8.06052 17.911Z" fill="#007ADD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4612 19.0441C31.6151 18.8687 31.7511 18.6951 31.9086 18.5412C32.2684 18.1904 32.6907 17.9452 33.1883 17.8468C33.3386 17.8163 33.4961 17.8092 33.65 17.8163C33.9417 17.8324 34.1601 18.0758 34.1601 18.3622C34.1601 18.645 33.9382 18.8848 33.65 18.9116C33.437 18.9313 33.2205 18.9349 33.0111 18.9796C32.4366 19.1031 32.0303 19.4503 31.769 19.9711C31.54 20.4257 31.463 20.9161 31.4612 21.419C31.4576 22.0902 31.4612 22.7613 31.4612 23.4324C31.4612 23.7438 31.2321 23.9855 30.9368 23.9837C30.6397 23.9819 30.416 23.751 30.416 23.4396V18.3049C30.416 18.0723 30.5807 17.8611 30.8026 17.8056C31.046 17.7447 31.2822 17.845 31.3878 18.0687C31.429 18.1546 31.4523 18.2548 31.4558 18.3515C31.4666 18.5501 31.4594 18.7506 31.4594 18.951C31.4612 18.9814 31.4612 19.0101 31.4612 19.0441Z" fill="#007ADD"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="28.5714" height="8" fill="white" transform="translate(5.71387 16)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="20" fill="white"/>
|
||||
<path d="M31.4384 14.5459C31.3025 14.0651 31.0375 13.6268 30.6697 13.2746C30.302 12.9225 29.8442 12.6687 29.3422 12.5386C27.5042 12.0586 20.1067 12.0586 20.1067 12.0586C20.1067 12.0586 12.7093 12.0731 10.8713 12.5531C10.3692 12.6832 9.91152 12.937 9.54374 13.2892C9.17596 13.6414 8.91095 14.0796 8.77509 14.5604C8.21914 17.6877 8.00344 22.4528 8.79028 25.455C8.92614 25.9357 9.19115 26.374 9.55893 26.7262C9.92671 27.0784 10.3844 27.3321 10.8865 27.4622C12.7245 27.9422 20.1219 27.9422 20.1219 27.9422C20.1219 27.9422 27.5194 27.9422 29.3574 27.4622C29.8594 27.3321 30.3171 27.0784 30.6849 26.7262C31.0527 26.374 31.3177 25.9357 31.4536 25.455C32.0399 22.3233 32.2207 17.5611 31.4384 14.5459Z" fill="#FF0000"/>
|
||||
<path d="M17.752 23.404L23.8887 20.0003L17.752 16.5967V23.404Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 945 B |
Loading…
Reference in New Issue