mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
Fix: Messagebox is now fully working
This commit is contained in:
parent
e8a111e6bc
commit
9e1a15eb3f
6 changed files with 56 additions and 19 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b
|
||||
Subproject commit e0c436c957206aecd416981ba0050f88aa32259e
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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}>
|
||||
{(
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue