diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 17e2167494..ddc51cf583 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -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 { diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js index 288d3495d3..28a087f77d 100644 --- a/src/components/views/elements/ImageView.js +++ b/src/components/views/elements/ImageView.js @@ -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 = (
- { _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())) }
); } @@ -236,6 +234,8 @@ export default class ImageView extends React.Component { rotate(${rotationDegrees})`, }; + const event = this.props.mxEvent; + return (
+
+ +
+ { event.sender ? event.sender.name : event.getSender() } + { metadata } +
+
- - { - - - { - - - { + + + + + + + + + + +
- - { -