PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Replace mask-images with svg components in MessageActionBar (#9088)

Browse source 
* Use svg components in messageactionbar

* highlight options button in pinned messages mock buttons
This commit is contained in:
Kerry 2022-07-25 12:43:41 +02:00 committed by GitHub
parent bc30713b5e
commit 594439222d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 119 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_MatrixChat.pcss
View file

@ -86,7 +86,9 @@ limitations under the License.
// (IF there is NO margin on the leftPanel_wrapper)
// The resizeHandle does not change the gap between the left panel and the room view:
// the resizeHandle width is:
// 11px = 10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
// 11px = 10px (padding) + 1px (width)
// and the total negative margin is -12px ->
// the handle requires no space
// right: -6px left: -6px positions the element exactly on the edge of leftPanel.
// left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
// We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)

94
res/css/views/messages/_MessageActionBar.pcss
View file

@ -89,9 +89,20 @@ limitations under the License.
}
}
.mx_MessageActionBar_maskButton {
.mx_MessageActionBar_iconButton {
--MessageActionBar-icon-size: 18px;
width: var(--MessageActionBar-size-button);
height: var(--MessageActionBar-size-button);
color: $secondary-content;
display: flex;
align-items: center;
justify-content: center;
svg {
height: var(--MessageActionBar-icon-size);
width: var(--MessageActionBar-icon-size);
flex: 0 0 var(--MessageActionBar-icon-size);
}
&:disabled,
&[disabled] {
@ -99,35 +110,11 @@ limitations under the License.
opacity: .75;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-size: 18px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
}
&:hover::after {
background-color: $primary-content;
}
&.mx_MessageActionBar_reactButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
}
&.mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
&:hover {
color: $primary-content;
}
&.mx_MessageActionBar_threadButton {
&::after {
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_Indicator {
background: $links;
@ -135,57 +122,22 @@ limitations under the License.
}
}
&.mx_MessageActionBar_favouriteButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/star.svg');
}
&.mx_MessageActionBar_favouriteButton_fillstar::after {
background-color: var(--MessageActionBar-star-button-color);
}
&.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}
&.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&.mx_MessageActionBar_resendButton::after {
mask-image: url('$(res)/img/element-icons/retry.svg');
}
&.mx_MessageActionBar_cancelButton::after {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
&.mx_MessageActionBar_favouriteButton_fillstar {
color: var(--MessageActionBar-star-button-color);
}
&.mx_MessageActionBar_downloadButton {
&::after {
mask-size: 14px;
mask-image: url('$(res)/img/download.svg');
}
--MessageActionBar-icon-size: 14px;
&.mx_MessageActionBar_downloadSpinnerButton::after {
background-color: transparent; // hide the download icon mask
&.mx_MessageActionBar_downloadSpinnerButton {
svg {
display: none; // hide the download icon
}
}
}
&.mx_MessageActionBar_expandMessageButton::after {
mask-size: 12px;
mask-image: url('$(res)/img/element-icons/expand-message.svg');
}
&.mx_MessageActionBar_collapseMessageButton::after {
mask-size: 12px;
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
}
&.mx_MessageActionBar_viewInRoomButton::after {
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
}
&.mx_MessageActionBar_copyLinkButton::after {
mask-image: url('$(res)/img/element-icons/link.svg');
&.mx_MessageActionBar_expandCollapseMessageButton {
--MessageActionBar-icon-size: 12px;
}
}
}

5
res/css/views/right_panel/_PinnedMessagesCard.pcss
View file

@ -42,10 +42,7 @@ limitations under the License.
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
&::after {
background-color: $primary-content;
}
color: $primary-content;
}
}

3
res/css/views/rooms/_RoomSublist.pcss
View file

@ -213,7 +213,8 @@ limitations under the License.
}
&.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
// in this state the div can collapse its height entirely in Chromium, so prevent that by allowing overflow
// in this state the div can collapse its height entirely in Chromium,
// so prevent that by allowing overflow
overflow: visible;
// clear the min-height to make it not collapse entirely in a state with no active resizer
min-height: unset;

2
res/img/download.svg
View file

@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="#76CFA6">
<g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="currentColor">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(243.000000, 58.000000)">
<g id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap" transform="translate(1.000000, 181.000000)" sketch:type="MSShapeGroup">
<g id="Group-Copy-13">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

2
res/img/element-icons/collapse-message.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="#737D8C" fill-rule="evenodd" d="M.2192.234A.753.753 0 011.2815.2321l3.7243 3.7003L8.7181.2202A.753.753 0 019.7805.2185a.747.747 0 01.0017 1.0589L5.5396 5.52a.753.753 0 01-1.0624.0018L.221 1.2928A.747.747 0 01.2192.234zM9.7822 13.7663a.7529.7529 0 01-1.0623.0017l-3.7243-3.7003L1.2833 13.78a.753.753 0 01-1.0624.0018.7471.7471 0 01-.0017-1.059l4.2426-4.2426a.753.753 0 011.0624-.0017l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="currentColor" fill-rule="evenodd" d="M.2192.234A.753.753 0 011.2815.2321l3.7243 3.7003L8.7181.2202A.753.753 0 019.7805.2185a.747.747 0 01.0017 1.0589L5.5396 5.52a.753.753 0 01-1.0624.0018L.221 1.2928A.747.747 0 01.2192.234zM9.7822 13.7663a.7529.7529 0 01-1.0623.0017l-3.7243-3.7003L1.2833 13.78a.753.753 0 01-1.0624.0018.7471.7471 0 01-.0017-1.059l4.2426-4.2426a.753.753 0 011.0624-.0017l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 543 B

After

Width:  |  Height:  |  Size: 548 B

6
res/img/element-icons/context-menu.svg
View file

@ -1,5 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4.25" cy="9" r="1.25" fill="black"/>
<circle cx="9" cy="9" r="1.25" fill="black"/>
<circle cx="13.75" cy="9" r="1.25" fill="black"/>
<circle cx="4.25" cy="9" r="1.25" fill="currentColor"/>
<circle cx="9" cy="9" r="1.25" fill="currentColor"/>
<circle cx="13.75" cy="9" r="1.25" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 248 B

After

Width:  |  Height:  |  Size: 269 B

2
res/img/element-icons/expand-message.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="#17191C" fill-rule="evenodd" d="M.2192 8.494a.753.753 0 011.0623-.0018l3.7243 3.7003 3.7123-3.7123a.753.753 0 011.0624-.0017.747.747 0 01.0017 1.059L5.5396 13.78a.753.753 0 01-1.0624.0018L.221 9.5528A.747.747 0 01.2192 8.494zM9.7822 5.5063A.753.753 0 018.72 5.508L4.9956 1.8077 1.2833 5.52a.753.753 0 01-1.0624.0018.747.747 0 01-.0017-1.059L4.4618.2202A.753.753 0 015.5242.2185l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="currentColor" fill-rule="evenodd" d="M.2192 8.494a.753.753 0 011.0623-.0018l3.7243 3.7003 3.7123-3.7123a.753.753 0 011.0624-.0017.747.747 0 01.0017 1.059L5.5396 13.78a.753.753 0 01-1.0624.0018L.221 9.5528A.747.747 0 01.2192 8.494zM9.7822 5.5063A.753.753 0 018.72 5.508L4.9956 1.8077 1.2833 5.52a.753.753 0 01-1.0624.0018.747.747 0 01-.0017-1.059L4.4618.2202A.753.753 0 015.5242.2185l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 543 B

2
res/img/element-icons/link.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="black" stroke-width="2" stroke-linecap="round"/>
<path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 549 B

After

Width:  |  Height:  |  Size: 556 B

2
res/img/element-icons/message/thread.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#17191C" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="#17191C" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 562 B

After

Width:  |  Height:  |  Size: 572 B

2
res/img/element-icons/retry.svg
View file

@ -1,3 +1,3 @@
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="#737D8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
res/img/element-icons/room/message-bar/edit.svg
View file

@ -1,4 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14L15 14" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 10.5L12 3.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 14L15 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 10.5L12 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 330 B

2
res/img/element-icons/room/message-bar/emoji.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 1C19.4477 1 19 1.44772 19 2V4H17C16.4477 4 16 4.44771 16 5C16 5.55228 16.4477 6 17 6H19V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V6H23C23.5523 6 24 5.55228 24 5C24 4.44772 23.5523 4 23 4H21V2C21 1.44772 20.5523 1 20 1ZM7 9.5C7 8.67 7.67 8 8.5 8C9.33 8 10 8.67 10 9.5C10 10.33 9.33 11 8.5 11C7.67 11 7 10.33 7 9.5ZM15.5 11C16.33 11 17 10.33 17 9.5C17 8.67 16.33 8 15.5 8C14.67 8 14 8.67 14 9.5C14 10.33 14.67 11 15.5 11ZM12 17.5C14.33 17.5 16.31 16.04 17.11 14H6.89001C7.69001 16.04 9.67001 17.5 12 17.5ZM4 12C4 7.58172 7.58172 4 12 4C12.6108 4 13.2045 4.06827 13.7742 4.1972C14.3129 4.3191 14.8484 3.98125 14.9703 3.44258C15.0922 2.90392 14.7543 2.36843 14.2156 2.24653C13.502 2.08504 12.7603 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.7878 21.9934 11.5771 21.9803 11.368C21.9459 10.8168 21.4711 10.3978 20.9199 10.4323C20.3687 10.4667 19.9498 10.9414 19.9842 11.4926C19.9947 11.6603 20 11.8295 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#737D8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 1C19.4477 1 19 1.44772 19 2V4H17C16.4477 4 16 4.44771 16 5C16 5.55228 16.4477 6 17 6H19V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V6H23C23.5523 6 24 5.55228 24 5C24 4.44772 23.5523 4 23 4H21V2C21 1.44772 20.5523 1 20 1ZM7 9.5C7 8.67 7.67 8 8.5 8C9.33 8 10 8.67 10 9.5C10 10.33 9.33 11 8.5 11C7.67 11 7 10.33 7 9.5ZM15.5 11C16.33 11 17 10.33 17 9.5C17 8.67 16.33 8 15.5 8C14.67 8 14 8.67 14 9.5C14 10.33 14.67 11 15.5 11ZM12 17.5C14.33 17.5 16.31 16.04 17.11 14H6.89001C7.69001 16.04 9.67001 17.5 12 17.5ZM4 12C4 7.58172 7.58172 4 12 4C12.6108 4 13.2045 4.06827 13.7742 4.1972C14.3129 4.3191 14.8484 3.98125 14.9703 3.44258C15.0922 2.90392 14.7543 2.36843 14.2156 2.24653C13.502 2.08504 12.7603 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.7878 21.9934 11.5771 21.9803 11.368C21.9459 10.8168 21.4711 10.3978 20.9199 10.4323C20.3687 10.4667 19.9498 10.9414 19.9842 11.4926C19.9947 11.6603 20 11.8295 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

4
res/img/element-icons/room/message-bar/reply.svg
View file

@ -1,4 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 437 B

2
res/img/element-icons/room/message-bar/star.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21.87" height="20.801"><path d="m4.178 20.801 6.758-4.91 6.756 4.91-2.58-7.946 6.758-4.91h-8.352L10.936 0 8.354 7.945H0l6.758 4.91-2.58 7.946z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="21.87" height="20.801"><path fill="currentColor" d="m4.178 20.801 6.758-4.91 6.756 4.91-2.58-7.946 6.758-4.91h-8.352L10.936 0 8.354 7.945H0l6.758 4.91-2.58 7.946z"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 B

After

Width:  |  Height:  |  Size: 220 B

2
res/img/element-icons/trashcan.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="#8D99A5"/>
<path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 397 B

After

Width:  |  Height:  |  Size: 402 B

2
res/img/element-icons/view-in-room.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#17191C" fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h.005a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75ZM1 6.75A.75.75 0 0 1 1.75 6h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 1 6.75ZM1 9.75A.75.75 0 0 1 1.75 9h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 1 9.75ZM1 13.75a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h.005a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75ZM1 6.75A.75.75 0 0 1 1.75 6h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 1 6.75ZM1 9.75A.75.75 0 0 1 1.75 9h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 1 9.75ZM1 13.75a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/components/views/messages/DownloadActionButton.tsx
View file

@ -18,6 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import React from "react";
import classNames from "classnames";
import { Icon as DownloadIcon } from "../../../../res/img/download.svg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Spinner from "../elements/Spinner";
@ -85,7 +86,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
}
const classes = classNames({
'mx_MessageActionBar_maskButton': true,
'mx_MessageActionBar_iconButton': true,
'mx_MessageActionBar_downloadButton': true,
'mx_MessageActionBar_downloadSpinnerButton': !!spinner,
});
@ -96,6 +97,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
onClick={this.onDownloadClick}
disabled={!!spinner}
>
<DownloadIcon />
{ spinner }
</RovingAccessibleTooltipButton>;
}

69
src/components/views/messages/MessageActionBar.tsx
View file

@ -23,6 +23,16 @@ import { MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { Thread } from 'matrix-js-sdk/src/models/thread';
import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon';
import { Icon as ContextMenuIcon } from '../../../../res/img/element-icons/context-menu.svg';
import { Icon as EditIcon } from '../../../../res/img/element-icons/room/message-bar/edit.svg';
import { Icon as EmojiIcon } from '../../../../res/img/element-icons/room/message-bar/emoji.svg';
import { Icon as ResendIcon } from '../../../../res/img/element-icons/retry.svg';
import { Icon as ThreadIcon } from '../../../../res/img/element-icons/message/thread.svg';
import { Icon as TrashcanIcon } from '../../../../res/img/element-icons/trashcan.svg';
import { Icon as StarIcon } from '../../../../res/img/element-icons/room/message-bar/star.svg';
import { Icon as ReplyIcon } from '../../../../res/img/element-icons/room/message-bar/reply.svg';
import { Icon as ExpandMessageIcon } from '../../../../res/img/element-icons/expand-message.svg';
import { Icon as CollapseMessageIcon } from '../../../../res/img/element-icons/collapse-message.svg';
import type { Relations } from 'matrix-js-sdk/src/models/relations';
import { _t } from '../../../languageHandler';
import dis, { defaultDispatcher } from '../../../dispatcher/dispatcher';
@ -108,15 +118,16 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
return <React.Fragment>
<ContextMenuTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
title={_t("Options")}
onClick={onOptionsClick}
isExpanded={menuDisplayed}
inputRef={ref}
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
/>
>
<ContextMenuIcon />
</ContextMenuTooltipButton>
{ contextMenu }
</React.Fragment>;
};
@ -144,7 +155,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
return <React.Fragment>
<ContextMenuTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
className="mx_MessageActionBar_iconButton"
title={_t("React")}
onClick={() => {
openMenu();
@ -157,7 +168,9 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
inputRef={ref}
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
/>
>
<EmojiIcon />
</ContextMenuTooltipButton>
{ contextMenu }
</React.Fragment>;
@ -209,8 +222,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
};
return <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={<>
<div className="mx_Tooltip_title">
@ -234,6 +246,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
onClick={onClick}
>
<ThreadIcon />
{ firstTimeSeeingThreads && !threadsEnabled && (
<div className="mx_Indicator" />
) }
@ -248,7 +261,7 @@ const FavouriteButton = ({ mxEvent }: IFavouriteButtonProp) => {
const { isFavourite, toggleFavourite } = useFavouriteMessages();
const eventId = mxEvent.getId();
const classes = classNames("mx_MessageActionBar_maskButton mx_MessageActionBar_favouriteButton", {
const classes = classNames("mx_MessageActionBar_iconButton mx_MessageActionBar_favouriteButton", {
'mx_MessageActionBar_favouriteButton_fillstar': isFavourite(eventId),
});
@ -257,7 +270,9 @@ const FavouriteButton = ({ mxEvent }: IFavouriteButtonProp) => {
title={_t("Favourite")}
onClick={() => toggleFavourite(eventId)}
data-testid={eventId}
/>;
>
<StarIcon />
</RovingAccessibleTooltipButton>;
};
interface IMessageActionBarProps {
@ -405,19 +420,23 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
const toolbarOpts = [];
if (canEditContent(this.props.mxEvent)) {
toolbarOpts.push(<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
className="mx_MessageActionBar_iconButton"
title={_t("Edit")}
onClick={this.onEditClick}
key="edit"
/>);
>
<EditIcon />
</RovingAccessibleTooltipButton>);
}
const cancelSendingButton = <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_cancelButton"
className="mx_MessageActionBar_iconButton"
title={_t("Delete")}
onClick={this.onCancelClick}
key="cancel"
/>;
>
<TrashcanIcon />
</RovingAccessibleTooltipButton>;
const threadTooltipButton = <ReplyInThreadButton mxEvent={this.props.mxEvent} key="reply_thread" />;
@ -431,11 +450,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// The resend button needs to appear ahead of the edit button, so insert to the
// start of the opts
toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_resendButton"
className="mx_MessageActionBar_iconButton"
title={_t("Retry")}
onClick={this.onResendClick}
key="resend"
/>);
>
<ResendIcon />
</RovingAccessibleTooltipButton>);
// The delete button should appear last, so we can just drop it at the end
toolbarOpts.push(cancelSendingButton);
@ -451,11 +472,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
}
toolbarOpts.splice(0, 0, (
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
className="mx_MessageActionBar_iconButton"
title={_t("Reply")}
onClick={this.onReplyClick}
key="reply"
/>
>
<ReplyIcon />
</RovingAccessibleTooltipButton>
));
}
if (this.context.canReact) {
@ -494,9 +517,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
if (this.props.isQuoteExpanded !== undefined && shouldDisplayReply(this.props.mxEvent)) {
const expandClassName = classNames({
'mx_MessageActionBar_maskButton': true,
'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
'mx_MessageActionBar_iconButton': true,
'mx_MessageActionBar_expandCollapseMessageButton': true,
});
const tooltip = <>
<div className="mx_Tooltip_title">
@ -512,7 +534,12 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
tooltip={tooltip}
onClick={this.props.toggleThreadExpanded}
key="expand"
/>);
>
{ this.props.isQuoteExpanded
? <CollapseMessageIcon />
: <ExpandMessageIcon />
}
</RovingAccessibleTooltipButton>);
}
// The menu button should be last, so dump it there.

