imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert Markdown button to SVG mask

Browse source 
This makes it easier to theme via CSS, which helps with the dark theme.
This commit is contained in:
J. Ryan Stinnett 2019-02-18 18:26:40 +00:00
parent 09ed795c79
commit 5fb990eb5f
12 changed files with 39 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
res/img/button-md-false.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 569 B

29
res/img/button-md-false.svg
View file

@ -1,29 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>D335F9E8-C813-47D7-B1BE-C8DEF2C8214F</title>
<desc>Created with sketchtool.</desc>
<defs>
<text id="text-1" font-family="markdown" font-size="14" font-weight="normal" fill="#DDDDDD">
<tspan x="829.125" y="759"></tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
<g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-829.000000, -745.000000)" fill="#DDDDDD">
<g id="button_md_off">
<use filter="url(#filter-2)" xlink:href="#text-1"></use>
<use filter="url(#filter-3)" xlink:href="#text-1"></use>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2 KiB

BIN
res/img/button-md-false@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
res/img/button-md-false@3x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/img/button-md-true.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 483 B

14
res/img/button-md-true.svg
View file

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>2A63B135-4281-4FBB-A88C-012AE22E9594</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="14" font-family="markdown" font-weight="normal">
<g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-829.000000, -745.000000)" fill="#4A4A4A">
<text id="button_markdown_on">
<tspan x="829.125" y="759"></tspan>
</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 820 B

BIN
res/img/button-md-true@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 906 B

BIN
res/img/button-md-true@3x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

3
res/img/markdown.svg Normal file
View file

@ -0,0 +1,3 @@
<svg height="45" viewBox="0 0 69 45" width="69" xmlns="http://www.w3.org/2000/svg">
<path d="m6 0h57c3.3137085 0 6 2.6862915 6 6v33c0 3.3137085-2.6862915 6-6 6h-57c-3.3137085 0-6-2.6862915-6-6v-33c0-3.3137085 2.6862915-6 6-6zm23.3703704 11c-.6518551 0-1.1841955.3860101-1.5970371 1.158042l-7.7244444 14.7006993-7.7896296-14.7006993c-.4128416-.7720319-.9560461-1.158042-1.6296297-1.158042-.4780271 0-.86913425.1554763-1.1733333.4664336-.30419906.3109572-.4562963.7130511-.4562963 1.2062937v19.7510489c0 .4717973.13580111.8524461.40740741 1.1419581.27160629.2895119.63555329.4342657 1.09185189.4342657.478027 0 .8474061-.1393925 1.1081481-.4181818.2607421-.2787893.3911111-.6647994.3911111-1.158042v-14.8293706l6.4207408 11.8699301c.4128415.7505865.9451819 1.1258741 1.597037 1.1258741s1.1841955-.3752876 1.597037-1.1258741l6.3881482-11.9986014v14.9580419c0 .4932426.130369.8792527.3911111 1.158042.260742.2787893.619257.4181818 1.0755555.4181818.4780271 0 .8528382-.1393925 1.1244445-.4181818s.4074074-.6647994.4074074-1.158042v-19.7510489c0-.4932426-.1520972-.8953365-.4562963-1.2062937-.304199-.3109573-.6953062-.4664336-1.1733333-.4664336zm18.1296296 17.8786797-7.3180195-7.3180195c-.5857864-.5857865-1.5355339-.5857865-2.1213203 0-.5857865.5857864-.5857865 1.5355339 0 2.1213203l9.8994949 9.899495c.3056756.3056756.7104567.4518432 1.1109127.438503.400456.0133402.8052371-.1328274 1.1109127-.438503l9.899495-9.899495c.5857864-.5857864.5857864-1.5355339 0-2.1213203-.5857865-.5857865-1.535534-.5857865-2.1213204 0l-7.4601551 7.4601551v-16.5208153c0-.8284271-.6715729-1.5-1.5-1.5s-1.5.6715729-1.5 1.5z" fill="#d8d8d8" fill-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB