SSDM-13504 : unify logos and icons : admin ui part using webpack bundling

40039509 · piotr.kupczyk@id.ethz.ch · 23f00e9d · 40039509 · 40039509 · 40039509
Commit 40039509 authored 1 year ago by piotr.kupczyk@id.ethz.ch
--- a/ui-admin/index.html
+++ b/ui-admin/index.html
@@ -3,7 +3,11 @@
  <head>
    <title>openBIS Admin</title>
    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="<%= require('@src/img/favicon.ico') %>" />
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= require('@src/img/apple-touch-icon.png') %>">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= require('@src/img/favicon-32x32.png?url') %>">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= require('@src/img/favicon-16x16.png?url') %>">
+    <link rel="manifest" href="<%= require('@src/js/webmanifest.js').default %>">
+
    <style>
      html {
        font-size: 16px;

--- a/ui-admin/src/img/android-chrome-192x192.png
+++ b/ui-admin/src/img/android-chrome-192x192.png
--- a/ui-admin/src/img/android-chrome-512x512.png
+++ b/ui-admin/src/img/android-chrome-512x512.png
--- a/ui-admin/src/img/apple-touch-icon.png
+++ b/ui-admin/src/img/apple-touch-icon.png
--- a/ui-admin/src/img/favicon-16x16.png
+++ b/ui-admin/src/img/favicon-16x16.png
--- a/ui-admin/src/img/favicon-32x32.png
+++ b/ui-admin/src/img/favicon-32x32.png
--- a/ui-admin/src/img/favicon.ico
+++ b/ui-admin/src/img/favicon.ico
--- a/ui-admin/src/img/openbis-favicon-transparent.png
+++ b/ui-admin/src/img/openbis-favicon-transparent.png
--- a/ui-admin/src/img/openbis-logo-transparent.png
+++ b/ui-admin/src/img/openbis-logo-transparent.png
--- a/ui-admin/src/js/components/login/Login.jsx
+++ b/ui-admin/src/js/components/login/Login.jsx
@@ -18,6 +18,8 @@ import openbis from '@src/js/services/openbis.js'
 import messages from '@src/js/common/messages.js'
 import logger from '@src/js/common/logger.js'

+import Logo from '@src/img/openbis-logo-transparent.png'
+
 const styles = theme => ({
  card: {
    marginTop: '10%',
@@ -25,6 +27,10 @@ const styles = theme => ({
    width: '30em',
    margin: '0 auto'
  },
+  logo: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
  header: {
    marginBottom: theme.spacing(1)
  },
@@ -212,6 +218,9 @@ class WithLogin extends React.Component {
          <form>
            <Card classes={{ root: classes.card }}>
              <Container square={true}>
+                <div className={classes.logo}>
+                  <img src={Logo} height='90' />
+                </div>
                <Typography variant='h6' classes={{ root: classes.header }}>
                  Login
                </Typography>

--- a/ui-admin/src/js/webmanifest.js
+++ b/ui-admin/src/js/webmanifest.js
+import AndroidChrome192 from '@src/img/android-chrome-192x192.png?url'
+import AndroidChrome512 from '@src/img/android-chrome-512x512.png?url'
+
+const config = {
+  name: 'openBIS Admin UI',
+  short_name: 'Admin UI',
+  icons: [
+    {
+      src: AndroidChrome192,
+      sizes: '192x192',
+      type: 'image/png'
+    },
+    {
+      src: AndroidChrome512,
+      sizes: '512x512',
+      type: 'image/png'
+    }
+  ],
+  theme_color: '#ffffff',
+  background_color: '#ffffff',
+  display: 'standalone'
+}
+
+export default 'data:application/manifest+json;base64,' +
+  Buffer.from(JSON.stringify(config)).toString('base64')
--- a/ui-admin/webpack.config.dev.js
+++ b/ui-admin/webpack.config.dev.js
@@ -47,7 +47,13 @@ module.exports = {
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-        type: 'asset',
+        resourceQuery: { not: [/url/] },
+        type: 'asset'
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
+        resourceQuery: /url/,
+        type: 'asset/resource'
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

--- a/ui-admin/webpack.config.js
+++ b/ui-admin/webpack.config.js
@@ -26,7 +26,13 @@ module.exports = {
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-        type: 'asset',
+        resourceQuery: { not: [/url/] },
+        type: 'asset'
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
+        resourceQuery: /url/,
+        type: 'asset/resource'
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,