Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-26 10:28:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace composer icons with Compound variants (#123)

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-04 13:42:23 +01:00 committed by GitHub
parent 7ef8663388
commit 26b0e83ac4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 146 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

4
res/css/views/context_menus/_MessageContextMenu.pcss
View File

@ -65,11 +65,11 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MessageContextMenu_iconSource::before { .mx_MessageContextMenu_iconSource::before {
mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
} }
.mx_MessageContextMenu_iconQuote::before { .mx_MessageContextMenu_iconQuote::before {
mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
} }
.mx_MessageContextMenu_iconPin::before { .mx_MessageContextMenu_iconPin::before {

4
res/css/views/rooms/_MessageComposer.pcss
View File

@ -265,11 +265,11 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MessageComposer_rich_text::before { .mx_MessageComposer_rich_text::before {
mask-image: url("$(res)/img/element-icons/room/composer/rich_text.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
} }
.mx_MessageComposer_location::before { .mx_MessageComposer_location::before {
mask-image: url("$(res)/img/element-icons/room/composer/location.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
} }
.mx_MessageComposer_stickers::before { .mx_MessageComposer_stickers::before {

14
res/css/views/rooms/_MessageComposerFormatBar.pcss
View File

@ -55,6 +55,7 @@ Please see LICENSE files in the repository root for full details.
width: 100%; width: 100%;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary); background-color: var(--cpd-color-icon-secondary);
} }
@ -63,28 +64,27 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MessageComposerFormatBar_buttonIconBold::after { .mx_MessageComposerFormatBar_buttonIconBold::after {
mask-image: url("$(res)/img/element-icons/room/format-bar/bold.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
} }
.mx_MessageComposerFormatBar_buttonIconItalic::after { .mx_MessageComposerFormatBar_buttonIconItalic::after {
mask-image: url("$(res)/img/element-icons/room/format-bar/italic.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
} }
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after { .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
mask-image: url("$(res)/img/element-icons/room/format-bar/strikethrough.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
} }
.mx_MessageComposerFormatBar_buttonIconQuote::after { .mx_MessageComposerFormatBar_buttonIconQuote::after {
mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
} }
.mx_MessageComposerFormatBar_buttonIconCode::after { .mx_MessageComposerFormatBar_buttonIconCode::after {
mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
} }
.mx_MessageComposerFormatBar_buttonIconInsertLink::after { .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
mask-image: url("$(res)/img/element-icons/link.svg"); mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
mask-size: 18px;
} }
} }

3
res/img/element-icons/room/composer/bold.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H8.19231C10.093 2 11.5 3.64388 11.5 5.5C11.5 6.25349 11.2681 6.97201 10.8655 7.55977C11.8435 8.1788 12.5 9.25485 12.5 10.5C12.5 12.4594 10.8743 14 8.92857 14H5C4.44772 14 4 13.5523 4 13V3ZM6 4V7H8.19231C8.84067 7 9.5 6.4053 9.5 5.5C9.5 4.5947 8.84067 4 8.19231 4H6ZM6 9V12H8.92857C9.82319 12 10.5 11.3021 10.5 10.5C10.5 9.69794 9.82319 9 8.92857 9H6Z" fill="currentColor" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 555 B

10
res/img/element-icons/room/composer/bulleted_list.svg
View File

@ -1,10 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2793_14169)">
<path d="M2.66669 7C2.11335 7 1.66669 7.44667 1.66669 8C1.66669 8.55333 2.11335 9 2.66669 9C3.22002 9 3.66669 8.55333 3.66669 8C3.66669 7.44667 3.22002 7 2.66669 7ZM2.66669 3C2.11335 3 1.66669 3.44667 1.66669 4C1.66669 4.55333 2.11335 5 2.66669 5C3.22002 5 3.66669 4.55333 3.66669 4C3.66669 3.44667 3.22002 3 2.66669 3ZM2.66669 11C2.11335 11 1.66669 11.4533 1.66669 12C1.66669 12.5467 2.12002 13 2.66669 13C3.21335 13 3.66669 12.5467 3.66669 12C3.66669 11.4533 3.22002 11 2.66669 11ZM5.33335 12.6667H13.3334C13.7 12.6667 14 12.3667 14 12C14 11.6333 13.7 11.3333 13.3334 11.3333H5.33335C4.96669 11.3333 4.66669 11.6333 4.66669 12C4.66669 12.3667 4.96669 12.6667 5.33335 12.6667ZM5.33335 8.66667H13.3334C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3334 7.33333H5.33335C4.96669 7.33333 4.66669 7.63333 4.66669 8C4.66669 8.36667 4.96669 8.66667 5.33335 8.66667ZM4.66669 4C4.66669 4.36667 4.96669 4.66667 5.33335 4.66667H13.3334C13.7 4.66667 14 4.36667 14 4C14 3.63333 13.7 3.33333 13.3334 3.33333H5.33335C4.96669 3.33333 4.66669 3.63333 4.66669 4Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_2793_14169">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

3
res/img/element-icons/room/composer/code_block.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.14288 7.99777L6.47622 6.66443C6.5905 6.55015 6.64765 6.41047 6.64765 6.24539C6.64765 6.08031 6.5905 5.94062 6.47622 5.82634C6.36193 5.71205 6.22225 5.65491 6.05717 5.65491C5.89209 5.65491 5.75241 5.71205 5.63812 5.82634L3.86669 7.59777C3.8032 7.66126 3.75876 7.72475 3.73336 7.78824C3.70796 7.85174 3.69526 7.92158 3.69526 7.99777C3.69526 8.07396 3.70796 8.1438 3.73336 8.20729C3.75876 8.27078 3.8032 8.33428 3.86669 8.39777L5.65717 10.1882C5.77145 10.3025 5.91114 10.3597 6.07622 10.3597C6.2413 10.3597 6.38098 10.3025 6.49526 10.1882C6.60955 10.074 6.66669 9.93428 6.66669 9.7692C6.66669 9.60412 6.60955 9.46443 6.49526 9.35015L5.14288 7.99777ZM10.8572 7.99777L9.50479 9.35015C9.3905 9.46443 9.33336 9.60412 9.33336 9.7692C9.33336 9.93428 9.3905 10.074 9.50479 10.1882C9.61907 10.3025 9.75876 10.3597 9.92384 10.3597C10.0889 10.3597 10.2286 10.3025 10.3429 10.1882L12.1334 8.39777C12.1969 8.33428 12.2413 8.27078 12.2667 8.20729C12.2921 8.1438 12.3048 8.07396 12.3048 7.99777C12.3048 7.92158 12.2921 7.85174 12.2667 7.78824C12.2413 7.72475 12.1969 7.66126 12.1334 7.59777L10.3429 5.80729C10.2921 5.7438 10.2286 5.69936 10.1524 5.67396C10.0762 5.64856 10 5.63586 9.92384 5.63586C9.84764 5.63586 9.77463 5.64856 9.70479 5.67396C9.63495 5.69936 9.56828 5.7438 9.50479 5.80729C9.3905 5.92158 9.33336 6.06126 9.33336 6.22634C9.33336 6.39142 9.3905 6.5311 9.50479 6.64539L10.8572 7.99777ZM2.28574 14.8549C1.98098 14.8549 1.71431 14.7406 1.48574 14.5121C1.25717 14.2835 1.14288 14.0168 1.14288 13.7121V2.28348C1.14288 1.97872 1.25717 1.71205 1.48574 1.48348C1.71431 1.25491 1.98098 1.14062 2.28574 1.14062H13.7143C14.0191 1.14062 14.2857 1.25491 14.5143 1.48348C14.7429 1.71205 14.8572 1.97872 14.8572 2.28348V13.7121C14.8572 14.0168 14.7429 14.2835 14.5143 14.5121C14.2857 14.7406 14.0191 14.8549 13.7143 14.8549H2.28574ZM2.28574 13.7121H13.7143V2.28348H2.28574V13.7121Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

10
res/img/element-icons/room/composer/indent_decrease.svg
View File

@ -1,10 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2793_14104)">
<path d="M8 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H8C7.63333 10 7.33333 10.3 7.33333 10.6667C7.33333 11.0333 7.63333 11.3333 8 11.3333ZM2.23333 8.23333L4.09333 10.0933C4.30667 10.3067 4.66667 10.16 4.66667 9.86V6.14C4.66667 5.84 4.30667 5.69333 4.1 5.90667L2.24 7.76667C2.10667 7.89333 2.10667 8.10667 2.23333 8.23333ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667ZM8 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H8C7.63333 4.66667 7.33333 4.96667 7.33333 5.33333C7.33333 5.7 7.63333 6 8 6ZM8 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H8C7.63333 7.33333 7.33333 7.63333 7.33333 8C7.33333 8.36667 7.63333 8.66667 8 8.66667Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_2793_14104">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

10
res/img/element-icons/room/composer/indent_increase.svg
View File

@ -1,10 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2793_4893)">
<path d="M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 6.14V9.86667C2 10.1667 2.36 10.3133 2.56667 10.1L4.42667 8.24C4.56 8.10667 4.56 7.9 4.42667 7.76667L2.56667 5.9C2.36 5.69333 2 5.84 2 6.14ZM8 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H8C7.63333 10 7.33333 10.3 7.33333 10.6667C7.33333 11.0333 7.63333 11.3333 8 11.3333ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667ZM8 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H8C7.63333 4.66667 7.33333 4.96667 7.33333 5.33333C7.33333 5.7 7.63333 6 8 6ZM8 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H8C7.63333 7.33333 7.33333 7.63333 7.33333 8C7.33333 8.36667 7.63333 8.66667 8 8.66667Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_2793_4893">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

5
res/img/element-icons/room/composer/inline_code.svg
View File

@ -1,5 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.97188 3.74903C10.0777 3.39637 9.87755 3.02471 9.52489 2.91892C9.17223 2.81312 8.80058 3.01324 8.69478 3.3659L6.02811 12.2548C5.92231 12.6075 6.12243 12.9791 6.4751 13.0849C6.82776 13.1907 7.19941 12.9906 7.30521 12.6379L9.97188 3.74903Z" fill="currentColor"/>
<path d="M3.98237 4.82315C3.69951 4.58744 3.27914 4.62566 3.04343 4.90851L0.821206 7.57518C0.615181 7.82241 0.615181 8.18153 0.821206 8.42876L3.04343 11.0954C3.27914 11.3783 3.69951 11.4165 3.98237 11.1808C4.26522 10.9451 4.30343 10.5247 4.06772 10.2418L2.20116 8.00197L4.06772 5.76209C4.30343 5.47924 4.26522 5.05886 3.98237 4.82315Z" fill="currentColor"/>
<path d="M12.0177 4.82315C12.3005 4.58744 12.7209 4.62566 12.9566 4.90851L15.1788 7.57518C15.3849 7.82241 15.3849 8.18153 15.1788 8.42876L12.9566 11.0954C12.7209 11.3783 12.3005 11.4165 12.0177 11.1808C11.7348 10.9451 11.6966 10.5247 11.9323 10.2418L13.7989 8.00197L11.9323 5.76209C11.6966 5.47924 11.7348 5.05886 12.0177 4.82315Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

3
res/img/element-icons/room/composer/italic.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.08596 3.60016L6.28068 12.4045H4.79997C4.35814 12.4045 3.99997 12.7627 3.99997 13.2045C3.99997 13.6464 4.35814 14.0045 4.79997 14.0045H6.92104C6.92979 14.0047 6.93852 14.0047 6.94722 14.0045H9.06664C9.50846 14.0045 9.86664 13.6464 9.86664 13.2045C9.86664 12.7627 9.50846 12.4045 9.06664 12.4045H7.91397L9.71924 3.60016H11.2C11.6418 3.60016 12 3.24199 12 2.80016C12 2.35833 11.6418 2.00016 11.2 2.00016H9.08168C9.07107 1.99995 9.06048 1.99995 9.04993 2.00016H6.9333C6.49147 2.00016 6.1333 2.35833 6.1333 2.80016C6.1333 3.24199 6.49147 3.60016 6.9333 3.60016H8.08596Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 743 B

3
res/img/element-icons/room/composer/link.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.37751 4.10063L8.73382 3.74433C9.718 2.76019 11.3042 2.75074 12.2767 3.72324C13.2493 4.69573 13.2398 6.2819 12.2556 7.26605L10.5627 8.9589C9.57856 9.94304 7.99234 9.95249 7.01981 8.98M7.62266 11.8992L7.26619 12.2557C6.28201 13.2398 4.69578 13.2493 3.72325 12.2768C2.75073 11.3043 2.76018 9.7181 3.74436 8.73395L5.43717 7.0412C6.42134 6.05706 8.00756 6.04761 8.98009 7.0201" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 554 B

3
res/img/element-icons/room/composer/location.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C8.13 2 5 5.13 5 9C5 13.17 9.42 18.92 11.24 21.11C11.64 21.59 12.37 21.59 12.77 21.11C14.58 18.92 19 13.17 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="#0DBD8B"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 388 B

10
res/img/element-icons/room/composer/numbered_list.svg
View File

@ -1,10 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2793_4634)">
<path d="M5.33331 4.66406H13.3333C13.7 4.66406 14 4.36406 14 3.9974C14 3.63073 13.7 3.33073 13.3333 3.33073H5.33331C4.96665 3.33073 4.66665 3.63073 4.66665 3.9974C4.66665 4.36406 4.96665 4.66406 5.33331 4.66406ZM13.3333 11.3307H5.33331C4.96665 11.3307 4.66665 11.6307 4.66665 11.9974C4.66665 12.3641 4.96665 12.6641 5.33331 12.6641H13.3333C13.7 12.6641 14 12.3641 14 11.9974C14 11.6307 13.7 11.3307 13.3333 11.3307ZM13.3333 7.33073H5.33331C4.96665 7.33073 4.66665 7.63073 4.66665 7.9974C4.66665 8.36406 4.96665 8.66406 5.33331 8.66406H13.3333C13.7 8.66406 14 8.36406 14 7.9974C14 7.63073 13.7 7.33073 13.3333 7.33073ZM2.99998 10.6641H1.66665C1.47998 10.6641 1.33331 10.8107 1.33331 10.9974C1.33331 11.1841 1.47998 11.3307 1.66665 11.3307H2.66665V11.6641H2.33331C2.14665 11.6641 1.99998 11.8107 1.99998 11.9974C1.99998 12.1841 2.14665 12.3307 2.33331 12.3307H2.66665V12.6641H1.66665C1.47998 12.6641 1.33331 12.8107 1.33331 12.9974C1.33331 13.1841 1.47998 13.3307 1.66665 13.3307H2.99998C3.18665 13.3307 3.33331 13.1841 3.33331 12.9974V10.9974C3.33331 10.8107 3.18665 10.6641 2.99998 10.6641ZM1.66665 3.33073H1.99998V4.9974C1.99998 5.18406 2.14665 5.33073 2.33331 5.33073C2.51998 5.33073 2.66665 5.18406 2.66665 4.9974V2.9974C2.66665 2.81073 2.51998 2.66406 2.33331 2.66406H1.66665C1.47998 2.66406 1.33331 2.81073 1.33331 2.9974C1.33331 3.18406 1.47998 3.33073 1.66665 3.33073ZM2.99998 6.66406H1.66665C1.47998 6.66406 1.33331 6.81073 1.33331 6.9974C1.33331 7.18406 1.47998 7.33073 1.66665 7.33073H2.53331L1.41331 8.6374C1.35998 8.6974 1.33331 8.7774 1.33331 8.85073V8.9974C1.33331 9.18406 1.47998 9.33073 1.66665 9.33073H2.99998C3.18665 9.33073 3.33331 9.18406 3.33331 8.9974C3.33331 8.81073 3.18665 8.66406 2.99998 8.66406H2.13331L3.25331 7.3574C3.30665 7.2974 3.33331 7.2174 3.33331 7.14406V6.9974C3.33331 6.81073 3.18665 6.66406 2.99998 6.66406Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_2793_4634">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

6
res/img/element-icons/room/composer/quote.svg
View File

@ -1,6 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.1458 2.89337C3.20888 2.4655 2.90205 2.06909 2.46046 2.00797C2.01887 1.94684 1.60976 2.24415 1.54667 2.67202L1.00822 6.32413C0.945137 6.752 1.25197 7.14841 1.69356 7.20954C2.13515 7.27066 2.54426 6.97336 2.60735 6.54548L3.1458 2.89337Z" fill="currentColor"/>
<path d="M11.2226 9.67587C11.2857 9.248 10.9789 8.85159 10.5373 8.79046C10.0957 8.72934 9.68656 9.02664 9.62348 9.45452L9.08502 13.1066C9.02194 13.5345 9.32878 13.9309 9.77036 13.992C10.212 14.0532 10.6211 13.7559 10.6842 13.328L11.2226 9.67587Z" fill="currentColor"/>
<path d="M6.21224 2.00574C6.65509 2.05756 6.97074 2.44741 6.91727 2.87651L6.90255 2.99329C6.89309 3.06788 6.87936 3.17541 6.86224 3.30757C6.828 3.57178 6.78013 3.93492 6.72561 4.33035C6.6179 5.11153 6.48009 6.04989 6.36895 6.58829C6.28147 7.01211 5.85597 7.28697 5.41856 7.20221C4.98115 7.11744 4.69748 6.70515 4.78496 6.28133C4.88411 5.80099 5.01552 4.91329 5.12447 4.12309C5.17828 3.73284 5.22559 3.37397 5.25946 3.11259C5.27639 2.98195 5.28994 2.87579 5.29925 2.80239L5.31351 2.68927C5.36698 2.26017 5.76938 1.95393 6.21224 2.00574Z" fill="currentColor"/>
<path d="M14.9918 9.67587C15.0549 9.248 14.748 8.85159 14.3064 8.79046C13.8649 8.72934 13.4557 9.02664 13.3927 9.45452L12.8542 13.1066C12.7911 13.5345 13.098 13.9309 13.5395 13.992C13.9811 14.0532 14.3902 13.7559 14.4533 13.328L14.9918 9.67587Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

10
res/img/element-icons/room/composer/rich_text.svg
View File

@ -1,10 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1456_146350)">
<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
</g>
<defs>
<clipPath id="clip0_1456_146350">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 818 B

4
res/img/element-icons/room/composer/strikethrough.svg
View File

@ -1,4 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.93167 4.76958C9.48979 3.88101 8.58375 3.47362 7.58232 3.58148C6.03349 3.74829 5.62648 4.94831 5.81497 5.72822C6.02118 6.58143 6.69765 6.91317 7.89252 7.21717H13.28C13.6776 7.21717 14 7.56757 14 7.99981C14 8.43204 13.6776 8.78244 13.28 8.78244H2.72C2.32235 8.78244 2 8.43204 2 7.99981C2 7.56757 2.32235 7.21717 2.72 7.21717H4.90308C4.69392 6.91824 4.52701 6.55948 4.42223 6.12592C4.0021 4.38757 5.03605 2.28279 7.44033 2.02384C8.85635 1.87133 10.4103 2.44045 11.1984 4.02524C11.3875 4.40548 11.2572 4.88035 10.9074 5.08589C10.5576 5.29143 10.1208 5.14981 9.93167 4.76958Z" fill="currentColor"/>
<path d="M10.2846 10.0868H11.7797C11.9254 10.8705 11.8142 11.7067 11.3665 12.4212C10.7426 13.4169 9.57984 14 7.98987 14C5.38435 14 4.18628 12.3895 3.94151 11.324C3.84516 10.9047 4.07981 10.4798 4.4656 10.3751C4.8514 10.2704 5.24225 10.5254 5.3386 10.9448C5.41285 11.268 6.00136 12.4347 7.98987 12.4347C9.27118 12.4347 9.90296 11.9764 10.1763 11.5401C10.4284 11.1378 10.472 10.6062 10.2846 10.0868Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

3
res/img/element-icons/room/composer/underline.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.19333 11.3C10.2133 11.04 11.6667 9.22667 11.6667 7.19333V2.83333C11.6667 2.37333 11.2933 2 10.8333 2C10.3733 2 10 2.37333 10 2.83333V7.26667C10 8.38 9.24667 9.39333 8.15333 9.61333C6.65333 9.92667 5.33333 8.78 5.33333 7.33333V2.83333C5.33333 2.37333 4.96 2 4.5 2C4.04 2 3.66667 2.37333 3.66667 2.83333V7.33333C3.66667 9.71333 5.75333 11.6133 8.19333 11.3ZM3 13.3333C3 13.7 3.3 14 3.66667 14H11.6667C12.0333 14 12.3333 13.7 12.3333 13.3333C12.3333 12.9667 12.0333 12.6667 11.6667 12.6667H3.66667C3.3 12.6667 3 12.9667 3 13.3333Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 666 B

5
res/img/element-icons/room/format-bar/bold.svg
View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 4H9.19231C10.4668 4 11.5 5.11929 11.5 6.5C11.5 7.88071 10.4668 9 9.19231 9H6.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.92857 9C11.3487 9 12.5 10.1193 12.5 11.5C12.5 12.8807 11.3487 14 9.92857 14H6.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 4V14" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 527 B

5
res/img/element-icons/room/format-bar/code.svg
View File

@ -1,5 +0,0 @@
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 6L2.5 9L5 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 6L17.5 9L15 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 14L11.5 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 432 B

5
res/img/element-icons/room/format-bar/italic.svg
View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14L10 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 14H10" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 4H12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 410 B

6
res/img/element-icons/room/format-bar/quote.svg
View File

@ -1,6 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 4L3.25 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11.25 10.5L10.75 14" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7.25 4C7.25 4 6.94526 6.52369 6.75 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M14.75 10.5L14.25 14" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 478 B

4
res/img/element-icons/room/format-bar/strikethrough.svg
View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.56492 4.7659C9.60808 4.66254 10.5519 5.05294 11.0122 5.90446C11.2091 6.26884 11.6642 6.40456 12.0286 6.20759C12.393 6.01062 12.5287 5.55555 12.3317 5.19116C11.5107 3.67245 9.89203 3.12706 8.41702 3.27321C5.91255 3.52137 4.83552 5.53838 5.27315 7.20425C5.50106 8.0718 6.01113 8.62683 6.61493 9H11.4496C11.299 8.9214 11.1451 8.85419 10.9923 8.7957C10.4784 8.59897 9.88735 8.4702 9.35846 8.35499L9.35839 8.35497C9.25076 8.33152 9.1457 8.30864 9.0444 8.28585C7.70219 7.98399 6.94756 7.6744 6.72393 6.82313C6.52759 6.07574 6.95155 4.92576 8.56492 4.7659ZM12.9372 11H11.3798C11.575 11.4977 11.5295 12.0072 11.267 12.3926C10.9822 12.8107 10.3242 13.25 8.98945 13.25C6.91808 13.25 6.30505 12.1319 6.22771 11.8222C6.12735 11.4203 5.72021 11.1759 5.31834 11.2763C4.91647 11.3766 4.67204 11.7838 4.7724 12.1856C5.02738 13.2066 6.27536 14.75 8.98945 14.75C10.6457 14.75 11.8569 14.1912 12.5068 13.237C12.9731 12.5523 13.0889 11.751 12.9372 11Z" fill="black"/>
<path d="M3.5 9L14.5 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

2
src/components/views/elements/Pill.tsx
View File

@ -10,6 +10,7 @@ import React, { ReactElement } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web"; import { Tooltip } from "@vector-im/compound-web";
import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../MatrixClientPeg";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -17,7 +18,6 @@ import { usePermalink } from "../../../hooks/usePermalink";
import RoomAvatar from "../avatars/RoomAvatar"; import RoomAvatar from "../avatars/RoomAvatar";
import MemberAvatar from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { Icon as LinkIcon } from "../../../../res/img/element-icons/room/composer/link.svg";
import { Icon as UserIcon } from "../../../../res/img/compound/user.svg"; import { Icon as UserIcon } from "../../../../res/img/compound/user.svg";
export enum PillType { export enum PillType {

24
src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
View File

@ -9,19 +9,19 @@ Please see LICENSE files in the repository root for full details.
import React, { MouseEventHandler, ReactNode } from "react"; import React, { MouseEventHandler, ReactNode } from "react";
import { FormattingFunctions, AllActionStates, ActionState } from "@matrix-org/matrix-wysiwyg"; import { FormattingFunctions, AllActionStates, ActionState } from "@matrix-org/matrix-wysiwyg";
import classNames from "classnames"; import classNames from "classnames";
import BoldIcon from "@vector-im/compound-design-tokens/assets/web/icons/bold";
import BulletedListIcon from "@vector-im/compound-design-tokens/assets/web/icons/list-bulleted";
import CodeBlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/code";
import UnIndentIcon from "@vector-im/compound-design-tokens/assets/web/icons/indent-decrease";
import IndentIcon from "@vector-im/compound-design-tokens/assets/web/icons/indent-increase";
import InlineCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/inline-code";
import ItalicIcon from "@vector-im/compound-design-tokens/assets/web/icons/italic";
import NumberedListIcon from "@vector-im/compound-design-tokens/assets/web/icons/list-numbered";
import QuoteIcon from "@vector-im/compound-design-tokens/assets/web/icons/quote";
import StrikeThroughIcon from "@vector-im/compound-design-tokens/assets/web/icons/strikethrough";
import UnderlineIcon from "@vector-im/compound-design-tokens/assets/web/icons/underline";
import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/composer/bold.svg";
import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg";
import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg";
import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
import { Icon as QuoteIcon } from "../../../../../../res/img/element-icons/room/composer/quote.svg";
import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg";
import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg";
import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg";
import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg";
import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg";
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
import { openLinkModal } from "./LinkModal"; import { openLinkModal } from "./LinkModal";

2
test/components/views/messages/TextualBody-test.tsx
View File

@ -204,7 +204,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev }); const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body"); const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot( expect(content.innerHTML).toMatchInlineSnapshot(
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`, `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mx_Pill_LinkIcon mx_BaseAvatar"><path d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"></path></svg><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
); );
}); });

11
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View File

@ -399,9 +399,18 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
class="mx_Pill mx_EventPill" class="mx_Pill mx_EventPill"
href="https://matrix.to/#/!room1:example.com/!abc123" href="https://matrix.to/#/!room1:example.com/!abc123"
> >
<div <svg
class="mx_Pill_LinkIcon mx_BaseAvatar" class="mx_Pill_LinkIcon mx_BaseAvatar"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
/> />
</svg>
<span <span
class="mx_Pill_text" class="mx_Pill_text"
> >

110
test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap
View File

