mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 20:20:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added option to fav spaces (#52)

Browse source
This commit is contained in:
unknown 2021-09-05 18:56:34 +05:30
parent 2e58757bc9
commit cdf421f0f1
17 changed files with 269 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/app/organisms/navigation/Drawer.jsx
View file

@ -1,8 +1,10 @@
import React, { useState, useEffect } from 'react';
import './Drawer.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { selectTab, selectSpace } from '../../../client/action/navigation';
import ScrollView from '../../atoms/scroll/ScrollView';
@ -12,34 +14,42 @@ import Home from './Home';
import Directs from './Directs';
function Drawer() {
const [selectedTab, setSelectedTab] = useState('home');
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
function onTabChanged(tabId) {
function onTabSelected(tabId) {
setSelectedTab(tabId);
}
function onSpaceSelected(roomId) {
setSpaceId(roomId);
}
function onRoomLeaved(roomId) {
const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
if (lRoomIndex === -1) return;
if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
}
useEffect(() => {
navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
return () => {
navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
};
}, []);
return (
<div className="drawer">
<DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
<div className="drawer__content-wrapper">
{selectedTab === 'home' && <DrawerBreadcrumb />}
{selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
<div className="rooms__wrapper">
<ScrollView autoHide>
<div className="rooms-container">
{
selectedTab === 'home'
selectedTab !== cons.tabs.DIRECTS
? <Home spaceId={spaceId} />
: <Directs />
}

4
src/app/organisms/navigation/Drawer.scss
View file

@ -18,6 +18,10 @@
border-left: 1px solid var(--bg-surface-border);
}
& .header__title-wrapper .text {
font-weight: 500;
}
&__content-wrapper {
@extend .drawer-flexItem;
@extend .drawer-flexBox;

64
src/app/organisms/navigation/DrawerBreadcrumb.jsx
View file

@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './DrawerBreadcrumb.scss';
import initMatrix from '../../../client/initMatrix';
@ -13,50 +14,47 @@ import ScrollView from '../../atoms/scroll/ScrollView';
import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
function DrawerBreadcrumb() {
const [, forceUpdate] = useState({});
function DrawerBreadcrumb({ spaceId }) {
const scrollRef = useRef(null);
const mx = initMatrix.matrixClient;
const spacePath = navigation.selectedSpacePath;
function onSpaceSelected() {
forceUpdate({});
useEffect(() => {
requestAnimationFrame(() => {
if (scrollRef?.current === null) return;
scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
});
}
}, [spaceId]);
useEffect(() => {
navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
return () => {
navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
};
}, []);
if (spacePath.length === 0) return null;
if (spacePath.length === 1) return null;
return (
<div className="breadcrumb__wrapper">
<ScrollView ref={scrollRef} horizontal vertical={false} invisible>
<div className="breadcrumb">
<Button onClick={() => selectSpace(null)}>
<Text variant="b2">Home</Text>
</Button>
{
spacePath.map((spaceId, index) => (
<React.Fragment
key={spaceId}
>
<RawIcon size="extra-small" src={ChevronRightIC} />
<Button
className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
onClick={() => selectSpace(spaceId)}
spacePath.map((id, index) => {
if (index === 0) {
return (
<Button key={id} onClick={() => selectSpace(id)}>
<Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
</Button>
);
}
return (
<React.Fragment
key={id}
>
<Text variant="b2">{ mx.getRoom(spaceId).name }</Text>
</Button>
</React.Fragment>
))
<RawIcon size="extra-small" src={ChevronRightIC} />
<Button
className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
onClick={() => selectSpace(id)}
>
<Text variant="b2">{ mx.getRoom(id).name }</Text>
</Button>
</React.Fragment>
);
})
}
<div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
</div>
@ -65,4 +63,12 @@ function DrawerBreadcrumb() {
);
}
DrawerBreadcrumb.defaultProps = {
spaceId: null,
};
DrawerBreadcrumb.propTypes = {
spaceId: PropTypes.string,
};
export default DrawerBreadcrumb;

42
src/app/organisms/navigation/DrawerHeader.jsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import {
selectSpace, openPublicRooms, openCreateRoom, openInviteUser,
openPublicRooms, openCreateRoom, openInviteUser,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import Text from '../../atoms/text/Text';
import Header, { TitleWrapper } from '../../atoms/header/Header';
@ -15,32 +16,37 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
import StarIC from '../../../../public/res/ic/outlined/star.svg';
import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
function DrawerHeader({ selectedTab, spaceId }) {
const [, forceUpdate] = useState({});
const mx = initMatrix.matrixClient;
const tabName = selectedTab === 'home' ? 'Home' : 'Direct messages';
const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
const room = mx.getRoom(spaceId);
const spaceName = selectedTab === 'dm' ? null : (room?.name || null);
function handleBackClick() {
const spacePath = navigation.selectedSpacePath;
if (spacePath.length === 1) {
selectSpace(null);
return;
}
selectSpace(spacePath[spacePath.length - 2]);
}
const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
return (
<Header>
<TitleWrapper>
<Text variant="s1">{spaceName || tabName}</Text>
</TitleWrapper>
{ spaceName && <IconButton onClick={handleBackClick} tooltip="Back" src={ChevronLeftIC} size="normal" /> }
{ selectedTab === 'dm' && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
{ selectSpace !== 'dm' && !spaceName && (
{spaceName && (
<IconButton
size="extra-small"
variant={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'positive' : 'surface'}
tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Remove favourite' : 'Favourite'}
src={initMatrix.roomList.spaceShortcut.has(spaceId) ? FilledStarIC : StarIC}
onClick={() => {
if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
else createSpaceShortcut(spaceId);
forceUpdate({});
}}
/>
)}
{ selectedTab === cons.tabs.DIRECTS && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
{ selectedTab !== cons.tabs.DIRECTS && !spaceName && (
<>
<ContextMenu
content={(hideMenu) => (

24
src/app/organisms/navigation/Selector.jsx
View file

@ -5,20 +5,25 @@ import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import navigation from '../../../client/state/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import IconButton from '../../atoms/button/IconButton';
import RoomSelector from '../../molecules/room-selector/RoomSelector';
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
import StarIC from '../../../../public/res/ic/outlined/star.svg';
import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
function Selector({
roomId, isDM, drawerPostie, onClick,
}) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
const [, forceUpdate] = useState({});
@ -60,6 +65,23 @@ function Selector({
notificationCount={room.getUnreadNotificationCount('total') || 0}
isAlert={room.getUnreadNotificationCount('highlight') !== 0}
onClick={onClick}
options={(
!room.isSpaceRoom()
? null
: (
<IconButton
size="extra-small"
variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
onClick={() => {
if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
else createSpaceShortcut(roomId);
forceUpdate({});
}}
/>
)
)}
/>
);
}

48
src/app/organisms/navigation/SideBar.jsx
View file

@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
import colorMXID from '../../../util/colorMXID';
import logout from '../../../client/action/logout';
import {
changeTab, openInviteList, openPublicRooms, openSettings,
selectTab, openInviteList, openPublicRooms, openSettings,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
@ -55,29 +55,37 @@ function ProfileAvatarMenu() {
}
function SideBar() {
const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
+ initMatrix.roomList.inviteSpaces.size
+ initMatrix.roomList.inviteDirects.size;
const { roomList } = initMatrix;
const mx = initMatrix.matrixClient;
const totalInviteCount = () => roomList.inviteRooms.size
+ roomList.inviteSpaces.size
+ roomList.inviteDirects.size;
const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
const [selectedTab, setSelectedTab] = useState('home');
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [, forceUpdate] = useState({});
function onTabChanged(tabId) {
function onTabSelected(tabId) {
setSelectedTab(tabId);
}
function onInviteListChange() {
updateTotalInvites(totalInviteCount());
}
function onSpaceShortcutUpdated() {
forceUpdate({});
}
useEffect(() => {
navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
initMatrix.roomList.on(
cons.events.roomList.INVITELIST_UPDATED,
onInviteListChange,
);
return () => {
navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
initMatrix.roomList.removeListener(
cons.events.roomList.INVITELIST_UPDATED,
onInviteListChange,
@ -91,12 +99,30 @@ function SideBar() {
<ScrollView invisible>
<div className="scrollable-content">
<div className="featured-container">
<SidebarAvatar active={selectedTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
<SidebarAvatar active={selectedTab === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
<SidebarAvatar active={selectedTab === cons.tabs.HOME} onClick={() => selectTab(cons.tabs.HOME)} tooltip="Home" iconSrc={HomeIC} />
<SidebarAvatar active={selectedTab === cons.tabs.DIRECTS} onClick={() => selectTab(cons.tabs.DIRECTS)} tooltip="People" iconSrc={UserIC} />
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
</div>
<div className="sidebar-divider" />
<div className="space-container" />
<div className="space-container">
{
[...roomList.spaceShortcut].map((shortcut) => {
const sRoomId = shortcut;
const room = mx.getRoom(sRoomId);
return (
<SidebarAvatar
active={selectedTab === sRoomId}
key={sRoomId}
tooltip={room.name}
bgColor={colorMXID(room.roomId)}
imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
text={room.name.slice(0, 1)}
onClick={() => selectTab(shortcut)}
/>
);
})
}
</div>
</div>
</ScrollView>
</div>

2
src/app/organisms/navigation/SideBar.scss
View file

@ -44,7 +44,7 @@
var(--bg-surface-low),
var(--bg-surface-low-transparent));
position: sticky;
bottom: 0;
bottom: -1px;
left: 0;
}
}

43
src/app/organisms/room/PeopleDrawer.jsx
View file

@ -18,23 +18,15 @@ import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
function getPowerLabel(powerLevel) {
switch (powerLevel) {
case 100:
return 'Admin';
case 50:
return 'Mod';
default:
return null;
}
if (powerLevel > 9000) return 'Goku';
if (powerLevel > 100) return 'Founder';
if (powerLevel === 100) return 'Admin';
if (powerLevel >= 50) return 'Mod';
return null;
}
function compare(m1, m2) {
let aName = m1.name;
let bName = m2.name;
// remove "#" from the room name
// To ignore it in sorting
aName = aName.replaceAll('#', '');
bName = bName.replaceAll('#', '');
function AtoZ(m1, m2) {
const aName = m1.name;
const bName = m2.name;
if (aName.toLowerCase() < bName.toLowerCase()) {
return -1;
@ -45,25 +37,18 @@ function compare(m1, m2) {
return 0;
}
function sortByPowerLevel(m1, m2) {
let pl1 = String(m1.powerLevel);
let pl2 = String(m2.powerLevel);
const pl1 = m1.powerLevel;
const pl2 = m2.powerLevel;
if (pl1 === '100') pl1 = '90.9';
if (pl2 === '100') pl2 = '90.9';
if (pl1.toLowerCase() > pl2.toLowerCase()) {
return -1;
}
if (pl1.toLowerCase() < pl2.toLowerCase()) {
return 1;
}
if (pl1 > pl2) return -1;
if (pl1 < pl2) return 1;
return 0;
}
function PeopleDrawer({ roomId }) {
const PER_PAGE_MEMBER = 50;
const room = initMatrix.matrixClient.getRoom(roomId);
const totalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
const totalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
const [memberList, updateMemberList] = useState([]);
let isRoomChanged = false;
@ -75,7 +60,7 @@ function PeopleDrawer({ roomId }) {
updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER));
room.loadMembersIfNeeded().then(() => {
if (isRoomChanged) return;
const newTotalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
const newTotalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER));
});

4
src/app/organisms/room/RoomViewCmdBar.jsx
View file

@ -10,6 +10,7 @@ import cons from '../../../client/state/cons';
import { toggleMarkdown } from '../../../client/action/settings';
import * as roomActions from '../../../client/action/room';
import {
selectTab,
selectRoom,
openCreateRoom,
openPublicRooms,
@ -357,7 +358,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
}
function fireCmd(myCmd) {
if (myCmd.prefix.match(/^>[*#@]$/)) {
selectRoom(myCmd.result.roomId);
if (cmd.prefix === '>*') selectTab(myCmd.result.roomId);
else selectRoom(myCmd.result.roomId);
viewEvent.emit('cmd_fired');
}
if (myCmd.prefix === '/') {