From 9e1a15eb3f4a85f94ff7fa7a442a608ffcc01289 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 6 Jul 2021 13:16:29 +0200
Subject: [PATCH] Fix: Messagebox is now fully working
---
external/lang | 2 +-
.../common/messaging/MessageBox.tsx | 49 +++++++++++++------
src/pages/settings/Settings.module.scss | 6 ++-
src/pages/settings/panes/Account.tsx | 7 ++-
src/pages/settings/panes/Panes.module.scss | 9 ++++
src/styles/_variables.scss | 2 +-
6 files changed, 56 insertions(+), 19 deletions(-)
diff --git a/external/lang b/external/lang
index 2a9ef2c..e0c436c 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b
+Subproject commit e0c436c957206aecd416981ba0050f88aa32259e
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index d6cad74..e3a11e2 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -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>
</>
);
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index a28bdb9..a28237e 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -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);
}
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 472fb05..b667731 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -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}>
{(
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 763210f..3dfe7a9 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -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 {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 21a9b50..73530ad 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -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;
}
--
GitLab