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

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

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