luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replace icon

Browse source
This commit is contained in:
Alexander Wang 2022-12-27 10:07:19 -08:00
parent 51d51709b0
commit 70f76a8f5b
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
3 changed files with 60 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
d2renderers/d2svg/tooltip.svg
View file

@ -1,5 +1,13 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_3311_35077)">
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11V9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7H9.005" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3311_35077">
<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
</clipPath>
</defs>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 696 B

35
e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg vendored
View file

@ -18,24 +18,37 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
} }
]]> ]]>
</style><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -16) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon"> </style><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -16) scale(2)"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_3311_35077)">
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11V9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7H9.005" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3311_35077">
<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
</clipPath>
</defs>
</svg> </svg>
</g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon"> </g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="0" y="226" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(98 210) scale(2)"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_3311_35077)">
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11V9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7H9.005" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3311_35077">
<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
</clipPath>
</defs>
</svg> </svg>
</g><title>Gee, I feel kind of LIGHT in the head now, </g><title>Gee, I feel kind of LIGHT in the head now,
knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552"> knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 128.000000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3421969999)"/></g><mask id="3421969999" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
<rect x="-100" y="-100" width="314" height="552" fill="white"></rect> <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.tooltip-icon {
box-shadow: 0px 0px 32px rgba(31, 36, 58, 0.1);
}
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";
} }

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 326 KiB

35
e2etests/testdata/stable/tooltips/elk/sketch.exp.svg vendored
View file

@ -18,24 +18,37 @@ width="314" height="552" viewBox="-88 -88 314 552"><style type="text/css">
} }
]]> ]]>
</style><g id="x"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -4) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon"> </style><g id="x"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(109 -4) scale(2)"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_3311_35077)">
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11V9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7H9.005" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3311_35077">
<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
</clipPath>
</defs>
</svg> </svg>
</g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="12" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(110 222) scale(2)"><svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon"> </g><title>Total abstinence is easier than perfect moderation</title></g><g id="y"><g class="shape" ><rect x="12" y="238" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text><g transform="translate(110 222) scale(2)"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <g clip-path="url(#clip0_3311_35077)">
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 11V9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7H9.005" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3311_35077">
<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
</clipPath>
</defs>
</svg> </svg>
</g><title>Gee, I feel kind of LIGHT in the head now, </g><title>Gee, I feel kind of LIGHT in the head now,
knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 140.000000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1498654119)"/></g><mask id="1498654119" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552"> knowing I can't make my satellite dish PAYMENTS!</title></g><g id="(x -&gt; y)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 140.000000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1498654119)"/></g><mask id="1498654119" maskUnits="userSpaceOnUse" x="-100" y="-100" width="314" height="552">
<rect x="-100" y="-100" width="314" height="552" fill="white"></rect> <rect x="-100" y="-100" width="314" height="552" fill="white"></rect>
</mask><style type="text/css"><![CDATA[ </mask><style type="text/css"><![CDATA[
.tooltip-icon {
box-shadow: 0px 0px 32px rgba(31, 36, 58, 0.1);
}
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";
} }

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 326 KiB