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

Redo icons

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-02-24 14:43:33 +01:00
parent fafb8d43a3
commit a6bb203a4b
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
2 changed files with 99 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
res/css/views/elements/_ImageView.scss
View file

@ -64,10 +64,10 @@ limitations under the License.
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px 0 32px;
}
.mx_ImageView_toolbar {
padding-right: 16px;
right: 0;
display: flex;
align-items: center;
@ -78,18 +78,65 @@ limitations under the License.
align-items: center;
}
.mx_ImageView_label {
.mx_ImageView_info_wrapper {
padding-left: 32px;
left: 0;
text-align: left;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 240px;
flex-direction: row;
color: $lightbox-fg-color;
align-items: center;
}
.mx_ImageView_info {
padding-left: 12px;
}
.mx_ImageView_button {
padding-left: 28px;
padding-left: 24px;
display: block;
&::before {
content: '';
height: 22px;
width: 22px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
display: block;
background-color: $icon-button-color;
}
}
.mx_ImageView_button_rotateCW::before {
mask-image: url('$(res)/img/image-view/rotate-cw.svg');
}
.mx_ImageView_button_rotateCCW::before {
mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
}
.mx_ImageView_button_zoomOut::before {
mask-image: url('$(res)/img/image-view/zoom-out.svg');
}
.mx_ImageView_button_zoomIn::before {
mask-image: url('$(res)/img/image-view/zoom-in.svg');
}
.mx_ImageView_button_download::before {
mask-image: url('$(res)/img/image-view/download.svg');
}
.mx_ImageView_button_close {
padding-left: 32px;
&::before {
width: 32px;
height: 32px;
mask-image: url('$(res)/img/image-view/close.svg');
background-color: none;
}
}
.mx_ImageView_metadata {

63
src/components/views/elements/ImageView.js
View file

@ -20,11 +20,12 @@ import PropTypes from 'prop-types';
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {formatDate} from '../../../DateUtils';
import { _t } from '../../../languageHandler';
import AccessibleButton from "./AccessibleButton";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
import Modal from "../../../Modal";
import * as sdk from "../../../index";
import {Key} from "../../../Keyboard";
import FocusLock from "react-focus-lock";
import MemberAvatar from "../avatars/MemberAvatar";
export default class ImageView extends React.Component {
static propTypes = {
@ -214,10 +215,7 @@ export default class ImageView extends React.Component {
}
metadata = (<div className="mx_ImageView_metadata">
{ _t('Uploaded on %(date)s by %(user)s', {
date: formatDate(new Date(this.props.mxEvent.getTs())),
user: sender,
}) }
{ formatDate(new Date(this.props.mxEvent.getTs())) }
</div>);
}
@ -236,6 +234,8 @@ export default class ImageView extends React.Component {
rotate(${rotationDegrees})`,
};
const event = this.props.mxEvent;
return (
<FocusLock
returnFocus={true}
@ -248,21 +248,52 @@ export default class ImageView extends React.Component {
>
<div className="mx_ImageView_content">
<div className="mx_ImageView_panel" onClick={this.onPanelClick}>
<div className="mx_ImageView_info_wrapper">
<MemberAvatar
member={event.sender}
width={32} height={32}
viewUserOnClick={true}
/>
<div className="mx_ImageView_info">
{ event.sender ? event.sender.name : event.getSender() }
{ metadata }
</div>
</div>
<div className="mx_ImageView_toolbar">
<div className="mx_ImageView_toolbar_buttons">
<img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
</AccessibleButton>
<AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
<img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="24" height="24" />
</AccessibleButton>
<a className="mx_ImageView_button" href={ this.props.src } download={ this.props.name } title={_t("Download")} target="_blank" rel="noopener">
<img src={require("../../../../res/img/image-view/download.svg")} width="24" height="24" alt={ _t('Download') } />
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCW"
title={_t("Rotate Right")}
onClick={this.onRotateClockwiseClick}>
</AccessibleTooltipButton>
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCCW"
title={_t("Rotate Left")}
onClick={ this.onRotateCounterClockwiseClick }>
</AccessibleTooltipButton>
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomOut"
title={_t("Zoom out")}
onClick={ this.onZoomOutClick }>
</AccessibleTooltipButton>
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomIn"
title={_t("Zoom in")}
onClick={ this.onZoomInClick }>
</AccessibleTooltipButton>
<a
className="mx_ImageView_button mx_ImageView_button_download"
href={ this.props.src }
download={ this.props.name }
title={_t("Download")}
target="_blank" rel="noopener">
</a>
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_close"
title={_t("Close")}
onClick={ this.props.onFinished }>
</AccessibleTooltipButton>
</div>
<AccessibleButton className="mx_ImageView_button" title={_t("Close")} onClick={ this.props.onFinished }>
<img src={require("../../../../res/img/image-view/close.svg")} width="32" height="32" alt={ _t('Close') } />
</AccessibleButton>
</div>
</div>
<div className="mx_ImageView_image_wrapper">