TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

A small style fix for the popout windows

master
WolverinDEV 2021-04-24 23:08:40 +02:00
parent eebe7aa6b9
commit 5ec0b5c943
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
shared/js/ui/modal/channel-info/Renderer.scss
View File

@ -8,9 +8,19 @@
padding: 0; padding: 0;
width: 60em;
max-width: 100%;
flex-shrink: 1;
user-select: none;
&.windowed { &.windowed {
width: 100%; width: 100%;
height: 100%; height: 100%;
.description .value {
max-height: unset;
}
} }
&:not(.windowed) { &:not(.windowed) {

31
shared/js/ui/modal/channel-info/Renderer.tsx
View File

@ -10,6 +10,9 @@ import {joinClassList, useTr} from "tc-shared/ui/react-elements/Helper";
import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots"; import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
import {Button} from "tc-shared/ui/react-elements/Button"; import {Button} from "tc-shared/ui/react-elements/Button";
import {BBCodeRenderer} from "tc-shared/text/bbcode"; import {BBCodeRenderer} from "tc-shared/text/bbcode";
import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
import {ClientIcon} from "svg-sprites/client-icons";
import {copyToClipboard} from "tc-shared/utils/helpers";
const cssStyle = require("./Renderer.scss"); const cssStyle = require("./Renderer.scss");
const VariablesContext = React.createContext<UiVariableConsumer<ModalChannelInfoVariables>>(undefined); const VariablesContext = React.createContext<UiVariableConsumer<ModalChannelInfoVariables>>(undefined);
@ -47,11 +50,13 @@ const TopicRenderer = React.memo(() => {
return ( return (
<div className={cssStyle.row}> <div className={cssStyle.row}>
<div className={cssStyle.title}> <div className={cssStyle.column}>
<Translatable>Topic</Translatable> <div className={cssStyle.title}>
</div> <Translatable>Topic</Translatable>
<div className={cssStyle.value}> </div>
{topic.value} <div className={cssStyle.value}>
{topic.value}
</div>
</div> </div>
</div> </div>
) )
@ -60,18 +65,26 @@ const TopicRenderer = React.memo(() => {
const DescriptionRenderer = React.memo(() => { const DescriptionRenderer = React.memo(() => {
const description = useContext(VariablesContext).useReadOnly("description"); const description = useContext(VariablesContext).useReadOnly("description");
let overlay; let overlay, copyButton;
let descriptionBody; let descriptionBody;
if(description.status === "loaded") { if(description.status === "loaded") {
switch(description.value.status) { switch(description.value.status) {
case "success": case "success":
const descriptionText = description.value.description;
descriptionBody = ( descriptionBody = (
<BBCodeRenderer <BBCodeRenderer
message={description.value.description} message={descriptionText}
settings={{ convertSingleUrls: true }} settings={{ convertSingleUrls: true }}
handlerId={description.value.handlerId} handlerId={description.value.handlerId}
/> />
); );
copyButton = (
<div className={cssStyle.buttonCopy} onClick={() => {
copyToClipboard(descriptionText);
}}>
<ClientIconRenderer icon={ClientIcon.Copy} />
</div>
)
break; break;
case "empty": case "empty":
@ -102,7 +115,7 @@ const DescriptionRenderer = React.memo(() => {
return ( return (
<div className={cssStyle.description}> <div className={cssStyle.description}>
<div className={cssStyle.title}> <div className={cssStyle.title}>
<Translatable>Description</Translatable> <Translatable>Description</Translatable> {copyButton}
</div> </div>
<div className={cssStyle.value} style={{ display: descriptionBody ? undefined : "none" }}> <div className={cssStyle.value} style={{ display: descriptionBody ? undefined : "none" }}>
{descriptionBody} {descriptionBody}
@ -167,7 +180,7 @@ class Modal extends AbstractModal {
return ( return (
<EventContext.Provider value={this.events}> <EventContext.Provider value={this.events}>
<VariablesContext.Provider value={this.variables}> <VariablesContext.Provider value={this.variables}>
<div className={joinClassList(cssStyle.container, this.properties.windowed && cssStyle.windowed)}> <div className={joinClassList(cssStyle.container, this.properties.windowed && cssStyle.windowed)} draggable={false}>
<div className={cssStyle.row}> <div className={cssStyle.row}>
<PropertyRenderer property={"type"}> <PropertyRenderer property={"type"}>
{value => { {value => {