Redo icons

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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;
+    flex-direction: row;
-    max-width: 240px;
     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 {

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 = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {
+                { formatDate(new Date(this.props.mxEvent.getTs())) }
-                    date: formatDate(new Date(this.props.mxEvent.getTs())),
-                    user: sender,
-                }) }
             </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">
-                                
+                                <AccessibleTooltipButton
-                                    <img src={require("../../../../res/img/image-view/zoom-out.svg")} alt={ _t('Zoom out') } width="24" height="24" />
+                                    className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                                </AccessibleButton>
+                                    title={_t("Rotate Right")}
-                                <AccessibleButton className="mx_ImageView_button" title={_t("Zoom in")} onClick={ this.onZoomInClick }>
+                                    onClick={this.onRotateClockwiseClick}>
-                                    <img src={require("../../../../res/img/image-view/zoom-in.svg")} alt={ _t('Zoom in') } width="24" height="24" />
+                                </AccessibleTooltipButton>
-                                </AccessibleButton>
+                                <AccessibleTooltipButton
-                                <a className="mx_ImageView_button" href={ this.props.src } download={ this.props.name } title={_t("Download")} target="_blank" rel="noopener">
+                                    className="mx_ImageView_button mx_ImageView_button_rotateCCW"
-                                    <img src={require("../../../../res/img/image-view/download.svg")} width="24" height="24" alt={ _t('Download') } />
+                                    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">