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

Refactor shared notes viewing mode

Browse Source
This commit is contained in:
Tainan Felipe 2022-04-07 15:35:24 -03:00
parent 8a66702b0b
commit fd79d7e3d3
2 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
bigbluebutton-html5/imports/ui/components/pads/content/component.jsx
View File

@ -3,12 +3,25 @@ import Styled from './styles';
const PadContent = ({
content,
}) => (
<Styled.Wrapper>
<Styled.Content>
<div dangerouslySetInnerHTML={{ __html: content }} />
</Styled.Content>
</Styled.Wrapper>
);
}) => {
const contentSplit = content.split('<body>');
const contentStyle = `
<body>
<style type="text/css">
body {
${Styled.contentText}
}
</style>
`;
const contentWithStyle = [contentSplit[0], contentStyle, contentSplit[1]].join('');
return (
<Styled.Wrapper>
<Styled.Iframe
title="shared notes viewing mode"
srcDoc={contentWithStyle}
/>
</Styled.Wrapper>
);
};
export default PadContent;

60
bigbluebutton-html5/imports/ui/components/pads/content/styles.js
View File

@ -1,7 +1,6 @@
import styled from 'styled-components';
import {
colorGray,
colorGrayLightest,
} from '/imports/ui/stylesheets/styled-components/palette';
const Wrapper = styled.div`
@ -11,36 +10,41 @@ const Wrapper = styled.div`
width: 100%;
`;
const Content = styled.div`
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.15rem;
color: ${colorGray};
border-top: 1px solid ${colorGrayLightest};
border-bottom: 1px solid ${colorGrayLightest};
bottom: 0;
box-sizing: border-box;
display: flex;
overflow-x: hidden;
overflow-wrap: break-word;
overflow-y: auto;
padding-top: 1rem;
position: absolute;
const contentText = `
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: ${colorGray};
bottom: 0;
box-sizing: border-box;
display: flex;
overflow-x: hidden;
overflow-wrap: break-word;
word-break: break-all;
overflow-y: auto;
padding-top: 1rem;
position: absolute;
width: 100%;
top: 0;
[dir="ltr"] & {
padding-left: 1rem;
padding-right: .5rem;
}
[dir="rtl"] & {
padding-left: .5rem;
padding-right: 1rem;
}
`;
const Iframe = styled.iframe`
border-width: 0;
width: 100%;
top: 0;
white-space: pre-wrap;
[dir="ltr"] & {
padding-left: 1rem;
padding-right: .5rem;
}
[dir="rtl"] & {
padding-left: .5rem;
padding-right: 1rem;
}
`;
export default {
Wrapper,
Content,
Iframe,
contentText,
};