15
src/components/views/right_panel/PinnedMessagesCard.tsx
View file

@ -21,6 +21,9 @@ import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { logger } from "matrix-js-sdk/src/logger";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Icon as ContextMenuIcon } from '../../../../res/img/element-icons/context-menu.svg';
import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
import { Icon as ReplyIcon } from '../../../../res/img/element-icons/room/message-bar/reply.svg';
import { _t } from "../../../languageHandler";
import BaseCard from "./BaseCard";
import Spinner from "../elements/Spinner";
@ -162,9 +165,15 @@ const PinnedMessagesCard = ({ room, onClose, permalinkCreator }: IProps) => {
<div className="mx_PinnedMessagesCard_empty">
{ /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
<div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
<div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
<div className="mx_MessageActionBar_iconButton">
<EmojiIcon />
</div>
<div className="mx_MessageActionBar_iconButton">
<ReplyIcon />
</div>
<div className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton">
<ContextMenuIcon />
</div>
</div>
<Heading size="h4" className="mx_PinnedMessagesCard_empty_header">{ _t("Nothing pinned, yet") }</Heading>

14
src/components/views/rooms/EventTile.tsx
View file

@ -28,6 +28,8 @@ import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { UserTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
import { Icon as LinkIcon } from '../../../../res/img/element-icons/link.svg';
import { Icon as ViewInRoomIcon } from '../../../../res/img/element-icons/view-in-room.svg';
import ReplyChain from "../elements/ReplyChain";
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
@ -1384,17 +1386,21 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
</div>
<Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_viewInRoomButton"
className="mx_MessageActionBar_iconButton"
onClick={this.viewInRoom}
title={_t("View in room")}
key="view_in_room"
/>
>
<ViewInRoomIcon />
</RovingAccessibleTooltipButton>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_copyLinkButton"
className="mx_MessageActionBar_iconButton"
onClick={this.copyLinkToThread}
title={_t("Copy link to thread")}
key="copy_link_to_thread"
/>
>
<LinkIcon />
</RovingAccessibleTooltipButton>
</Toolbar>
{ msgOption }
</>)