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

Add options to copy matrix.to and with/out event, +preview

Browse source
This commit is contained in:
nexy7574 2025-01-15 20:17:56 +00:00
parent 6f9b4d1ae2
commit 0ba53e3759
No known key found for this signature in database
4 changed files with 93 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/icons/share.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 792 B

After

Width:  |  Height:  |  Size: 793 B

26
web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx
View file

@ -28,7 +28,7 @@ interface ConfirmWithMessageProps {
onConfirm: (reason: string) => void
}
export const ConfirmWithMessageModal = ({
const ConfirmWithMessageModal = ({
evt, title, description, placeholder, confirmButton, onConfirm,
}: ConfirmWithMessageProps) => {
const [reason, setReason] = useState("")
@ -60,28 +60,4 @@ export const ConfirmWithMessageModal = ({
</form>
}
export const ConfirmWithoutMessageModal = ({
evt, title, description, confirmButton, onConfirm,
}: Omit<ConfirmWithMessageProps, "placeholder">) => {
const closeModal = use(ModalCloseContext)
const onConfirmWrapped = (evt: React.FormEvent) => {
evt.preventDefault()
closeModal()
onConfirm("")
}
return <form onSubmit={onConfirmWrapped}>
<h3>{title}</h3>
<div className="timeline-event-container">
<TimelineEvent evt={evt} prevEvt={null} disableMenu={true}/>
</div>
<div className="confirm-description">
{description}
</div>
<div className="confirm-buttons">
<button type="button" onClick={closeModal}>Cancel</button>
<button type="submit">{confirmButton}</button>
</div>
</form>
}
export default ConfirmWithMessageModal

65
web/src/ui/timeline/menu/ShareModal.tsx Normal file
View file

@ -0,0 +1,65 @@
import React, { use, useState } from "react"
import { MemDBEvent } from "@/api/types"
import { ModalCloseContext } from "@/ui/modal"
import TimelineEvent from "@/ui/timeline/TimelineEvent.tsx"
import Toggle from "@/ui/util/Toggle.tsx"
interface ConfirmWithMessageProps {
evt: MemDBEvent
title: string
confirmButton: string
onConfirm: (useMatrixTo: boolean, includeEvent: boolean) => void
generateLink: (useMatrixTo: boolean, includeEvent: boolean) => string
}
const ShareModal = ({ evt, title, confirmButton, onConfirm, generateLink }: ConfirmWithMessageProps) => {
const [useMatrixTo, setUseMatrixTo] = useState(false)
const [includeEvent, setIncludeEvent] = useState(true)
const closeModal = use(ModalCloseContext)
const onConfirmWrapped = (evt: React.FormEvent) => {
evt.preventDefault()
closeModal()
onConfirm(useMatrixTo, includeEvent)
}
const link = generateLink(useMatrixTo, includeEvent)
return <form onSubmit={onConfirmWrapped}>
<h3>{title}</h3>
<div className="timeline-event-container">
<TimelineEvent evt={evt} prevEvt={null} disableMenu={true}/>
</div>
<table>
<tbody>
<tr>
<td>Use matrix.to link</td>
<td>
<Toggle
id="useMatrixTo"
checked={useMatrixTo}
onChange={evt => setUseMatrixTo(evt.target.checked)}
/>
</td>
</tr>
<tr>
<td>Link to this specific event</td>
<td>
<Toggle
id="shareEvent"
checked={includeEvent}
onChange={evt => setIncludeEvent(evt.target.checked)}
/>
</td>
</tr>
</tbody>
</table>
<div className="description">
Share: <a href={link} target="_blank" rel="noreferrer">{link}</a>
</div>
<div className="confirm-buttons">
<button type="button" onClick={closeModal}>Cancel</button>
<button type="submit">{confirmButton}</button>
</div>
</form>
}
export default ShareModal

33
web/src/ui/timeline/menu/useSecondaryItems.tsx
View file

@ -17,10 +17,11 @@ import { use } from "react"
import Client from "@/api/client.ts"
import { useRoomState } from "@/api/statestore"
import { MemDBEvent } from "@/api/types"
import ShareModal from "@/ui/timeline/menu/ShareModal.tsx"
import { ModalCloseContext, ModalContext } from "../../modal"
import { RoomContext, RoomContextData } from "../../roomview/roomcontext.ts"
import JSONView from "../../util/JSONView.tsx"
import { ConfirmWithMessageModal, ConfirmWithoutMessageModal } from "./ConfirmWithMessageModal.tsx"
import ConfirmWithMessageModal from "./ConfirmWithMessageModal.tsx"
import { getPending, getPowerLevels } from "./util.ts"
import ViewSourceIcon from "@/icons/code.svg?react"
import DeleteIcon from "@/icons/delete.svg?react"
@ -91,20 +92,38 @@ export const useSecondaryItems = (
}
const onClickShareEvent = () => {
const generateLink = (useMatrixTo: boolean, includeEvent: boolean) => {
let generatedUrl = useMatrixTo ? "https://matrix.to/#/" : "matrix:roomid/"
if(useMatrixTo) {
generatedUrl += evt.room_id
} else {
generatedUrl += `!${evt.room_id.slice(1)}`
}
if(includeEvent) {
if(useMatrixTo) {
generatedUrl += `/${evt.event_id}`
}
else {
generatedUrl += `/e/${evt.event_id.slice(1)}`
}
}
return generatedUrl
}
openModal({
dimmed: true,
boxed: true,
innerBoxClass: "confirm-message-modal",
content: <RoomContext value={roomCtx}>
<ConfirmWithoutMessageModal
<ShareModal
evt={evt}
title="Share Message"
description="Copy a share link to the clipboard?"
confirmButton="Share"
onConfirm={() => {navigator.clipboard.writeText(
`matrix:roomid/${evt.room_id.slice(1)}/e/${evt.event_id.slice(1)}`)
.catch(err => window.alert(`Failed to copy link: ${err}`))
confirmButton="Copy to clipboard"
onConfirm={(useMatrixTo: boolean, includeEvent: boolean) => {
navigator.clipboard.writeText(generateLink(useMatrixTo, includeEvent)).catch(
err => window.alert(`Failed to copy link: ${err}`),
)
}}
generateLink={generateLink}
/>
</RoomContext>,
})