Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved new dashboard dialog (#25676) 

* tidied cards and more translations

* fix container heading padding

* updated filter to use fusejs, changes to how list is localized
pull/24641/merge
quinnter 2025-06-14 09:55:14 +01:00 committed by GitHub
parent 67c7a3931f
commit 05035a281b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 610 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/static/images/dashboard-options/dark/icon-dashboard-areas.svg Normal file
View File

@ -0,0 +1,36 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5532)">
<path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="white" fill-opacity="0.48"/>
<path d="M40 4C40 1.79086 41.7909 0 44 0V0C46.2091 0 48 1.79086 48 4V4C48 6.20914 46.2091 8 44 8V8C41.7909 8 40 6.20914 40 4V4Z" fill="white" fill-opacity="0.24"/>
<path d="M0 20C0 15.5817 3.58172 12 8 12H40C44.4183 12 48 15.5817 48 20V64C48 68.4183 44.4183 72 40 72H8C3.58172 72 0 68.4183 0 64V20Z" fill="#1C1C1C"/>
<path d="M8 12.5H40C44.1421 12.5 47.5 15.8579 47.5 20V64C47.5 68.1421 44.1421 71.5 40 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.704063 15.7792 3.77915 12.7041 7.61426 12.5098L8 12.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M18.9844 41.0156C18.9844 40.0781 18.7031 39.2656 18.1406 38.5781C17.5781 37.8594 16.8594 37.375 15.9844 37.125V36C15.9844 35.4375 16.125 34.9375 16.4062 34.5C16.6875 34.0312 17.0469 33.6719 17.4844 33.4219C17.9531 33.1406 18.4531 33 18.9844 33H29.0156C29.5469 33 30.0312 33.1406 30.4688 33.4219C30.9375 33.6719 31.3125 34.0312 31.5938 34.5C31.875 34.9375 32.0156 35.4375 32.0156 36V37.125C31.1406 37.375 30.4219 37.8594 29.8594 38.5781C29.2969 39.2656 29.0156 40.0781 29.0156 41.0156V42.9844H18.9844V41.0156ZM33 39C33.5625 39 34.0312 39.2031 34.4062 39.6094C34.8125 39.9844 35.0156 40.4531 35.0156 41.0156V45.9844C35.0156 46.5469 34.875 47.0625 34.5938 47.5312C34.3125 47.9688 33.9375 48.3281 33.4688 48.6094C33.0312 48.8594 32.5469 48.9844 32.0156 48.9844V50.0156C32.0156 50.2656 31.9062 50.5 31.6875 50.7188C31.5 50.9062 31.2656 51 30.9844 51C30.7344 51 30.5 50.9062 30.2812 50.7188C30.0938 50.5 30 50.2656 30 50.0156V48.9844H18V50.0156C18 50.2656 17.8906 50.5 17.6719 50.7188C17.4844 50.9062 17.2656 51 17.0156 51C16.7344 51 16.4844 50.9062 16.2656 50.7188C16.0781 50.5 15.9844 50.2656 15.9844 50.0156V48.9844C15.4531 48.9844 14.9531 48.8594 14.4844 48.6094C14.0469 48.3281 13.6875 47.9688 13.4062 47.5312C13.125 47.0625 12.9844 46.5469 12.9844 45.9844V41.0156C12.9844 40.4531 13.1719 39.9844 13.5469 39.6094C13.9531 39.2031 14.4375 39 15 39C15.5625 39 16.0312 39.2031 16.4062 39.6094C16.8125 39.9844 17.0156 40.4531 17.0156 41.0156V45H30.9844V41.0156C30.9844 40.4531 31.1719 39.9844 31.5469 39.6094C31.9531 39.2031 32.4375 39 33 39Z" fill="#03A9F4"/>
<path d="M56 4C56 1.79086 57.7909 0 60 0H72C74.2091 0 76 1.79086 76 4V4C76 6.20914 74.2091 8 72 8H60C57.7909 8 56 6.20914 56 4V4Z" fill="white" fill-opacity="0.48"/>
<path d="M96 4C96 1.79086 97.7909 0 100 0V0C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8V8C97.7909 8 96 6.20914 96 4V4Z" fill="white" fill-opacity="0.24"/>
<path d="M56 20C56 15.5817 59.5817 12 64 12H96C100.418 12 104 15.5817 104 20V64C104 68.4183 100.418 72 96 72H64C59.5817 72 56 68.4183 56 64V20Z" fill="#1C1C1C"/>
<path d="M64 12.5H96C100.142 12.5 103.5 15.8579 103.5 20V64C103.5 68.1421 100.142 71.5 96 71.5H64C59.8579 71.5 56.5 68.1421 56.5 64V20L56.5098 19.6143C56.7041 15.7792 59.7792 12.7041 63.6143 12.5098L64 12.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M86 39.9844H89.9844V42H88.0156V50.0156H71.9844V42H70.0156V39.9844H74C73.4375 39.9844 72.9531 39.7969 72.5469 39.4219C72.1719 39.0156 71.9844 38.5469 71.9844 38.0156V33.9844H77.9844V38.0156C77.9844 38.5469 77.7812 39.0156 77.375 39.4219C77 39.7969 76.5469 39.9844 76.0156 39.9844H83.9844V36.9844C83.9844 36.7344 83.8906 36.5156 83.7031 36.3281C83.5156 36.1094 83.2812 36 83 36C82.7188 36 82.4844 36.1094 82.2969 36.3281C82.1094 36.5156 82.0156 36.7344 82.0156 36.9844H80C80 36.4531 80.125 35.9688 80.375 35.5312C80.6562 35.0625 81.0156 34.6875 81.4531 34.4062C81.9219 34.125 82.4375 33.9844 83 33.9844C83.5625 33.9844 84.0625 34.125 84.5 34.4062C84.9688 34.6875 85.3281 35.0625 85.5781 35.5312C85.8594 35.9688 86 36.4531 86 36.9844V39.9844ZM80.9844 48V42H79.0156V48H80.9844Z" fill="#03A9F4"/>
<path d="M112 4C112 1.79086 113.791 0 116 0H128C130.209 0 132 1.79086 132 4V4C132 6.20914 130.209 8 128 8H116C113.791 8 112 6.20914 112 4V4Z" fill="white" fill-opacity="0.48"/>
<path d="M152 4C152 1.79086 153.791 0 156 0V0C158.209 0 160 1.79086 160 4V4C160 6.20914 158.209 8 156 8V8C153.791 8 152 6.20914 152 4V4Z" fill="white" fill-opacity="0.24"/>
<path d="M112 20C112 15.5817 115.582 12 120 12H152C156.418 12 160 15.5817 160 20V64C160 68.4183 156.418 72 152 72H120C115.582 72 112 68.4183 112 64V20Z" fill="#1C1C1C"/>
<path d="M120 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V64C159.5 68.1421 156.142 71.5 152 71.5H120C115.858 71.5 112.5 68.1421 112.5 64V20L112.51 19.6143C112.704 15.7792 115.779 12.7041 119.614 12.5098L120 12.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M142.984 36.9844C144.078 36.9844 145.016 37.3906 145.797 38.2031C146.609 38.9844 147.016 39.9219 147.016 41.0156V50.0156H145V47.0156H127V50.0156H124.984V35.0156H127V44.0156H135.016V36.9844H142.984ZM133.094 42.0938C132.5 42.6875 131.797 42.9844 130.984 42.9844C130.172 42.9844 129.469 42.6875 128.875 42.0938C128.281 41.5 127.984 40.7969 127.984 39.9844C127.984 39.1719 128.281 38.4688 128.875 37.875C129.469 37.2812 130.172 36.9844 130.984 36.9844C131.797 36.9844 132.5 37.2812 133.094 37.875C133.688 38.4688 133.984 39.1719 133.984 39.9844C133.984 40.7969 133.688 41.5 133.094 42.0938Z" fill="#03A9F4"/>
<path d="M0 84C0 81.7909 1.79086 80 4 80H16C18.2091 80 20 81.7909 20 84V84C20 86.2091 18.2091 88 16 88H4C1.79086 88 0 86.2091 0 84V84Z" fill="white" fill-opacity="0.48"/>
<path d="M28 84C28 81.7909 29.7909 80 32 80V80C34.2091 80 36 81.7909 36 84V84C36 86.2091 34.2091 88 32 88V88C29.7909 88 28 86.2091 28 84V84Z" fill="white" fill-opacity="0.24"/>
<path d="M40 84C40 81.7909 41.7909 80 44 80V80C46.2091 80 48 81.7909 48 84V84C48 86.2091 46.2091 88 44 88V88C41.7909 88 40 86.2091 40 84V84Z" fill="white" fill-opacity="0.24"/>
<path d="M0 100C0 95.5817 3.58172 92 8 92H40C44.4183 92 48 95.5817 48 100V144C48 148.418 44.4183 152 40 152H8C3.58172 152 0 148.418 0 144V100Z" fill="#1C1C1C"/>
<path d="M8 92.5H40C44.1421 92.5 47.5 95.8579 47.5 100V144C47.5 148.142 44.1421 151.5 40 151.5H8C3.85787 151.5 0.5 148.142 0.5 144V100L0.509766 99.6143C0.704063 95.7792 3.77915 92.7041 7.61426 92.5098L8 92.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M14.0156 116H33.9844V128H32.0156V125.984H27.9844V128H26.0156V118.016H15.9844V128H14.0156V116ZM32.0156 118.016H27.9844V119.984H32.0156V118.016ZM27.9844 124.016H32.0156V122H27.9844V124.016Z" fill="#03A9F4"/>
<path d="M56 84C56 81.7909 57.7909 80 60 80H72C74.2091 80 76 81.7909 76 84V84C76 86.2091 74.2091 88 72 88H60C57.7909 88 56 86.2091 56 84V84Z" fill="white" fill-opacity="0.48"/>
<path d="M84 84C84 81.7909 85.7909 80 88 80V80C90.2091 80 92 81.7909 92 84V84C92 86.2091 90.2091 88 88 88V88C85.7909 88 84 86.2091 84 84V84Z" fill="white" fill-opacity="0.24"/>
<path d="M96 84C96 81.7909 97.7909 80 100 80V80C102.209 80 104 81.7909 104 84V84C104 86.2091 102.209 88 100 88V88C97.7909 88 96 86.2091 96 84V84Z" fill="white" fill-opacity="0.24"/>
<path d="M56 100C56 95.5817 59.5817 92 64 92H96C100.418 92 104 95.5817 104 100V144C104 148.418 100.418 152 96 152H64C59.5817 152 56 148.418 56 144V100Z" fill="#1C1C1C"/>
<path d="M64 92.5H96C100.142 92.5 103.5 95.8579 103.5 100V144C103.5 148.142 100.142 151.5 96 151.5H64C59.8579 151.5 56.5 148.142 56.5 144V100L56.5098 99.6143C56.7041 95.7792 59.7792 92.7041 63.6143 92.5098L64 92.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M77.9844 121.016V122.984H80V121.016H77.9844ZM82.0156 116V131H71V128.984H73.0156V113H82.0156V113.984H86.9844V128.984H89V131H85.0156V116H82.0156Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5532">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

63
public/static/images/dashboard-options/dark/icon-dashboard-default.svg Normal file
View File

@ -0,0 +1,63 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5534)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H42.6667C47.0849 0 50.6667 3.58172 50.6667 8V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V8Z" fill="#1C1C1C"/>
<path d="M8 0.5H42.667C46.809 0.500178 50.167 3.85798 50.167 8V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M8 12C8 9.79086 9.79086 8 12 8H38.6667C40.8758 8 42.6667 9.79086 42.6667 12V12C42.6667 14.2091 40.8758 16 38.6667 16H12C9.79086 16 8 14.2091 8 12V12Z" fill="white" fill-opacity="0.48"/>
<path d="M8 27C8 25.3431 9.34315 24 11 24H27.6667C29.3235 24 30.6667 25.3431 30.6667 27V29C30.6667 30.6569 29.3235 32 27.6667 32H11C9.34314 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
<path d="M34.6667 28C34.6667 25.7909 36.4575 24 38.6667 24V24C40.8758 24 42.6667 25.7909 42.6667 28V28C42.6667 30.2091 40.8758 32 38.6667 32V32C36.4575 32 34.6667 30.2091 34.6667 28V28Z" fill="white" fill-opacity="0.24"/>
<path d="M8 43C8 41.3431 9.34315 40 11 40H27.6667C29.3235 40 30.6667 41.3431 30.6667 43V45C30.6667 46.6569 29.3235 48 27.6667 48H11C9.34314 48 8 46.6569 8 45V43Z" fill="white" fill-opacity="0.24"/>
<path d="M34.6667 44C34.6667 41.7909 36.4575 40 38.6667 40V40C40.8758 40 42.6667 41.7909 42.6667 44V44C42.6667 46.2091 40.8758 48 38.6667 48V48C36.4575 48 34.6667 46.2091 34.6667 44V44Z" fill="white" fill-opacity="0.24"/>
<path d="M8 59C8 57.3431 9.34315 56 11 56H27.6667C29.3235 56 30.6667 57.3431 30.6667 59V61C30.6667 62.6569 29.3235 64 27.6667 64H11C9.34314 64 8 62.6569 8 61V59Z" fill="white" fill-opacity="0.24"/>
<path d="M34.6667 60C34.6667 57.7909 36.4575 56 38.6667 56V56C40.8758 56 42.6667 57.7909 42.6667 60V60C42.6667 62.2091 40.8758 64 38.6667 64V64C36.4575 64 34.6667 62.2091 34.6667 60V60Z" fill="white" fill-opacity="0.24"/>
<path d="M0 84C0 79.5817 3.58172 76 8 76H42.6667C47.0849 76 50.6667 79.5817 50.6667 84V124C50.6667 128.418 47.0849 132 42.6667 132H8.00001C3.58173 132 0 128.418 0 124V84Z" fill="#1C1C1C"/>
<path d="M8 76.5H42.667C46.809 76.5002 50.167 79.858 50.167 84V124C50.167 128.142 46.809 131.5 42.667 131.5H8C3.85787 131.5 0.5 128.142 0.5 124V84C0.5 79.8579 3.85786 76.5 8 76.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M8 88C8 85.7909 9.79086 84 12 84H38.6667C40.8758 84 42.6667 85.7909 42.6667 88V88C42.6667 90.2091 40.8758 92 38.6667 92H12C9.79086 92 8 90.2091 8 88V88Z" fill="white" fill-opacity="0.48"/>
<path d="M8 103C8 101.343 9.34315 100 11 100H27.6667C29.3235 100 30.6667 101.343 30.6667 103V105C30.6667 106.657 29.3235 108 27.6667 108H11C9.34314 108 8 106.657 8 105V103Z" fill="white" fill-opacity="0.24"/>
<path d="M34.6667 104C34.6667 101.791 36.4575 100 38.6667 100V100C40.8758 100 42.6667 101.791 42.6667 104V104C42.6667 106.209 40.8758 108 38.6667 108V108C36.4575 108 34.6667 106.209 34.6667 104V104Z" fill="white" fill-opacity="0.24"/>
<path d="M8 119C8 117.343 9.34315 116 11 116H27.6667C29.3235 116 30.6667 117.343 30.6667 119V121C30.6667 122.657 29.3235 124 27.6667 124H11C9.34314 124 8 122.657 8 121V119Z" fill="white" fill-opacity="0.24"/>
<path d="M34.6667 120C34.6667 117.791 36.4575 116 38.6667 116V116C40.8758 116 42.6667 117.791 42.6667 120V120C42.6667 122.209 40.8758 124 38.6667 124V124C36.4575 124 34.6667 122.209 34.6667 120V120Z" fill="white" fill-opacity="0.24"/>
<path d="M0 144C0 139.582 3.58172 136 8 136H42.6667C47.0849 136 50.6667 139.582 50.6667 144V152C50.6667 156.418 47.0849 160 42.6667 160H8.00001C3.58173 160 0 156.418 0 152V144Z" fill="#1C1C1C"/>
<path d="M8 136.5H42.667C46.809 136.5 50.167 139.858 50.167 144V152C50.167 156.142 46.809 159.5 42.667 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V144C0.5 139.858 3.85786 136.5 8 136.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M8 148C8 145.791 9.79086 144 12 144H38.6667C40.8758 144 42.6667 145.791 42.6667 148V148C42.6667 150.209 40.8758 152 38.6667 152H12C9.79086 152 8 150.209 8 148V148Z" fill="white" fill-opacity="0.48"/>
<path d="M54.6667 8C54.6667 3.58172 58.2484 0 62.6667 0H97.3333C101.752 0 105.333 3.58172 105.333 8V48C105.333 52.4183 101.752 56 97.3334 56H62.6667C58.2484 56 54.6667 52.4183 54.6667 48V8Z" fill="#1C1C1C"/>
<path d="M62.6667 0.5H97.3337C101.476 0.50018 104.834 3.85798 104.834 8V48C104.834 52.142 101.476 55.4998 97.3337 55.5H62.6667C58.5246 55.5 55.1667 52.1421 55.1667 48V8C55.1667 3.85786 58.5246 0.5 62.6667 0.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M62.6667 12C62.6667 9.79086 64.4575 8 66.6667 8H93.3334C95.5425 8 97.3334 9.79086 97.3334 12V12C97.3334 14.2091 95.5425 16 93.3334 16H66.6667C64.4576 16 62.6667 14.2091 62.6667 12V12Z" fill="white" fill-opacity="0.48"/>
<path d="M62.6667 27C62.6667 25.3431 64.0098 24 65.6667 24H82.3334C83.9902 24 85.3334 25.3431 85.3334 27V29C85.3334 30.6569 83.9902 32 82.3334 32H65.6667C64.0098 32 62.6667 30.6569 62.6667 29V27Z" fill="white" fill-opacity="0.24"/>
<path d="M89.3333 28C89.3333 25.7909 91.1242 24 93.3333 24V24C95.5425 24 97.3333 25.7909 97.3333 28V28C97.3333 30.2091 95.5425 32 93.3333 32V32C91.1242 32 89.3333 30.2091 89.3333 28V28Z" fill="white" fill-opacity="0.24"/>
<path d="M62.6667 43C62.6667 41.3431 64.0098 40 65.6667 40H82.3334C83.9902 40 85.3334 41.3431 85.3334 43V45C85.3334 46.6569 83.9902 48 82.3334 48H65.6667C64.0098 48 62.6667 46.6569 62.6667 45V43Z" fill="white" fill-opacity="0.24"/>
<path d="M89.3333 44C89.3333 41.7909 91.1242 40 93.3333 40V40C95.5425 40 97.3333 41.7909 97.3333 44V44C97.3333 46.2091 95.5425 48 93.3333 48V48C91.1242 48 89.3333 46.2091 89.3333 44V44Z" fill="white" fill-opacity="0.24"/>
<path d="M54.6667 68C54.6667 63.5817 58.2484 60 62.6667 60H97.3333C101.752 60 105.333 63.5817 105.333 68V76C105.333 80.4183 101.752 84 97.3334 84H62.6667C58.2484 84 54.6667 80.4183 54.6667 76V68Z" fill="#1C1C1C"/>
<path d="M62.6667 60.5H97.3337C101.476 60.5002 104.834 63.858 104.834 68V76C104.834 80.142 101.476 83.4998 97.3337 83.5H62.6667C58.5246 83.5 55.1667 80.1421 55.1667 76V68C55.1667 63.8579 58.5246 60.5 62.6667 60.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M62.6667 72C62.6667 69.7909 64.4575 68 66.6667 68H93.3334C95.5425 68 97.3334 69.7909 97.3334 72V72C97.3334 74.2091 95.5425 76 93.3334 76H66.6667C64.4576 76 62.6667 74.2091 62.6667 72V72Z" fill="white" fill-opacity="0.48"/>
<path d="M54.6667 96C54.6667 91.5817 58.2484 88 62.6667 88H97.3333C101.752 88 105.333 91.5817 105.333 96V136C105.333 140.418 101.752 144 97.3334 144H62.6667C58.2484 144 54.6667 140.418 54.6667 136V96Z" fill="#1C1C1C"/>
<path d="M62.6667 88.5H97.3337C101.476 88.5002 104.834 91.858 104.834 96V136C104.834 140.142 101.476 143.5 97.3337 143.5H62.6667C58.5246 143.5 55.1667 140.142 55.1667 136V96C55.1667 91.8579 58.5246 88.5 62.6667 88.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M62.6667 100C62.6667 97.7909 64.4575 96 66.6667 96H93.3334C95.5425 96 97.3334 97.7909 97.3334 100V100C97.3334 102.209 95.5425 104 93.3334 104H66.6667C64.4576 104 62.6667 102.209 62.6667 100V100Z" fill="white" fill-opacity="0.48"/>
<path d="M62.6667 115C62.6667 113.343 64.0098 112 65.6667 112H82.3334C83.9902 112 85.3334 113.343 85.3334 115V117C85.3334 118.657 83.9902 120 82.3334 120H65.6667C64.0098 120 62.6667 118.657 62.6667 117V115Z" fill="white" fill-opacity="0.24"/>
<path d="M89.3333 116C89.3333 113.791 91.1242 112 93.3333 112V112C95.5425 112 97.3333 113.791 97.3333 116V116C97.3333 118.209 95.5425 120 93.3333 120V120C91.1242 120 89.3333 118.209 89.3333 116V116Z" fill="white" fill-opacity="0.24"/>
<path d="M62.6667 131C62.6667 129.343 64.0098 128 65.6667 128H82.3334C83.9902 128 85.3334 129.343 85.3334 131V133C85.3334 134.657 83.9902 136 82.3334 136H65.6667C64.0098 136 62.6667 134.657 62.6667 133V131Z" fill="white" fill-opacity="0.24"/>
<path d="M89.3333 132C89.3333 129.791 91.1242 128 93.3333 128V128C95.5425 128 97.3333 129.791 97.3333 132V132C97.3333 134.209 95.5425 136 93.3333 136V136C91.1242 136 89.3333 134.209 89.3333 132V132Z" fill="white" fill-opacity="0.24"/>
<path d="M109.333 8C109.333 3.58172 112.915 0 117.333 0H152C156.418 0 160 3.58172 160 8V112C160 116.418 156.418 120 152 120H117.333C112.915 120 109.333 116.418 109.333 112V8Z" fill="#1C1C1C"/>
<path d="M117.333 0.5H152C156.142 0.50018 159.5 3.85798 159.5 8V112C159.5 116.142 156.142 119.5 152 119.5H117.333C113.191 119.5 109.833 116.142 109.833 112V8C109.833 3.85786 113.191 0.5 117.333 0.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M117.333 12C117.333 9.79086 119.124 8 121.333 8H148C150.209 8 152 9.79086 152 12V12C152 14.2091 150.209 16 148 16H121.333C119.124 16 117.333 14.2091 117.333 12V12Z" fill="white" fill-opacity="0.48"/>
<path d="M117.333 27C117.333 25.3431 118.676 24 120.333 24H137C138.657 24 140 25.3431 140 27V29C140 30.6569 138.657 32 137 32H120.333C118.676 32 117.333 30.6569 117.333 29V27Z" fill="white" fill-opacity="0.24"/>
<path d="M144 28C144 25.7909 145.791 24 148 24V24C150.209 24 152 25.7909 152 28V28C152 30.2091 150.209 32 148 32V32C145.791 32 144 30.2091 144 28V28Z" fill="white" fill-opacity="0.24"/>
<path d="M117.333 43C117.333 41.3431 118.676 40 120.333 40H137C138.657 40 140 41.3431 140 43V45C140 46.6569 138.657 48 137 48H120.333C118.676 48 117.333 46.6569 117.333 45V43Z" fill="white" fill-opacity="0.24"/>
<path d="M144 44C144 41.7909 145.791 40 148 40V40C150.209 40 152 41.7909 152 44V44C152 46.2091 150.209 48 148 48V48C145.791 48 144 46.2091 144 44V44Z" fill="white" fill-opacity="0.24"/>
<path d="M117.333 59C117.333 57.3431 118.676 56 120.333 56H137C138.657 56 140 57.3431 140 59V61C140 62.6569 138.657 64 137 64H120.333C118.676 64 117.333 62.6569 117.333 61V59Z" fill="white" fill-opacity="0.24"/>
<path d="M144 60C144 57.7909 145.791 56 148 56V56C150.209 56 152 57.7909 152 60V60C152 62.2091 150.209 64 148 64V64C145.791 64 144 62.2091 144 60V60Z" fill="white" fill-opacity="0.24"/>
<path d="M117.333 75C117.333 73.3431 118.676 72 120.333 72H137C138.657 72 140 73.3431 140 75V77C140 78.6569 138.657 80 137 80H120.333C118.676 80 117.333 78.6569 117.333 77V75Z" fill="white" fill-opacity="0.24"/>
<path d="M144 76C144 73.7909 145.791 72 148 72V72C150.209 72 152 73.7909 152 76V76C152 78.2091 150.209 80 148 80V80C145.791 80 144 78.2091 144 76V76Z" fill="white" fill-opacity="0.24"/>
<path d="M117.333 91C117.333 89.3431 118.676 88 120.333 88H137C138.657 88 140 89.3431 140 91V93C140 94.6569 138.657 96 137 96H120.333C118.676 96 117.333 94.6569 117.333 93V91Z" fill="white" fill-opacity="0.24"/>
<path d="M144 92C144 89.7909 145.791 88 148 88V88C150.209 88 152 89.7909 152 92V92C152 94.2091 150.209 96 148 96V96C145.791 96 144 94.2091 144 92V92Z" fill="white" fill-opacity="0.24"/>
<path d="M117.333 107C117.333 105.343 118.676 104 120.333 104H137C138.657 104 140 105.343 140 107V109C140 110.657 138.657 112 137 112H120.333C118.676 112 117.333 110.657 117.333 109V107Z" fill="white" fill-opacity="0.24"/>
<path d="M144 108C144 105.791 145.791 104 148 104V104C150.209 104 152 105.791 152 108V108C152 110.209 150.209 112 148 112V112C145.791 112 144 110.209 144 108V108Z" fill="white" fill-opacity="0.24"/>
<path d="M109.333 132C109.333 127.582 112.915 124 117.333 124H152C156.418 124 160 127.582 160 132V140C160 144.418 156.418 148 152 148H117.333C112.915 148 109.333 144.418 109.333 140V132Z" fill="#1C1C1C"/>
<path d="M117.333 124.5H152C156.142 124.5 159.5 127.858 159.5 132V140C159.5 144.142 156.142 147.5 152 147.5H117.333C113.191 147.5 109.833 144.142 109.833 140V132C109.833 127.858 113.191 124.5 117.333 124.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M117.333 136C117.333 133.791 119.124 132 121.333 132H148C150.209 132 152 133.791 152 136V136C152 138.209 150.209 140 148 140H121.333C119.124 140 117.333 138.209 117.333 136V136Z" fill="white" fill-opacity="0.48"/>
</g>
<defs>
<clipPath id="clip0_1738_5534">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

