diff --git a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css index 158ee7f4f..a482cfe75 100644 --- a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css +++ b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.css @@ -11,7 +11,3 @@ .AssetPreview .GltfPreview.hidden { visibility: hidden; } - -.AssetPreview > .loading { - position: absolute; -} diff --git a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx index 0544be5e3..82c5090b3 100644 --- a/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx +++ b/packages/@dcl/inspector/src/components/AssetPreview/AssetPreview.tsx @@ -6,7 +6,6 @@ import { AiFillSound } from 'react-icons/ai' import { IoVideocamOutline } from 'react-icons/io5' import { FaFile } from 'react-icons/fa' -import { Loading } from '../Loading' import { toWearableWithBlobs } from './utils' import { Props } from './types' @@ -61,13 +60,12 @@ function GltfPreview({ value, resources, onScreenshot, onLoad }: Props) { id={value.name} blob={toWearableWithBlobs(value, resources)} disableAutoRotate - background="#3c3c3c" + disableBackground projection={PreviewProjection.ORTHOGRAPHIC} camera={PreviewCamera.STATIC} onLoad={handleLoad} /> - {loading && } ) } diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.css b/packages/@dcl/inspector/src/components/Assets/Assets.css index ede2489ee..55143dda3 100644 --- a/packages/@dcl/inspector/src/components/Assets/Assets.css +++ b/packages/@dcl/inspector/src/components/Assets/Assets.css @@ -17,7 +17,7 @@ padding-left: 8px; display: flex; background: var(--tree-bg-color); - height: 60px; + padding: 5px 0; position: relative; align-items: center; justify-content: center; diff --git a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css index 193b1d259..9c8822ec3 100644 --- a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css +++ b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.css @@ -32,8 +32,15 @@ } .CreateCustomAsset .preview-container .AssetPreview { + display: none; +} + +.CreateCustomAsset .preview-container .thumbnail { width: 100%; height: 100%; + background-color: var(--background-gray); + background-size: cover; + background-position: center; } .CreateCustomAsset .loader-container { diff --git a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx index 2f4762433..4725aee9e 100644 --- a/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx +++ b/packages/@dcl/inspector/src/components/CreateCustomAsset/CreateCustomAsset.tsx @@ -112,11 +112,11 @@ const CreateCustomAsset: React.FC = () => {
{previewFile && resources !== null ? (
- {isGeneratingThumbnail && ( + {isGeneratingThumbnail && !thumbnail ? (
- )} + ) :
}
) : ( diff --git a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css index 8526a0efb..dadb345e9 100644 --- a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css +++ b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css @@ -1,3 +1,7 @@ +.ImportAssetModalOverlay { + z-index: 2; +} + .ImportAsset { height: 100%; } diff --git a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css index e64108647..01f542652 100644 --- a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css +++ b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.css @@ -38,20 +38,26 @@ .Slider .asset > div { display: flex; flex-direction: column; - margin: 10px 10px 5px 10px; + margin: 10px; width: 150px; } -.Slider .asset > div .AssetPreview { +.Slider .asset .loading { + position: relative; +} + +.Slider .asset .AssetPreview { + display: none; +} + +.Slider .asset .thumbnail, +.Slider .asset .loading { margin-bottom: 12px; width: 150px; height: 150px; background-color: var(--background-gray); -} - -.Slider .asset > div .AssetPreview > svg { - width: 60%; - height: 60%; + background-size: cover; + background-position: center; } .Slider .asset .name-error { diff --git a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx index 11188c4d3..35a8e92c8 100644 --- a/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx +++ b/packages/@dcl/inspector/src/components/ImportAsset/Slider/Slider.tsx @@ -5,6 +5,7 @@ import cx from 'classnames' import { AssetPreview } from '../../AssetPreview' import { Button } from '../../Button' import { Input } from '../../Input' +import { Loading } from '../../Loading' import { getAssetSize, getAssetResources, determineAssetType, formatFileName } from '../utils' @@ -110,6 +111,7 @@ export function Slider({ assets, onSubmit, isNameValid }: PropTypes) {
+ {screenshots[$.blob.name] ?
: } {!isNameUnique($) && Filename already exists}