Fixed preview position

cvat-ai · Mar 24, 2020 · f1488fc · f1488fc
1 parent 0d9f4d4
commit f1488fc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/cvat-ui/src/components/task-page/details.tsx b/cvat-ui/src/components/task-page/details.tsx
@@ -44,13 +44,17 @@ interface State {
 
 export default class DetailsComponent extends React.PureComponent<Props, State> {
     private mounted: boolean;
+    private previewImageElement: HTMLImageElement;
+    private previewWrapperRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Props) {
         super(props);
 
         const { taskInstance } = props;
 
         this.mounted = false;
+        this.previewImageElement = new Image();
+        this.previewWrapperRef = React.createRef<HTMLDivElement>();
         this.state = {
             name: taskInstance.name,
             bugTracker: taskInstance.bugTracker,
@@ -60,9 +64,25 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
     }
 
     public componentDidMount(): void {
-        const { taskInstance } = this.props;
+        const { taskInstance, previewImage } = this.props;
+        const { previewImageElement, previewWrapperRef } = this;
         this.mounted = true;
 
+        previewImageElement.onload = () => {
+            const { height, width } = previewImageElement;
+            if (width > height) {
+                previewImageElement.style.width = '100%';
+            } else {
+                previewImageElement.style.height = '100%';
+            }
+        };
+
+        previewImageElement.src = previewImage;
+        previewImageElement.alt = 'Preview';
+        if (previewWrapperRef.current) {
+            previewWrapperRef.current.appendChild(previewImageElement);
+        }
+
         getReposData(taskInstance.id)
             .then((data): void => {
                 if (data !== null && this.mounted) {
@@ -135,11 +155,11 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
     }
 
     private renderPreview(): JSX.Element {
-        const { previewImage } = this.props;
+        const { previewWrapperRef } = this;
+
+        // Add image on mount after get its width and height to fit it into wrapper
         return (
-            <div className='cvat-task-preview-wrapper'>
-                <img alt='Preview' className='cvat-task-preview' src={previewImage} />
-            </div>
+            <div ref={previewWrapperRef} className='cvat-task-preview-wrapper' />
         );
     }
 

diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss
@@ -76,15 +76,14 @@
 }
 
 .cvat-task-preview-wrapper {
-    display: flex;
-    justify-content: flex-start;
     overflow: hidden;
     margin-bottom: 20px;
-
-    > .cvat-task-preview {
-        max-width: 252px;
-        max-height: 144px;
-    }
+    width: 252px;
+    height: 144px;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    background-color: $background-color-2;
 }
 
 .cvat-user-selector {