mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 02:35:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Change sending->sent state to match new designs

Browse source 
For https://github.com/vector-im/element-web/issues/16424
This commit is contained in:
Travis Ralston 2021-02-27 22:46:38 -07:00
parent 31df8801f1
commit 9cec382865
9 changed files with 54 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
res/css/views/rooms/_EventTile.scss
View file

@ -213,23 +213,36 @@ $left-gutter: 64px;
color: $accent-fg-color;
}
.mx_EventTile_encrypting {
color: $event-encrypting-color !important;
}
.mx_EventTile_sending {
color: $event-sending-color;
}
.mx_EventTile_sending .mx_UserPill,
.mx_EventTile_sending .mx_RoomPill {
opacity: 0.5;
}
.mx_EventTile_notSent {
color: $event-notsent-color;
}
.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
// We don't use `position: relative` on the element because then it won't line
// up with the other read receipts
&::before {
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: 14px;
height: 14px;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
.mx_EventTile_receiptSent::before {
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
}
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
.mx_EventTile_contextual {
opacity: 0.4;
}

3
res/img/element-icons/circle-sending.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" stroke="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 152 B

4
res/img/element-icons/circle-sent.svg Normal file
View file

@ -0,0 +1,4 @@
<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 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#8D99A5"/>
<path d="M11.8697 4.95309C11.6784 4.7576 11.3597 4.74731 11.1578 4.93251L6.62066 9.04804L4.95244 7.91627C4.7293 7.77223 4.42116 7.77223 4.20865 7.95742C3.95363 8.1632 3.93238 8.5336 4.14489 8.78053L6.06813 10.9206C6.1 10.9515 6.13188 10.9926 6.17438 11.0132C6.53565 11.3013 7.07756 11.2498 7.37508 10.9L7.40695 10.8589L11.891 5.60128C12.0397 5.41608 12.0397 5.13828 11.8697 4.95309Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 784 B

3
res/themes/dark/css/_dark.scss
View file

@ -137,9 +137,6 @@ $panel-divider-color: transparent;
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: rgba(141, 151, 165, 0.2);
// event tile lifecycle
$event-sending-color: $text-secondary-color;
// event redaction
$event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000;

3
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -132,9 +132,6 @@ $panel-divider-color: $header-panel-border-color;
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: #1A1D23;
// event tile lifecycle
$event-sending-color: $text-secondary-color;
// event redaction
$event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000;

2
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -222,8 +222,6 @@ $widget-body-bg-color: #fff;
$yellow-background: #fff8e3;
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
$event-notsent-color: #f44;
$event-highlight-fg-color: $warning-color;

2
res/themes/light/css/_light.scss
View file

@ -222,8 +222,6 @@ $widget-body-bg-color: #FFF;
$yellow-background: #fff8e3;
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
$event-notsent-color: #f44;
$event-highlight-fg-color: $warning-color;

1
src/components/views/messages/EditHistoryMessage.js
View file

@ -158,6 +158,7 @@ export default class EditHistoryMessage extends React.PureComponent {
const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
const classes = classNames({
"mx_EventTile": true,
// Note: we keep these sending state classes for tests, not for our styles
"mx_EventTile_sending": isSending,
"mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
});

21
src/components/views/rooms/EventTile.js
View file

@ -454,8 +454,26 @@ export default class EventTile extends React.Component {
};
getReadAvatars() {
// return early if there are no read receipts
// return early if there are no read receipts, with our message state if applicable
if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
const myUserId = MatrixClientPeg.get().getUserId();
if (this.props.mxEvent.getSender() === myUserId && room) {
// We only search for the most recent 50 events because surely someone will have
// sent *something* in that time, even if it is a membership event or something.
const readUsers = room.getUsersWhoHaveRead(this.props.mxEvent, 50);
const hasBeenRead = readUsers.length === 0 || readUsers.some(u => u !== myUserId);
console.log(room.getUsersReadUpTo(this.props.mxEvent));
let receipt = null;
if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') {
if (!hasBeenRead) {
receipt = <span className='mx_EventTile_receiptSent' />;
}
} else {
receipt = <span className='mx_EventTile_receiptSending' />;
}
return <span className="mx_EventTile_readAvatars">{receipt}</span>;
}
return (<span className="mx_EventTile_readAvatars" />);
}
@ -692,6 +710,7 @@ export default class EventTile extends React.Component {
mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage,
mx_EventTile_12hr: this.props.isTwelveHour,
// Note: we keep these sending state classes for tests, not for our styles
mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting',
mx_EventTile_sending: !isEditing && isSending,
mx_EventTile_notSent: this.props.eventSendStatus === 'not_sent',