mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 11:15:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix incorrectly positioned copy button on <pre> blocks

Browse source
This commit is contained in:
Luke Barnard 2018-06-27 11:31:55 +01:00
parent 4c575bb1ca
commit 6345fcb8f2
2 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -400,6 +400,12 @@ limitations under the License.
color: #333; color: #333;
} }
.mx_EventTile_pre_container {
// For correct positioning of _copyButton (See TextualBody)
position: relative;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_copyButton { .mx_EventTile_copyButton {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -413,7 +419,6 @@ limitations under the License.
} }
.mx_EventTile_body pre { .mx_EventTile_body pre {
position: relative;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -422,7 +427,7 @@ limitations under the License.
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
} }
.mx_EventTile_body pre:hover .mx_EventTile_copyButton .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
{ {
visibility: visible; visibility: visible;
} }

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

@ -340,7 +340,18 @@ module.exports = React.createClass({
}, false); }, false);
e.target.onmouseleave = close; e.target.onmouseleave = close;
}; };
p.appendChild(button);
// Wrap a div around <pre> so that the copy button can be correctly positioned
// when the <pre> overflows and is scrolled horizontally.
const div = document.createElement("div");
div.className = "mx_EventTile_pre_container";
// Insert containing div in place of <pre> block
p.parentNode.replaceChild(div, p);
// Append <pre> block and copy button to container
div.appendChild(p);
div.appendChild(button);
}); });
}, },