From 6d1d66c2eb2e34dcc406f29abe75a8ac65461768 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Tue, 23 Jun 2020 14:59:16 -0400 Subject: [PATCH] fix: SVG images blurryness --- ui/app/AppMain.qml | 25 ++++++++++++++++++------- ui/app/img/compass.svg | 6 +++--- ui/app/img/compassActive.svg | 6 +++--- ui/app/img/message.svg | 6 ++---- ui/app/img/messageActive.svg | 6 ++---- ui/app/img/node.svg | 4 ++-- ui/app/img/nodeActive.svg | 3 +++ ui/app/img/profile.svg | 5 +++-- ui/app/img/profileActive.svg | 5 +++-- ui/app/img/wallet.svg | 5 +++-- ui/app/img/walletActive.svg | 5 +++-- ui/onboarding/Login.qml | 2 +- ui/shared/SVGImage.qml | 14 ++++++++++++++ 13 files changed, 60 insertions(+), 32 deletions(-) create mode 100644 ui/app/img/nodeActive.svg create mode 100644 ui/shared/SVGImage.qml diff --git a/ui/app/AppMain.qml b/ui/app/AppMain.qml index 677b7b4619..0eeb31d192 100644 --- a/ui/app/AppMain.qml +++ b/ui/app/AppMain.qml @@ -2,6 +2,7 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../imports" +import "../shared" import "./AppLayouts" RowLayout { @@ -11,7 +12,7 @@ RowLayout { TabBar { id: tabBar - width: 80 + width: 78 Layout.maximumWidth: 80 Layout.preferredWidth: 80 Layout.minimumWidth: 80 @@ -43,8 +44,10 @@ RowLayout { radius: 50 } - Image { + SVGImage { id: image + height: 24 + width: 24 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit @@ -66,8 +69,10 @@ RowLayout { radius: 50 } - Image { + SVGImage { id: image1 + height: 24 + width: 24 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit @@ -90,8 +95,10 @@ RowLayout { radius: 50 } - Image { + SVGImage { id: image2 + height: 24 + width: 24 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit @@ -113,8 +120,10 @@ RowLayout { radius: 50 } - Image { + SVGImage { id: image3 + height: 24 + width: 24 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit @@ -137,12 +146,14 @@ RowLayout { radius: 50 } - Image { + SVGImage { id: image4 + height: 24 + width: 24 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit - source: parent.checked ? "img/node.svg" : "img/node.svg" + source: parent.checked ? "img/nodeActive.svg" : "img/node.svg" } } } diff --git a/ui/app/img/compass.svg b/ui/app/img/compass.svg index b4e706b78b..0eeb01165f 100644 --- a/ui/app/img/compass.svg +++ b/ui/app/img/compass.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/ui/app/img/compassActive.svg b/ui/app/img/compassActive.svg index 35f8f4e93c..4fc6449688 100644 --- a/ui/app/img/compassActive.svg +++ b/ui/app/img/compassActive.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/ui/app/img/message.svg b/ui/app/img/message.svg index bf91a53111..8595fa58da 100644 --- a/ui/app/img/message.svg +++ b/ui/app/img/message.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/ui/app/img/messageActive.svg b/ui/app/img/messageActive.svg index d836304d6f..7aa3325110 100644 --- a/ui/app/img/messageActive.svg +++ b/ui/app/img/messageActive.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/ui/app/img/node.svg b/ui/app/img/node.svg index 96f3bcebeb..49a9dceb9c 100644 --- a/ui/app/img/node.svg +++ b/ui/app/img/node.svg @@ -1,3 +1,3 @@ - - + + diff --git a/ui/app/img/nodeActive.svg b/ui/app/img/nodeActive.svg new file mode 100644 index 0000000000..08a07b473c --- /dev/null +++ b/ui/app/img/nodeActive.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/profile.svg b/ui/app/img/profile.svg index 6aaa1a4af8..7be6a06512 100644 --- a/ui/app/img/profile.svg +++ b/ui/app/img/profile.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/ui/app/img/profileActive.svg b/ui/app/img/profileActive.svg index 0c02d1f2f4..a40b9e792c 100644 --- a/ui/app/img/profileActive.svg +++ b/ui/app/img/profileActive.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/ui/app/img/wallet.svg b/ui/app/img/wallet.svg index df5ea7142d..3243f8f362 100644 --- a/ui/app/img/wallet.svg +++ b/ui/app/img/wallet.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/ui/app/img/walletActive.svg b/ui/app/img/walletActive.svg index d63cdc8a0c..f8996f8ba6 100644 --- a/ui/app/img/walletActive.svg +++ b/ui/app/img/walletActive.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/ui/onboarding/Login.qml b/ui/onboarding/Login.qml index bfe534825d..631239671d 100644 --- a/ui/onboarding/Login.qml +++ b/ui/onboarding/Login.qml @@ -170,7 +170,7 @@ Item { } } - Image { + SVGImage { id: loadingImg visible: loading anchors.left: txtPassword.right diff --git a/ui/shared/SVGImage.qml b/ui/shared/SVGImage.qml new file mode 100644 index 0000000000..33bf0bc790 --- /dev/null +++ b/ui/shared/SVGImage.qml @@ -0,0 +1,14 @@ +import QtQuick 2.13 + +// Source: https://forum.qt.io/topic/52161/properly-scaling-svg-images/6 + +Image { + sourceSize: Qt.size(hiddenImg.sourceSize.width * 2, hiddenImg.sourceSize.height * 2) + Image { + id: hiddenImg + source: parent.source + width: 0 + height: 0 + } + +} \ No newline at end of file