narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix overflow problem in content

Browse source
This commit is contained in:
sienori 2019-02-23 03:30:09 +09:00
parent f16826ab74
commit 267b25777e
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/content/components/TranslatePanel.js
View file

@ -16,7 +16,8 @@ export default class TranslatePanel extends Component {
panelPosition: { x: 0, y: 0 }, panelPosition: { x: 0, y: 0 },
panelWidth: 0, panelWidth: 0,
panelHeight: 0, panelHeight: 0,
shouldResize: true shouldResize: true,
isOverflow: false
}; };
this.isFirst = true; this.isFirst = true;
} }
@ -72,11 +73,14 @@ export default class TranslatePanel extends Component {
if (!this.state.shouldResize || !this.props.shouldShow) return; if (!this.state.shouldResize || !this.props.shouldShow) return;
const panelPosition = this.calcPosition(); const panelPosition = this.calcPosition();
const { panelWidth, panelHeight } = this.calcSize(); const { panelWidth, panelHeight } = this.calcSize();
const isOverflow = panelHeight == parseInt(getSettings("height"));
this.setState({ this.setState({
shouldResize: false, shouldResize: false,
panelPosition: panelPosition, panelPosition: panelPosition,
panelWidth: panelWidth, panelWidth: panelWidth,
panelHeight: panelHeight panelHeight: panelHeight,
isOverflow: isOverflow
}); });
}; };
@ -96,7 +100,7 @@ export default class TranslatePanel extends Component {
backgroundColor: getSettings("bgColor") backgroundColor: getSettings("bgColor")
}; };
const wrapperStyles = { const wrapperStyles = {
overflow: this.state.shouldResize ? "hidden" : "auto" overflow: this.state.isOverflow ? "auto" : "hidden"
}; };
const resultStyles = { const resultStyles = {
color: getSettings("resultFontColor") color: getSettings("resultFontColor")

3
src/content/styles/TranslatePanel.scss
View file

@ -2,6 +2,7 @@
.simple-translate-panel { .simple-translate-panel {
all: initial; all: initial;
position: fixed; position: fixed;
overflow: hidden;
background-color: var(--simple-translate-main-bg); background-color: var(--simple-translate-main-bg);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: 3px; border-radius: 3px;
@ -23,6 +24,8 @@
height: max-content; height: max-content;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
overflow: auto;
p { p {
all: initial; all: initial;
display: block; display: block;