@ -11,9 +11,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.8 19c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 6.8 17V7c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 8.8 5h3.525c1.083 0 2.083.333 3 1 .917.667 1.375 1.592 1.375 2.775 0 .85-.192 1.504-.575 1.963-.383.458-.742.787-1.075.987.417.183.88.525 1.387 1.025.509.5.763 1.25.763 2.25 0 1.483-.542 2.52-1.625 3.113-1.083.591-2.1.887-3.05.887H8.8Zm1.025-2.8h2.6c.8 0 1.287-.204 1.462-.612.175-.409.263-.705.263-.888 0-.183-.088-.48-.263-.887-.175-.409-.687-.613-1.537-.613H9.825v3Zm0-5.7h2.325c.55 0 .95-.142 1.2-.425a1.4 1.4 0 0 0 .375-.95c0-.4-.142-.725-.425-.975-.283-.25-.65-.375-1.1-.375H9.825V10.5Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Kursiv" aria-label="Kursiv"
@ -21,9 +30,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Unterstrichen" aria-label="Unterstrichen"
@ -31,9 +49,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 21a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 20a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 19h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 21H6Zm6-4c-1.683 0-2.992-.525-3.925-1.575-.933-1.05-1.4-2.442-1.4-4.175V4.275c0-.35.13-.65.388-.9A1.27 1.27 0 0 1 7.974 3c.35 0 .65.125.9.375s.375.55.375.9V11.4c0 .933.233 1.692.7 2.275.467.583 1.15.875 2.05.875.9 0 1.583-.292 2.05-.875.467-.583.7-1.342.7-2.275V4.275c0-.35.13-.65.387-.9A1.27 1.27 0 0 1 16.05 3c.35 0 .65.125.9.375s.375.55.375.9v6.975c0 1.733-.467 3.125-1.4 4.175C14.992 16.475 13.683 17 12 17Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Durchgestrichen" aria-label="Durchgestrichen"
@ -41,9 +68,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.15 20c-1.267 0-2.392-.375-3.375-1.125-.983-.75-1.692-1.775-2.125-3.075l2.2-.95c.233.8.638 1.458 1.213 1.975.574.517 1.287.775 2.137.775.7 0 1.333-.167 1.9-.5.567-.333.85-.867.85-1.6 0-.3-.058-.575-.175-.825A2.362 2.362 0 0 0 14.3 14h2.8a4.279 4.279 0 0 1 .25 1.5c0 1.433-.513 2.542-1.538 3.325C14.788 19.608 13.567 20 12.15 20ZM3 12a.967.967 0 0 1-.712-.287A.968.968 0 0 1 2 11c0-.283.096-.52.288-.712A.967.967 0 0 1 3 10h18c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.713A.968.968 0 0 1 21 12H3Zm9.05-8.15c1.1 0 2.063.27 2.887.813.825.541 1.463 1.37 1.913 2.487l-2.2.975a2.987 2.987 0 0 0-.838-1.3c-.408-.383-.979-.575-1.712-.575-.683 0-1.25.154-1.7.463-.45.308-.7.737-.75 1.287h-2.4c.033-1.15.487-2.13 1.363-2.937.875-.809 2.02-1.213 3.437-1.213Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Ungeordnete Liste" aria-label="Ungeordnete Liste"
@ -51,9 +87,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 7.5a1.45 1.45 0 0 1-1.06-.44A1.444 1.444 0 0 1 3 6c0-.412.147-.766.44-1.06A1.45 1.45 0 0 1 4.5 4.5c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.787 11.212c.192.192.43.288.713.288h10c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H10a.967.967 0 0 0-.713.288A.968.968 0 0 0 9 18c0 .283.096.52.287.712Zm0-5.999c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 12a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 11H10a.967.967 0 0 0-.713.287A.968.968 0 0 0 9 12c0 .283.096.52.287.713Zm0-6c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5H10a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 6c0 .283.096.52.287.713ZM3.44 19.06c.294.293.648.44 1.06.44a1.45 1.45 0 0 0 1.06-.44c.293-.294.44-.647.44-1.06 0-.413-.147-.766-.44-1.06a1.445 1.445 0 0 0-1.06-.44 1.45 1.45 0 0 0-1.06.44c-.293.294-.44.647-.44 1.06 0 .413.147.766.44 1.06ZM4.5 13.5a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 3 12c0-.412.147-.766.44-1.06a1.45 1.45 0 0 1 1.06-.44c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Nummerierte Liste" aria-label="Nummerierte Liste"
@ -61,9 +106,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1ZM5.604 5.089A.75.75 0 0 1 6 5.75v4.5a.75.75 0 0 1-1.5 0V7.151l-.334.223a.75.75 0 0 1-.832-1.248l1.5-1a.75.75 0 0 1 .77-.037ZM5 13a2.02 2.02 0 0 0-1.139.321 1.846 1.846 0 0 0-.626.719 2.286 2.286 0 0 0-.234.921v.023l-.001.01v.005l.75.001H3a.75.75 0 0 0 1.5.01V15a.789.789 0 0 1 .077-.29.35.35 0 0 1 .116-.14c.04-.027.126-.07.307-.07s.267.043.307.07a.35.35 0 0 1 .116.14.788.788 0 0 1 .076.29v.008a.532.532 0 0 1-.14.352l-2.161 2.351a.748.748 0 0 0-.198.523v.016c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5h-.82l1.034-1.124C6.809 16 7 15.51 7 15h-.75H7v-.039l-.004-.068a2.285 2.285 0 0 0-.231-.853 1.846 1.846 0 0 0-.626-.719A2.02 2.02 0 0 0 5 13Zm-.5 2.003V15v.01-.008Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Zitieren" aria-label="Zitieren"
@ -71,9 +125,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996l.808-5.478ZM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a220.467 220.467 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921-.656-.127-1.082-.745-.95-1.381.148-.72.345-2.052.509-3.237a190.652 190.652 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025Zm13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Code" aria-label="Code"
@ -81,9 +144,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Quelltextblock" aria-label="Quelltextblock"
@ -91,9 +163,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/> />
</svg>
</button> </button>
<button <button
aria-label="Link" aria-label="Link"
@ -101,9 +182,18 @@ exports[`FormattingButtons renders in german 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_FormattingButtons_Icon" class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
/> />
</svg>
</button> </button>
</div> </div>
</DocumentFragment> </DocumentFragment>