Fix: Messagebox is now fully working

This commit is contained in:
nizune 2021-07-06 13:16:29 +02:00
parent e8a111e6bc
commit 9e1a15eb3f
6 changed files with 56 additions and 19 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b
Subproject commit e0c436c957206aecd416981ba0050f88aa32259e

View file

@ -1,5 +1,4 @@
import { ShieldX } from "@styled-icons/boxicons-regular";
import { Send } from "@styled-icons/boxicons-solid";
import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid";
import Axios, { CancelTokenSource } from "axios";
import { Channel } from "revolt.js";
import { ChannelPermission } from "revolt.js/dist/api/permissions";
@ -40,6 +39,7 @@ import AutoComplete, { useAutoComplete } from "../AutoComplete";
import { PermissionTooltip } from "../Tooltip";
import FilePreview from "./bars/FilePreview";
import ReplyBar from "./bars/ReplyBar";
import { Styleshare } from "@styled-icons/simple-icons";
type Props = {
channel: Channel;
@ -65,29 +65,45 @@ const Base = styled.div`
textarea {
font-size: var(--text-size);
background: transparent;
&::placeholder {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
const Blocked = styled.div`
display: flex;
align-items: center;
padding: 14px 0;
user-select: none;
font-size: var(--text-size);
color: var(--tertiary-foreground);
.text {
padding: 14px 14px 14px 0;
}
svg {
flex-shrink: 0;
margin-inline-end: 10px;
}
`;
const Action = styled.div`
display: grid;
display: flex;
place-items: center;
> div {
padding: 10px 12px;
height: 48px;
width: 48px;
padding: 12px;
}
.mobile {
@media (pointer: fine) {
display: none;
}
}
`;
@ -112,12 +128,16 @@ export default function MessageBox({ channel }: Props) {
return (
<Base>
<Blocked>
<Action>
<PermissionTooltip
permission="SendMessages"
placement="top">
<ShieldX size={22} />
</PermissionTooltip>
<Text id="app.main.channel.misc.no_sending" />
</Action>
<div className="text">
<Text id="app.main.channel.misc.no_sending" />
</div>
</Blocked>
</Base>
);
@ -477,13 +497,14 @@ export default function MessageBox({ channel }: Props) {
onFocus={onFocus}
onBlur={onBlur}
/>
{isTouchscreenDevice && (
<Action>
<IconButton onClick={send}>
<Send size={20} />
</IconButton>
</Action>
)}
<Action>
{/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} />
</IconButton>*/}
<IconButton className="mobile" onClick={send}>
<Send size={20} />
</IconButton>
</Action>
</Base>
</>
);

View file

@ -189,11 +189,15 @@
width: 40px;
border: 3px solid var(--tertiary-background);
cursor: pointer;
svg {
color: var(--secondary-foreground);
}
&:hover {
background: var(--secondary-header);
}
&:active {
transform: translateY(2px);
}

View file

@ -1,5 +1,5 @@
import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key } from "@styled-icons/boxicons-solid";
import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects";
@ -60,7 +60,10 @@ export function Account() {
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.username}>@{user.username}</div>
<div className={styles.userDetail}>
<div className={styles.username}>@{user.username}</div>
<div className={styles.userid}><HelpCircle size={16} />{user._id}</div>
</div>
</div>
<div className={styles.details}>
{(

View file

@ -21,6 +21,15 @@
font-size: 24px;
font-weight: 600;
}
.userid {
font-size: .875rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
color: var(--tertiary-foreground);
}
}
.details {

View file

@ -10,7 +10,7 @@
--textarea-padding: 16px;
--textarea-line-height: 20px;
--message-box-padding: 12px;
--message-box-padding: 14px 14px 14px 0;
--bottom-navigation-height: 50px;
}