16
public/static/images/dashboard-options/dark/icon-dashboard-map.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5540)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H152C156.418 0 160 3.58172 160 8V152C160 156.418 156.418 160 152 160H8C3.58172 160 0 156.418 0 152V8Z" fill="#1C1C1C"/>
<path d="M8 0.5H152C156.142 0.500001 159.5 3.85787 159.5 8V152C159.5 156.142 156.142 159.5 152 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V8C0.500001 3.85787 3.85787 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M83 86.9844V75.125L77 73.0156V84.875L83 86.9844ZM88.4844 71C88.8281 71 89 71.1719 89 71.5156V86.6094C89 86.8594 88.875 87.0156 88.625 87.0781L83 89L77 86.8906L71.6562 88.9531L71.5156 89C71.1719 89 71 88.8281 71 88.4844V73.3906C71 73.1406 71.125 72.9844 71.375 72.9219L77 71L83 73.1094L88.3438 71.0469L88.4844 71Z" fill="#03A9F4"/>
<path d="M148 77.0508L139.288 85.8983M139.288 85.8983L116.852 108.684C115.724 109.83 114.184 110.475 112.576 110.475H81.6939M139.288 85.8983V69.4322M21.1957 82.9492H12M21.1957 82.9492L32.3274 71.6441M21.1957 82.9492L44.427 106.542M81.6939 110.475V124.237M81.6939 110.475H54.5907M81.6939 138V124.237M81.6939 124.237H148M32.3274 71.6441L43.4591 60.339L54.5907 49.0339L70.4941 32.8828C74.2533 29.0651 79.3871 26.9153 84.7451 26.9153H128.641V26.9153C134.521 26.9153 139.288 31.6824 139.288 37.5629V37.7288V49.0339M32.3274 71.6441L24.8569 64.0572C22.5573 61.7218 22.5573 57.9732 24.8569 55.6377L57.9786 22M139.288 49.0339H126.313C124.706 49.0339 123.166 48.389 122.038 47.2436L116.057 41.1695M139.288 49.0339V69.4322M139.288 69.4322H126.313C124.706 69.4322 123.166 68.7873 122.038 67.6419L116.057 61.5678M54.5907 110.475V110.475C54.5907 107.488 52.17 105.068 49.184 105.068H49.0249C45.951 105.068 43.4591 107.56 43.4591 110.634V110.807C43.4591 113.881 45.951 116.373 49.0249 116.373V116.373C52.0988 116.373 54.5907 113.881 54.5907 110.807V110.475ZM44.427 115.39L22.1637 138" stroke="white" stroke-opacity="0.24" stroke-width="5" stroke-linecap="round"/>
<circle cx="41" cy="39" r="14" fill="white" fill-opacity="0.48"/>
<circle cx="89" cy="117" r="14" fill="white" fill-opacity="0.48"/>
<path d="M116 62.325C115.767 62.325 115.533 62.2833 115.3 62.2C115.067 62.1167 114.858 61.9917 114.675 61.825C113.592 60.825 112.633 59.85 111.8 58.9C110.967 57.95 110.267 57.0333 109.7 56.15C109.15 55.25 108.725 54.3917 108.425 53.575C108.142 52.7417 108 51.95 108 51.2C108 48.7 108.8 46.7083 110.4 45.225C112.017 43.7417 113.883 43 116 43C118.117 43 119.975 43.7417 121.575 45.225C123.192 46.7083 124 48.7 124 51.2C124 51.95 123.85 52.7417 123.55 53.575C123.267 54.3917 122.842 55.25 122.275 56.15C121.725 57.0333 121.033 57.95 120.2 58.9C119.367 59.85 118.408 60.825 117.325 61.825C117.142 61.9917 116.933 62.1167 116.7 62.2C116.467 62.2833 116.233 62.325 116 62.325Z" fill="white" fill-opacity="0.48"/>
</g>
<defs>
<clipPath id="clip0_1738_5540">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

13
public/static/images/dashboard-options/dark/icon-dashboard-new.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="160" height="72" viewBox="0 0 160 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5536)">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="white" fill-opacity="0.48"/>
<path d="M0 20C0 15.5817 3.58172 12 8 12H42.6667C47.0849 12 50.6667 15.5817 50.6667 20V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V20Z" fill="#1C1C1C"/>
<path d="M8 12.5H42.667C46.809 12.5002 50.167 15.858 50.167 20V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.710536 15.6514 3.98724 12.5 8 12.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M32.3177 42.9844H26.3177V48.9844H24.349V42.9844H18.349V41.0156H24.349V35.0156H26.3177V41.0156H32.3177V42.9844Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5536">
<rect width="160" height="72" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 973 B

19
public/static/images/dashboard-options/dark/icon-dashboard-webpage.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5538)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H152C156.418 0 160 3.58172 160 8V152C160 156.418 156.418 160 152 160H8C3.58172 160 0 156.418 0 152V8Z" fill="#1C1C1C"/>
<path d="M8 0.5H152C156.142 0.500001 159.5 3.85787 159.5 8V152C159.5 156.142 156.142 159.5 152 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V8C0.500001 3.85787 3.85787 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M8 13.5C8 10.4624 10.4624 8 13.5 8H146.5C149.538 8 152 10.4624 152 13.5V13.5C152 16.5376 149.538 19 146.5 19H13.5C10.4624 19 8 16.5376 8 13.5V13.5Z" fill="white" fill-opacity="0.48"/>
<path d="M8 35C8 30.5817 11.5817 27 16 27H45.3333C49.7516 27 53.3333 30.5817 53.3333 35V125C53.3333 129.418 49.7516 133 45.3333 133H16C11.5817 133 8 129.418 8 125V35Z" fill="#1C1C1C"/>
<path d="M16 27.5H45.333C49.4751 27.5 52.833 30.8579 52.833 35V125C52.833 129.142 49.4751 132.5 45.333 132.5H16C11.8579 132.5 8.5 129.142 8.5 125V35C8.5 30.8579 11.8579 27.5 16 27.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M57.3333 35C57.3333 30.5817 60.9151 27 65.3333 27H94.6667C99.0849 27 102.667 30.5817 102.667 35V49C102.667 53.4183 99.0849 57 94.6667 57H65.3333C60.915 57 57.3333 53.4183 57.3333 49V35Z" fill="#1C1C1C"/>
<path d="M65.3333 27.5H94.6663C98.8085 27.5 102.166 30.8579 102.166 35V49C102.166 53.1421 98.8085 56.5 94.6663 56.5H65.3333C61.1912 56.5 57.8333 53.1421 57.8333 49V35C57.8333 30.8579 61.1912 27.5 65.3333 27.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M106.667 35C106.667 30.5817 110.248 27 114.667 27H144C148.418 27 152 30.5817 152 35V87C152 91.4183 148.418 95 144 95H114.667C110.248 95 106.667 91.4183 106.667 87V35Z" fill="#1C1C1C"/>
<path d="M114.667 27.5H144C148.142 27.5 151.5 30.8579 151.5 35V87C151.5 91.1421 148.142 94.5 144 94.5H114.667C110.525 94.5 107.167 91.1421 107.167 87V35C107.167 30.8579 110.525 27.5 114.667 27.5Z" stroke="white" stroke-opacity="0.24"/>
<path d="M84.3594 82.0156H87.7344C87.9219 81.1406 88.0156 80.4688 88.0156 80C88.0156 79.5312 87.9219 78.8594 87.7344 77.9844H84.3594C84.4531 78.6406 84.5 79.3125 84.5 80C84.5 80.6875 84.4531 81.3594 84.3594 82.0156ZM82.5781 87.5469C83.3594 87.2969 84.1719 86.8281 85.0156 86.1406C85.8594 85.4219 86.5 84.7031 86.9375 83.9844H83.9844C83.6719 85.2344 83.2031 86.4219 82.5781 87.5469ZM82.3438 82.0156C82.4375 81.3594 82.4844 80.6875 82.4844 80C82.4844 79.3125 82.4375 78.6406 82.3438 77.9844H77.6562C77.5625 78.6406 77.5156 79.3125 77.5156 80C77.5156 80.6875 77.5625 81.3594 77.6562 82.0156H82.3438ZM80 87.9688C80.875 86.6875 81.5156 85.3594 81.9219 83.9844H78.0781C78.4844 85.3594 79.125 86.6875 80 87.9688ZM76.0156 76.0156C76.3906 74.6719 76.8594 73.4844 77.4219 72.4531C76.6406 72.7031 75.8125 73.1875 74.9375 73.9062C74.0938 74.5938 73.4688 75.2969 73.0625 76.0156H76.0156ZM73.0625 83.9844C73.4688 84.7031 74.0938 85.4219 74.9375 86.1406C75.8125 86.8281 76.6406 87.2969 77.4219 87.5469C76.7969 86.4219 76.3281 85.2344 76.0156 83.9844H73.0625ZM72.2656 82.0156H75.6406C75.5469 81.3594 75.5 80.6875 75.5 80C75.5 79.3125 75.5469 78.6406 75.6406 77.9844H72.2656C72.0781 78.8594 71.9844 79.5312 71.9844 80C71.9844 80.4688 72.0781 81.1406 72.2656 82.0156ZM80 72.0312C79.125 73.3125 78.4844 74.6406 78.0781 76.0156H81.9219C81.5156 74.6406 80.875 73.3125 80 72.0312ZM86.9375 76.0156C86.5 75.2969 85.8594 74.5938 85.0156 73.9062C84.1719 73.1875 83.3594 72.7031 82.5781 72.4531C83.1406 73.4844 83.6094 74.6719 83.9844 76.0156H86.9375ZM72.9219 72.9688C74.8906 71 77.25 70.0156 80 70.0156C82.75 70.0156 85.0938 71 87.0312 72.9688C89 74.9062 89.9844 77.25 89.9844 80C89.9844 82.75 89 85.1094 87.0312 87.0781C85.0938 89.0156 82.75 89.9844 80 89.9844C77.25 89.9844 74.8906 89.0156 72.9219 87.0781C70.9844 85.1094 70.0156 82.75 70.0156 80C70.0156 77.25 70.9844 74.9062 72.9219 72.9688Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5538">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

36
public/static/images/dashboard-options/light/icon-dashboard-areas.svg Normal file
View File

