OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use CSS var in JS 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-09-21 17:34:50 +02:00
parent f5d8bb7cbe
commit 499b470d07
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/elements/_ImageView.scss
View File

@ -18,6 +18,10 @@ $button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
:root {
--image-view-panel-height: 68px;
}
.mx_ImageView {
display: flex;
width: 100%;
@ -40,7 +44,7 @@ $button-gap: 24px;
.mx_ImageView_panel {
width: 100%;
height: 68px;
height: var(--image-view-panel-height);
display: flex;
justify-content: space-between;
align-items: center;

8
src/components/views/elements/ImageView.tsx
View File

@ -46,7 +46,11 @@ const ZOOM_COEFFICIENT = 0.0025;
const ZOOM_DISTANCE = 10;
// Height of mx_ImageView_panel
const PANEL_HEIGHT = 68;
const getPanelHeight = (): number => {
const value = getComputedStyle(document.documentElement).getPropertyValue("--image-view-panel-height");
// Return the value as a number without the unit
return parseInt(value.slice(0, value.length - 2));
};
interface IProps extends IDialogProps {
src: string; // the source of the image being displayed
@ -103,7 +107,7 @@ export default class ImageView extends React.Component<IProps, IState> {
thumbnailInfo?.positionY +
(thumbnailInfo?.height / 2) -
(UIStore.instance.windowHeight / 2) -
(PANEL_HEIGHT / 2)
(getPanelHeight() / 2)
) ?? 0,
moving: false,
contextMenuDisplayed: false,