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

Partially fix overflow issues 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-02-24 11:15:59 +01:00
parent ab79deb88f
commit 899ce1f605
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,14 +27,19 @@ limitations under the License.
.mx_ImageView_content {
width: 100%;
display: flex;
flex-direction: column;
}
.mx_ImageView_image_wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}
.mainImage {
.mx_ImageView_image {
object-fit: contain;
pointer-events: all;
@ -43,6 +48,8 @@ limitations under the License.
min-width: 100px;
min-height: 100px;
border-radius: 8px;
&:hover {
cursor: grab;
}
@ -51,7 +58,6 @@ limitations under the License.
.mx_ImageView_panel {
width: 100%;
height: 68px;
position: absolute;
z-index: 1000;
align-self: flex-start;
pointer-events: all;
@ -62,7 +68,6 @@ limitations under the License.
.mx_ImageView_toolbar {
right: 0;
padding-right: 18px;
display: flex;
align-items: center;
}
@ -74,7 +79,6 @@ limitations under the License.
.mx_ImageView_label {
left: 0;
padding-left: 18px;
text-align: left;
display: flex;
justify-content: center;

24
src/components/views/elements/ImageView.js
View File

@ -286,17 +286,19 @@ export default class ImageView extends React.Component {
</AccessibleButton>
</div>
</div>
<img
src={this.props.src}
title={this.props.name}
style={style}
className="mainImage"
draggable={true}
onMouseDown={this.onStartMoving}
onMouseMove={this.onMoving}
onMouseUp={this.onEndMoving}
onMouseLeave={this.onEndMoving}
/>
<div className="mx_ImageView_image_wrapper">
<img
src={this.props.src}
title={this.props.name}
style={style}
className="mx_ImageView_image"
draggable={true}
onMouseDown={this.onStartMoving}
onMouseMove={this.onMoving}
onMouseUp={this.onEndMoving}
onMouseLeave={this.onEndMoving}
/>
</div>
</div>
</FocusLock>
);