@ -0,0 +1,36 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5531)">
<path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="black" fill-opacity="0.32"/>
<rect x="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M0 20C0 15.5817 3.58172 12 8 12H40C44.4183 12 48 15.5817 48 20V64C48 68.4183 44.4183 72 40 72H8C3.58172 72 0 68.4183 0 64V20Z" fill="white"/>
<path d="M8 12.5H40C44.1421 12.5 47.5 15.8579 47.5 20V64C47.5 68.1421 44.1421 71.5 40 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.704063 15.7792 3.77915 12.7041 7.61426 12.5098L8 12.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M18.9844 41.0156C18.9844 40.0781 18.7031 39.2656 18.1406 38.5781C17.5781 37.8594 16.8594 37.375 15.9844 37.125V36C15.9844 35.4375 16.125 34.9375 16.4062 34.5C16.6875 34.0312 17.0469 33.6719 17.4844 33.4219C17.9531 33.1406 18.4531 33 18.9844 33H29.0156C29.5469 33 30.0312 33.1406 30.4688 33.4219C30.9375 33.6719 31.3125 34.0312 31.5938 34.5C31.875 34.9375 32.0156 35.4375 32.0156 36V37.125C31.1406 37.375 30.4219 37.8594 29.8594 38.5781C29.2969 39.2656 29.0156 40.0781 29.0156 41.0156V42.9844H18.9844V41.0156ZM33 39C33.5625 39 34.0312 39.2031 34.4062 39.6094C34.8125 39.9844 35.0156 40.4531 35.0156 41.0156V45.9844C35.0156 46.5469 34.875 47.0625 34.5938 47.5312C34.3125 47.9688 33.9375 48.3281 33.4688 48.6094C33.0312 48.8594 32.5469 48.9844 32.0156 48.9844V50.0156C32.0156 50.2656 31.9062 50.5 31.6875 50.7188C31.5 50.9062 31.2656 51 30.9844 51C30.7344 51 30.5 50.9062 30.2812 50.7188C30.0938 50.5 30 50.2656 30 50.0156V48.9844H18V50.0156C18 50.2656 17.8906 50.5 17.6719 50.7188C17.4844 50.9062 17.2656 51 17.0156 51C16.7344 51 16.4844 50.9062 16.2656 50.7188C16.0781 50.5 15.9844 50.2656 15.9844 50.0156V48.9844C15.4531 48.9844 14.9531 48.8594 14.4844 48.6094C14.0469 48.3281 13.6875 47.9688 13.4062 47.5312C13.125 47.0625 12.9844 46.5469 12.9844 45.9844V41.0156C12.9844 40.4531 13.1719 39.9844 13.5469 39.6094C13.9531 39.2031 14.4375 39 15 39C15.5625 39 16.0312 39.2031 16.4062 39.6094C16.8125 39.9844 17.0156 40.4531 17.0156 41.0156V45H30.9844V41.0156C30.9844 40.4531 31.1719 39.9844 31.5469 39.6094C31.9531 39.2031 32.4375 39 33 39Z" fill="#03A9F4"/>
<path d="M56 4C56 1.79086 57.7909 0 60 0H72C74.2091 0 76 1.79086 76 4V4C76 6.20914 74.2091 8 72 8H60C57.7909 8 56 6.20914 56 4V4Z" fill="black" fill-opacity="0.32"/>
<rect x="96" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M56 20C56 15.5817 59.5817 12 64 12H96C100.418 12 104 15.5817 104 20V64C104 68.4183 100.418 72 96 72H64C59.5817 72 56 68.4183 56 64V20Z" fill="white"/>
<path d="M64 12.5H96C100.142 12.5 103.5 15.8579 103.5 20V64C103.5 68.1421 100.142 71.5 96 71.5H64C59.8579 71.5 56.5 68.1421 56.5 64V20L56.5098 19.6143C56.7041 15.7792 59.7792 12.7041 63.6143 12.5098L64 12.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M86 39.9844H89.9844V42H88.0156V50.0156H71.9844V42H70.0156V39.9844H74C73.4375 39.9844 72.9531 39.7969 72.5469 39.4219C72.1719 39.0156 71.9844 38.5469 71.9844 38.0156V33.9844H77.9844V38.0156C77.9844 38.5469 77.7812 39.0156 77.375 39.4219C77 39.7969 76.5469 39.9844 76.0156 39.9844H83.9844V36.9844C83.9844 36.7344 83.8906 36.5156 83.7031 36.3281C83.5156 36.1094 83.2812 36 83 36C82.7188 36 82.4844 36.1094 82.2969 36.3281C82.1094 36.5156 82.0156 36.7344 82.0156 36.9844H80C80 36.4531 80.125 35.9688 80.375 35.5312C80.6562 35.0625 81.0156 34.6875 81.4531 34.4062C81.9219 34.125 82.4375 33.9844 83 33.9844C83.5625 33.9844 84.0625 34.125 84.5 34.4062C84.9688 34.6875 85.3281 35.0625 85.5781 35.5312C85.8594 35.9688 86 36.4531 86 36.9844V39.9844ZM80.9844 48V42H79.0156V48H80.9844Z" fill="#03A9F4"/>
<path d="M112 4C112 1.79086 113.791 0 116 0H128C130.209 0 132 1.79086 132 4V4C132 6.20914 130.209 8 128 8H116C113.791 8 112 6.20914 112 4V4Z" fill="black" fill-opacity="0.32"/>
<rect x="152" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M112 20C112 15.5817 115.582 12 120 12H152C156.418 12 160 15.5817 160 20V64C160 68.4183 156.418 72 152 72H120C115.582 72 112 68.4183 112 64V20Z" fill="white"/>
<path d="M120 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V64C159.5 68.1421 156.142 71.5 152 71.5H120C115.858 71.5 112.5 68.1421 112.5 64V20L112.51 19.6143C112.704 15.7792 115.779 12.7041 119.614 12.5098L120 12.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M142.984 36.9844C144.078 36.9844 145.016 37.3906 145.797 38.2031C146.609 38.9844 147.016 39.9219 147.016 41.0156V50.0156H145V47.0156H127V50.0156H124.984V35.0156H127V44.0156H135.016V36.9844H142.984ZM133.094 42.0938C132.5 42.6875 131.797 42.9844 130.984 42.9844C130.172 42.9844 129.469 42.6875 128.875 42.0938C128.281 41.5 127.984 40.7969 127.984 39.9844C127.984 39.1719 128.281 38.4688 128.875 37.875C129.469 37.2812 130.172 36.9844 130.984 36.9844C131.797 36.9844 132.5 37.2812 133.094 37.875C133.688 38.4688 133.984 39.1719 133.984 39.9844C133.984 40.7969 133.688 41.5 133.094 42.0938Z" fill="#03A9F4"/>
<path d="M0 84C0 81.7909 1.79086 80 4 80H16C18.2091 80 20 81.7909 20 84V84C20 86.2091 18.2091 88 16 88H4C1.79086 88 0 86.2091 0 84V84Z" fill="black" fill-opacity="0.32"/>
<rect x="28" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<rect x="40" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M0 100C0 95.5817 3.58172 92 8 92H40C44.4183 92 48 95.5817 48 100V144C48 148.418 44.4183 152 40 152H8C3.58172 152 0 148.418 0 144V100Z" fill="white"/>
<path d="M8 92.5H40C44.1421 92.5 47.5 95.8579 47.5 100V144C47.5 148.142 44.1421 151.5 40 151.5H8C3.85787 151.5 0.5 148.142 0.5 144V100L0.509766 99.6143C0.704063 95.7792 3.77915 92.7041 7.61426 92.5098L8 92.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M14.0156 116H33.9844V128H32.0156V125.984H27.9844V128H26.0156V118.016H15.9844V128H14.0156V116ZM32.0156 118.016H27.9844V119.984H32.0156V118.016ZM27.9844 124.016H32.0156V122H27.9844V124.016Z" fill="#03A9F4"/>
<path d="M56 84C56 81.7909 57.7909 80 60 80H72C74.2091 80 76 81.7909 76 84V84C76 86.2091 74.2091 88 72 88H60C57.7909 88 56 86.2091 56 84V84Z" fill="black" fill-opacity="0.32"/>
<rect x="84" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<rect x="96" y="80" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M56 100C56 95.5817 59.5817 92 64 92H96C100.418 92 104 95.5817 104 100V144C104 148.418 100.418 152 96 152H64C59.5817 152 56 148.418 56 144V100Z" fill="white"/>
<path d="M64 92.5H96C100.142 92.5 103.5 95.8579 103.5 100V144C103.5 148.142 100.142 151.5 96 151.5H64C59.8579 151.5 56.5 148.142 56.5 144V100L56.5098 99.6143C56.7041 95.7792 59.7792 92.7041 63.6143 92.5098L64 92.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M77.9844 121.016V122.984H80V121.016H77.9844ZM82.0156 116V131H71V128.984H73.0156V113H82.0156V113.984H86.9844V128.984H89V131H85.0156V116H82.0156Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5531">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

63
public/static/images/dashboard-options/light/icon-dashboard-default.svg Normal file
View File

@ -0,0 +1,63 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5533)">
<path d="M0 8C0 3.58172 3.58172 0 8 0H42.6667C47.0849 0 50.6667 3.58172 50.6667 8V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V8Z" fill="white"/>
<path d="M8 0.5H42.667C46.809 0.500178 50.167 3.85798 50.167 8V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M8 12C8 9.79086 9.79086 8 12 8H38.6667C40.8758 8 42.6667 9.79086 42.6667 12V12C42.6667 14.2091 40.8758 16 38.6667 16H12C9.79086 16 8 14.2091 8 12V12Z" fill="black" fill-opacity="0.32"/>
<path d="M8 27C8 25.3431 9.34315 24 11 24H27.6667C29.3235 24 30.6667 25.3431 30.6667 27V29C30.6667 30.6569 29.3235 32 27.6667 32H11C9.34314 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
<rect x="34.6667" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M8 43C8 41.3431 9.34315 40 11 40H27.6667C29.3235 40 30.6667 41.3431 30.6667 43V45C30.6667 46.6569 29.3235 48 27.6667 48H11C9.34314 48 8 46.6569 8 45V43Z" fill="black" fill-opacity="0.12"/>
<rect x="34.6667" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M8 59C8 57.3431 9.34315 56 11 56H27.6667C29.3235 56 30.6667 57.3431 30.6667 59V61C30.6667 62.6569 29.3235 64 27.6667 64H11C9.34314 64 8 62.6569 8 61V59Z" fill="black" fill-opacity="0.12"/>
<rect x="34.6667" y="56" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M0 84C0 79.5817 3.58172 76 8 76H42.6667C47.0849 76 50.6667 79.5817 50.6667 84V124C50.6667 128.418 47.0849 132 42.6667 132H8.00001C3.58173 132 0 128.418 0 124V84Z" fill="white"/>
<path d="M8 76.5H42.667C46.809 76.5002 50.167 79.858 50.167 84V124C50.167 128.142 46.809 131.5 42.667 131.5H8C3.85787 131.5 0.5 128.142 0.5 124V84C0.5 79.8579 3.85786 76.5 8 76.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M8 88C8 85.7909 9.79086 84 12 84H38.6667C40.8758 84 42.6667 85.7909 42.6667 88V88C42.6667 90.2091 40.8758 92 38.6667 92H12C9.79086 92 8 90.2091 8 88V88Z" fill="black" fill-opacity="0.32"/>
<path d="M8 103C8 101.343 9.34315 100 11 100H27.6667C29.3235 100 30.6667 101.343 30.6667 103V105C30.6667 106.657 29.3235 108 27.6667 108H11C9.34314 108 8 106.657 8 105V103Z" fill="black" fill-opacity="0.12"/>
<rect x="34.6667" y="100" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M8 119C8 117.343 9.34315 116 11 116H27.6667C29.3235 116 30.6667 117.343 30.6667 119V121C30.6667 122.657 29.3235 124 27.6667 124H11C9.34314 124 8 122.657 8 121V119Z" fill="black" fill-opacity="0.12"/>
<rect x="34.6667" y="116" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M0 144C0 139.582 3.58172 136 8 136H42.6667C47.0849 136 50.6667 139.582 50.6667 144V152C50.6667 156.418 47.0849 160 42.6667 160H8.00001C3.58173 160 0 156.418 0 152V144Z" fill="white"/>
<path d="M8 136.5H42.667C46.809 136.5 50.167 139.858 50.167 144V152C50.167 156.142 46.809 159.5 42.667 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V144C0.5 139.858 3.85786 136.5 8 136.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M8 148C8 145.791 9.79086 144 12 144H38.6667C40.8758 144 42.6667 145.791 42.6667 148V148C42.6667 150.209 40.8758 152 38.6667 152H12C9.79086 152 8 150.209 8 148V148Z" fill="black" fill-opacity="0.32"/>
<path d="M54.6667 8C54.6667 3.58172 58.2484 0 62.6667 0H97.3333C101.752 0 105.333 3.58172 105.333 8V48C105.333 52.4183 101.752 56 97.3334 56H62.6667C58.2484 56 54.6667 52.4183 54.6667 48V8Z" fill="white"/>
<path d="M62.6667 0.5H97.3337C101.476 0.50018 104.834 3.85798 104.834 8V48C104.834 52.142 101.476 55.4998 97.3337 55.5H62.6667C58.5246 55.5 55.1667 52.1421 55.1667 48V8C55.1667 3.85786 58.5246 0.5 62.6667 0.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M62.6667 12C62.6667 9.79086 64.4575 8 66.6667 8H93.3334C95.5425 8 97.3334 9.79086 97.3334 12V12C97.3334 14.2091 95.5425 16 93.3334 16H66.6667C64.4576 16 62.6667 14.2091 62.6667 12V12Z" fill="black" fill-opacity="0.32"/>
<path d="M62.6667 27C62.6667 25.3431 64.0098 24 65.6667 24H82.3334C83.9902 24 85.3334 25.3431 85.3334 27V29C85.3334 30.6569 83.9902 32 82.3334 32H65.6667C64.0098 32 62.6667 30.6569 62.6667 29V27Z" fill="black" fill-opacity="0.12"/>
<rect x="89.3333" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M62.6667 43C62.6667 41.3431 64.0098 40 65.6667 40H82.3334C83.9902 40 85.3334 41.3431 85.3334 43V45C85.3334 46.6569 83.9902 48 82.3334 48H65.6667C64.0098 48 62.6667 46.6569 62.6667 45V43Z" fill="black" fill-opacity="0.12"/>
<rect x="89.3333" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M54.6667 68C54.6667 63.5817 58.2484 60 62.6667 60H97.3333C101.752 60 105.333 63.5817 105.333 68V76C105.333 80.4183 101.752 84 97.3334 84H62.6667C58.2484 84 54.6667 80.4183 54.6667 76V68Z" fill="white"/>
<path d="M62.6667 60.5H97.3337C101.476 60.5002 104.834 63.858 104.834 68V76C104.834 80.142 101.476 83.4998 97.3337 83.5H62.6667C58.5246 83.5 55.1667 80.1421 55.1667 76V68C55.1667 63.8579 58.5246 60.5 62.6667 60.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M62.6667 72C62.6667 69.7909 64.4575 68 66.6667 68H93.3334C95.5425 68 97.3334 69.7909 97.3334 72V72C97.3334 74.2091 95.5425 76 93.3334 76H66.6667C64.4576 76 62.6667 74.2091 62.6667 72V72Z" fill="black" fill-opacity="0.32"/>
<path d="M54.6667 96C54.6667 91.5817 58.2484 88 62.6667 88H97.3333C101.752 88 105.333 91.5817 105.333 96V136C105.333 140.418 101.752 144 97.3334 144H62.6667C58.2484 144 54.6667 140.418 54.6667 136V96Z" fill="white"/>
<path d="M62.6667 88.5H97.3337C101.476 88.5002 104.834 91.858 104.834 96V136C104.834 140.142 101.476 143.5 97.3337 143.5H62.6667C58.5246 143.5 55.1667 140.142 55.1667 136V96C55.1667 91.8579 58.5246 88.5 62.6667 88.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M62.6667 100C62.6667 97.7909 64.4575 96 66.6667 96H93.3334C95.5425 96 97.3334 97.7909 97.3334 100V100C97.3334 102.209 95.5425 104 93.3334 104H66.6667C64.4576 104 62.6667 102.209 62.6667 100V100Z" fill="black" fill-opacity="0.32"/>
<path d="M62.6667 115C62.6667 113.343 64.0098 112 65.6667 112H82.3334C83.9902 112 85.3334 113.343 85.3334 115V117C85.3334 118.657 83.9902 120 82.3334 120H65.6667C64.0098 120 62.6667 118.657 62.6667 117V115Z" fill="black" fill-opacity="0.12"/>
<rect x="89.3333" y="112" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M62.6667 131C62.6667 129.343 64.0098 128 65.6667 128H82.3334C83.9902 128 85.3334 129.343 85.3334 131V133C85.3334 134.657 83.9902 136 82.3334 136H65.6667C64.0098 136 62.6667 134.657 62.6667 133V131Z" fill="black" fill-opacity="0.12"/>
<rect x="89.3333" y="128" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M109.333 8C109.333 3.58172 112.915 0 117.333 0H152C156.418 0 160 3.58172 160 8V112C160 116.418 156.418 120 152 120H117.333C112.915 120 109.333 116.418 109.333 112V8Z" fill="white"/>
<path d="M117.333 0.5H152C156.142 0.50018 159.5 3.85798 159.5 8V112C159.5 116.142 156.142 119.5 152 119.5H117.333C113.191 119.5 109.833 116.142 109.833 112V8C109.833 3.85786 113.191 0.5 117.333 0.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M117.333 12C117.333 9.79086 119.124 8 121.333 8H148C150.209 8 152 9.79086 152 12V12C152 14.2091 150.209 16 148 16H121.333C119.124 16 117.333 14.2091 117.333 12V12Z" fill="black" fill-opacity="0.32"/>
<path d="M117.333 27C117.333 25.3431 118.676 24 120.333 24H137C138.657 24 140 25.3431 140 27V29C140 30.6569 138.657 32 137 32H120.333C118.676 32 117.333 30.6569 117.333 29V27Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M117.333 43C117.333 41.3431 118.676 40 120.333 40H137C138.657 40 140 41.3431 140 43V45C140 46.6569 138.657 48 137 48H120.333C118.676 48 117.333 46.6569 117.333 45V43Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M117.333 59C117.333 57.3431 118.676 56 120.333 56H137C138.657 56 140 57.3431 140 59V61C140 62.6569 138.657 64 137 64H120.333C118.676 64 117.333 62.6569 117.333 61V59Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="56" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M117.333 75C117.333 73.3431 118.676 72 120.333 72H137C138.657 72 140 73.3431 140 75V77C140 78.6569 138.657 80 137 80H120.333C118.676 80 117.333 78.6569 117.333 77V75Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="72" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M117.333 91C117.333 89.3431 118.676 88 120.333 88H137C138.657 88 140 89.3431 140 91V93C140 94.6569 138.657 96 137 96H120.333C118.676 96 117.333 94.6569 117.333 93V91Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="88" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M117.333 107C117.333 105.343 118.676 104 120.333 104H137C138.657 104 140 105.343 140 107V109C140 110.657 138.657 112 137 112H120.333C118.676 112 117.333 110.657 117.333 109V107Z" fill="black" fill-opacity="0.12"/>
<rect x="144" y="104" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
<path d="M109.333 132C109.333 127.582 112.915 124 117.333 124H152C156.418 124 160 127.582 160 132V140C160 144.418 156.418 148 152 148H117.333C112.915 148 109.333 144.418 109.333 140V132Z" fill="white"/>
<path d="M117.333 124.5H152C156.142 124.5 159.5 127.858 159.5 132V140C159.5 144.142 156.142 147.5 152 147.5H117.333C113.191 147.5 109.833 144.142 109.833 140V132C109.833 127.858 113.191 124.5 117.333 124.5Z" stroke="black" stroke-opacity="0.12"/>
<path d="M117.333 136C117.333 133.791 119.124 132 121.333 132H148C150.209 132 152 133.791 152 136V136C152 138.209 150.209 140 148 140H121.333C119.124 140 117.333 138.209 117.333 136V136Z" fill="black" fill-opacity="0.32"/>
</g>
<defs>
<clipPath id="clip0_1738_5533">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

16
public/static/images/dashboard-options/light/icon-dashboard-map.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5539)">
<rect width="160" height="160" rx="8" fill="white"/>
<rect x="0.5" y="0.5" width="159" height="159" rx="7.5" stroke="black" stroke-opacity="0.12"/>
<path d="M83 86.9844V75.125L77 73.0156V84.875L83 86.9844ZM88.4844 71C88.8281 71 89 71.1719 89 71.5156V86.6094C89 86.8594 88.875 87.0156 88.625 87.0781L83 89L77 86.8906L71.6562 88.9531L71.5156 89C71.1719 89 71 88.8281 71 88.4844V73.3906C71 73.1406 71.125 72.9844 71.375 72.9219L77 71L83 73.1094L88.3438 71.0469L88.4844 71Z" fill="#03A9F4"/>
<path d="M148 77.0508L139.288 85.8983M139.288 85.8983L116.852 108.684C115.724 109.83 114.184 110.475 112.576 110.475H81.6939M139.288 85.8983V69.4322M21.1957 82.9492H12M21.1957 82.9492L32.3274 71.6441M21.1957 82.9492L44.427 106.542M81.6939 110.475V124.237M81.6939 110.475H54.5907M81.6939 138V124.237M81.6939 124.237H148M32.3274 71.6441L43.4591 60.339L54.5907 49.0339L70.4941 32.8828C74.2533 29.0651 79.3871 26.9153 84.7451 26.9153H128.641V26.9153C134.521 26.9153 139.288 31.6824 139.288 37.5629V37.7288V49.0339M32.3274 71.6441L24.8569 64.0572C22.5573 61.7218 22.5573 57.9732 24.8569 55.6377L57.9786 22M139.288 49.0339H126.313C124.706 49.0339 123.166 48.389 122.038 47.2436L116.057 41.1695M139.288 49.0339V69.4322M139.288 69.4322H126.313C124.706 69.4322 123.166 68.7873 122.038 67.6419L116.057 61.5678M54.5907 110.475V110.475C54.5907 107.488 52.17 105.068 49.184 105.068H49.0249C45.951 105.068 43.4591 107.56 43.4591 110.634V110.807C43.4591 113.881 45.951 116.373 49.0249 116.373V116.373C52.0988 116.373 54.5907 113.881 54.5907 110.807V110.475ZM44.427 115.39L22.1637 138" stroke="black" stroke-opacity="0.12" stroke-width="5" stroke-linecap="round"/>
<circle cx="41" cy="39" r="14" fill="black" fill-opacity="0.32"/>
<circle cx="89" cy="117" r="14" fill="black" fill-opacity="0.32"/>
<path d="M116 62.325C115.767 62.325 115.533 62.2833 115.3 62.2C115.067 62.1167 114.858 61.9917 114.675 61.825C113.592 60.825 112.633 59.85 111.8 58.9C110.967 57.95 110.267 57.0333 109.7 56.15C109.15 55.25 108.725 54.3917 108.425 53.575C108.142 52.7417 108 51.95 108 51.2C108 48.7 108.8 46.7083 110.4 45.225C112.017 43.7417 113.883 43 116 43C118.117 43 119.975 43.7417 121.575 45.225C123.192 46.7083 124 48.7 124 51.2C124 51.95 123.85 52.7417 123.55 53.575C123.267 54.3917 122.842 55.25 122.275 56.15C121.725 57.0333 121.033 57.95 120.2 58.9C119.367 59.85 118.408 60.825 117.325 61.825C117.142 61.9917 116.933 62.1167 116.7 62.2C116.467 62.2833 116.233 62.325 116 62.325Z" fill="black" fill-opacity="0.32"/>
</g>
<defs>
<clipPath id="clip0_1738_5539">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

13
public/static/images/dashboard-options/light/icon-dashboard-new.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="160" height="72" viewBox="0 0 160 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5535)">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="black" fill-opacity="0.32"/>
<rect y="12" width="50.6667" height="60" rx="8" fill="white"/>
<rect x="0.5" y="12.5" width="49.6667" height="59" rx="7.5" stroke="black" stroke-opacity="0.12"/>
<path d="M32.3177 42.9844H26.3177V48.9844H24.349V42.9844H18.349V41.0156H24.349V35.0156H26.3177V41.0156H32.3177V42.9844Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5535">
<rect width="160" height="72" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 712 B

16
public/static/images/dashboard-options/light/icon-dashboard-webpage.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1738_5537)">
<rect width="160" height="160" rx="6" fill="white"/>
<rect x="0.5" y="0.5" width="159" height="159" rx="5.5" stroke="black" stroke-opacity="0.12"/>
<rect x="8" y="8" width="144" height="11" rx="5.5" fill="black" fill-opacity="0.32"/>
<rect x="8" y="27" width="45.3333" height="106" rx="4" fill="#E9E9E9"/>
<rect x="57.3333" y="27" width="45.3333" height="30" rx="4" fill="#E9E9E9"/>
<rect x="106.667" y="27" width="45.3333" height="68" rx="4" fill="#E9E9E9"/>
<path d="M84.3594 82.0156H87.7344C87.9219 81.1406 88.0156 80.4688 88.0156 80C88.0156 79.5312 87.9219 78.8594 87.7344 77.9844H84.3594C84.4531 78.6406 84.5 79.3125 84.5 80C84.5 80.6875 84.4531 81.3594 84.3594 82.0156ZM82.5781 87.5469C83.3594 87.2969 84.1719 86.8281 85.0156 86.1406C85.8594 85.4219 86.5 84.7031 86.9375 83.9844H83.9844C83.6719 85.2344 83.2031 86.4219 82.5781 87.5469ZM82.3438 82.0156C82.4375 81.3594 82.4844 80.6875 82.4844 80C82.4844 79.3125 82.4375 78.6406 82.3438 77.9844H77.6562C77.5625 78.6406 77.5156 79.3125 77.5156 80C77.5156 80.6875 77.5625 81.3594 77.6562 82.0156H82.3438ZM80 87.9688C80.875 86.6875 81.5156 85.3594 81.9219 83.9844H78.0781C78.4844 85.3594 79.125 86.6875 80 87.9688ZM76.0156 76.0156C76.3906 74.6719 76.8594 73.4844 77.4219 72.4531C76.6406 72.7031 75.8125 73.1875 74.9375 73.9062C74.0938 74.5938 73.4688 75.2969 73.0625 76.0156H76.0156ZM73.0625 83.9844C73.4688 84.7031 74.0938 85.4219 74.9375 86.1406C75.8125 86.8281 76.6406 87.2969 77.4219 87.5469C76.7969 86.4219 76.3281 85.2344 76.0156 83.9844H73.0625ZM72.2656 82.0156H75.6406C75.5469 81.3594 75.5 80.6875 75.5 80C75.5 79.3125 75.5469 78.6406 75.6406 77.9844H72.2656C72.0781 78.8594 71.9844 79.5312 71.9844 80C71.9844 80.4688 72.0781 81.1406 72.2656 82.0156ZM80 72.0312C79.125 73.3125 78.4844 74.6406 78.0781 76.0156H81.9219C81.5156 74.6406 80.875 73.3125 80 72.0312ZM86.9375 76.0156C86.5 75.2969 85.8594 74.5938 85.0156 73.9062C84.1719 73.1875 83.3594 72.7031 82.5781 72.4531C83.1406 73.4844 83.6094 74.6719 83.9844 76.0156H86.9375ZM72.9219 72.9688C74.8906 71 77.25 70.0156 80 70.0156C82.75 70.0156 85.0938 71 87.0312 72.9688C89 74.9062 89.9844 77.25 89.9844 80C89.9844 82.75 89 85.1094 87.0312 87.0781C85.0938 89.0156 82.75 89.9844 80 89.9844C77.25 89.9844 74.8906 89.0156 72.9219 87.0781C70.9844 85.1094 70.0156 82.75 70.0156 80C70.0156 77.25 70.9844 74.9062 72.9219 72.9688Z" fill="#03A9F4"/>
</g>
<defs>
<clipPath id="clip0_1738_5537">
<rect width="160" height="160" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

84
src/panels/config/dashboard/dashboard-card.ts Normal file
View File

