stable

Clone or download

Read-only

request #13836: Helper to inject TLP classes into an illustration

Go to tlp ยป visual assets ยป colors ยป illustraions. There is a button that open a modal so that you can paste a svg. It will analyse the content of the svg and put relevant tlp classes so that developer don't have to do it by hand. You can test with the following illustration. If you change the theme color in TLP, the illustration should follow the current theme color. ``` <svg width="364" height="189" viewBox="0 0 364 189" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M354 163.019H362M345 163.019H349M328 158.019H341M347.302 158.019H351.302M104 186.019H141M147 186.019H151M94 186.019H98M130 181.019H151M157 181.019H160M23 158.019H33M38 158.019H42M12 163.019H26.3023M2 163.019H6" stroke="#D5E8F3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.7"> <path d="M99.8788 134.576C99.9505 134.251 100.239 134.019 100.572 134.019H101.367C101.701 134.019 101.989 134.251 102.061 134.576L104.139 144.008C104.334 144.894 103.66 145.734 102.753 145.734H99.1868C98.2795 145.734 97.6049 144.894 97.8002 144.008L99.8788 134.576Z" fill="#FCEFD8" stroke="#FFC96A" stroke-width="1.06494"/> <path d="M96 144.314C96 144.118 96.1589 143.959 96.355 143.959H105.584C105.78 143.959 105.939 144.118 105.939 144.314V145.379C105.939 145.575 105.78 145.734 105.584 145.734H96.355C96.1589 145.734 96 145.575 96 145.379V144.314Z" fill="#FFC96A" stroke="#FFC96A" stroke-width="1.06494"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M99.6386 136.859H102.301L102.745 138.634H99.1948L99.6386 136.859Z" fill="#FFC96A"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M98.899 140.054H103.04L103.455 141.829H98.4849L98.899 140.054Z" fill="#FFC96A"/> </g> <rect x="111" y="74.0193" width="110.455" height="81" rx="3" fill="#E0F6FF" stroke="#92CEE5" stroke-width="3"/> <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M216.718 79.5341H112.5V76.5675C112.5 76.0594 112.864 75.6475 113.372 75.6475C126.688 75.6475 207.147 75.6475 218.635 75.6475C219.414 75.6475 220 76.2787 220 77.0575V149.543C220 151.356 218.531 152.825 216.718 152.825V79.5341Z" fill="white"/> <line x1="111" y1="85.8048" x2="221.455" y2="85.8048" stroke="#92CEE5" stroke-width="3"/> <line x1="149.318" y1="74.5857" x2="149.318" y2="155.019" stroke="#92CEE5" stroke-width="3"/> <line x1="186.136" y1="74.5857" x2="186.136" y2="155.019" stroke="#92CEE5" stroke-width="3"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M120 153.5L128 137L131.357 137.639L123.5 153.5H120Z" fill="#C1EDFF"/> <path d="M238.673 85.0481L225.428 176.35C225.424 176.379 225.421 176.408 225.418 176.437C225.348 177.263 225.675 180.949 226.5 181.019L229.694 181.292C230.486 181.359 231.479 177.836 231.592 177.049L244.587 85.8659L238.673 85.0481Z" fill="#E5E5E5" stroke="#DBDBDB" stroke-width="3"/> <path opacity="0.065" d="M236.566 88.0573L245.06 88.7299L244.744 92.2147C242.706 92.7787 241.232 92.9963 240.324 92.8675C239.416 92.7387 238.073 92.1309 236.295 91.0443L236.566 88.0573Z" fill="black"/> <rect x="206.181" y="43.897" width="59.2609" height="59.2609" rx="4" transform="rotate(-36.1272 206.181 43.897)" fill="#FFF8D3" stroke="#FFD600" stroke-width="3"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M282.375 55.4411L250.769 12.9959L252.596 12.3109C253.434 11.9965 254.379 12.2777 254.91 12.9992L284.792 53.6646C286.729 56.2066 286.146 57.1605 284.043 58.5585L243.326 88.4495C242.435 89.1032 241.184 88.9113 240.53 88.0209L239.938 87.2147L282.268 56.1402C282.491 55.9768 282.539 55.6637 282.375 55.4411Z" fill="white"/> <path d="M249.792 31.4774L251.518 31.7468C253.34 32.0312 254.587 33.739 254.302 35.5612C254.29 35.6394 254.275 35.7171 254.257 35.7942L250.035 54.1623C249.697 55.6313 248.281 56.5895 246.792 56.357C245.303 56.1245 244.247 54.7804 244.373 53.2784L245.95 34.4973C246.104 32.6595 247.719 31.2948 249.556 31.4491C249.635 31.4557 249.714 31.4651 249.792 31.4774ZM245.452 59.5276L247.102 59.7851C248.924 60.0695 250.171 61.7773 249.886 63.5995L249.629 65.2491C249.344 67.0713 247.636 68.3179 245.814 68.0334L244.165 67.7759C242.342 67.4914 241.096 65.7837 241.38 63.9615L241.638 62.3118C241.922 60.4897 243.63 59.2431 245.452 59.5276Z" fill="#FFD600"/> <path d="M216.342 148.589C216.544 147.672 217.357 147.019 218.296 147.019H221.705C222.643 147.019 223.456 147.672 223.658 148.589L231.072 182.23C231.622 184.726 229.721 187.091 227.165 187.091H212.835C210.279 187.091 208.378 184.726 208.928 182.23L216.342 148.589Z" fill="#FCEFD8" stroke="#FFC96A" stroke-width="3"/> <path opacity="0.6" d="M218 150H220.591C220.829 150 221.034 150.167 221.081 150.4L227 179.5" stroke="white" stroke-width="3"/> <path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M232 180.019L227 156.019L227.979 150.314L233.5 175.019L232 180.019Z" fill="black"/> <path d="M203 182.019C203 181.467 203.448 181.019 204 181.019H236C236.552 181.019 237 181.467 237 182.019V186.091C237 186.643 236.552 187.091 236 187.091H204C203.448 187.091 203 186.643 203 186.091V182.019Z" fill="#FFC96A" stroke="#FFC96A" stroke-width="3"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M215.447 156.734H224.554L226.072 162.805H213.929L215.447 156.734Z" fill="#FFC96A"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M212.917 167.662H227.083L228.5 173.734H211.5L212.917 167.662Z" fill="#FFC96A"/> <path d="M106.609 140.256C106.768 139.534 107.408 139.019 108.148 139.019H109.913C110.652 139.019 111.293 139.534 111.452 140.256L116.065 161.189C116.499 163.156 115.001 165.019 112.987 165.019H105.073C103.059 165.019 101.562 163.156 101.996 161.19L106.609 140.256Z" fill="#FCEFD8" stroke="#FFC96A" stroke-width="2.36364"/> <path opacity="0.6" d="M107.991 141.5H109.231C109.388 141.5 109.523 141.61 109.555 141.763L113.475 160.5" stroke="white" stroke-width="1.98305"/> <path d="M98 161.868C98 161.433 98.3527 161.08 98.7879 161.08H119.273C119.708 161.08 120.061 161.433 120.061 161.868V164.231C120.061 164.666 119.708 165.019 119.273 165.019H98.7879C98.3527 165.019 98 164.666 98 164.231V161.868Z" fill="#FFC96A" stroke="#FFC96A" stroke-width="2.36364"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M106.076 145.322H111.985L112.97 149.262H105.091L106.076 145.322Z" fill="#FFC96A"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M104.434 152.413H113.626L114.545 156.353H103.515L104.434 152.413Z" fill="#FFC96A"/> <path d="M148.885 154.207C149.442 154.601 149.651 155.33 149.386 155.959L148.754 157.461C148.49 158.09 147.823 158.45 147.151 158.327L127.688 154.761C125.86 154.426 124.81 152.485 125.531 150.772L128.364 144.038C129.084 142.324 131.205 141.717 132.724 142.79L148.885 154.207Z" fill="#FCEFD8" stroke="#FFC96A" stroke-width="2.18182"/> <path opacity="0.6" d="M133 145.5L147 155.5L146.5 157" stroke="white" stroke-width="1.98305"/> <path d="M133.577 139.147C133.947 139.303 134.121 139.729 133.965 140.099L126.634 157.53C126.478 157.9 126.052 158.074 125.682 157.918L123.67 157.072C123.3 156.916 123.126 156.49 123.282 156.12L130.613 138.69C130.769 138.319 131.195 138.145 131.566 138.301L133.577 139.147Z" fill="#FFC96A" stroke="#FFC96A" stroke-width="2.18182"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M144.764 151.94L142.65 156.968L138.945 156.396L141.765 149.692L144.764 151.94Z" fill="#FFC96A"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M139.319 148.006L136.029 155.827L132.348 155.199L136.296 145.814L139.319 148.006Z" fill="#FFC96A"/> </svg> ``` Change-Id: I58a90efebe94c00c845c680937a4332bb6e0fa7f

Modified Files

Name
M src/www/themes/common/tlp/doc/css/main.scss +29 โˆ’0 Go to diff View file
M src/www/themes/common/tlp/doc/index.php +2 โˆ’3 Go to diff View file
M src/www/themes/common/tlp/doc/js/editors.js +3 โˆ’1 Go to diff View file
A src/www/themes/common/tlp/doc/js/illustration-helper.js +110 โˆ’0 Go to diff View file
A src/www/themes/common/tlp/doc/js/index.js +23 โˆ’0 Go to diff View file
M src/www/themes/common/tlp/doc/resources/visual-assets/colors/illustrations/doc.html +52 โˆ’1 Go to diff View file
M src/www/themes/common/tlp/package-lock.json +5 โˆ’0 Go to diff View file
M src/www/themes/common/tlp/package.json +1 โˆ’0 Go to diff View file
M src/www/themes/common/tlp/webpack.common.js +9 โˆ’2 Go to diff View file