UI/UX improvements
This commit is contained in:
sairaj mote
parent
643d764f44
commit
161e24b4e7
146
assets/messenger-illustration.svg
Normal file
146
assets/messenger-illustration.svg
Normal file
@ -0,0 +1,146 @@
|
||||
<svg width="484" height="484" viewBox="0 0 484 484" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.circle{
|
||||
fill: var(--accent-color)
|
||||
}
|
||||
</style>
|
||||
<g clip-path="url(#clip0_102_2)">
|
||||
<circle class="circle" cx="243" cy="242" r="242" fill="#DBE5FF" fill-opacity="0.1"/>
|
||||
<circle class="circle" cx="242.5" cy="241.5" r="162.5" fill="#A6BEFC" fill-opacity="0.1"/>
|
||||
<circle class="circle" cx="242.5" cy="241.5" r="109.5" fill="#7295EE" fill-opacity="0.1"/>
|
||||
<g filter="url(#filter0_d_102_2)">
|
||||
<circle cx="127.5" cy="383.5" r="42.5" fill="white"/>
|
||||
</g>
|
||||
<path d="M140.757 372.193H117.947C116.017 372.193 114.438 373.758 114.438 375.672V391.328C114.438 393.259 116.017 394.807 117.947 394.807H140.757C142.705 394.807 144.266 393.259 144.266 391.328V375.672C144.266 373.758 142.705 372.193 140.757 372.193ZM140.757 378.577L129.352 384.37L117.947 378.577V375.672L129.352 381.43L140.757 375.672V378.577ZM110.929 391.328C110.929 391.624 110.982 391.902 111.017 392.198H103.911C102.942 392.198 102.156 391.415 102.156 390.458C102.156 389.502 102.942 388.719 103.911 388.719H110.929V391.328ZM107.42 374.802H111.017C110.982 375.098 110.929 375.376 110.929 375.672V378.281H107.42C106.455 378.281 105.665 377.498 105.665 376.542C105.665 375.585 106.455 374.802 107.42 374.802ZM103.911 383.5C103.911 382.543 104.7 381.76 105.665 381.76H110.929V385.24H105.665C104.7 385.24 103.911 384.457 103.911 383.5Z" fill="#72EEC1"/>
|
||||
<g filter="url(#filter1_d_102_2)">
|
||||
<circle cx="410.5" cy="378.5" r="12.5" fill="#7286EE"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_d_102_2)">
|
||||
<circle cx="78.5" cy="286.5" r="6.5" fill="#EE7297"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_d_102_2)">
|
||||
<circle cx="361" cy="131" r="6" fill="#72B2EE"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_d_102_2)">
|
||||
<circle cx="332.5" cy="368.5" r="10.5" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_d_102_2)">
|
||||
<circle cx="46.5" cy="185.5" r="10.5" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter6_d_102_2)">
|
||||
<circle cx="356.5" cy="84.5" r="10.5" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter7_d_102_2)">
|
||||
<circle cx="158.5" cy="124.5" r="50.5" fill="white"/>
|
||||
</g>
|
||||
<path d="M165.907 119.56C164.951 123.383 159 121.441 157.15 120.917L158.846 114.195C160.758 114.75 166.893 115.552 165.907 119.56ZM156.318 124.37L154.468 131.801C156.749 132.387 163.81 134.638 164.858 130.444C165.968 126.066 158.599 124.925 156.318 124.37ZM188.908 131.462C184.777 147.988 168.065 158.04 151.538 153.908C135.012 149.777 124.969 133.065 129.092 116.538C133.223 100.012 149.935 89.9723 166.462 94.0917C182.958 98.2233 193.009 114.935 188.908 131.462ZM165.814 111.821L167.202 106.271L163.81 105.5L162.453 110.834C161.559 110.618 160.665 110.403 159.74 110.218L161.097 104.76L157.736 103.958L156.348 109.478C155.608 109.293 154.868 109.138 154.19 108.953L149.534 107.782L148.609 111.389C148.609 111.389 151.138 111.975 151.076 112.006C152.463 112.345 152.71 113.208 152.648 113.979L148.856 129.18C148.702 129.612 148.208 130.167 147.314 130.013C147.345 130.043 144.848 129.396 144.848 129.396L143.183 133.25L147.561 134.36C148.393 134.576 149.195 134.792 149.997 134.977L148.578 140.588L151.97 141.452L153.358 135.871C154.283 136.118 155.177 136.333 156.04 136.58L154.653 142.099L158.044 142.963L159.463 137.351C165.167 138.43 169.545 137.998 171.333 132.788C172.875 128.625 171.333 126.158 168.25 124.586C170.47 124 172.135 122.613 172.598 119.591C173.214 115.49 170.069 113.301 165.814 111.821Z" fill="#FFBF5E"/>
|
||||
<path d="M288.653 268.267V279.265C288.653 282.228 287.476 285.069 285.381 287.164C283.285 289.259 280.444 290.437 277.481 290.437H207.957C204.994 290.437 202.153 289.259 200.058 287.164C197.963 285.069 196.786 282.228 196.786 279.265V228.682L182 198L277.481 198.507C278.949 198.507 280.403 198.796 281.759 199.358C283.115 199.921 284.347 200.744 285.384 201.783C286.422 202.822 287.245 204.054 287.805 205.411C288.366 206.768 288.654 208.222 288.653 209.69V237.639" fill="white"/>
|
||||
<path d="M288.653 210.42V281.939C288.775 293.984 256.437 291.393 256.437 291.393C259.4 291.393 262.242 290.216 264.337 288.12C266.432 286.025 267.609 283.184 267.609 280.221V198.855L277.481 199.24C278.949 199.24 280.402 199.529 281.758 200.091C283.114 200.653 284.346 201.477 285.384 202.515C286.421 203.553 287.244 204.786 287.805 206.142C288.366 207.499 288.654 208.952 288.653 210.42V210.42Z" fill="#CCCCCC"/>
|
||||
<path d="M288.653 248.031V259.516" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M288.653 268.267V279.265C288.653 282.228 287.476 285.069 285.381 287.164C283.285 289.259 280.444 290.437 277.481 290.437H207.957C204.994 290.437 202.153 289.259 200.058 287.164C197.963 285.069 196.786 282.228 196.786 279.265V228.682L182 198L277.481 198.507C278.949 198.507 280.403 198.796 281.759 199.358C283.115 199.921 284.347 200.744 285.384 201.783C286.422 202.822 287.245 204.054 287.805 205.411C288.366 206.768 288.654 208.222 288.653 209.69V237.639" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M257.679 257.264C257.679 261.232 256.103 265.037 253.297 267.842C250.492 270.648 246.687 272.224 242.719 272.224C238.752 272.224 234.947 270.648 232.141 267.842C229.336 265.037 227.76 261.232 227.76 257.264C227.76 248.993 257.679 248.993 257.679 257.264Z" fill="#ED1C24" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M212.598 236.302C213.112 234.868 214.058 233.629 215.305 232.755C216.551 231.88 218.038 231.413 219.561 231.418C221.084 231.423 222.568 231.899 223.81 232.781C225.051 233.663 225.989 234.908 226.494 236.345" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M258.959 236.302C259.473 234.868 260.419 233.629 261.666 232.755C262.913 231.88 264.4 231.413 265.922 231.418C267.445 231.423 268.929 231.899 270.171 232.781C271.412 233.663 272.35 234.908 272.855 236.345" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M249.766 251.706C254.278 252.613 257.683 254.46 257.683 257.249C257.684 260.134 256.851 262.959 255.285 265.382C253.719 267.805 251.486 269.724 248.855 270.909" fill="#D30D41"/>
|
||||
<path d="M249.766 251.706C254.278 252.613 257.683 254.46 257.683 257.249C257.684 260.134 256.851 262.959 255.285 265.382C253.719 267.805 251.486 269.724 248.855 270.909" stroke="black" stroke-width="6" stroke-miterlimit="10"/>
|
||||
<g filter="url(#filter8_d_102_2)">
|
||||
<circle cx="378.5" cy="242.5" r="44.5" fill="white"/>
|
||||
</g>
|
||||
<path d="M379 229C388.9 229 397 234.967 397 242.333C397 249.7 388.9 255.667 379 255.667C376.768 255.667 374.626 255.367 372.646 254.833C367.39 259 361 259 361 259C365.194 255.117 365.86 252.5 365.95 251.5C362.89 249.117 361 245.883 361 242.333C361 234.967 369.1 229 379 229Z" fill="#E9707F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_102_2" x="53" y="325" width="149" height="149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_102_2" x="366" y="350" width="89" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_102_2" x="40" y="264" width="77" height="77" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_102_2" x="323" y="109" width="76" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_102_2" x="290" y="342" width="85" height="85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter5_d_102_2" x="4" y="159" width="85" height="85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter6_d_102_2" x="314" y="58" width="85" height="85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter7_d_102_2" x="76" y="58" width="165" height="165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter8_d_102_2" x="302" y="182" width="153" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="16"/>
|
||||
<feGaussianBlur stdDeviation="16"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_2"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_2" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_102_2">
|
||||
<rect width="484" height="484" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
80
css/main.css
80
css/main.css
@ -501,6 +501,50 @@ ol li::before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.margin-right-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -558,42 +602,6 @@ ol li::before {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -521,6 +521,47 @@ ol {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.margin-right-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -589,41 +630,6 @@ ol {
|
||||
}
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
.margin-block-1-5 {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-inline-1 {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
.margin-inline-1-5 {
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
152
index.html
152
index.html
File diff suppressed because one or more lines are too long
@ -2418,40 +2418,32 @@ smMenu.innerHTML = `
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu{
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.7rem;
|
||||
-webkit-transition: background 0.3s;
|
||||
-o-transition: background 0.3s;
|
||||
transition: background 0.3s;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
.menu{
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
outline: none;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 2rem;
|
||||
-webkit-transition: background 0.3s;
|
||||
-o-transition: background 0.3s;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.select{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
@ -2465,7 +2457,7 @@ smMenu.innerHTML = `
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.menu:focus,
|
||||
.menu:focus .icon,
|
||||
.focused{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
@ -2476,7 +2468,8 @@ smMenu.innerHTML = `
|
||||
right: 0;
|
||||
}
|
||||
.options{
|
||||
padding: 0.5rem 0;
|
||||
top: 100%;
|
||||
padding: 0.3rem;
|
||||
overflow: hidden auto;
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
@ -2485,55 +2478,40 @@ smMenu.innerHTML = `
|
||||
min-width: -webkit-max-content;
|
||||
min-width: -moz-max-content;
|
||||
min-width: max-content;
|
||||
-webkit-transform: translateY(-1rem);
|
||||
-ms-transform: translateY(-1rem);
|
||||
transform: translateY(-1rem);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
-o-transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.3rem;
|
||||
z-index: 2;
|
||||
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
top: 100%;
|
||||
background: var(--background, rgba(var(--background-color), 1));
|
||||
border-radius: var(--border-radius, 0.5rem);
|
||||
z-index: 1;
|
||||
-webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
|
||||
bottom: auto;
|
||||
}
|
||||
.moveUp{
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
-webkit-transform: translateY(3rem);
|
||||
-ms-transform: translateY(3rem);
|
||||
transform: translateY(3rem);
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
.moveLeft{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.no-transformations{
|
||||
-webkit-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
@media screen and (max-width: 640px){
|
||||
.options{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
}
|
||||
@media (hover: hover){
|
||||
.menu:hover{
|
||||
.menu:hover .icon{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="select">
|
||||
<button class="menu">
|
||||
<slot name="icon">
|
||||
<div class="menu" tabindex="0">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div class="options hide">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -2544,11 +2522,25 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(smMenu.content.cloneNode(true))
|
||||
|
||||
this.isOpen = false;
|
||||
this.availableOptions
|
||||
this.containerDimensions
|
||||
this.animOptions = {
|
||||
duration: 200,
|
||||
easing: 'ease'
|
||||
}
|
||||
|
||||
this.optionList = this.shadowRoot.querySelector('.options')
|
||||
this.menu = this.shadowRoot.querySelector('.menu')
|
||||
this.open = false;
|
||||
this.icon = this.shadowRoot.querySelector('.icon')
|
||||
|
||||
this.expand = this.expand.bind(this)
|
||||
this.collapse = this.collapse.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this)
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this)
|
||||
|
||||
}
|
||||
static get observedAttributes() {
|
||||
return ['value']
|
||||
@ -2559,82 +2551,112 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
set value(val) {
|
||||
this.setAttribute('value', val)
|
||||
}
|
||||
expand = () => {
|
||||
if (!this.open) {
|
||||
expand() {
|
||||
if (!this.isOpen) {
|
||||
this.optionList.classList.remove('hide')
|
||||
this.optionList.classList.add('no-transformations')
|
||||
this.menu.classList.add('focused')
|
||||
this.open = true
|
||||
this.availableOptions.forEach(option => {
|
||||
option.setAttribute('tabindex', '0')
|
||||
})
|
||||
this.optionList.animate([
|
||||
{
|
||||
transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
|
||||
opacity: '0'
|
||||
},
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: '1'
|
||||
},
|
||||
], this.animOptions)
|
||||
.onfinish = () => {
|
||||
this.isOpen = true
|
||||
this.icon.classList.add('focused')
|
||||
}
|
||||
}
|
||||
}
|
||||
collapse() {
|
||||
if (this.open) {
|
||||
this.open = false
|
||||
this.optionList.classList.add('hide')
|
||||
this.optionList.classList.remove('no-transformations')
|
||||
this.menu.classList.remove('focused')
|
||||
this.availableOptions.forEach(option => {
|
||||
option.removeAttribute('tabindex')
|
||||
})
|
||||
if (this.isOpen) {
|
||||
this.optionList.animate([
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: '1'
|
||||
},
|
||||
{
|
||||
transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
|
||||
opacity: '0'
|
||||
},
|
||||
], this.animOptions)
|
||||
.onfinish = () => {
|
||||
this.isOpen = false
|
||||
this.icon.classList.remove('focused')
|
||||
this.optionList.classList.add('hide')
|
||||
}
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
let slot = this.shadowRoot.querySelector('.options slot')
|
||||
this.menu.addEventListener('click', e => {
|
||||
if (!this.open) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
})
|
||||
this.menu.addEventListener('keydown', e => {
|
||||
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
|
||||
toggle() {
|
||||
if (!this.isOpen) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
}
|
||||
handleKeyDown(e) {
|
||||
// If key is pressed on menu button
|
||||
if (e.target === this) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
if (e.code === 'Enter' || e.code === 'Space') {
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
if (!this.open) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
this.toggle()
|
||||
}
|
||||
})
|
||||
this.optionList.addEventListener('keydown', e => {
|
||||
if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
|
||||
} else { // If key is pressed over menu options
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.previousElementSibling) {
|
||||
document.activeElement.previousElementSibling.focus()
|
||||
} else {
|
||||
this.availableOptions[this.availableOptions.length - 1].focus()
|
||||
}
|
||||
}
|
||||
if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
|
||||
else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.nextElementSibling)
|
||||
if (document.activeElement.nextElementSibling) {
|
||||
document.activeElement.nextElementSibling.focus()
|
||||
} else {
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
this.optionList.addEventListener('click', e => {
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
e.target.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
handleClickOutside(e) {
|
||||
if (!this.contains(e.target) && e.button !== 2) {
|
||||
this.collapse()
|
||||
})
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
this.setAttribute('role', 'listbox')
|
||||
this.setAttribute('aria-label', 'dropdown menu')
|
||||
const slot = this.shadowRoot.querySelector('.options slot')
|
||||
slot.addEventListener('slotchange', e => {
|
||||
this.availableOptions = slot.assignedElements()
|
||||
this.availableOptions = e.target.assignedElements()
|
||||
this.containerDimensions = this.optionList.getBoundingClientRect()
|
||||
});
|
||||
window.addEventListener('mousedown', e => {
|
||||
if (!this.contains(e.target) && e.button !== 2) {
|
||||
this.collapse()
|
||||
}
|
||||
})
|
||||
this.addEventListener('click', this.toggle)
|
||||
this.addEventListener('keydown', this.handleKeyDown)
|
||||
document.addEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('click', this.toggle)
|
||||
this.removeEventListener('keydown', this.handleKeyDown)
|
||||
document.removeEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
})
|
||||
|
||||
// option
|
||||
const smMenuOption = document.createElement('template')
|
||||
smMenuOption.innerHTML = `
|
||||
const menuOption = document.createElement('template')
|
||||
menuOption.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
@ -2648,17 +2670,17 @@ smMenuOption.innerHTML = `
|
||||
display: flex;
|
||||
}
|
||||
.option{
|
||||
opacity: 0.9;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
padding: 0.6rem 2rem;
|
||||
padding: var(--padding, 0.6rem 1rem);
|
||||
cursor: pointer;
|
||||
overflow-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
@ -2667,9 +2689,11 @@ smMenuOption.innerHTML = `
|
||||
outline: none;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
@media (hover: hover){
|
||||
@media (any-hover: hover){
|
||||
.option{
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.option:hover{
|
||||
opacity: 1;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
@ -2677,17 +2701,19 @@ smMenuOption.innerHTML = `
|
||||
<div class="option">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
customElements.define('sm-menu-option', class extends HTMLElement {
|
||||
customElements.define('menu-option', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(smMenuOption.content.cloneNode(true))
|
||||
}).append(menuOption.content.cloneNode(true))
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.setAttribute('role', 'option')
|
||||
this.setAttribute('tabindex', '0')
|
||||
this.addEventListener('keyup', e => {
|
||||
if (e.code === 'Enter' || e.code === 'Space') {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.click()
|
||||
}
|
||||
|
||||
@ -1,194 +0,0 @@
|
||||
/* settings component */
|
||||
const settingsMenu = document.createElement('template');
|
||||
settingsMenu.innerHTML = `
|
||||
<style>
|
||||
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.settingsContainer{
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 15rem 5rem;
|
||||
grid-row-gap: 5rem;
|
||||
font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
}
|
||||
.menuContainer{
|
||||
margin-left: -6rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.settings{
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.svgClicked{
|
||||
transform: rotate(-25deg);
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.submenu{
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
overflow-y: scroll;
|
||||
max-height: 18rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::slotted(div) , .submenu div {
|
||||
padding: 1.15rem;
|
||||
width: 14rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.submenu div{
|
||||
width: 16rem;
|
||||
|
||||
}
|
||||
|
||||
::slotted(div:hover) , .submenu div:hover{
|
||||
background: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="settingsContainer">
|
||||
<div class="menuContainer">
|
||||
<div class="menu">
|
||||
<slot name="menu-options" class="menuSlot"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 512 512" class="settingsIcon">
|
||||
<path d="M491.755 232.653c0-5.95-4.935-10.844-10.865-10.844h-19.876c-6 0-12.318-4.649-13.978-10.383l-27.065-63.191c-2.877-5.161-1.935-12.871 2.284-17.111l13.456-13.435c4.219-4.219 4.219-11.141 0-15.35l-32.379-32.389c-4.199-4.249-11.1-4.249-15.462 0l-14.541 14.633c-4.26 4.24-12.063 5.406-17.316 2.632l-54.978-21.954c-5.745-1.628-10.455-7.885-10.455-13.834v-20.378c0-5.97-4.885-10.823-10.803-10.823h-45.895c-5.939 0-10.823 4.854-10.823 10.823v20.378c0 5.95-4.71 12.247-10.363 14.019l-63.764 27.279c-5.11 3.010-12.728 2.007-16.988-2.212l-14.295-14.295c-4.198-4.188-11.090-4.188-15.329 0l-32.409 32.43c-4.281 4.229-4.281 11.151 0 15.36l15.544 15.626c4.29 4.198 5.458 11.919 2.704 17.244l-21.657 54.477c-1.597 5.796-7.844 10.455-13.824 10.455h-21.648c-5.919 0-10.793 4.894-10.793 10.844v45.855c0 5.98 4.874 10.885 10.793 10.885h21.637c5.98 0 12.237 4.618 13.998 10.363l26.583 62.7c3.062 5.161 2.017 12.82-2.109 17.060l-14.919 14.817c-4.229 4.24-4.229 11.079 0 15.36l32.43 32.399c4.249 4.199 11.162 4.199 15.299 0l15.933-15.862c4.25-4.219 11.879-5.376 17.203-2.519l55.624 22.18c5.653 1.639 10.363 7.885 10.363 13.824v21.218c0 5.959 4.885 10.844 10.823 10.844h45.895c5.918 0 10.803-4.885 10.803-10.844v-21.217c0-5.939 4.659-12.175 10.455-13.937l62.178-26.378c5.161-2.898 12.738-1.884 17.039 2.304l14.019 14.080c4.219 4.199 11.1 4.199 15.36 0l32.42-32.44c4.24-4.199 4.24-11.12 0-15.339l-14.981-14.899c-4.116-4.24-5.284-11.961-2.498-17.244l22.538-56.064c1.577-5.776 7.895-10.404 13.896-10.445h19.876c5.918 0 10.865-4.905 10.865-10.844v-45.855zM256.031 333.097c-42.649 0-77.097-34.539-77.097-77.107 0-42.578 34.447-77.056 77.097-77.056 42.526 0 77.087 34.478 77.087 77.056 0 42.567-34.56 77.107-77.087 77.107z" fill="#000000" />
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
||||
customElements.define('settings-menu', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(settingsMenu.content.cloneNode(true))
|
||||
|
||||
this.settingsContainer = this.shadowRoot.querySelector('.settingsContainer');
|
||||
this.settingsIcon = this.shadowRoot.querySelector('.settingsIcon'); //svg icon
|
||||
this.menu = this.shadowRoot.querySelector('.menu'); // for the main menu
|
||||
this.menuContainer = this.shadowRoot.querySelector('.menuContainer');
|
||||
this.menuSlot = this.shadowRoot.querySelector('.menuSlot');
|
||||
this.closeMenu; // for close icons
|
||||
this.count = 0; // a counter
|
||||
this.menuIndex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
connectedCallback() {
|
||||
|
||||
// to rotate the svg icon and display the main menu
|
||||
this.settingsIcon.addEventListener('click', e => {
|
||||
|
||||
if(this.menuIndex){
|
||||
this.shadowRoot.querySelector('.submenu'+(this.menuIndex)).style.visibility = "hidden";
|
||||
}
|
||||
|
||||
|
||||
if(this.count%2==0){
|
||||
|
||||
this.settingsIcon.classList.add('svgClicked');
|
||||
this.menu.style.visibility = "visible";
|
||||
|
||||
}else{
|
||||
|
||||
this.settingsIcon.classList.remove('svgClicked');
|
||||
this.menu.style.visibility = "hidden";
|
||||
/* I know instead of this I should have added and removed a class but it was not working */
|
||||
|
||||
}
|
||||
|
||||
this.count++;
|
||||
|
||||
});
|
||||
|
||||
// creating slots for sub menu
|
||||
const frag = document.createDocumentFragment();
|
||||
|
||||
this.menuSlot.assignedElements().forEach( (menuOption , index) =>{
|
||||
|
||||
let submenu = document.createElement('div');
|
||||
let submenuSlot = document.createElement('slot');
|
||||
let submenuTitle = document.createElement('div');
|
||||
|
||||
// adding a heading and a close icon to a sub menu
|
||||
submenuTitle.innerHTML = "<span class='closeMenu' index=" + (index+1) + ">❮</span> " + menuOption.innerHTML;
|
||||
|
||||
menuOption.setAttribute("index", (index+1));
|
||||
submenuSlot.setAttribute('name', 'menu' + (index+1));
|
||||
submenu.classList.add('submenu');
|
||||
submenu.classList.add('submenu' + (index+1));
|
||||
|
||||
submenu.append(submenuTitle);
|
||||
submenu.append(submenuSlot);
|
||||
frag.append(submenu);
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.menuContainer.append(frag);
|
||||
this.closeMenu = this.shadowRoot.querySelectorAll('.closeMenu'); // get a list of closeIcons
|
||||
|
||||
// adding click event to main menu to open respective sub menu
|
||||
|
||||
this.menu.addEventListener( 'click', e=> {
|
||||
|
||||
let menuOption = e.target.closest('div');
|
||||
|
||||
this.menuIndex = menuOption.getAttribute('index');
|
||||
|
||||
let submenu = this.shadowRoot.querySelector('.submenu'+(this.menuIndex));
|
||||
|
||||
submenu.style.visibility="visible";
|
||||
this.menu.style.visibility = "hidden";
|
||||
|
||||
});
|
||||
|
||||
// adding click event to close Icons and adding code to hide the respective sub menu
|
||||
|
||||
this.closeMenu.forEach((closeButton) =>{
|
||||
closeButton.addEventListener('click', e=>{
|
||||
let submenuIndex = closeButton.getAttribute('index');
|
||||
|
||||
this.shadowRoot.querySelector('.submenu'+(submenuIndex)).style.visibility = "hidden";
|
||||
|
||||
this.menu.style.visibility = "visible";
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user