@ -0,0 +1,84 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-ripple";
@customElement("dashboard-card")
export class DashboardCard extends LitElement {
@property({ type: String }) name = "";
@property({ type: String }) description = "";
@property({ type: String }) img = "";
@property({ type: String }) alt = "";
render() {
return html`
<div
class="card"
tabindex="0"
role="button"
aria-label=${this.name}
@keydown=${this._onKeyDown}
>
<div class="card-header">
<div>
<h2>${this.name}</h2>
<p>${this.description}</p>
</div>
</div>
<div class="preview">
<img alt=${this.alt} loading="lazy" src=${this.img} />
</div>
<ha-ripple></ha-ripple>
</div>
`;
}
private _onKeyDown(e: KeyboardEvent) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
this.click();
}
}
static styles = css`
.card {
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 12px;
background: var(--primary-background-color, #fafafa);
cursor: pointer;
position: relative;
overflow: hidden;
border: 1px solid var(--divider-color);
}
.card-header {
padding: 12px;
display: block;
text-align: left;
gap: 8px;
}
.preview {
padding: 16px;
}
h2 {
margin: 0 0 8px 0;
font-size: 1.2rem;
color: var(--primary-text-color);
}
p {
margin: 0;
color: var(--secondary-text-color);
font-size: 0.9rem;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"dashboard-card": DashboardCard;
}
}

328
src/panels/config/dashboard/dialog-new-dashboard.ts
View File

@ -1,38 +1,71 @@
import { mdiHome, mdiMap, mdiPencilOutline, mdiShape, mdiWeb } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import type { IFuseOptions } from "fuse.js";
import Fuse from "fuse.js";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-icon-next";
import "../../../components/ha-list-item";
import "../../../components/ha-list";
import "../../../components/search-input";
import type { LovelaceRawConfig } from "../../../data/lovelace/config/types";
import type { HassDialog } from "../../../dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import type { NewDashboardDialogParams } from "./show-dialog-new-dashboard";
import "./dashboard-card";
import type { LocalizeKeys } from "../../../common/translations/localize";
const EMPTY_CONFIG: LovelaceRawConfig = { views: [{ title: "Home" }] };
interface Strategy {
type: string;
iconPath: string;
images: { dark: string; light: string };
name: string;
description: string;
}
const STRATEGIES = [
{
type: "map",
iconPath: mdiMap,
},
{
type: "iframe",
iconPath: mdiWeb,
type: "default",
images: {
light:
"/static/images/dashboard-options/light/icon-dashboard-default.svg",
dark: "/static/images/dashboard-options/dark/icon-dashboard-default.svg",
},
name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.default.title",
description:
"ui.panel.config.lovelace.dashboards.dialog_new.strategy.default.description",
},
{
type: "areas",
iconPath: mdiHome,
images: {
light: "/static/images/dashboard-options/light/icon-dashboard-areas.svg",
dark: "/static/images/dashboard-options/dark/icon-dashboard-areas.svg",
},
name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.areas.title",
description:
"ui.panel.config.lovelace.dashboards.dialog_new.strategy.areas.description",
},
{
type: "map",
images: {
light: "/static/images/dashboard-options/light/icon-dashboard-map.svg",
dark: "/static/images/dashboard-options/dark/icon-dashboard-map.svg",
},
name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.map.title",
description:
"ui.panel.config.lovelace.dashboards.dialog_new.strategy.map.description",
},
{
type: "iframe",
images: {
light:
"/static/images/dashboard-options/light/icon-dashboard-webpage.svg",
dark: "/static/images/dashboard-options/dark/icon-dashboard-webpage.svg",
},
name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.iframe.title",
description:
"ui.panel.config.lovelace.dashboards.dialog_new.strategy.iframe.description",
},
] as const satisfies Strategy[];
@ -44,9 +77,23 @@ class DialogNewDashboard extends LitElement implements HassDialog {
@state() private _params?: NewDashboardDialogParams;
@state() private _filter = "";
@state() private _localizedStrategies: (Strategy & {
localizedName: string;
localizedDescription: string;
})[] = [];
public showDialog(params: NewDashboardDialogParams): void {
this._opened = true;
this._params = params;
this._localizedStrategies = STRATEGIES.map((strategy) => ({
...strategy,
localizedName: this.hass.localize(strategy.name as LocalizeKeys),
localizedDescription: this.hass.localize(
strategy.description as LocalizeKeys
),
}));
}
public closeDialog() {
@ -75,83 +122,113 @@ class DialogNewDashboard extends LitElement implements HassDialog {
)
)}
>
<ha-list
innerRole="listbox"
itemRoles="option"
innerAriaLabel=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.header`
<search-input
.hass=${this.hass}
.label=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.search_dashboards`
)}
rootTabbable
dialogInitialFocus
@selected=${this._selected}
>
<ha-list-item
hasmeta
twoline
graphic="icon"
.config=${EMPTY_CONFIG}
@request-selected=${this._selected}
>
<ha-svg-icon slot="graphic" .path=${mdiPencilOutline}></ha-svg-icon>
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty`
)}
<span slot="secondary">
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty_description`
)}
</span>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
<li divider role="separator"></li>
<ha-list-item
hasmeta
twoline
graphic="icon"
.config=${null}
@request-selected=${this._selected}
>
<ha-svg-icon slot="graphic" .path=${mdiShape}></ha-svg-icon>
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.default`
)}
<span slot="secondary"
>${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.default_description`
)}</span
>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
${STRATEGIES.map(
(strategy) => html`
<ha-list-item
hasmeta
twoline
graphic="icon"
.strategy=${strategy.type}
@request-selected=${this._selected}
>
<ha-svg-icon
slot="graphic"
.path=${strategy.iconPath}
></ha-svg-icon>
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.strategy.${strategy.type}.title`
)}
<span slot="secondary">
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.strategy.${strategy.type}.description`
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
></search-input>
<div class="content">
${this._filter
? html`
<div class="cards-container">
${this._filterStrategies(
this._localizedStrategies,
this._filter
).map(
(strategy) => html`
<dashboard-card
.name=${strategy.localizedName}
.description=${strategy.localizedDescription}
.img=${this.hass.themes.darkMode
? strategy.images.dark
: strategy.images.light}
.alt=${strategy.localizedName}
@click=${this._selected}
.strategy=${strategy.type}
></dashboard-card>
`
)}
</span>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
`
)}
</ha-list>
</div>
`
: html`
<div class="cards-container">
<dashboard-card
.name=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty`
)}
.description=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty_description`
)}
.img=${this.hass.themes.darkMode
? "/static/images/dashboard-options/dark/icon-dashboard-new.svg"
: "/static/images/dashboard-options/light/icon-dashboard-new.svg"}
.alt=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.create_empty`
)}
@click=${this._selected}
.config=${EMPTY_CONFIG}
></dashboard-card>
</div>
<div class="cards-container">
<div class="cards-container-header">
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.dialog_new.heading.default`
)}
</div>
${this._localizedStrategies.map(
(strategy) => html`
<dashboard-card
.name=${strategy.localizedName}
.description=${strategy.localizedDescription}
.img=${this.hass.themes.darkMode
? strategy.images.dark
: strategy.images.light}
.alt=${strategy.localizedName}
@click=${this._selected}
.strategy=${strategy.type}
></dashboard-card>
`
)}
</div>
`}
</div>
</ha-dialog>
`;
}
private _handleSearchChange(ev: CustomEvent) {
this._filter = ev.detail.value;
}
private _filterStrategies = memoizeOne(
(
strategies: (Strategy & {
localizedName: string;
localizedDescription: string;
})[],
filter?: string
): readonly (Strategy & {
localizedName: string;
localizedDescription: string;
})[] => {
if (!filter) {
return strategies;
}
const options: IFuseOptions<(typeof strategies)[0]> = {
keys: ["type", "localizedName", "localizedDescription"],
isCaseSensitive: false,
threshold: 0.3,
ignoreLocation: true,
minMatchCharLength: Math.min(filter.length, 2),
};
const fuse = new Fuse(strategies, options);
return fuse.search(filter).map((result) => result.item);
}
);
private _generateStrategyConfig(strategy: string) {
return {
strategy: {
@ -160,16 +237,19 @@ class DialogNewDashboard extends LitElement implements HassDialog {
};
}
private async _selected(ev) {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
private async _selected(ev: Event) {
const target = ev.currentTarget as any;
const config =
target.config ||
(target.strategy && this._generateStrategyConfig(target.strategy)) ||
null;
let config: any = null;
if (target.config) {
config = target.config;
} else if (target.strategy) {
if (target.strategy === "default") {
config = null;
} else {
config = this._generateStrategyConfig(target.strategy);
}
}
this._params?.selectConfig(config);
this.closeDialog();
@ -180,17 +260,63 @@ class DialogNewDashboard extends LitElement implements HassDialog {
haStyle,
haStyleDialog,
css`
ha-dialog {
--dialog-content-padding: 0;
--mdc-dialog-max-height: 60vh;
}
@media all and (min-width: 550px) {
@media all and (max-width: 450px), all and (max-height: 500px) {
/* overrule the ha-style-dialog max-height on small screens */
ha-dialog {
--mdc-dialog-min-width: 500px;
--mdc-dialog-max-height: 100%;
height: 100%;
}
}
ha-icon-next {
width: 24px;
@media all and (min-width: 850px) {
ha-dialog {
--mdc-dialog-min-width: 845px;
--mdc-dialog-min-height: calc(100vh - 72px);
--mdc-dialog-max-height: calc(100vh - 72px);
}
}
ha-dialog {
--mdc-dialog-max-width: 845px;
--dialog-content-padding: 0;
--dialog-z-index: 6;
}
.cards-container-header {
font-size: var(--ha-font-size-l);
font-weight: var(--ha-font-weight-medium);
padding: 12px 8px;
margin: 0;
grid-column: 1 / -1;
position: sticky;
top: 56px;
z-index: 1;
background: linear-gradient(
90deg,
var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff))
0%,
#ffffff00 80%
);
}
search-input {
display: block;
--mdc-shape-small: var(--card-picker-search-shape);
margin: var(--card-picker-search-margin);
position: sticky;
top: 0;
z-index: 10;
background-color: var(
--ha-dialog-surface-background,
var(--mdc-theme-surface, #fff)
);
}
.cards-container {
display: grid;
grid-gap: 8px 8px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
margin-top: 20px;
}
.content {
padding: 0 24px 0 24px;
}
`,
];

8
src/translations/en.json
View File

@ -3266,7 +3266,15 @@
"areas": {
"title": "Areas (experimental)",
"description": "Display your devices with a view for each area"
},
"default": {
"title": "Default dashboard",
"description": "Display your devices grouped by area"
}
},
"search_dashboards": "Search dashboards",
"heading": {
"default": "Dashboards"
}
},
"picker": {