Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Handle small codeblocks

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-01-20 15:01:23 +01:00
parent f8179f0c7a
commit 14bf169631
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
2 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
res/css/views/rooms/_EventTile.scss
View File

@ -516,41 +516,28 @@ $left-gutter: 64px;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_copyButton {
.mx_EventTile_button {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 31px;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_buttonBottom {
top: 31px;
}
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
mask-image: url($collapse-button-url);
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_expandButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
mask-image: url($expand-button-url);
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,

26
src/components/views/messages/TextualBody.js
View File

@ -99,8 +99,8 @@ export default class TextualBody extends React.Component {
* when the <pre> overflows and is scrolled horizontally. */
const div = this._wrapInDiv(pres[i]);
this._handleCodeBlockExpansion(pres[i]);
this._addCodeCopyButton(div);
this._addCodeExpansionButton(div, pres[i]);
this._addCodeCopyButton(div);
}
}
// Highlight code
@ -121,22 +121,28 @@ export default class TextualBody extends React.Component {
}
_addCodeExpansionButton(div, pre) {
// TODO: What if the block is small and the we don't need the icon?
/* Calculate how many percent does the pre element take up.
* If it's less than 30% we don't add the expansion button. */
const percentageOfViewport = pre.offsetHeight / window.innerHeight * 100;
console.log("expansionButtonExists", percentageOfViewport);
if (percentageOfViewport < 30) return;
const button = document.createElement("span");
button.className = "mx_EventTile_button ";
if (pre.className == "mx_EventTile_collapsedCodeBlock") {
button.className = "mx_EventTile_expandButton";
button.className += "mx_EventTile_expandButton";
} else {
button.className = "mx_EventTile_collapseButton";
button.className += "mx_EventTile_collapseButton";
}
button.onclick = async () => {
button.className = "mx_EventTile_button ";
if (pre.className == "mx_EventTile_collapsedCodeBlock") {
pre.className = "";
button.className = "mx_EventTile_collapseButton";
button.className += "mx_EventTile_collapseButton";
} else {
pre.className = "mx_EventTile_collapsedCodeBlock";
button.className = "mx_EventTile_expandButton";
button.className += "mx_EventTile_expandButton";
}
};
@ -145,7 +151,13 @@ export default class TextualBody extends React.Component {
_addCodeCopyButton(div) {
const button = document.createElement("span");
button.className = "mx_EventTile_copyButton";
button.className = "mx_EventTile_button mx_EventTile_copyButton ";
/* Check if expansion button exists. If so
* we put the copy button to the bottom */
const expansionButtonExists = div.getElementsByClassName("mx_EventTile_button");
if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom";
button.onclick = async () => {
const copyCode = button.parentNode.getElementsByTagName("pre")[0];
const successful = await copyPlaintext(copyCode.textContent);