Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 18:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

web/timeline: add better placeholder for redactions and undecryptable events

Browse source
This commit is contained in:
Tulir Asokan 2024-10-12 18:44:12 +03:00
parent 371cd599a8
commit 50024fbc1d
6 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/icons/delete.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 320 B

1
web/src/icons/lock-clock.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM490-80H240q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v52q-18-6-37.5-9t-42.5-3v-40H240v400h212q8 24 16 41.5T490-80Zm230 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm66-106 28-28-74-74v-112h-40v128l86 86ZM240-560v400-400Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 551 B

1
web/src/icons/lock.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 500 B

20
web/src/ui/timeline/TimelineEvent.css
View file

@ -126,6 +126,26 @@ div.date-separator {
}
}
div.decryption-error-body {
display: flex;
align-items: center;
> svg {
height: 20px;
color: red;
}
}
div.redacted-body, div.decryption-pending-body {
display: flex;
align-items: center;
color: #888;
> svg {
height: 20px;
}
}
div.html-body {
overflow: hidden;
img[data-mx-emoticon] {

6
web/src/ui/timeline/content/EncryptedBody.tsx
View file

@ -14,12 +14,14 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { EventContentProps } from "./props.ts"
import LockIcon from "../../../icons/lock.svg?react"
import LockClockIcon from "../../../icons/lock.svg?react"
const EncryptedBody = ({ event }: EventContentProps) => {
if (event.decryption_error) {
return `Failed to decrypt: ${event.decryption_error}`
return <div className="decryption-error-body"><LockIcon/> Failed to decrypt: {event.decryption_error}</div>
}
return `Waiting for message`
return <div className="decryption-pending-body"><LockClockIcon/> Waiting for message</div>
}
export default EncryptedBody

4
web/src/ui/timeline/content/RedactedBody.tsx
View file

@ -13,8 +13,10 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import DeleteIcon from "../../../icons/delete.svg?react"
const RedactedBody = () => {
return `Message deleted`
return <div className="redacted-body"><DeleteIcon/> Message deleted</div>
}
export default RedactedBody