visually disable prefix config if no perms

This commit is contained in:
janderedev 2022-04-09 11:55:29 +02:00
parent 0b278a6ae2
commit f5515a6716
No known key found for this signature in database
GPG key ID: 5D5E18ACB990F57A

View file

@ -5,7 +5,6 @@ import { InputBox } from '@revoltchat/ui/lib/components/atoms/inputs/InputBox';
import { Checkbox } from '@revoltchat/ui/lib/components/atoms/inputs/Checkbox'; import { Checkbox } from '@revoltchat/ui/lib/components/atoms/inputs/Checkbox';
import { ComboBox } from '@revoltchat/ui/lib/components/atoms/inputs/ComboBox'; import { ComboBox } from '@revoltchat/ui/lib/components/atoms/inputs/ComboBox';
import { LineDivider } from '@revoltchat/ui/lib/components/atoms/layout/LineDivider'; import { LineDivider } from '@revoltchat/ui/lib/components/atoms/layout/LineDivider';
import { H1 } from '@revoltchat/ui/lib/components/atoms/heading/H1';
import { H3 } from '@revoltchat/ui/lib/components/atoms/heading/H3'; import { H3 } from '@revoltchat/ui/lib/components/atoms/heading/H3';
import { H4 } from '@revoltchat/ui/lib/components/atoms/heading/H4'; import { H4 } from '@revoltchat/ui/lib/components/atoms/heading/H4';
import { Icon } from '@mdi/react'; import { Icon } from '@mdi/react';
@ -15,6 +14,7 @@ import { getAuthHeaders } from "../../utils";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import defaultChannelIcon from '../../assets/channel-default-icon.svg'; import defaultChannelIcon from '../../assets/channel-default-icon.svg';
import CategorySelector from '../../components/CategorySelector'; import CategorySelector from '../../components/CategorySelector';
import { CSSProperties } from 'styled-components';
type User = { id: string, username?: string, avatarURL?: string } type User = { id: string, username?: string, avatarURL?: string }
type Channel = { id: string, name: string, icon?: string, type: 'VOICE'|'TEXT', nsfw: boolean } type Channel = { id: string, name: string, icon?: string, type: 'VOICE'|'TEXT', nsfw: boolean }
@ -40,6 +40,11 @@ type AntispamRule = {
message: string | null; message: string | null;
} }
const STYLE_DISABLED: CSSProperties = {
filter: 'grayscale(100%)',
pointerEvents: 'none',
}
const ServerDashboard: FunctionComponent = () => { const ServerDashboard: FunctionComponent = () => {
const [category, setCategory] = useState('home'); const [category, setCategory] = useState('home');
@ -163,7 +168,7 @@ const ServerDashboard: FunctionComponent = () => {
<div style={{ paddingLeft: '10px', paddingRight: '10px' }}> <div style={{ paddingLeft: '10px', paddingRight: '10px' }}>
{category == 'home' && ( {category == 'home' && (
<> <div style={serverInfo.perms ? {} : STYLE_DISABLED}>
<> <>
<H3>Prefix</H3> <H3>Prefix</H3>
<InputBox <InputBox
@ -226,7 +231,7 @@ const ServerDashboard: FunctionComponent = () => {
</UserListContainer> </UserListContainer>
</UserListTypeContainer> </UserListTypeContainer>
</> </>
</> </div>
)} )}
{category == 'automod' && ( {category == 'automod' && (
@ -366,10 +371,7 @@ const ServerDashboard: FunctionComponent = () => {
style={{ style={{
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
...(props.disabled ? { ...(props.disabled ? STYLE_DISABLED : {})
filter: 'grayscale(100%)',
pointerEvents: 'none',
} : {})
}} }}
> >
{props.children} {props.children}