[Fixes GeoNode#955] Blured icon images (GeoNode#1056)

DavidQuartz · Jul 8, 2022 · e26b97f · e26b97f
1 parent 20f6942
commit e26b97f
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 36 deletions.
diff --git a/geonode_mapstore_client/client/js/components/MainErrorView/index.js b/geonode_mapstore_client/client/js/components/MainErrorView/index.js
diff --git a/...omponents/MainErrorView/MainErrorView.jsx → ...omponents/MainEventView/MainEventView.jsx b/...omponents/MainErrorView/MainErrorView.jsx → ...omponents/MainEventView/MainEventView.jsx
@@ -10,15 +10,16 @@ import React from 'react';
 import FaIcon from '@js/components/FaIcon';
 import Message from '@mapstore/framework/components/I18N/Message';
 
-function MainErrorView({
-    msgId
+function MainEventView({
+    msgId,
+    icon
 }) {
     return (
         <div className="gn-main-event-container">
             <div className="gn-main-event-content">
                 <div className="gn-main-event-text">
                     <div className="gn-main-icon">
-                        <FaIcon name="exclamation"/>
+                        <FaIcon name={icon} />
                     </div>
                     {msgId && <Message msgId={msgId} />}
                 </div>
@@ -27,8 +28,9 @@ function MainErrorView({
     );
 }
 
-MainErrorView.defaultProps = {
-    msgId: ''
+MainEventView.defaultProps = {
+    msgId: '',
+    icon: 'exclamation'
 };
 
-export default MainErrorView;
+export default MainEventView;
diff --git a/geonode_mapstore_client/client/js/components/MainEventView/index.js b/geonode_mapstore_client/client/js/components/MainEventView/index.js
@@ -0,0 +1 @@
+export { default } from './MainEventView';
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
@@ -11,26 +11,14 @@ import MediaComponent from '@mapstore/framework/components/geostory/media';
 import PdfViewer from '@js/components/MediaViewer/PdfViewer';
 import { determineResourceType } from '@js/utils/FileUtils';
 import Loader from '@mapstore/framework/components/misc/Loader';
-import MainErrorView from '@js/components/MainErrorView';
+import MainEventView from '@js/components/MainEventView';
 import { getResourceTypesInfo } from '@js/utils/ResourceUtils';
 
 const Scene3DViewer = lazy(() => import('@js/components/MediaViewer/Scene3DViewer'));
 
-function UnsupportedViewer({ thumbnail }) {
+function UnsupportedViewer() {
     return (
-        <div
-            className="gn-media-unsupported"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                backgroundImage: `url(${thumbnail})`,
-                backgroundSize: 'contain',
-                backgroundPosition: 'center'
-            }}>
-        </div>
+        <MainEventView msgId={'gnhome.noPreview'} icon="file" />
     );
 }
 
@@ -60,7 +48,7 @@ const mediaDefaultProps = {
     unsupported: {}
 };
 
-const Media = ({resource, ...props}) => {
+const Media = ({ resource, ...props }) => {
 
     const mediaTypes = getResourceTypesInfo();
     const {
@@ -83,7 +71,7 @@ const Media = ({resource, ...props}) => {
             />
         </Suspense>);
     }
-    return (<MainErrorView msgId={'gnhome.permissionsMissing'}/>);
+    return (<MainEventView msgId={'gnhome.permissionsMissing'}/>);
 };
 
 export default Media;
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx
@@ -41,9 +41,8 @@ describe('Test Media', () => {
         ReactDOM.render( <Media resource={{href: "http://example.com", thumbnail_url: 'image', resource_type: "document", extension: "docx", "abstract": "test", pk: 1, perms: [
             "download_resourcebase"
         ] }}/>, document.getElementById("container"));
-        const mediaViewer = document.querySelector('.gn-media-unsupported');
+        const mediaViewer = document.querySelector('.gn-main-event-container');
         expect(mediaViewer).toBeTruthy();
-        expect(mediaViewer.style.backgroundImage).toBe('url("image")');
     });
 
     it('should render error message if resource has not download perms', () => {

diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -18,7 +18,7 @@ import PluginsContainer from '@mapstore/framework/components/plugins/PluginsCont
 import useLazyPlugins from '@js/hooks/useLazyPlugins';
 import { requestResourceConfig, requestNewResourceConfig } from '@js/actions/gnresource';
 import MetaTags from '@js/components/MetaTags';
-import MainErrorView from '@js/components/MainErrorView';
+import MainEventView from '@js/components/MainEventView';
 import ViewerLayout from '@js/components/ViewerLayout';
 import { createShallowSelector } from '@mapstore/framework/utils/ReselectUtils';
 
@@ -139,7 +139,7 @@ function ViewerRoute({
                 params={params}
             />}
             {loading && Loader && <Loader />}
-            {configError && <MainErrorView msgId={configError}/>}
+            {configError && <MainEventView msgId={configError}/>}
         </>
     );
 }

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -127,7 +127,8 @@
             "createDataset": "Datensatz erstellen",
             "search": "Suchen...",
             "permissionsMissing": "Sie sind nicht berechtigt, diese Ressource anzuzeigen",
-            "filter": "Filter"
+            "filter": "Filter",
+            "noPreview": "Für diese Ressource ist keine Vorschau verfügbar"
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -127,7 +127,8 @@
             "createDataset": "Create dataset",
             "search": "Search...",
             "permissionsMissing": "You don't have permission to view or download the resource",
-            "filter": "Filter"
+            "filter": "Filter",
+            "noPreview": "A preview is not available for this resource"
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -127,7 +127,8 @@
             "createDataset": "Crear conjunto de datos",
             "search": "Buscar...",
             "permissionsMissing": "No tienes permiso para ver o descargar el recurso.",
-            "filter": "Filtrar"
+            "filter": "Filtrar",
+            "noPreview": "Una vista previa no está disponible para este recurso"
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -127,7 +127,8 @@
             "createDataset": "Créer un ensemble de données",
             "search": "Chercher...",
             "permissionsMissing": "Vous n'êtes pas autorisé à afficher ou télécharger la ressource",
-            "filter": "Filtre"
+            "filter": "Filtre",
+            "noPreview": "Un aperçu n'est pas disponible pour cette ressource"
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -129,7 +129,8 @@
             "createDataset": "Crea dataset",
             "search": "Cerca...",
             "permissionsMissing": "Non hai i permessi per visualizzare o scaricare la risorsa",
-            "filter": "Filtra"
+            "filter": "Filtra",
+            "noPreview": "Un'anteprima non è disponibile per questa risorsa"
         },
         "viewer": {
             "document": {

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less b/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less
@@ -24,11 +24,26 @@
     position: absolute;
     margin: 1rem;
 
-    .ms-media,
-    .ms-media img {
+    .ms-media {
         position: relative;
+        width: 100%;
         height: 100%;
-        width: 100%
+    }
+
+    .ms-media-image {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ms-media img {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        cursor: pointer;
+        width: auto;
+        height: auto;
     }
 
     .pdf-loader {