imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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) // Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_copyButton { .mx_EventTile_button {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 31px; top: 6px;
right: 6px; right: 6px;
width: 19px; width: 19px;
height: 19px; height: 19px;
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color; background-color: $message-action-bar-fg-color;
} }
.mx_EventTile_buttonBottom {
top: 31px;
}
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton { .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); mask-image: url($collapse-button-url);
background-color: $message-action-bar-fg-color;
} }
.mx_EventTile_expandButton { .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); 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, .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. */ * when the <pre> overflows and is scrolled horizontally. */
const div = this._wrapInDiv(pres[i]); const div = this._wrapInDiv(pres[i]);
this._handleCodeBlockExpansion(pres[i]); this._handleCodeBlockExpansion(pres[i]);
this._addCodeCopyButton(div);
this._addCodeExpansionButton(div, pres[i]); this._addCodeExpansionButton(div, pres[i]);
this._addCodeCopyButton(div);
} }
} }
// Highlight code // Highlight code
@ -121,22 +121,28 @@ export default class TextualBody extends React.Component {
} }
_addCodeExpansionButton(div, pre) { _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"); const button = document.createElement("span");
button.className = "mx_EventTile_button ";
if (pre.className == "mx_EventTile_collapsedCodeBlock") { if (pre.className == "mx_EventTile_collapsedCodeBlock") {
button.className = "mx_EventTile_expandButton"; button.className += "mx_EventTile_expandButton";
} else { } else {
button.className = "mx_EventTile_collapseButton"; button.className += "mx_EventTile_collapseButton";
} }
button.onclick = async () => { button.onclick = async () => {
button.className = "mx_EventTile_button ";
if (pre.className == "mx_EventTile_collapsedCodeBlock") { if (pre.className == "mx_EventTile_collapsedCodeBlock") {
pre.className = ""; pre.className = "";
button.className = "mx_EventTile_collapseButton"; button.className += "mx_EventTile_collapseButton";
} else { } else {
pre.className = "mx_EventTile_collapsedCodeBlock"; 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) { _addCodeCopyButton(div) {
const button = document.createElement("span"); 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 () => { button.onclick = async () => {
const copyCode = button.parentNode.getElementsByTagName("pre")[0]; const copyCode = button.parentNode.getElementsByTagName("pre")[0];
const successful = await copyPlaintext(copyCode.textContent); const successful = await copyPlaintext(copyCode.textContent);