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

convert shortcut-help component

Browse Source
This commit is contained in:
Ramón Souza 2021-10-26 19:03:38 +00:00
parent d1f321f3d5
commit 814b5caa1d
3 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx
View File

@ -5,7 +5,7 @@ import browserInfo from '/imports/utils/browserInfo';
import deviceInfo from '/imports/utils/deviceInfo';
import Modal from '/imports/ui/components/modal/simple/component';
import _ from 'lodash';
import { styles } from './styles';
import Styled from './styles';
import withShortcutHelper from './service';
const intlMessages = defineMessages({
@ -137,37 +137,37 @@ const ShortcutHelpComponent = (props) => {
if (!CHAT_ENABLED && shortcut.descId.indexOf('Chat') !== -1) return null;
return (
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>{`${accessMod} + ${shortcut.accesskey}`}</td>
<td className={styles.descCell}>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</td>
<Styled.KeyCell>{`${accessMod} + ${shortcut.accesskey}`}</Styled.KeyCell>
<Styled.DescCell>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</Styled.DescCell>
</tr>
);
});
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Spacebar</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.togglePan)}</td>
<Styled.KeyCell>Spacebar</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.togglePan)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Enter</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.toggleFullscreen)}</td>
<Styled.KeyCell>Enter</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.toggleFullscreen)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Right Arrow</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.nextSlideDesc)}</td>
<Styled.KeyCell>Right Arrow</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.nextSlideDesc)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Left Arrow</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.previousSlideDesc)}</td>
<Styled.KeyCell>Left Arrow</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.previousSlideDesc)}</Styled.DescCell>
</tr>
));
@ -182,7 +182,7 @@ const ShortcutHelpComponent = (props) => {
{!accessMod ? <p>{intl.formatMessage(intlMessages.accessKeyNotAvailable)}</p>
: (
<span>
<table className={styles.shortcutTable}>
<Styled.ShortcutTable>
<tbody>
<tr>
<th>{intl.formatMessage(intlMessages.comboLabel)}</th>
@ -190,7 +190,7 @@ const ShortcutHelpComponent = (props) => {
</tr>
{shortcutItems}
</tbody>
</table>
</Styled.ShortcutTable>
</span>
)
}

28
bigbluebutton-html5/imports/ui/components/shortcut-help/styles.js Normal file
View File

@ -0,0 +1,28 @@
import styled from 'styled-components';
import { borderSize, smPaddingX } from '/imports/ui/stylesheets/styled-components/general';
import { colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
const KeyCell = styled.td`
border: ${borderSize} solid ${colorGrayLighter};
text-align: center;
padding: ${smPaddingX};
margin: auto;
`;
const DescCell = styled.td`
border: ${borderSize} solid ${colorGrayLighter};
padding: ${smPaddingX};
margin: auto;
`;
const ShortcutTable = styled.table`
border: ${borderSize} solid ${colorGrayLighter};
border-collapse: collapse;
margin: auto;
`;
export default {
KeyCell,
DescCell,
ShortcutTable,
};

29
bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
View File

@ -1,29 +0,0 @@
.shortcutTable,
.keyCell,
.descCell,
.tableTitle {
border: var(--border-size) solid var(--color-gray-lighter);
}
.keyCell {
text-align: center;
}
.descCell {
padding: 0 var(--jumbo-padding-x) !important 0 0;
}
.keyCell,
.descCell {
padding: var(--sm-padding-x);
margin: auto;
}
.shortcutTable {
border-collapse: collapse;
margin: auto;
}
.tableTitle {
padding: var(--sm-padding-x);
}