n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: highlight pills mentioning self

Browse source
This commit is contained in:
Tulir Asokan 2024-10-31 00:43:09 +02:00
parent f9b94034b1
commit 244443c7fd
2 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/index.css
View file

@ -15,6 +15,8 @@
--border-color: #ccc; --border-color: #ccc;
--pill-background-color: #ccc; --pill-background-color: #ccc;
--highlight-pill-background-color: #c00;
--highlight-pill-text-color: #fff;
--button-hover-color: rgba(0, 0, 0, .2); --button-hover-color: rgba(0, 0, 0, .2);
--light-hover-color: rgba(0, 0, 0, .1); --light-hover-color: rgba(0, 0, 0, .1);

15
web/src/ui/MainScreen.tsx
View file

@ -13,7 +13,7 @@
// //
// You should have received a copy of the GNU Affero General Public License // 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/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
import { use, useCallback, useLayoutEffect, useMemo, useReducer, useState } from "react" import { use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "react"
import type { RoomID } from "@/api/types" import type { RoomID } from "@/api/types"
import ClientContext from "./ClientContext.ts" import ClientContext from "./ClientContext.ts"
import MainScreenContext, { MainScreenContextFields } from "./MainScreenContext.ts" import MainScreenContext, { MainScreenContextFields } from "./MainScreenContext.ts"
@ -69,6 +69,19 @@ const MainScreen = () => {
useLayoutEffect(() => { useLayoutEffect(() => {
client.store.switchRoom = setActiveRoom client.store.switchRoom = setActiveRoom
}, [client, setActiveRoom]) }, [client, setActiveRoom])
useEffect(() => {
const styleTags = document.createElement("style")
styleTags.textContent = `
div.html-body > a.hicli-matrix-uri-user[href="matrix:u/${client.userID.slice(1).replaceAll(`"`, `\\"`)}"] {
background-color: var(--highlight-pill-background-color);
color: var(--highlight-pill-text-color);
}
`
document.head.appendChild(styleTags)
return () => {
document.head.removeChild(styleTags)
}
}, [client.userID])
const [roomListWidth, resizeHandle1] = useResizeHandle( const [roomListWidth, resizeHandle1] = useResizeHandle(
300, 48, 900, "roomListWidth", { className: "room-list-resizer" }, 300, 48, 900, "roomListWidth", { className: "room-list-resizer" },
) )