Use filled shields everywhere and distinguish different states more

3 years ago · df1f549a2c
parent f3aeb4b044
commit df1f549a2c
11 changed files with 38 additions and 26 deletions
--- a/resources/icons/ui/shield-filled-checkmark.svg
+++ b/resources/icons/ui/shield-filled-checkmark.svg
@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75Zm-3.493 4.303-6 5.5a.75.75 0 0 1-1.037-.023l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.993 1.992 5.47-5.015a.75.75 0 0 1 1.014 1.106Z" fill="#212121"/></svg>
--- a/resources/icons/ui/shield-filled-cross.svg
+++ b/resources/icons/ui/shield-filled-cross.svg
@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.45 2.15C14.992 4.057 17.587 5 20.25 5a.75.75 0 0 1 .75.75V11c0 5.001-2.958 8.676-8.725 10.948a.75.75 0 0 1-.55 0C5.958 19.676 3 16 3 11V5.75A.75.75 0 0 1 3.75 5c2.663 0 5.258-.943 7.8-2.85a.75.75 0 0 1 .9 0ZM9.28 8.222a.75.75 0 0 0-1.13.975l.072.084 2.723 2.723-2.723 2.725a.749.749 0 1 0 1.059 1.059l2.723-2.724 2.725 2.724a.75.75 0 0 0 .975.073l.084-.073a.75.75 0 0 0 .073-.975l-.073-.084-2.724-2.725 2.724-2.723a.749.749 0 1 0-1.06-1.06l-2.724 2.724-2.723-2.723Z" fill="#212121"/></svg>
--- a/resources/icons/ui/shield-filled-exclamation-mark.svg
+++ b/resources/icons/ui/shield-filled-exclamation-mark.svg
@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.45 2.15C14.992 4.057 17.587 5 20.25 5a.75.75 0 0 1 .75.75V11c0 5.001-2.958 8.676-8.725 10.948a.75.75 0 0 1-.55 0C5.958 19.676 3 16 3 11V5.75A.75.75 0 0 1 3.75 5c2.663 0 5.258-.943 7.8-2.85a.75.75 0 0 1 .9 0ZM12 16a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0-9.018a.75.75 0 0 0-.743.648l-.007.102v6.5l.007.102a.75.75 0 0 0 1.486 0l.007-.102v-6.5l-.007-.102A.75.75 0 0 0 12 6.982Z" fill="#212121"/></svg>
--- a/resources/icons/ui/shield-filled.svg
+++ b/resources/icons/ui/shield-filled.svg
@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5.75A.75.75 0 0 1 3.75 5c2.663 0 5.258-.943 7.8-2.85a.75.75 0 0 1 .9 0C14.992 4.057 17.587 5 20.25 5a.75.75 0 0 1 .75.75V11c0 5.001-2.958 8.676-8.725 10.948a.75.75 0 0 1-.55 0C5.958 19.676 3 16 3 11V5.75Z" fill="#212121"/></svg>
--- a/resources/icons/ui/shield-small-filled.svg
+++ b/resources/icons/ui/shield-small-filled.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638Z" fill="#212121"/>
-</svg>
--- a/resources/icons/ui/shield-unprotected.svg
+++ b/resources/icons/ui/shield-unprotected.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.45 2.15C14.992 4.05652 17.5866 5 20.25 5C20.6642 5 21 5.33579 21 5.75V11C21 16.0012 18.0424 19.6757 12.2749 21.9478C12.0982 22.0174 11.9018 22.0174 11.7251 21.9478C5.95756 19.6757 3 16.0012 3 11V5.75C3 5.33579 3.33579 5 3.75 5C6.41341 5 9.00797 4.05652 11.55 2.15C11.8167 1.95 12.1833 1.95 12.45 2.15ZM12 3.67782C9.58084 5.38829 7.07735 6.32585 4.5 6.47793V11C4.5 15.2556 6.95337 18.3789 12 20.4419C17.0466 18.3789 19.5 15.2556 19.5 11V6.47793C16.9227 6.32585 14.4192 5.38829 12 3.67782ZM9.28091 8.22158L12.004 10.945L14.7287 8.22158C14.9946 7.95565 15.4108 7.93147 15.704 8.14906L15.788 8.22158C16.054 8.48751 16.0781 8.90365 15.8606 9.1969L15.788 9.28091L13.064 12.004L15.788 14.7287C16.0806 15.0212 16.0806 15.4955 15.788 15.788C15.4955 16.0806 15.0212 16.0806 14.7287 15.788L12.004 13.064L9.28091 15.788C9.01498 16.054 8.59884 16.0781 8.3056 15.8606L8.22158 15.788C7.95565 15.5221 7.93147 15.106 8.14906 14.8127L8.22158 14.7287L10.945 12.004L8.22158 9.28091C7.92906 8.98839 7.92906 8.51411 8.22158 8.22158C8.51411 7.92906 8.98839 7.92906 9.28091 8.22158Z" fill="#212121"/>
-</svg>
--- a/resources/icons/ui/shield.svg
+++ b/resources/icons/ui/shield.svg
@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.55 2.15C13.8136 1.95234 14.1752 1.9498 14.4415 2.14374C16.3908 3.56337 18.7862 4.40864 20.7279 4.89772C21.6929 5.14079 22.5327 5.29266 23.1297 5.38355C23.4279 5.42895 23.6647 5.45903 23.8254 5.47762C23.9058 5.48692 23.967 5.49333 24.0074 5.49735L24.0519 5.50164L24.0619 5.50255L24.0635 5.5027C24.4516 5.53582 24.75 5.8605 24.75 6.25V13C24.75 17.8286 21.537 23.6152 14.2295 25.964C14.0803 26.012 13.9197 26.012 13.7705 25.964C6.4765 23.6195 3 17.8425 3 12.75V6.25058C2.99999 5.85964 3.30026 5.53373 3.68991 5.50241L3.6948 5.502L3.71491 5.50025C3.73338 5.49861 3.76188 5.49598 3.79981 5.49223C3.87567 5.48474 3.98919 5.47277 4.13559 5.4552C4.42848 5.42006 4.85228 5.36261 5.36882 5.27399C6.4039 5.09641 7.80132 4.79535 9.2598 4.30227C10.7535 3.79728 12.283 3.10026 13.55 2.15ZM4.50002 6.92144L4.5 12.75C4.50001 17.1069 7.45447 22.2606 13.9999 24.4605C20.5267 22.265 23.25 17.1234 23.25 13V6.91656C23.145 6.90218 23.0293 6.88556 22.9039 6.86645C22.2694 6.76984 21.3816 6.60921 20.3615 6.35228C18.4705 5.87598 16.0787 5.05743 14.0052 3.6683C12.6708 4.58003 11.1624 5.24244 9.7402 5.72326C8.18705 6.24834 6.70947 6.5659 5.62246 6.75239C5.17746 6.82874 4.79625 6.8834 4.50002 6.92144Z" fill="#212121"/>
-</svg>
--- a/resources/qml/EncryptionIndicator.qml
+++ b/resources/qml/EncryptionIndicator.qml
@ -13,14 +13,25 @@ Image {
    property int trust: Crypto.Unverified

    property string sourceUrl: {
-        if (width <= 16 || height <= 16)
-            return "image://colorimage/:/icons/icons/ui/shield-small-filled.svg?";
-        else
-            return "image://colorimage/:/icons/icons/ui/shield.svg?";
+        if (!encrypted)
+        return "image://colorimage/:/icons/icons/ui/shield-filled-cross.svg?";
+
+        switch (trust) {
+            case Crypto.Verified:
+            return "image://colorimage/:/icons/icons/ui/shield-filled-checkmark.svg?";
+            case Crypto.TOFU:
+            return "image://colorimage/:/icons/icons/ui/shield-filled.svg?";
+            case Crypto.Unverified:
+            return "image://colorimage/:/icons/icons/ui/shield-filled-exclamation-mark.svg?";
+            default:
+            return "image://colorimage/:/icons/icons/ui/shield-filled-cross.svg?";
+        }
    }

    width: 16
    height: 16
+    sourceSize.height: height
+    sourceSize.width: width
    source: {
        if (encrypted) {
            switch (trust) {
--- a/resources/qml/TopBar.qml
+++ b/resources/qml/TopBar.qml
@ -117,6 +117,8 @@ Rectangle {
            Layout.rowSpan: 2
            Layout.preferredHeight: Nheko.avatarSize - Nheko.paddingMedium
            Layout.preferredWidth: Nheko.avatarSize - Nheko.paddingMedium
+            sourceSize.height: Layout.preferredHeight
+            sourceSize.width: Layout.preferredWidth
            visible: isEncrypted
            encrypted: isEncrypted
            trust: trustlevel
--- a/resources/qml/dialogs/UserProfile.qml
+++ b/resources/qml/dialogs/UserProfile.qml
@ -213,12 +213,13 @@ ApplicationWindow {
                onClicked: profile.verify()
            }

-            Image {
+            EncryptionIndicator {
                Layout.preferredHeight: 16
                Layout.preferredWidth: 16
-                source: "image://colorimage/:/icons/icons/ui/shield-small-filled.svg?" + ((profile.userVerified == Crypto.Verified) ? "green" : Nheko.colors.buttonText)
-                visible: profile.userVerified != Crypto.Unverified
+                encrypted: profile.userVerificationEnabled
+                trust: profile.userVerified
                Layout.alignment: Qt.AlignHCenter
+                ToolTip.visible: false
            }

            RowLayout {
@ -304,16 +305,18 @@ ApplicationWindow {
                        Layout.preferredHeight: 16
                        Layout.preferredWidth: 16
                        visible: profile.isSelf && verificationStatus != VerificationStatus.NOT_APPLICABLE
+                        sourceSize.height: 16
+                        sourceSize.width: 16
                        source: {
                            switch (verificationStatus) {
                            case VerificationStatus.VERIFIED:
-                                return "image://colorimage/:/icons/icons/ui/shield-small-filled.svg?green";
+                                return "image://colorimage/:/icons/icons/ui/shield-filled-checkmark.svg?green";
                            case VerificationStatus.UNVERIFIED:
-                                return "image://colorimage/:/icons/icons/ui/shield-unprotected.svg?#d6c020";
+                                return "image://colorimage/:/icons/icons/ui/shield-filled-exclamation-mark.svg?#d6c020";
                            case VerificationStatus.SELF:
-                                return "image://colorimage/:/icons/icons/ui/checkmark.svg?green";
+                                return "image://colorimage/:/icons/ui/checkmark.svg?green";
                            default:
-                                return "image://colorimage/:/icons/icons/ui/shield-unprotected.svg?red";
+                                return "image://colorimage/:/icons/ui/shield-filled-cross.svg?#d6c020";
                            }
                        }
                    }
@ -388,13 +391,13 @@ ApplicationWindow {
                source: {
                    switch (verificationStatus) {
                    case VerificationStatus.VERIFIED:
-                        return "image://colorimage/:/icons/icons/ui/shield-small-filled.svg?green";
+                        return "image://colorimage/:/icons/icons/ui/shield-filled-checkmark.svg?green";
                    case VerificationStatus.UNVERIFIED:
-                        return "image://colorimage/:/icons/icons/ui/shield-unprotected.svg?#d6c020";
+                        return "image://colorimage/:/icons/icons/ui/shield-filled-exclamation-mark.svg?#d6c020";
                    case VerificationStatus.SELF:
                        return "image://colorimage/:/icons/icons/ui/checkmark.svg?green";
                    default:
-                        return "image://colorimage/:/icons/icons/ui/shield-unprotected.svg?red";
+                        return "image://colorimage/:/icons/icons/ui/shield-filled.svg?red";
                    }
                }
            }
--- a/resources/res.qrc
+++ b/resources/res.qrc
@ -25,8 +25,6 @@
        <file>icons/ui/screen-share.svg</file>
        <file>icons/ui/search.svg</file>
        <file>icons/ui/settings.svg</file>
-        <file>icons/ui/shield-unprotected.svg</file>
-        <file>icons/ui/shield.svg</file>
        <file>icons/ui/speech-bubbles.svg</file>
        <file>icons/ui/star.svg</file>
        <file>icons/ui/tag.svg</file>
@ -49,7 +47,10 @@
        <file>icons/emoji-categories/people.svg</file>
        <file>icons/emoji-categories/symbols.svg</file>
        <file>icons/emoji-categories/travel.svg</file>
-        <file>icons/ui/shield-small-filled.svg</file>
+        <file>icons/ui/shield-filled.svg</file>
+        <file>icons/ui/shield-filled-exclamation-mark.svg</file>
+        <file>icons/ui/shield-filled-checkmark.svg</file>
+        <file>icons/ui/shield-filled-cross.svg</file>
    </qresource>
    <qresource prefix="/logos">
        <file>nheko.png</file>
				`@ -0,0 +1 @@`
				`<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75Zm-3.493 4.303-6 5.5a.75.75 0 0 1-1.037-.023l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.993 1.992 5.47-5.015a.75.75 0 0 1 1.014 1.106Z" fill="#212121"/></svg>`
				`@ -0,0 +1 @@`
				<svg width="32" height="32" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.45 2.15C14.992 4.057 17.587 5 20.25 5a.75.75 0 0 1 .75.75V11c0 5.001-2.958 8.676-8.725 10.948a.75.75 0 0 1-.55 0C5.958 19.676 3 16 3 11V5.75A.75.75 0 0 1 3.75 5c2.663 0 5.258-.943 7.8-2.85a.75.75 0 0 1 .9 0ZM9.28 8.222a.75.75 0 0 0-1.13.975l.072.084 2.723 2.723-2.723 2.725a.749.749 0 1 0 1.059 1.059l2.723-2.724 2.725 2.724a.75.75 0 0 0 .975.073l.084-.073a.75.75 0 0 0 .073-.975l-.073-.084-2.724-2.725 2.724-2.723a.749.749 0 1 0-1.06-1.06l-2.724 2.724-2.723-2.723Z" fill="#212121"/></svg>