BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[chat-list-migration] - part 2 of PR review suggestions

Browse Source
This commit is contained in:
GuiLeme 2023-05-04 17:42:03 -03:00
parent a0771e5677
commit 5a4bfef7eb
4 changed files with 94 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
bigbluebutton-html5/imports/ui/components/shortcut-help/useShortcutHelp.tsx
View File

@ -1,5 +1,6 @@
import getFromUserSettings from '/imports/ui/services/users-settings';
import { Meteor } from 'meteor/meteor'
import { useEffect, useRef } from 'react';
interface ShortcutObject {
accesskey: string,
@ -12,36 +13,41 @@ interface Accumulator {
const BASE_SHORTCUTS: Array<ShortcutObject> = Meteor.settings.public.app.shortcuts;
const useShortcutHelp = (param?: string) => {
function useShortcutHelp(param?: string): Object | string | undefined {
const shortcut = useRef<Object | string>();
useEffect(() => {
const ENABLED_SHORTCUTS = getFromUserSettings('bbb_shortcuts', null);
let shortcuts: ShortcutObject[] = Object.values(BASE_SHORTCUTS);
let shortcuts: ShortcutObject[] = Object.values(BASE_SHORTCUTS);
if (ENABLED_SHORTCUTS) {
shortcuts = Object.values(BASE_SHORTCUTS).map((el: ShortcutObject) => {
const obj = { ...el };
obj.descId = obj.descId.toLowerCase();
return obj;
}).filter((el: ShortcutObject) => ENABLED_SHORTCUTS.includes(el.descId.toLowerCase()));
}
let shortcutsString: Object | undefined = {};
if (param !== undefined) {
if (!Array.isArray(param)) {
shortcutsString = shortcuts
.filter(el => el.descId.toLowerCase() === param.toLowerCase())
.map(el => el.accesskey)
.pop();
} else {
shortcutsString = shortcuts
.filter(el => param.map(p => p.toLowerCase()).includes(el.descId.toLowerCase()))
.reduce((acc: Accumulator, current: ShortcutObject) => {
acc[current.descId.toLowerCase()] = current.accesskey;
return acc;
}, {});
if (ENABLED_SHORTCUTS) {
shortcuts = Object.values(BASE_SHORTCUTS).map((el: ShortcutObject) => {
const obj = { ...el };
obj.descId = obj.descId.toLowerCase();
return obj;
}).filter((el: ShortcutObject) => ENABLED_SHORTCUTS.includes(el.descId.toLowerCase()));
}
}
return shortcutsString;
let shortcutsString: Object | undefined;
if (param !== undefined) {
if (!Array.isArray(param)) {
shortcutsString = shortcuts
.filter(el => el.descId.toLowerCase() === param.toLowerCase())
.map(el => el.accesskey)
.pop();
} else {
shortcutsString = shortcuts
.filter(el => param.map(p => p.toLowerCase()).includes(el.descId.toLowerCase()))
.reduce((acc: Accumulator, current: ShortcutObject) => {
acc[current.descId.toLowerCase()] = current.accesskey;
return acc;
}, {});
}
}
shortcut.current = shortcutsString;
}, [])
return shortcut.current;
}
export { useShortcutHelp };

2
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/component.tsx
View File

@ -43,7 +43,7 @@ const ChatListItem = (props: ChatListItemProps) => {
const { sidebarContentPanel } = sidebarContent;
const sidebarContentIsOpen = sidebarContent.isOpen;
const TOGGLE_CHAT_PUB_AK: Object | undefined = useShortcutHelp();
const TOGGLE_CHAT_PUB_AK: Object | string | undefined = useShortcutHelp("togglePublicChat");
const {
chat,
} = props;

65
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/chat-list-item/styles.ts
View File

@ -1,6 +1,4 @@
import styled from 'styled-components';
import Styled from '/imports/ui/components/user-list/styles';
import ContentStyled from '/imports/ui/components/user-list/user-list-content/styles';
import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
import {
lgPaddingY,
@ -16,6 +14,8 @@ import {
colorWhite,
userListBg,
colorSuccess,
itemFocusBorder,
unreadMessagesBg,
} from '/imports/ui/stylesheets/styled-components/palette';
interface UserAvatarProps {
@ -150,7 +150,41 @@ const ChatNameMain = styled.span`
`}
`;
const ChatListItem = styled(Styled.ListItem)`
const ChatListItem = styled.div`
display: flex;
flex-flow: row;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: pointer;
[dir="rtl"] & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
&:first-child {
margin-top: 0;
}
&:hover {
outline: transparent;
outline-style: dotted;
outline-width: ${borderSize};
background-color: ${listItemBgHover};
}
&:active,
&:focus {
outline: transparent;
outline-width: ${borderSize};
outline-style: solid;
background-color: ${listItemBgHover};
box-shadow: inset 0 0 0 ${borderSize} ${itemFocusBorder}, inset 1px 0 0 1px ${itemFocusBorder};
}
cursor: pointer;
text-decoration: none;
flex-grow: 1;
@ -182,8 +216,29 @@ const ChatThumbnail = styled.div`
font-size: 175%;
`;
const UnreadMessages = styled(ContentStyled.UnreadMessages)``;
const UnreadMessagesText = styled(ContentStyled.UnreadMessagesText)``;
const UnreadMessages = styled.div`
display: flex;
flex-flow: column;
justify-content: center;
margin-left: auto;
[dir="rtl"] & {
margin-right: auto;
margin-left: 0;
}
`;
const UnreadMessagesText = styled.div`
display: flex;
flex-flow: column;
margin: 0;
justify-content: center;
color: ${colorWhite};
line-height: calc(1rem + 1px);
padding: 0 0.5rem;
text-align: center;
border-radius: 0.5rem/50%;
font-size: 0.8rem;
background-color: ${unreadMessagesBg};
`;
export default {
ChatListItemLink,

4
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/chat-list/styles.ts
View File

@ -115,9 +115,7 @@ margin: 0 0 1px ${mdPaddingY};
const ListTransition = styled.div`
display: flex;
flex-flow: column;
margin: 0;
padding: 0;
padding-top: ${borderSize};
padding: ${borderSize} 0 0 0;.
outline: none;
overflow: hidden;
flex-shrink: 1;