diff --git a/webui/public/locales/de/panel.json b/webui/public/locales/de/panel.json index bd6a1c6..773df50 100644 --- a/webui/public/locales/de/panel.json +++ b/webui/public/locales/de/panel.json @@ -1,4 +1,41 @@ { + "rooms": { + "detail": { + "activate": { + "label": "Raum Aktivieren" + }, + "debug": { + "label": "Debug-Modus" + }, + "adminPowerLevel": { + "label": "Admin-Powerlevel" + }, + "set": { + "label": "Ok" + }, + "hashChecker": { + "label": "Hash-Prüfer", + "notice": { + "label": "Nachricht in den Chat senden" + }, + "hashCheckMode": { + "label": "Verhalten bei Übereinstimmung", + "NOTICE": { + "label": "Nur Nachricht senden" + }, + "DELETE": { + "label": "Nachricht löschen" + }, + "MUTE": { + "label": "Stummschalten & Löschen" + }, + "BAN": { + "label": "Verbannen & Löschen" + } + } + } + } + }, "jump_to_content": "Zum Inhalt springen", "jump_to_navigation": "Zur Navigation springen", "documentation": "Dokumentation", diff --git a/webui/public/locales/de/translation.json b/webui/public/locales/de/translation.json index 269f146..2294af9 100644 --- a/webui/public/locales/de/translation.json +++ b/webui/public/locales/de/translation.json @@ -1,4 +1,7 @@ { + "common": { + "loading": "Lädt..." + }, "list": { "none": "Keine Einträge", "loading": "Lade weitere Einträge...", @@ -18,8 +21,8 @@ "debug": "Debug", "inactive": "Inaktiv", "active": "Aktiv", - "title": "Meine Räume", "details": "Details", + "title": "Meine Räume", "name": "Name", "id": "ID" } diff --git a/webui/public/locales/en/panel.json b/webui/public/locales/en/panel.json index 0fd0bb4..e5fabb8 100644 --- a/webui/public/locales/en/panel.json +++ b/webui/public/locales/en/panel.json @@ -1,4 +1,41 @@ { + "rooms": { + "detail": { + "activate": { + "label": "Activate Room" + }, + "debug": { + "label": "Debug-Mode" + }, + "adminPowerLevel": { + "label": "Admin-Power Level" + }, + "set": { + "label": "Set" + }, + "hashChecker": { + "label": "Hash-Checker", + "notice": { + "label": "Send Notice to Chat" + }, + "hashCheckMode": { + "label": "Behaviour on Match", + "NOTICE": { + "label": "Only send a Notice" + }, + "DELETE": { + "label": "Delete the Message" + }, + "MUTE": { + "label": "Mute User & Delete" + }, + "BAN": { + "label": "Ban User & Delete" + } + } + } + } + }, "jump_to_content": "Jump to Content", "jump_to_navigation": "Jump to Navigation", "documentation": "Documentation", diff --git a/webui/public/locales/en/translation.json b/webui/public/locales/en/translation.json index f4d890a..12e048f 100644 --- a/webui/public/locales/en/translation.json +++ b/webui/public/locales/en/translation.json @@ -1,4 +1,7 @@ { + "common": { + "loading": "Loading..." + }, "list": { "none": "No entries", "loading": "Loading more entries...", @@ -18,8 +21,8 @@ "debug": "Debug", "inactive": "Inactive", "active": "Active", - "title": "My Rooms", "details": "Details", + "title": "My Rooms", "name": "Name", "id": "Room ID" } diff --git a/webui/src/_globals.scss b/webui/src/_globals.scss index d67301c..c776ba1 100644 --- a/webui/src/_globals.scss +++ b/webui/src/_globals.scss @@ -82,4 +82,90 @@ border-color: var(--veles-color-green); } } +} + +@mixin inputGroup { + display: flex; + + input, button { + @include input; + } + + > input, > button { + border-radius: 0; + + &:first-child { + border-radius: var(--veles-layout-border-radius) 0 0 var(--veles-layout-border-radius); + } + &:last-child { + border-radius: 0 var(--veles-layout-border-radius) var(--veles-layout-border-radius) 0; + } + + &:not(:first-child) { + border-left: none; + } + &:not(:first-child) { + border-left: none; + } + } +} + +@mixin tableWrapper { + width: 100%; + overflow-y: scroll; + + table { + width: 100%; + + text-align: left; + + white-space: nowrap; + border-spacing: 0; + border-collapse: collapse; + + th, td { + padding: 10px 5px; + } + + thead tr { + border-bottom: thin solid var(--veles-color-border-highlight); + } + + tbody tr { + cursor:pointer; + border-bottom: thin solid var(--veles-color-border); + + @include badges; + + &:hover { + background: var(--veles-color-surface); + } + } + } +} + +@mixin input { + padding: var(--veles-layout-padding-slim) var(--veles-layout-padding); + border: thin solid var(--veles-color-border); + border-radius: var(--veles-layout-border-radius); + background-color: var(--veles-color-background); + color: var(--veles-color-foreground); + transition: 250ms; + font: inherit; + display: block; + + &:focus { + outline: 2px solid var(--veles-color-accent); + outline: 2px auto -webkit-focus-ring-color; + outline-offset: 2px; + } + + &:disabled { + opacity: .75; + cursor: not-allowed; + } +} + +@mixin settingsGroup { + } \ No newline at end of file diff --git a/webui/src/components/form_components/ToggleButton.module.scss b/webui/src/components/form_components/ToggleButton.module.scss index d9d8e21..751a019 100644 --- a/webui/src/components/form_components/ToggleButton.module.scss +++ b/webui/src/components/form_components/ToggleButton.module.scss @@ -1,7 +1,7 @@ @import "../../globals"; .toggle { - display: inline-flex; + display: flex; flex-wrap: wrap; align-items: center; position: relative; diff --git a/webui/src/components/panel/rooms/RoomDetail.module.scss b/webui/src/components/panel/rooms/RoomDetail.module.scss index ff2a60e..5edc169 100644 --- a/webui/src/components/panel/rooms/RoomDetail.module.scss +++ b/webui/src/components/panel/rooms/RoomDetail.module.scss @@ -3,4 +3,45 @@ .title { display: flex; gap: var(--veles-layout-padding) +} + +.label { + display: block; + padding: var(--veles-layout-padding-slim); +} + +.powerLevelInput { + @include inputGroup; + + input { + flex-grow: 1; + } +} + +.hashCheckModeChooser { + @include input; + width: 100%; +} + +.listTable { + @include tableWrapper; + padding: var(--veles-layout-padding); +} + +.settingsGroup { + display: block; + margin: var(--veles-layout-padding) var(--veles-layout-padding-inverse); + + border-top: thin solid var(--veles-color-border); + border-bottom: thin solid var(--veles-color-border); + + .settingsGroupTitle { + display: block; + border-bottom: thin solid var(--veles-color-border); + padding: var(--veles-layout-padding-slim) var(--veles-layout-padding); + } + + .settingsGroupContent { + padding: var(--veles-layout-padding); + } } \ No newline at end of file diff --git a/webui/src/components/panel/rooms/RoomDetail.tsx b/webui/src/components/panel/rooms/RoomDetail.tsx index ed49f0f..65ff8f8 100644 --- a/webui/src/components/panel/rooms/RoomDetail.tsx +++ b/webui/src/components/panel/rooms/RoomDetail.tsx @@ -1,4 +1,4 @@ -import React, {useContext, useEffect} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks"; import {graphql} from "babel-plugin-relay/macro"; import {RoomDetailQuery, RoomDetailQuery$variables} from "./__generated__/RoomDetailQuery.graphql"; @@ -7,8 +7,10 @@ import {useParams} from "react-router-dom"; import {RoomsSlideOverTitleContext} from "./Rooms"; import ToggleButton from "../../form_components/ToggleButton"; -//import styles from "./RoomDetail.module.scss"; +import styles from "./RoomDetail.module.scss"; import {useReconfigureRoomMutation} from "../../../mutations/ReconfigureRoomMutation"; +import {HashCheckerMode} from "../../../mutations/__generated__/ReconfigureRoomMutation.graphql"; +import {Trans, useTranslation} from "react-i18next"; type Props = { initialQueryRef: PreloadedQuery | null | undefined, @@ -22,7 +24,8 @@ type PropsFinal = { const RoomDetailInner = ({initialQueryRef}: PropsFinal) => { const [reconfigureRoom, reconfiguringRoom] = useReconfigureRoomMutation(); - + const [newAdminPowerLevel, setNewAdminPowerLevel] = useState(null) + const {t} = useTranslation() const data = usePreloadedQuery( @@ -52,7 +55,7 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => { titleSetContext && data.room?.name && titleSetContext(data.room.name); return <> - { + { reconfigureRoom({ variables: { reconfigureInput: { @@ -61,9 +64,9 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => { } } }) - }} disabled={reconfiguringRoom || ((data.room || false) && !data.room.active && !data.room.deactivated)} checked={data.room?.active}/>
+ }} disabled={reconfiguringRoom || ((data.room || false) && !data.room.active && !data.room.deactivated)} checked={data.room?.active}/> - { + { reconfigureRoom({ variables: { reconfigureInput: { @@ -74,8 +77,99 @@ const RoomDetailInner = ({initialQueryRef}: PropsFinal) => { }) }} disabled={reconfiguringRoom || (!data.room)} checked={data.room?.debug}/> + +
+ { + if(Number.parseInt(ev.currentTarget.value) === data.room?.adminPowerLevel) { + setNewAdminPowerLevel(null) + return + } -
{JSON.stringify(data, null, 2)}
+ setNewAdminPowerLevel(Number.parseInt(ev.currentTarget.value)) + }} id={"adminPowerLevelInput"} /> + +
+ +
+ Hash-Checker +
+ { + reconfigureRoom({ + variables: { + reconfigureInput: { + id: data.room?.id!, + hashChecker: { + chatNotice: ev.currentTarget.checked + } + } + } + }) + }} disabled={reconfiguringRoom || (!data.room)} checked={data.room?.hashCheckerConfig.chatNotice}/> + + + +
+ +
+ + + + + + + + + {/* + data.rooms?.edges.map((edge) => { + return {navigate("/rooms/"+edge.node.id)}} key={edge.node.id}> + + + + ; + }) + */} + +
NameList ID
+ {edge.node.debug && Debug} + {!edge.node.active && Inactive} + {edge.node.active && Active} + {edge.node.name}{edge.node.roomId}
+
+
+ + +
{JSON.stringify(data, null, 2)}
} diff --git a/webui/src/components/panel/rooms/RoomsTable.module.scss b/webui/src/components/panel/rooms/RoomsTable.module.scss index 1458b6b..2df08f6 100644 --- a/webui/src/components/panel/rooms/RoomsTable.module.scss +++ b/webui/src/components/panel/rooms/RoomsTable.module.scss @@ -1,35 +1,5 @@ @import "../../../globals"; .roomsTableWrapper { - width: 100%; - overflow-y: scroll; - - .roomsTable { - width: 100%; - - text-align: left; - - white-space: nowrap; - border-spacing: 0; - border-collapse: collapse; - - th, td { - padding: 10px 5px; - } - - thead tr { - border-bottom: thin solid var(--veles-color-border-highlight); - } - - tbody tr { - cursor:pointer; - border-bottom: thin solid var(--veles-color-border); - - @include badges; - - &:hover { - background: var(--veles-color-surface); - } - } - } + @include tableWrapper; }