fix(channel): last update before master merge

This commit is contained in:
trashtemp 2021-12-29 16:39:35 +01:00
parent cc531705b4
commit 086ab7b3bc
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
7 changed files with 139 additions and 88 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39 Subproject commit 33af4890e56757c27a5bbd23e81d05f03c4a0cde

View file

@ -26,9 +26,6 @@ const ServerBanner = styled.div<Props>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
/*background-position: center;
background-repeat: no-repeat;
background-size: cover;*/
background-size: cover !important; background-size: cover !important;
background-position: center center !important; background-position: center center !important;

View file

@ -49,7 +49,7 @@ export default observer(
} }
}}> }}>
<div> <div>
New messages since{" "} <Text id="app.main.channel.misc.new_messages" />{" "}
{dayjs(decodeTime(last_id)).fromNow()} {dayjs(decodeTime(last_id)).fromNow()}
</div> </div>
<div> <div>

View file

@ -1,3 +1,4 @@
import { Group } from "@styled-icons/boxicons-solid";
import { autorun } from "mobx"; import { autorun } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -47,7 +48,7 @@ const EmbedInviteBase = styled.div`
const EmbedInviteDetails = styled.div` const EmbedInviteDetails = styled.div`
flex-grow: 1; flex-grow: 1;
padding-left: 12px; padding-inline-start: 12px;
${() => ${() =>
isTouchscreenDevice && isTouchscreenDevice &&
css` css`
@ -63,7 +64,14 @@ const EmbedInviteName = styled.div`
`; `;
const EmbedInviteMemberCount = styled.div` const EmbedInviteMemberCount = styled.div`
display: flex;
align-items: center;
gap: 2px;
font-size: 0.8em; font-size: 0.8em;
> svg {
color: var(--secondary-foreground);
}
`; `;
type Props = { type Props = {
@ -119,6 +127,7 @@ export function EmbedInvite({ code }: Props) {
<EmbedInviteDetails> <EmbedInviteDetails>
<EmbedInviteName>{invite.server_name}</EmbedInviteName> <EmbedInviteName>{invite.server_name}</EmbedInviteName>
<EmbedInviteMemberCount> <EmbedInviteMemberCount>
<Group size={12} />
{invite.member_count.toLocaleString()}{" "} {invite.member_count.toLocaleString()}{" "}
{invite.member_count === 1 ? "member" : "members"} {invite.member_count === 1 ? "member" : "members"}
</EmbedInviteMemberCount> </EmbedInviteMemberCount>

View file

@ -8,6 +8,13 @@ export default styled.div`
user-select: none; user-select: none;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
/*background: var(--background);*/
background-color: rgba(
var(--background-rgb),
max(var(--min-opacity), 0.75)
);
backdrop-filter: blur(20px);
/*> * > ::-webkit-scrollbar-thumb { /*> * > ::-webkit-scrollbar-thumb {
width: 4px; width: 4px;

View file

@ -24,12 +24,38 @@ import ChannelSettings from "./settings/ChannelSettings";
import ServerSettings from "./settings/ServerSettings"; import ServerSettings from "./settings/ServerSettings";
import Settings from "./settings/Settings"; import Settings from "./settings/Settings";
const AppContainer = styled.div`
background-size: cover !important;
background-position: center center !important;
`;
const StatusBar = styled.div`
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
gap: 14px;
.button {
border: 1px solid white;
padding: 5px;
border-radius: var(--border-radius);
}
`;
const Routes = styled.div` const Routes = styled.div`
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background: var(--primary-background); background: var(--primary-background);
/*background-color: rgba(
var(--primary-background-rgb),
max(var(--min-opacity), 0.75)
);*/
//backdrop-filter: blur(10px);
`; `;
export default function App() { export default function App() {
@ -44,91 +70,103 @@ export default function App() {
return ( return (
<> <>
{window.isNative && !window.native.getConfig().frame && ( {/*<StatusBar>
<Titlebar /> <div className="title">Planned outage: CDN (~2 hours)</div>
)} <div className="button">View status</div>
<OverlappingPanels </StatusBar>*/}
width="100vw" <AppContainer>
height={ {window.isNative && !window.native.getConfig().frame && (
window.isNative && !window.native.getConfig().frame <Titlebar />
? "calc(var(--app-height) - var(--titlebar-height))" )}
: "var(--app-height)" <OverlappingPanels
} width="100vw"
leftPanel={ height={
inSpecial window.isNative && !window.native.getConfig().frame
? undefined ? "calc(var(--app-height) - var(--titlebar-height))"
: { width: 288, component: <LeftSidebar /> } : "var(--app-height)"
} }
rightPanel={ leftPanel={
!inSpecial && inChannel inSpecial
? { width: 236, component: <RightSidebar /> } ? undefined
: undefined : { width: 288, component: <LeftSidebar /> }
} }
bottomNav={{ rightPanel={
component: <BottomNavigation />, !inSpecial && inChannel
showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left, ? { width: 236, component: <RightSidebar /> }
height: 50, : undefined
}} }
docked={isTouchscreenDevice ? Docked.None : Docked.Left}> bottomNav={{
<Routes> component: <BottomNavigation />,
<Switch> showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
<Route height: 50,
path="/server/:server/channel/:channel/settings/:page" }}
component={ChannelSettings} docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
/> <Routes>
<Route <Switch>
path="/server/:server/channel/:channel/settings" <Route
component={ChannelSettings} path="/server/:server/channel/:channel/settings/:page"
/> component={ChannelSettings}
<Route />
path="/server/:server/settings/:page" <Route
component={ServerSettings} path="/server/:server/channel/:channel/settings"
/> component={ChannelSettings}
<Route />
path="/server/:server/settings" <Route
component={ServerSettings} path="/server/:server/settings/:page"
/> component={ServerSettings}
<Route />
path="/channel/:channel/settings/:page" <Route
component={ChannelSettings} path="/server/:server/settings"
/> component={ServerSettings}
<Route />
path="/channel/:channel/settings" <Route
component={ChannelSettings} path="/channel/:channel/settings/:page"
/> component={ChannelSettings}
/>
<Route
path="/channel/:channel/settings"
component={ChannelSettings}
/>
<Route <Route
path="/channel/:channel/:message" path="/channel/:channel/:message"
component={Channel} component={Channel}
/> />
<Route <Route
path="/server/:server/channel/:channel/:message" path="/server/:server/channel/:channel/:message"
component={Channel} component={Channel}
/> />
<Route <Route
path="/server/:server/channel/:channel" path="/server/:server/channel/:channel"
component={Channel} component={Channel}
/> />
<Route path="/server/:server" component={Channel} /> <Route path="/server/:server" component={Channel} />
<Route path="/channel/:channel" component={Channel} /> <Route
path="/channel/:channel"
component={Channel}
/>
<Route path="/settings/:page" component={Settings} /> <Route
<Route path="/settings" component={Settings} /> path="/settings/:page"
component={Settings}
/>
<Route path="/settings" component={Settings} />
<Route path="/dev" component={Developer} /> <Route path="/dev" component={Developer} />
<Route path="/friends" component={Friends} /> <Route path="/friends" component={Friends} />
<Route path="/open/:id" component={Open} /> <Route path="/open/:id" component={Open} />
<Route path="/bot/:id" component={InviteBot} /> <Route path="/bot/:id" component={InviteBot} />
<Route path="/invite/:code?" component={Invite} /> <Route path="/invite/:code?" component={Invite} />
<Route path="/" component={Home} /> <Route path="/" component={Home} />
</Switch> </Switch>
</Routes> </Routes>
<ContextMenus /> <ContextMenus />
<Popovers /> <Popovers />
<Notifications /> <Notifications />
<StateMonitor /> <StateMonitor />
</OverlappingPanels> </OverlappingPanels>
</AppContainer>
</> </>
); );
} }

View file

@ -31,8 +31,8 @@ export const Appearance = observer(() => {
<h3> <h3>
<Text id="app.settings.pages.appearance.theme_options.title" /> <Text id="app.settings.pages.appearance.theme_options.title" />
</h3> </h3>
<DisplaySeasonalShim />
<DisplayTransparencyShim /> <DisplayTransparencyShim />
<DisplaySeasonalShim />
<hr /> <hr />
<DisplayFontShim /> <DisplayFontShim />
<DisplayLigaturesShim /> <DisplayLigaturesShim />