Properly using svg icons within the client sprite for the client info bar
WolverinDEV
parent
3e3d867264
commit
bd721bf13e
File diff suppressed because it is too large
Load Diff
|
|
@ -24,6 +24,7 @@
|
||||||
"@babel/plugin-transform-runtime": "^7.10.4",
|
"@babel/plugin-transform-runtime": "^7.10.4",
|
||||||
"@babel/preset-env": "^7.10.4",
|
"@babel/preset-env": "^7.10.4",
|
||||||
"@google-cloud/translate": "^5.3.0",
|
"@google-cloud/translate": "^5.3.0",
|
||||||
|
"@svgr/webpack": "^5.5.0",
|
||||||
"@types/dompurify": "^2.0.1",
|
"@types/dompurify": "^2.0.1",
|
||||||
"@types/ejs": "^3.0.2",
|
"@types/ejs": "^3.0.2",
|
||||||
"@types/emoji-mart": "^3.0.2",
|
"@types/emoji-mart": "^3.0.2",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg id="camara_icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="scale(.16)">
|
||||||
|
<path d="m50 40c-8.285 0-15 6.718-15 15 0 8.285 6.715 15 15 15 8.283 0 15-6.715 15-15 0-8.282-6.717-15-15-15zm40-15h-12c-1.65 0-3.428-1.28-3.949-2.846l-3.102-9.309c-.523-1.565-2.299-2.845-3.949-2.845h-34c-1.65 0-3.428 1.28-3.949 2.846l-3.102 9.309c-.523 1.565-2.299 2.845-3.949 2.845h-12c-5.5 0-10 4.5-10 10v45c0 5.5 4.5 10 10 10h80c5.5 0 10-4.5 10-10v-45c0-5.5-4.5-10-10-10zm-40 55c-13.807 0-25-11.193-25-25 0-13.806 11.193-25 25-25 13.805 0 25 11.194 25 25 0 13.807-11.195 25-25 25zm36.5-38.007c-1.932 0-3.5-1.566-3.5-3.5 0-1.932 1.568-3.5 3.5-3.5 1.934 0 3.5 1.568 3.5 3.5 0 1.934-1.567 3.5-3.5 3.5z" style="fill:#030104"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 762 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="m13.656 2.3444c-3.1256-3.1256-8.1851-3.1261-11.311 0-3.1257 3.1256-3.1261 8.1851 0 11.311 3.1256 3.1256 8.1851 3.1261 11.311 0 3.1257-3.1256 3.1261-8.1851 0-11.311zm-.33429 10.171c-.3737-.33417-.77344-.62989-1.1948-.88475.27849-.962.44348-2.0206.48248-3.121h2.3515c-.10632 1.4833-.67623 2.8747-1.6392 4.0058zm-12.282-4.0058h2.3515c.039 1.1004.20399 2.159.48249 3.121-.42135.25486-.82108.55058-1.1948.88475-.96297-1.1311-1.5328-2.5225-1.6392-4.0058zm1.6392-5.0252c.3737.33416.77343.62989 1.1948.88475-.27849.96199-.44349 2.0206-.48248 3.121h-2.3515c.10636-1.4832.67623-2.8746 1.6392-4.0058zm4.8116.9901c-.83126-.0594-1.6328-.26419-2.3758-.60195.43214-1.1128 1.2288-2.4475 2.3758-2.7783zm0 1.0213v1.9944h-3.0795c.0353-.93087.16718-1.8247.38653-2.6426.8444.36914 1.7525.58958 2.693.64819zm0 3.0138v1.9944c-.94045.0586-1.8486.27905-2.693.64819-.21935-.81787-.35125-1.7117-.38653-2.6426zm0 3.0157v3.3802c-1.1469-.33076-1.9436-1.6653-2.3758-2.7782.74305-.33776 1.5446-.5425 2.3758-.60195zm1.0194 0c.83126.0595 1.6328.26419 2.3758.60195-.43218 1.1128-1.2288 2.4475-2.3758 2.7782zm0-1.0213v-1.9944h3.0795c-.0353.93087-.16718 1.8247-.38653 2.6426-.84441-.36914-1.7525-.58958-2.693-.64819zm0-3.0138v-1.9944c.94045-.0586 1.8486-.27905 2.693-.64819.21935.81786.35124 1.7117.38653 2.6426zm0-3.0157v-3.3802c1.147.33076 1.9437 1.6654 2.3758 2.7783-.74305.33773-1.5446.54247-2.3758.60192zm2.2894-2.8713c.65244.28571 1.2611.67311 1.8068 1.1538-.25973.229-.53379.43664-.81996.62234-.25414-.62924-.57878-1.2407-.98682-1.7761zm-6.585 1.7761c-.28617-.1857-.5602-.39334-.81995-.62234.54565-.48067 1.1543-.86807 1.8068-1.1538-.40805.53544-.73269 1.1469-.98683 1.7761zm4e-5 9.2412c.2541.62921.57881 1.2407.98682 1.7761-.65244-.28571-1.2611-.67311-1.8068-1.1538.25972-.229.53378-.43665.81996-.62234zm7.5718 0c.28617.18569.56023.39334.81996.62231-.54565.48067-1.1543.86807-1.8068 1.1538.40801-.53531.73268-1.1468.98682-1.7761zm.82314-5.1303c-.039-1.1004-.20399-2.1591-.48248-3.121.42134-.25486.82105-.55059 1.1948-.88475.96296 1.1311 1.5328 2.5225 1.6392 4.0058z" style="stroke-width:.031224"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,31 @@
|
||||||
|
<svg id="regular" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(7.625,7.625)">
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m12 10h-.028c-.226-.009-.436-.119-.572-.3l-1.275-1.7h-2.375c-.965 0-1.75-.785-1.75-1.75v-4.5c0-.965.785-1.75 1.75-1.75h8.5c.965 0 1.75.785 1.75 1.75v4.5c0 .965-.785 1.75-1.75 1.75h-2.16l-1.526 1.744c-.142.163-.348.256-.564.256zm-4.25-8.5c-.138 0-.25.112-.25.25v4.5c0 .138.112.25.25.25h2.75c.236 0 .458.111.6.3l.945 1.26 1.141-1.303c.142-.164.348-.257.564-.257h2.5c.138 0 .25-.112.25-.25v-4.5c0-.138-.112-.25-.25-.25z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m20 11h-.029c-.227-.009-.437-.12-.572-.301l-.79-1.06c-.248-.332-.179-.802.153-1.05.333-.248.802-.179 1.05.153l.235.316 1.139-1.301c.142-.164.348-.257.564-.257h.5c.136 0 .25-.114.25-.25v-4.5c0-.136-.114-.25-.25-.25h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.965 0 1.75.785 1.75 1.75v4.5c0 .965-.785 1.75-1.75 1.75h-.16l-1.526 1.744c-.142.163-.348.256-.564.256z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m4 11c-.216 0-.422-.093-.564-.256l-1.526-1.744h-.16c-.965 0-1.75-.785-1.75-1.75v-4.5c0-.965.785-1.75 1.75-1.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75h-1.5c-.136 0-.25.114-.25.25v4.5c0 .136.114.25.25.25h.5c.216 0 .422.093.564.256l1.139 1.301.235-.316c.248-.332.717-.401 1.05-.153.332.248.401.718.153 1.05l-.79 1.06c-.135.182-.345.293-.572.302z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m20 17c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zm0-2.5c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m23.25 22c-.414 0-.75-.336-.75-.75v-.5c0-.689-.561-1.25-1.25-1.25h-2.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h2.5c1.517 0 2.75 1.233 2.75 2.75v.5c0 .414-.336.75-.75.75z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m4 17c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zm0-2.5c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m.75 22c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h2.5c.414 0 .75.336.75.75s-.336.75-.75.75h-2.5c-.689 0-1.25.561-1.25 1.25v.5c0 .414-.336.75-.75.75z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m12 17.5c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4.5c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.66667 0 0 .66667 -7.625 -7.625)">
|
||||||
|
<path d="m16.75 24c-.414 0-.75-.336-.75-.75v-1.5c0-.689-.561-1.25-1.25-1.25h-5.5c-.689 0-1.25.561-1.25 1.25v1.5c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-1.5c0-1.517 1.233-2.75 2.75-2.75h5.5c1.517 0 2.75 1.233 2.75 2.75v1.5c0 .414-.336.75-.75.75z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="scale(.03125)">
|
||||||
|
<path d="m256 0c-141.16 0-256 114.84-256 256s114.84 256 256 256 256-114.84 256-256-114.84-256-256-256zm0 468.73c-117.3 0-212.73-95.431-212.73-212.73s95.431-212.73 212.73-212.73 212.73 95.431 212.73 212.73-95.431 212.73-212.73 212.73z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="scale(.03125)">
|
||||||
|
<path d="m372.1 248.07h-100.96v-150.89c0-11.948-9.686-21.634-21.634-21.634s-21.634 9.686-21.634 21.634v172.52c0 11.948 9.686 21.634 21.634 21.634.244 0 .48-.029.721-.036.241.009.477.036.721.036h121.15c11.948 0 21.634-9.686 21.634-21.634s-9.686-21.633-21.634-21.633z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 666 B |
|
|
@ -0,0 +1,25 @@
|
||||||
|
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(0 2.0645)">
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<path d="m66.065 313.81c-36.43 0-66.065 29.636-66.065 66.065s29.635 66.065 66.065 66.065 66.065-29.635 66.065-66.065-29.636-66.065-66.065-66.065zm0 99.097c-18.217 0-33.032-14.815-33.032-33.032s14.815-33.032 33.032-33.032 33.032 14.815 33.032 33.032-14.815 33.032-33.032 33.032z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<path d="m176.17 126.62c-36.429 0-66.065 29.635-66.065 66.065s29.635 66.065 66.065 66.065 66.065-29.635 66.065-66.065-29.636-66.065-66.065-66.065zm0 99.096c-18.217 0-33.032-14.815-33.032-33.032s14.815-33.032 33.032-33.032 33.032 14.815 33.032 33.032-14.815 33.032-33.032 33.032z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<path d="m341.33 286.28c-36.429 0-66.065 29.635-66.065 66.065 0 36.429 29.635 66.065 66.065 66.065s66.065-29.635 66.065-66.065-29.636-66.065-66.065-66.065zm0 99.096c-18.217 0-33.032-14.815-33.032-33.032s14.815-33.032 33.032-33.032 33.032 14.815 33.032 33.032c.001 18.217-14.814 33.032-33.032 33.032z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<path d="m445.94 66.065c-36.429 0-66.065 29.635-66.065 66.065s29.635 66.065 66.065 66.065 66.065-29.637 66.065-66.066-29.635-66.064-66.065-66.064zm0 99.096c-18.217 0-33.032-14.815-33.032-33.032s14.815-33.032 33.032-33.032 33.032 14.815 33.032 33.032-14.814 33.032-33.032 33.032z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<rect transform="matrix(.5547 -.8321 .8321 .5547 -184.26 228.28)" x="61.58" y="269.76" width="119.1" height="33.034"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<rect transform="matrix(.6402 -.7682 .7682 .6402 -116.26 296.81)" x="242.21" y="208.02" width="33.032" height="129"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 0 -2.0645)">
|
||||||
|
<rect transform="matrix(.4672 -.8842 .8842 .4672 -2.9392 473.57)" x="319.55" y="222.71" width="143.81" height="33.028"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(.033333 0 0 .033204 8e-7 .031028)">
|
||||||
|
<path d="m0 32v416h480v-416zm448 384h-416v-352h416z"/>
|
||||||
|
<rect x="208" y="288" width="128" height="32"/>
|
||||||
|
<polygon points="123.36 315.36 214.56 224 123.36 132.64 102.24 153.76 172.64 224 102.24 294.24"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 353 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(.03125 0 0 .03125 .5 .50001)">
|
||||||
|
<path d="m278.94 17.577c-5.568-2.656-12.128-1.952-16.928 1.92l-155.65 124.51h-74.368c-17.632 0-32 14.368-32 32v128c0 17.632 14.368 32 32 32h74.368l155.62 124.51c2.912 2.304 6.464 3.488 10.016 3.488 2.368 0 4.736-.512 6.944-1.568 5.536-2.688 9.056-8.288 9.056-14.432v-416c0-6.144-3.52-11.744-9.056-14.432zm-182.94 286.43h-64v-128h64zm160 110.69-128-102.4v-144.58l128-102.4z"/>
|
||||||
|
<path d="m369.02 126.86c-6.304-6.24-16.416-6.144-22.624.128-6.208 6.304-6.144 16.416.128 22.624 24.16 23.904 37.472 56 37.472 90.4s-13.312 66.496-37.472 90.4c-6.304 6.208-6.368 16.32-.128 22.624 3.136 3.168 7.264 4.736 11.36 4.736 4.064 0 8.128-1.536 11.264-4.64 30.304-29.92 46.976-70.08 46.976-113.12s-16.672-83.2-46.976-113.15z"/>
|
||||||
|
<path d="m414.14 81.769c-6.272-6.208-16.416-6.176-22.624.096s-6.176 16.416.096 22.624c36.352 36.064 56.384 84.192 56.384 135.52s-20.032 99.456-56.384 135.52c-6.272 6.208-6.304 16.352-.096 22.624 3.136 3.168 7.232 4.736 11.36 4.736 4.064 0 8.128-1.536 11.264-4.64 42.464-42.112 65.856-98.304 65.856-158.24s-23.392-116.13-65.856-158.24z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg id="Layer_1" enable-background="new 0 0 512.418 512.418" height="512" viewBox="0 0 512.418 512.418" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m437.335 75.082c-100.1-100.102-262.136-100.118-362.252 0-100.103 100.102-100.118 262.136 0 362.253 100.1 100.102 262.136 100.117 362.252 0 100.103-100.102 100.117-262.136 0-362.253zm-10.706 325.739c-11.968-10.702-24.77-20.173-38.264-28.335 8.919-30.809 14.203-64.712 15.452-99.954h75.309c-3.405 47.503-21.657 92.064-52.497 128.289zm-393.338-128.289h75.309c1.249 35.242 6.533 69.145 15.452 99.954-13.494 8.162-26.296 17.633-38.264 28.335-30.84-36.225-49.091-80.786-52.497-128.289zm52.498-160.936c11.968 10.702 24.77 20.173 38.264 28.335-8.919 30.809-14.203 64.712-15.452 99.954h-75.31c3.406-47.502 21.657-92.063 52.498-128.289zm154.097 31.709c-26.622-1.904-52.291-8.461-76.088-19.278 13.84-35.639 39.354-78.384 76.088-88.977zm0 32.708v63.873h-98.625c1.13-29.812 5.354-58.439 12.379-84.632 27.043 11.822 56.127 18.882 86.246 20.759zm0 96.519v63.873c-30.119 1.877-59.203 8.937-86.246 20.759-7.025-26.193-11.249-54.82-12.379-84.632zm0 96.581v108.254c-36.732-10.593-62.246-53.333-76.088-88.976 23.797-10.817 49.466-17.374 76.088-19.278zm32.646 0c26.622 1.904 52.291 8.461 76.088 19.278-13.841 35.64-39.354 78.383-76.088 88.976zm0-32.708v-63.873h98.625c-1.13 29.812-5.354 58.439-12.379 84.632-27.043-11.822-56.127-18.882-86.246-20.759zm0-96.519v-63.873c30.119-1.877 59.203-8.937 86.246-20.759 7.025 26.193 11.249 54.82 12.379 84.632zm0-96.581v-108.254c36.734 10.593 62.248 53.338 76.088 88.977-23.797 10.816-49.466 17.373-76.088 19.277zm73.32-91.957c20.895 9.15 40.389 21.557 57.864 36.951-8.318 7.334-17.095 13.984-26.26 19.931-8.139-20.152-18.536-39.736-31.604-56.882zm-210.891 56.882c-9.165-5.947-17.941-12.597-26.26-19.931 17.475-15.394 36.969-27.801 57.864-36.951-13.068 17.148-23.465 36.732-31.604 56.882zm.001 295.958c8.138 20.151 18.537 39.736 31.604 56.882-20.895-9.15-40.389-21.557-57.864-36.951 8.318-7.334 17.095-13.984 26.26-19.931zm242.494 0c9.165 5.947 17.942 12.597 26.26 19.93-17.475 15.394-36.969 27.801-57.864 36.951 13.067-17.144 23.465-36.729 31.604-56.881zm26.362-164.302c-1.249-35.242-6.533-69.146-15.452-99.954 13.494-8.162 26.295-17.633 38.264-28.335 30.84 36.225 49.091 80.786 52.497 128.289z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg id="regular" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m12 10c-.009 0-.019 0-.028 0-.226-.009-.436-.119-.572-.3l-1.275-1.7h-2.375c-.965 0-1.75-.785-1.75-1.75v-4.5c0-.965.785-1.75 1.75-1.75h8.5c.965 0 1.75.785 1.75 1.75v4.5c0 .965-.785 1.75-1.75 1.75h-2.16l-1.526 1.744c-.142.163-.348.256-.564.256zm-4.25-8.5c-.138 0-.25.112-.25.25v4.5c0 .138.112.25.25.25h2.75c.236 0 .458.111.6.3l.945 1.26 1.141-1.303c.142-.164.348-.257.564-.257h2.5c.138 0 .25-.112.25-.25v-4.5c0-.138-.112-.25-.25-.25z"/></g><g><path d="m20 11c-.01 0-.02 0-.029 0-.227-.009-.437-.12-.572-.301l-.79-1.06c-.248-.332-.179-.802.153-1.05.333-.248.802-.179 1.05.153l.235.316 1.139-1.301c.142-.164.348-.257.564-.257h.5c.136 0 .25-.114.25-.25v-4.5c0-.136-.114-.25-.25-.25h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.965 0 1.75.785 1.75 1.75v4.5c0 .965-.785 1.75-1.75 1.75h-.16l-1.526 1.744c-.142.163-.348.256-.564.256z"/></g><g><path d="m4 11c-.216 0-.422-.093-.564-.256l-1.526-1.744h-.16c-.965 0-1.75-.785-1.75-1.75v-4.5c0-.965.785-1.75 1.75-1.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75h-1.5c-.136 0-.25.114-.25.25v4.5c0 .136.114.25.25.25h.5c.216 0 .422.093.564.256l1.139 1.301.235-.316c.248-.332.717-.401 1.05-.153.332.248.401.718.153 1.05l-.79 1.06c-.135.182-.345.293-.572.302-.009 0-.019 0-.029 0z"/></g><g><path d="m20 17c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zm0-2.5c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/></g><g><path d="m23.25 22c-.414 0-.75-.336-.75-.75v-.5c0-.689-.561-1.25-1.25-1.25h-2.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h2.5c1.517 0 2.75 1.233 2.75 2.75v.5c0 .414-.336.75-.75.75z"/></g><g><path d="m4 17c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zm0-2.5c-.276 0-.5.224-.5.5s.224.5.5.5.5-.224.5-.5-.224-.5-.5-.5z"/></g><g><path d="m.75 22c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h2.5c.414 0 .75.336.75.75s-.336.75-.75.75h-2.5c-.689 0-1.25.561-1.25 1.25v.5c0 .414-.336.75-.75.75z"/></g><g><path d="m12 17.5c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4.5c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5z"/></g><g><path d="m16.75 24c-.414 0-.75-.336-.75-.75v-1.5c0-.689-.561-1.25-1.25-1.25h-5.5c-.689 0-1.25.561-1.25 1.25v1.5c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-1.5c0-1.517 1.233-2.75 2.75-2.75h5.5c1.517 0 2.75 1.233 2.75 2.75v1.5c0 .414-.336.75-.75.75z"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,49 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M256,0C114.841,0,0,114.841,0,256s114.841,256,256,256s256-114.841,256-256S397.159,0,256,0z M256,468.732
|
|
||||||
c-117.301,0-212.732-95.431-212.732-212.732S138.699,43.268,256,43.268S468.732,138.699,468.732,256S373.301,468.732,256,468.732z
|
|
||||||
"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M372.101,248.068H271.144V97.176c0-11.948-9.686-21.634-21.634-21.634c-11.948,0-21.634,9.686-21.634,21.634v172.525
|
|
||||||
c0,11.948,9.686,21.634,21.634,21.634c0.244,0,0.48-0.029,0.721-0.036c0.241,0.009,0.477,0.036,0.721,0.036h121.149
|
|
||||||
c11.948,0,21.634-9.686,21.634-21.634S384.049,248.068,372.101,248.068z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,70 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M66.065,313.806C29.635,313.806,0,343.442,0,379.871s29.635,66.065,66.065,66.065s66.065-29.635,66.065-66.065 S102.494,313.806,66.065,313.806z M66.065,412.903c-18.217,0-33.032-14.815-33.032-33.032s14.815-33.032,33.032-33.032 s33.032,14.815,33.032,33.032S84.282,412.903,66.065,412.903z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M176.172,126.624c-36.429,0-66.065,29.635-66.065,66.065s29.635,66.065,66.065,66.065s66.065-29.635,66.065-66.065 S212.601,126.624,176.172,126.624z M176.172,225.72c-18.217,0-33.032-14.815-33.032-33.032s14.815-33.032,33.032-33.032 s33.032,14.815,33.032,33.032S194.389,225.72,176.172,225.72z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M341.333,286.28c-36.429,0-66.065,29.635-66.065,66.065c0,36.429,29.635,66.065,66.065,66.065 s66.065-29.635,66.065-66.065C407.398,315.915,377.762,286.28,341.333,286.28z M341.333,385.376 c-18.217,0-33.032-14.815-33.032-33.032c0-18.217,14.815-33.032,33.032-33.032s33.032,14.815,33.032,33.032 C374.366,370.561,359.551,385.376,341.333,385.376z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M445.935,66.065c-36.429,0-66.065,29.635-66.065,66.065s29.635,66.065,66.065,66.065S512,168.558,512,132.129 S482.365,66.065,445.935,66.065z M445.935,165.161c-18.217,0-33.032-14.815-33.032-33.032s14.815-33.032,33.032-33.032 s33.032,14.815,33.032,33.032S464.153,165.161,445.935,165.161z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
|
|
||||||
<rect x="61.58" y="269.761" transform="matrix(0.5547 -0.8321 0.8321 0.5547 -184.2592 228.275)" width="119.103" height="33.034"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
|
|
||||||
<rect x="242.213" y="208.023" transform="matrix(0.6402 -0.7682 0.7682 0.6402 -116.2621 296.8083)" width="33.032" height="128.996"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
|
|
||||||
<rect x="319.551" y="222.711" transform="matrix(0.4672 -0.8842 0.8842 0.4672 -2.9392 473.5728)" width="143.807" height="33.028"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,50 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M0,32v416h480V32H0z M448,416H32V64h416V416z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<rect x="208" y="288" width="128" height="32"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<polygon points="123.36,132.64 102.24,153.76 172.64,224 102.24,294.24 123.36,315.36 214.56,224 "/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 783 B |
|
|
@ -1,59 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M278.944,17.577c-5.568-2.656-12.128-1.952-16.928,1.92L106.368,144.009H32c-17.632,0-32,14.368-32,32v128
|
|
||||||
c0,17.632,14.368,32,32,32h74.368l155.616,124.512c2.912,2.304,6.464,3.488,10.016,3.488c2.368,0,4.736-0.512,6.944-1.568
|
|
||||||
c5.536-2.688,9.056-8.288,9.056-14.432v-416C288,25.865,284.48,20.265,278.944,17.577z M96,304.009H32v-128h64V304.009z
|
|
||||||
M256,414.697l-128-102.4V167.721l128-102.4V414.697z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M369.024,126.857c-6.304-6.24-16.416-6.144-22.624,0.128c-6.208,6.304-6.144,16.416,0.128,22.624
|
|
||||||
c24.16,23.904,37.472,56,37.472,90.4c0,34.4-13.312,66.496-37.472,90.4c-6.304,6.208-6.368,16.32-0.128,22.624
|
|
||||||
c3.136,3.168,7.264,4.736,11.36,4.736c4.064,0,8.128-1.536,11.264-4.64c30.304-29.92,46.976-70.08,46.976-113.12
|
|
||||||
C416,196.969,399.328,156.809,369.024,126.857z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path d="M414.144,81.769c-6.272-6.208-16.416-6.176-22.624,0.096c-6.208,6.272-6.176,16.416,0.096,22.624
|
|
||||||
C427.968,140.553,448,188.681,448,240.009s-20.032,99.456-56.384,135.52c-6.272,6.208-6.304,16.352-0.096,22.624
|
|
||||||
c3.136,3.168,7.232,4.736,11.36,4.736c4.064,0,8.128-1.536,11.264-4.64C456.608,356.137,480,299.945,480,240.009
|
|
||||||
C480,180.073,456.608,123.881,414.144,81.769z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,23 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!--
|
|
||||||
Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)
|
|
||||||
Editor: Markus Hadenfeldt <graphics@teaspeak.de>
|
|
||||||
-->
|
|
||||||
<svg version="1.1" id="camara_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path style="fill:#030104;" d="M50,40c-8.285,0-15,6.718-15,15c0,8.285,6.715,15,15,15c8.283,0,15-6.715,15-15
|
|
||||||
C65,46.718,58.283,40,50,40z M90,25H78c-1.65,0-3.428-1.28-3.949-2.846l-3.102-9.309C70.426,11.28,68.65,10,67,10H33
|
|
||||||
c-1.65,0-3.428,1.28-3.949,2.846l-3.102,9.309C25.426,23.72,23.65,25,22,25H10C4.5,25,0,29.5,0,35v45c0,5.5,4.5,10,10,10h80
|
|
||||||
c5.5,0,10-4.5,10-10V35C100,29.5,95.5,25,90,25z M50,80c-13.807,0-25-11.193-25-25c0-13.806,11.193-25,25-25
|
|
||||||
c13.805,0,25,11.194,25,25C75,68.807,63.805,80,50,80z M86.5,41.993c-1.932,0-3.5-1.566-3.5-3.5c0-1.932,1.568-3.5,3.5-3.5
|
|
||||||
c1.934,0,3.5,1.568,3.5,3.5C90,40.427,88.433,41.993,86.5,41.993z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!--
|
|
||||||
Icon made by Daniel Bruce (https://www.flaticon.com/authors/daniel-bruce)
|
|
||||||
Licensed by Creative Commons BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
|
|
||||||
Taken from: https://www.flaticon.com/free-icon/photo-camera_3901
|
|
||||||
-->
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,3 +1,9 @@
|
||||||
|
declare module "*.svg" {
|
||||||
|
import { ReactElement, SVGProps } from "react";
|
||||||
|
const content: (props: SVGProps<SVGElement>) => ReactElement;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
declare module "*.png" {
|
declare module "*.png" {
|
||||||
const value: any;
|
const value: any;
|
||||||
export = value;
|
export = value;
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 527 B After Width: | Height: | Size: 527 B |
|
|
@ -11,7 +11,7 @@ import {copyToClipboard} from "tc-shared/utils/helpers";
|
||||||
import {getIpcInstance, IPCChannel} from "tc-shared/ipc/BrowserIPC";
|
import {getIpcInstance, IPCChannel} from "tc-shared/ipc/BrowserIPC";
|
||||||
import {useContext} from "react";
|
import {useContext} from "react";
|
||||||
|
|
||||||
const playIcon = require("./yt-play-button.svg");
|
import IconPlay from "./YoutubePlayButton.svg";
|
||||||
const cssStyle = require("./YoutubeRenderer.scss");
|
const cssStyle = require("./YoutubeRenderer.scss");
|
||||||
|
|
||||||
const patternYtVideoId = /^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^?&"'>]{10,11})$/;
|
const patternYtVideoId = /^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^?&"'>]{10,11})$/;
|
||||||
|
|
@ -67,7 +67,7 @@ export const YoutubeRenderer = (props: { children?: React.ReactElement | React.R
|
||||||
>
|
>
|
||||||
<img draggable={false} src={"https://img.youtube.com/vi/" + result[1] + "/hqdefault.jpg"} alt={"Video thumbnail"} title={tra("Youtube video {}", result[1])} />
|
<img draggable={false} src={"https://img.youtube.com/vi/" + result[1] + "/hqdefault.jpg"} alt={"Video thumbnail"} title={tra("Youtube video {}", result[1])} />
|
||||||
<button className={cssStyle.playButton} onClick={() => ipcChannel.sendMessage("w2g", { videoUrl: props.url, handlerId: handlerId })}>
|
<button className={cssStyle.playButton} onClick={() => ipcChannel.sendMessage("w2g", { videoUrl: props.url, handlerId: handlerId })}>
|
||||||
<HTMLRenderer purify={false}>{playIcon}</HTMLRenderer>
|
<IconPlay />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -177,6 +177,7 @@ $bot_thumbnail_height: 9em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -186,32 +187,31 @@ $bot_thumbnail_height: 9em;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
> img {
|
border-radius: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
width: $client_info_avatar_size;
|
flex-direction: column;
|
||||||
height: $client_info_avatar_size;
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
padding: calc(#{$client_info_avatar_size} / 6);
|
transition: opacity $button_hover_animation_time ease-in-out;
|
||||||
|
|
||||||
overflow: hidden;
|
.icon {
|
||||||
opacity: 0;
|
font-size: $client_info_avatar_size * 0.7;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: .75;
|
||||||
}
|
|
||||||
@include transition(opacity $button_hover_animation_time ease-in-out);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.editable {
|
&.editable {
|
||||||
.edit {
|
.edit {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
}
|
pointer-events: all;
|
||||||
|
|
||||||
.edit:hover + .avatar {
|
|
||||||
opacity: .5;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ const Avatar = React.memo(() => {
|
||||||
<AvatarRenderer avatar={avatar} className={cssStyle.avatarImage + " " + (avatar === "loading" ? cssStyle.loading : "")} />
|
<AvatarRenderer avatar={avatar} className={cssStyle.avatarImage + " " + (avatar === "loading" ? cssStyle.loading : "")} />
|
||||||
</div>
|
</div>
|
||||||
<div className={cssStyle.edit} onClick={() => events.fire("action_edit_avatar")}>
|
<div className={cssStyle.edit} onClick={() => events.fire("action_edit_avatar")}>
|
||||||
<img src="img/photo-camera.svg" alt={tr("Upload avatar")} />
|
<ClientIconRenderer icon={ClientIcon.AvatarUpload} className={cssStyle.icon} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -154,7 +154,7 @@ const ClientOnlineSince = React.memo(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_online_time.svg"}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoOnlineTime}>
|
||||||
<Translatable>Online since</Translatable>
|
<Translatable>Online since</Translatable>
|
||||||
{onlineBody}
|
{onlineBody}
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
@ -175,7 +175,7 @@ const ClientCountry = React.memo(() => {
|
||||||
events.reactUse("notify_country", event => setCountry(event.country), undefined, []);
|
events.reactUse("notify_country", event => setCountry(event.country), undefined, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_country.svg"}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoCountry}>
|
||||||
<Translatable>Country</Translatable>
|
<Translatable>Country</Translatable>
|
||||||
<CountryCode alphaCode={country?.flag} className={cssStyle.country} />
|
<CountryCode alphaCode={country?.flag} className={cssStyle.country} />
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
@ -211,7 +211,7 @@ const ClientVolume = React.memo(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_volume.svg"} key={"volume"}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoVolume} key={"volume"}>
|
||||||
<Translatable>Volume</Translatable>
|
<Translatable>Volume</Translatable>
|
||||||
{body}
|
{body}
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
@ -250,7 +250,7 @@ const ClientForumAccount = React.memo(() => {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_forum_account.svg"} valueClass={cssStyle.clientTeaforoAccount}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoForumAccount} valueClass={cssStyle.clientTeaforoAccount}>
|
||||||
<Translatable>TeaSpeak Forum account</Translatable>
|
<Translatable>TeaSpeak Forum account</Translatable>
|
||||||
<a href={"https://forum.teaspeak.de/index.php?members/" + forum.userId} target={"_blank"}>{text}</a>
|
<a href={"https://forum.teaspeak.de/index.php?members/" + forum.userId} target={"_blank"}>{text}</a>
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
@ -283,7 +283,7 @@ const ClientVersion = React.memo(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_version.svg"}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoVersion}>
|
||||||
<Translatable>Version</Translatable>
|
<Translatable>Version</Translatable>
|
||||||
{body}
|
{body}
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
@ -339,7 +339,7 @@ const ClientStatus = React.memo(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InfoBlock imageUrl={"img/icon_client_status.svg"} key={"status"} valueClass={cssStyle.status}>
|
<InfoBlock clientIcon={ClientIcon.ClientInfoStatus} key={"status"} valueClass={cssStyle.status}>
|
||||||
<Translatable>Status</Translatable>
|
<Translatable>Status</Translatable>
|
||||||
<>{elements}</>
|
<>{elements}</>
|
||||||
</InfoBlock>
|
</InfoBlock>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import * as React from "react";
|
||||||
import {useEffect, useRef, useState} from "react";
|
import {useEffect, useRef, useState} from "react";
|
||||||
import {EventHandler, ReactEventHandler, Registry} from "tc-shared/events";
|
import {EventHandler, ReactEventHandler, Registry} from "tc-shared/events";
|
||||||
import {Translatable} from "tc-shared/ui/react-elements/i18n";
|
import {Translatable} from "tc-shared/ui/react-elements/i18n";
|
||||||
import {HTMLRenderer} from "tc-shared/ui/react-elements/HTMLRenderer";
|
|
||||||
import {ProgressBar} from "tc-shared/ui/react-elements/ProgressBar";
|
import {ProgressBar} from "tc-shared/ui/react-elements/ProgressBar";
|
||||||
import {TransferProgress,} from "tc-shared/file/Transfer";
|
import {TransferProgress,} from "tc-shared/file/Transfer";
|
||||||
import {tra} from "tc-shared/i18n/localize";
|
import {tra} from "tc-shared/i18n/localize";
|
||||||
|
|
@ -14,9 +13,9 @@ import {TransferStatus} from "tc-shared/ui/modal/transfer/FileDefinitions";
|
||||||
import {TransferInfoData, TransferInfoEvents} from "tc-shared/ui/modal/transfer/FileTransferInfoDefinitions";
|
import {TransferInfoData, TransferInfoEvents} from "tc-shared/ui/modal/transfer/FileTransferInfoDefinitions";
|
||||||
|
|
||||||
const cssStyle = require("./FileTransferInfoRenderer.scss");
|
const cssStyle = require("./FileTransferInfoRenderer.scss");
|
||||||
const iconArrow = require("./icon_double_arrow.svg");
|
import IconArrow from "./icon_double_arrow.svg";
|
||||||
const iconTransferUpload = require("./icon_transfer_upload.svg");
|
import IconTransferUpload from "./icon_transfer_upload.svg";
|
||||||
const iconTransferDownload = require("./icon_transfer_download.svg");
|
import IconTransferDownload from "./icon_transfer_download.svg";
|
||||||
|
|
||||||
const ExpendState = (props: { extended: boolean, events: Registry<TransferInfoEvents> }) => {
|
const ExpendState = (props: { extended: boolean, events: Registry<TransferInfoEvents> }) => {
|
||||||
const [expended, setExpended] = useState(props.extended);
|
const [expended, setExpended] = useState(props.extended);
|
||||||
|
|
@ -25,7 +24,7 @@ const ExpendState = (props: { extended: boolean, events: Registry<TransferInfoEv
|
||||||
return (
|
return (
|
||||||
<div className={cssStyle.expansionContainer + (expended ? " " + cssStyle.expended : "")}
|
<div className={cssStyle.expansionContainer + (expended ? " " + cssStyle.expended : "")}
|
||||||
onClick={() => props.events.fire("action_toggle_expansion", {visible: !expended})}>
|
onClick={() => props.events.fire("action_toggle_expansion", {visible: !expended})}>
|
||||||
<HTMLRenderer purify={false}>{iconArrow}</HTMLRenderer>
|
<IconArrow />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -306,8 +305,7 @@ const TransferEntry = (props: { transfer: TransferInfoData, events: Registry<Tra
|
||||||
return <div className={cssStyle.transferEntryContainer + (hidden ? " " + cssStyle.hidden : "")}>
|
return <div className={cssStyle.transferEntryContainer + (hidden ? " " + cssStyle.hidden : "")}>
|
||||||
<div className={cssStyle.transferEntry}>
|
<div className={cssStyle.transferEntry}>
|
||||||
<div className={cssStyle.image}>
|
<div className={cssStyle.image}>
|
||||||
<HTMLRenderer
|
{props.transfer.direction === "upload" ? <IconTransferUpload key={"upload"} /> : <IconTransferDownload key={"download"} />}
|
||||||
purify={false}>{props.transfer.direction === "upload" ? iconTransferUpload : iconTransferDownload}</HTMLRenderer>
|
|
||||||
</div>
|
</div>
|
||||||
<div className={cssStyle.info}>
|
<div className={cssStyle.info}>
|
||||||
<a className={cssStyle.name}>{props.transfer.name}</a>
|
<a className={cssStyle.name}>{props.transfer.name}</a>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import {getGlobalAvatarManagerFactory} from "tc-shared/file/Avatars";
|
||||||
import {Settings, settings} from "tc-shared/settings";
|
import {Settings, settings} from "tc-shared/settings";
|
||||||
import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions";
|
import {AbstractModal} from "tc-shared/ui/react-elements/ModalDefinitions";
|
||||||
|
|
||||||
const iconNavbar = require("./icon-navbar.svg");
|
import IconNavbar from "./icon-navbar.svg";
|
||||||
const cssStyle = require("./Renderer.scss");
|
const cssStyle = require("./Renderer.scss");
|
||||||
|
|
||||||
const kLogPlayerEvents = true;
|
const kLogPlayerEvents = true;
|
||||||
|
|
@ -248,7 +248,7 @@ const ToggleSidebarButton = (props: { events: Registry<VideoViewerEvents> }) =>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cssStyle.sidebarButton + " " + (visible ? "" : cssStyle.hidden)} onClick={() => props.events.fire("action_toggle_side_bar", { shown: true })}>
|
<div className={cssStyle.sidebarButton + " " + (visible ? "" : cssStyle.hidden)} onClick={() => props.events.fire("action_toggle_side_bar", { shown: true })}>
|
||||||
<HTMLRenderer purify={false}>{iconNavbar}</HTMLRenderer>
|
<IconNavbar />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -303,7 +303,16 @@ export const config = async (env: any, target: "web" | "client"): Promise<Config
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
use: 'svg-inline-loader'
|
use: [{
|
||||||
|
loader: '@svgr/webpack',
|
||||||
|
options: {
|
||||||
|
svgoConfig: {
|
||||||
|
plugins: {
|
||||||
|
removeViewBox: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|jpeg|gif)?$/,
|
test: /\.(png|jpg|jpeg|gif)?$/,
|
||||||
|
|
@ -350,9 +359,13 @@ export const config = async (env: any, target: "web" | "client"): Promise<Config
|
||||||
contentBase: path.join(__dirname, 'dist'),
|
contentBase: path.join(__dirname, 'dist'),
|
||||||
writeToDisk: true,
|
writeToDisk: true,
|
||||||
compress: true,
|
compress: true,
|
||||||
|
|
||||||
|
/* hot dosn't work because of our loader */
|
||||||
hot: false,
|
hot: false,
|
||||||
inline: false,
|
hotOnly: false,
|
||||||
|
|
||||||
liveReload: false,
|
liveReload: false,
|
||||||
|
inline: false
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue