status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: introduce bigger versions of navbar icons 

Turns out the icons used in the navigation bar of the application actually
are designed to be bigger than the usual icons.

We can't just use the original source and scale them up in QML because that
will impact the stroke width of the SVGs as well, hence we need to introduce
a special set of icons that are design bigger but presever the feature ratios.
This commit is contained in:
Pascal Precht 2021-08-31 11:19:24 +02:00 committed by Pascal Precht
parent 387bfe77c0
commit 0a4d3860ea
9 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sandbox/DemoApp.qml
View File

@ -113,16 +113,16 @@ Rectangle {
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "browser"
icon.name: "bigger/browser"
tooltip.text: "Browser"
},
StatusNavBarTabButton {
icon.name: "status-update"
icon.name: "bigger/status-update"
tooltip.text: "Timeline"
},
StatusNavBarTabButton {
id: profileNavButton
icon.name: "profile"
icon.name: "bigger/settings"
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5

4
src/assets/img/icons/bigger/browser.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24014 16.1491C7.1427 16.5194 7.48062 16.8573 7.85093 16.7599L14.6218 14.9781C14.7961 14.9322 14.9322 14.7961 14.9781 14.6218L16.7599 7.85093C16.8573 7.48062 16.5194 7.1427 16.1491 7.24014L9.37823 9.02194C9.20394 9.06781 9.06781 9.20394 9.02194 9.37823L7.24014 16.1491ZM9.25791 14.3756C9.19944 14.5978 9.4022 14.8006 9.62438 14.7421L13.3938 13.7501C13.5681 13.7043 13.7043 13.5681 13.7501 13.3938L14.7421 9.62438C14.8006 9.4022 14.5978 9.19944 14.3756 9.25791L10.6062 10.2499C10.4319 10.2957 10.2957 10.4319 10.2499 10.6062L9.25791 14.3756Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
src/assets/img/icons/bigger/network.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26285 18.4743C7.26285 19.7317 6.24355 20.751 4.98618 20.751C3.7288 20.751 2.7095 19.7317 2.7095 18.4743C2.7095 17.2169 3.7288 16.1976 4.98618 16.1976C6.24355 16.1976 7.26285 17.2169 7.26285 18.4743ZM4.98618 22.251C6.81518 22.251 8.34052 20.9508 8.68838 19.2243H15.3116C15.6595 20.9508 17.1848 22.251 19.0138 22.251C21.0996 22.251 22.7905 20.5601 22.7905 18.4743C22.7905 16.3885 21.0996 14.6976 19.0138 14.6976C17.1848 14.6976 15.6595 15.9978 15.3116 17.7243H8.68838C8.34052 15.9978 6.81518 14.6976 4.98618 14.6976C2.90038 14.6976 1.2095 16.3885 1.2095 18.4743C1.2095 20.5601 2.90038 22.251 4.98618 22.251ZM21.2905 18.4743C21.2905 19.7317 20.2712 20.751 19.0138 20.751C17.7564 20.751 16.7371 19.7317 16.7371 18.4743C16.7371 17.2169 17.7564 16.1976 19.0138 16.1976C20.2712 16.1976 21.2905 17.2169 21.2905 18.4743ZM14.2767 5.5257C14.2767 6.78307 13.2574 7.80237 12 7.80237C10.7426 7.80237 9.72332 6.78307 9.72332 5.5257C9.72332 4.26832 10.7426 3.24902 12 3.24902C13.2574 3.24902 14.2767 4.26832 14.2767 5.5257ZM15.7767 5.5257C15.7767 6.68953 15.2502 7.73042 14.4225 8.4232L17.9099 14.8615C17.4208 15.0107 16.9739 15.2565 16.5914 15.5767L13.104 9.13846C12.7548 9.24503 12.3841 9.30237 12 9.30237C11.6159 9.30237 11.2452 9.24504 10.896 9.13846L7.40862 15.5767C7.02607 15.2565 6.57917 15.0107 6.09013 14.8615L9.57752 8.42321C8.74977 7.73042 8.22332 6.68954 8.22332 5.5257C8.22332 3.4399 9.91419 1.74902 12 1.74902C14.0858 1.74902 15.7767 3.4399 15.7767 5.5257Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/img/icons/bigger/pause.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

3
src/assets/img/icons/bigger/play.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

5
src/assets/img/icons/bigger/profile.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9ZM14.25 9C14.25 10.2426 13.2426 11.25 12 11.25C10.7574 11.25 9.75 10.2426 9.75 9C9.75 7.75736 10.7574 6.75 12 6.75C13.2426 6.75 14.25 7.75736 14.25 9Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99199 16.3857L6.98744 16.39C6.68505 16.6731 6.6694 17.1477 6.95248 17.4501C7.23544 17.7523 7.70978 17.7681 8.01218 17.4854L8.01129 17.4862L8.02005 17.4783C8.02921 17.4702 8.04496 17.4563 8.06705 17.4376C8.11126 17.4002 8.18068 17.3436 8.27353 17.274C8.45962 17.1346 8.73733 16.9451 9.09253 16.7549C9.80556 16.3731 10.8085 16 12 16C13.1915 16 14.1944 16.3731 14.9075 16.7549C15.2627 16.9451 15.5404 17.1346 15.7265 17.274C15.8193 17.3436 15.8887 17.4002 15.933 17.4376C15.955 17.4563 15.9708 17.4702 15.98 17.4783L15.9887 17.4862C16.2911 17.7685 16.7647 17.7522 17.0475 17.4501C17.3306 17.1477 17.3149 16.6731 17.0126 16.39L17.0117 16.3892L17.0106 16.3882L17.008 16.3857L17.0008 16.3791L16.9782 16.3588C16.9597 16.3422 16.9341 16.3198 16.9016 16.2923C16.8367 16.2374 16.7442 16.1623 16.6259 16.0736C16.3897 15.8967 16.0482 15.6642 15.6156 15.4326C14.753 14.9707 13.5059 14.5 12 14.5C10.4941 14.5 9.24704 14.9707 8.38442 15.4326C7.95179 15.6642 7.61027 15.8967 7.37408 16.0736C7.25578 16.1623 7.1633 16.2374 7.0984 16.2923C7.06593 16.3198 7.04031 16.3422 7.02176 16.3588L6.99924 16.3791L6.99199 16.3857L6.98937 16.3882L6.98832 16.3892L6.99199 16.3857Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
src/assets/img/icons/bigger/send.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6192 18.1568L5.00164 20.8817C4.45399 21.1072 3.90948 20.553 4.14456 20.0094L11.3015 3.45893C11.422 3.18035 11.6965 3 12 3C12.3035 3 12.578 3.18035 12.6984 3.45893L19.8554 20.0094C20.0905 20.553 19.546 21.1072 18.9983 20.8817L12.3807 18.1568C12.1368 18.0563 11.8631 18.0564 11.6192 18.1568ZM11.25 16.4818C11.25 16.6096 11.1663 16.7211 11.0481 16.7698L7.47933 18.2393C7.06444 18.4101 6.65194 17.9903 6.83002 17.5785L10.7705 8.46607C10.8782 8.21695 11.25 8.29388 11.25 8.5653V16.4818ZM12.75 16.4818C12.75 16.6096 12.8337 16.7211 12.9519 16.7698L16.5206 18.2393C16.9355 18.4101 17.348 17.9903 17.1699 17.5785L13.2294 8.46607C13.1217 8.21695 12.75 8.29388 12.75 8.5653V16.4818Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 847 B

4
src/assets/img/icons/bigger/settings.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

3
src/assets/img/icons/bigger/status-update.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM12 21.5C10.3571 21.5 9.02523 20.1682 9.02523 18.5252C9.02523 16.8823 10.3571 15.5505 12 15.5505C13.6429 15.5505 14.9748 16.8823 14.9748 18.5252C14.9748 20.1682 13.6429 21.5 12 21.5ZM7.11258 18.6751C7.22604 18.8718 7.52523 18.7523 7.52523 18.5252C7.52523 16.0539 9.52865 14.0505 12 14.0505C14.4713 14.0505 16.4748 16.0539 16.4748 18.5252C16.4748 18.7523 16.774 18.8718 16.8874 18.6751C17.3651 17.847 17.6385 16.8862 17.6385 15.8615C17.6385 12.7475 15.114 10.2231 12 10.2231C8.88597 10.2231 6.36154 12.7475 6.36154 15.8615C6.36154 16.8862 6.63487 17.847 7.11258 18.6751ZM19.0483 16.9992C18.9783 17.4359 19.5498 17.784 19.8025 17.421C20.8726 15.8836 21.5 14.0151 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 14.0151 3.1274 15.8836 4.19751 17.421C4.45018 17.784 5.02165 17.4359 4.95171 16.9992C4.89237 16.6287 4.86154 16.2487 4.86154 15.8615C4.86154 11.9191 8.05754 8.72308 12 8.72308C15.9425 8.72308 19.1385 11.9191 19.1385 15.8615C19.1385 16.2487 19.1076 16.6287 19.0483 16.9992Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB