PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

This somehow works

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-01-19 21:02:39 +01:00
parent 95939f3d6c
commit 58b2c18cf5
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
6 changed files with 124 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
res/css/views/rooms/_EventTile.scss
View file

@ -521,16 +521,60 @@ $left-gutter: 64px;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
top: 31px;
right: 6px;
width: 19px;
height: 19px;
mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
.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,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
visibility: visible;
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton {
visibility: visible;
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
visibility: visible;
}*/
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
visibility: visible;
}

24
res/img/feather-customised/maximize.svg Normal file
View file

@ -0,0 +1,24 @@
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2">
<polyline
points="15 3 21 3 21 9"
id="polyline2"
transform="matrix(0.60029695,0,0,0.59437231,1.7964367,1.8097068)" />
<polyline
points="9 21 3 21 3 15"
id="polyline4"
transform="matrix(0.60029695,0,0,0.59437231,1.7964367,1.8097068)" />
<line
x1="14.402673"
y1="3.5928237"
x2="10.200594"
y2="7.7534299"
id="line6"
style="stroke-width:1.19465" />
<line
x1="3.5973275"
y1="14.291526"
x2="7.7994061"
y2="10.130919"
id="line8"
style="stroke-width:1.19465" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,004 B

24
res/img/feather-customised/minimize.svg Normal file
View file

@ -0,0 +1,24 @@
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2">
<polyline
points="4 14 10 14 10 20"
id="polyline2"
transform="matrix(0.60000002,0,0,0.6,1.8000002,1.8000004)" />
<polyline
points="20 10 14 10 14 4"
id="polyline4"
transform="matrix(0.60000002,0,0,0.6,1.8000002,1.8000004)" />
<line
x1="10.200001"
y1="7.8000002"
x2="14.4"
y2="3.6000004"
id="line6"
style="stroke-width:1.2" />
<line
x1="3.6000001"
y1="14.4"
x2="7.8000007"
y2="10.2"
id="line8"
style="stroke-width:1.2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 971 B

3
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -237,7 +237,8 @@ $event-redacted-border-color: #cccccc;
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
$collapse-button-url: "$(res)/img/feather-customised/minimize.svg";
$expand-button-url: "$(res)/img/feather-customised/maximize.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

2
res/themes/light/css/_light.scss
View file

@ -237,6 +237,8 @@ $event-redacted-border-color: #cccccc;
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
$collapse-button-url: "$(res)/img/feather-customised/minimize.svg";
$expand-button-url: "$(res)/img/feather-customised/maximize.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

27
src/components/views/messages/TextualBody.js
View file

@ -97,8 +97,9 @@ export default class TextualBody extends React.Component {
// Wrap a div around <pre> so that the copy button can be correctly positioned
// when the <pre> overflows and is scrolled horizontally.
const div = this._wrapInDiv(blocks[i]);
this._handleCodeBlockExpansion(div);
this._handleCodeBlockExpansion(div.firstChild);
this._addCodeCopyButton(div);
this._addCodeExpansionButton(div);
}
// Do this asynchronously: parsing code takes time and we don't
// need to block the DOM update on it.
@ -112,6 +113,30 @@ export default class TextualBody extends React.Component {
}
}
_addCodeExpansionButton(codeBlock) {
// TODO: What if the block is small and the we don't need the icon?
const pre = codeBlock.getElementsByTagName("pre")[0];
const button = document.createElement("span");
if (pre.className == "mx_EventTile_collapsedCodeBlock") {
button.className = "mx_EventTile_expandButton";
} else {
button.className = "mx_EventTile_collapseButton";
}
button.onclick = async () => {
if (pre.className == "mx_EventTile_collapsedCodeBlock") {
pre.className = "";
button.className = "mx_EventTile_expandButton";
} else {
pre.className = "mx_EventTile_collapsedCodeBlock";
button.className = "mx_EventTile_collapseButton";
}
};
codeBlock.appendChild(button);
}
_addCodeCopyButton(codeBlock) {
const button = document.createElement("span");
button.className = "mx_EventTile_copyButton";