cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add collapsible section component.

Browse source 
Can now collapse server categories.
Client remembers collapse state, incl. advanced appearance settings.
This commit is contained in:
Paul 2021-07-04 15:53:06 +01:00
parent 098e28113b
commit 1768264272
13 changed files with 157 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/common/CollapsibleSection.tsx Normal file
View file

@ -0,0 +1,52 @@
import Details from "../ui/Details";
import { State, store } from "../../redux";
import { Action } from "../../redux/reducers";
import { Children } from "../../types/Preact";
import { ChevronDown } from "@styled-icons/boxicons-regular";
interface Props {
id: string;
defaultValue: boolean;
sticky?: boolean;
large?: boolean;
summary: Children;
children: Children;
}
export default function CollapsibleSection({ id, defaultValue, summary, children, ...detailsProps }: Props) {
const state: State = store.getState();
function setState(state: boolean) {
if (state === defaultValue) {
store.dispatch({
type: 'SECTION_TOGGLE_UNSET',
id
} as Action);
} else {
store.dispatch({
type: 'SECTION_TOGGLE_SET',
id,
state
} as Action);
}
}
return (
<Details
open={state.sectionToggle[id] ?? defaultValue}
onToggle={e => setState(e.currentTarget.open)}
{...detailsProps}>
<summary>
<ChevronDown size={20} />
{ summary }
{/*<Overline type="subtle" className="overline">*/}
{/*<div className="title">*/}
{/*</div>*/}
{/*</Overline>*/}
</summary>
{ children }
</Details>
)
}

13
src/components/navigation/left/HomeSidebar.tsx
View file

@ -1,4 +1,4 @@
import { Localizer, Text } from "preact-i18n";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
@ -105,16 +105,9 @@ function HomeSidebar(props: Props) {
</ButtonItem>
</Link>
)}
<Localizer>
<Category
text={
(
<Text id="app.main.categories.conversations" />
) as any
}
action={() => openScreen({ id: "special_input", type: "create_group" })}
/>
</Localizer>
text={<Text id="app.main.categories.conversations" />}
action={() => openScreen({ id: "special_input", type: "create_group" })} />
{channelsArr.length === 0 && <img src={placeholderSVG} />}
{channelsArr.map(x => {
let user;

21
src/components/navigation/left/ServerSidebar.tsx
View file

@ -14,6 +14,7 @@ import ServerHeader from "../../common/ServerHeader";
import { useEffect } from "preact/hooks";
import Category from "../../ui/Category";
import ConditionalLink from "../../../lib/ConditionalLink";
import CollapsibleSection from "../../common/CollapsibleSection";
interface Props {
unreads: Unreads;
@ -69,6 +70,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
let uncategorised = new Set(server.channels);
let elements = [];
function addChannel(id: string) {
const entry = channels.find(x => x._id === id);
if (!entry) return;
@ -76,9 +78,8 @@ function ServerSidebar(props: Props & WithDispatcher) {
const active = channel?._id === entry._id;
return (
<ConditionalLink active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
<ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton
key={entry._id}
channel={entry}
active={active}
alert={entry.unread}
@ -90,16 +91,24 @@ function ServerSidebar(props: Props & WithDispatcher) {
if (server.categories) {
for (let category of server.categories) {
elements.push(<Category text={category.title} />);
let channels = [];
for (let id of category.channels) {
uncategorised.delete(id);
elements.push(addChannel(id));
channels.push(addChannel(id));
}
elements.push(
<CollapsibleSection
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
{ channels }
</CollapsibleSection>
);
}
}
for (let id of uncategorised) {
for (let id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}

2
src/components/ui/Category.tsx
View file

@ -31,7 +31,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
` }
`;
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
text: Children;
action?: () => void;
variant?: 'default' | 'uniform';

19
src/components/ui/Details.tsx
View file

@ -1,16 +1,29 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
export default styled.details`
export default styled.details<{ sticky?: boolean, large?: boolean }>`
summary {
${ props => props.sticky && css`
top: -1px;
z-index: 10;
position: sticky;
` }
${ props => props.large && css`
padding: 5px 0;
` }
outline: none;
display: flex;
cursor: pointer;
list-style: none;
align-items: center;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
> svg {
flex-shrink: 0;
transition: .2s ease transform;
}

4
src/components/ui/Overline.tsx
View file

@ -5,6 +5,7 @@ import { Text } from 'preact-i18n';
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
error?: string;
block?: boolean;
spaced?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
}
@ -12,7 +13,10 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
margin: 0.4em 0;
${ props => props.spaced && css`
margin-top: 0.8em;
` }
font-size: 14px;
font-weight: 600;

6
src/context/Locale.tsx
View file

@ -150,12 +150,6 @@ function Locale({ children, locale }: Props) {
return;
}
if (lang.i18n === "hardcore") {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setDefinition({} as any);
return;
}
import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
const defn = transformLanguage(lang_file.default);

24
src/pages/friends/Friend.module.scss
View file

@ -15,30 +15,6 @@
user-select: none;
overflow-y: scroll;
summary {
position: sticky;
z-index: 10;
top: -1px;
}
.overline {
display: flex;
align-items: center;
background: var(--primary-background);
padding: 5px 0;
cursor: pointer;
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
svg {
margin-inline-end: 4px;
}
}
&[data-empty="true"] {
img {
height: 120px;

31
src/pages/friends/Friends.tsx
View file

@ -15,6 +15,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
import Details from "../../components/ui/Details";
import CollapsibleSection from "../../components/common/CollapsibleSection";
export default function Friends() {
const { openScreen } = useIntermediate();
@ -30,17 +31,17 @@ export default function Friends() {
) ],
[ 'app.special.friends.sent', users.filter(x =>
x.relationship === Users.Relationship.Outgoing
) ],
), 'outgoing' ],
[ 'app.status.online', friends.filter(x =>
x.online && x.status?.presence !== Users.Presence.Invisible
) ],
), 'online' ],
[ 'app.status.offline', friends.filter(x =>
!x.online || x.status?.presence === Users.Presence.Invisible
) ],
[ 'app.special.friends.blocked', friends.filter(x =>
), 'offline' ],
[ 'app.special.friends.blocked', users.filter(x =>
x.relationship === Users.Relationship.Blocked
) ]
] as [ string, User[] ][];
), 'blocked' ]
] as [ string, User[], string ][];
const incoming = lists[0][1];
const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
@ -108,22 +109,18 @@ export default function Friends() {
</div> }
{
lists.map(([i18n, list], index) => {
lists.map(([i18n, list, section_id], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (
<Details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
<div className={styles.title}>
<Text id={i18n} /> — { list.length }
</div>
</Overline>
</summary>
<CollapsibleSection
id={`friends_${section_id}`}
defaultValue={true}
sticky large
summary={<Overline type="subtle" className="overline"><Text id={i18n} /> — { list.length }</Overline>}>
{ list.map(x => <Friend key={x._id} user={x} />) }
</Details>
</CollapsibleSection>
)
})
}

9
src/pages/settings/panes/Appearance.tsx
View file

@ -22,6 +22,7 @@ import mutantSVG from '../assets/mutant_emoji.svg';
import notoSVG from '../assets/noto_emoji.svg';
import openmojiSVG from '../assets/openmoji_emoji.svg';
import twemojiSVG from '../assets/twemoji_emoji.svg';
import CollapsibleSection from "../../../components/common/CollapsibleSection";
interface Props {
settings: Settings;
@ -171,11 +172,7 @@ export function Component(props: Props & WithDispatcher) {
</div>
</div>
<details>
<summary>
<Text id="app.settings.pages.appearance.advanced" />
<div className={styles.divider}></div>
</summary>
<CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
@ -272,7 +269,7 @@ export function Component(props: Props & WithDispatcher) {
code
value={css}
onChange={ev => setCSS(ev.currentTarget.value)} />
</details>
</CollapsibleSection>
</div>
);
}

8
src/redux/index.ts
View file

@ -14,6 +14,7 @@ import { QueuedMessage } from "./reducers/queue";
import { ExperimentOptions } from "./reducers/experiments";
import { LastOpened } from "./reducers/last_opened";
import { Notifications } from "./reducers/notifications";
import { SectionToggle } from "./reducers/section_toggle";
export type State = {
config: Core.RevoltNodeConfiguration,
@ -28,6 +29,7 @@ export type State = {
experiments: ExperimentOptions;
lastOpened: LastOpened;
notifications: Notifications;
sectionToggle: SectionToggle;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -56,7 +58,8 @@ store.subscribe(() => {
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
} = store.getState() as State;
localForage.setItem("state", {
@ -70,6 +73,7 @@ store.subscribe(() => {
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
});
});

5
src/redux/reducers/index.ts
View file

@ -13,6 +13,7 @@ import { sync, SyncAction } from "./sync";
import { experiments, ExperimentsAction } from "./experiments";
import { lastOpened, LastOpenedAction } from "./last_opened";
import { notifications, NotificationsAction } from "./notifications";
import { sectionToggle, SectionToggleAction } from "./section_toggle";
export default combineReducers({
config,
@ -26,7 +27,8 @@ export default combineReducers({
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
});
export type Action =
@ -42,6 +44,7 @@ export type Action =
| ExperimentsAction
| LastOpenedAction
| NotificationsAction
| SectionToggleAction
| { type: "__INIT"; state: State };
export type WithDispatcher = { dispatcher: (action: Action) => void };

37
src/redux/reducers/section_toggle.ts Normal file
View file

@ -0,0 +1,37 @@
export interface SectionToggle {
[key: string]: boolean
}
export type SectionToggleAction =
| { type: undefined }
| {
type: "SECTION_TOGGLE_SET";
id: string;
state: boolean;
}
| {
type: "SECTION_TOGGLE_UNSET";
id: string;
}
| {
type: "RESET";
};
export function sectionToggle(state = {} as SectionToggle, action: SectionToggleAction): SectionToggle {
switch (action.type) {
case "SECTION_TOGGLE_SET": {
return {
...state,
[action.id]: action.state
}
}
case "SECTION_TOGGLE_UNSET": {
const { [action.id]: _, ...newState } = state;
return newState;
}
case "RESET":
return {};
default:
return state;
}
}