Merge branch 'ssdm-13504-unify-logos-and-icons' into master

400c0e64 · piotr.kupczyk@id.ethz.ch · 644678d9 · ca4e2c89 · 400c0e64 · 400c0e64
Commit 400c0e64 authored 1 year ago by piotr.kupczyk@id.ethz.ch
--- a/docs/logos/openbis-favicon-transparent.png
+++ b/docs/logos/openbis-favicon-transparent.png
--- 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="img/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
+    <link rel="manifest" href="manifest/site.webmanifest">
+
    <style>
      html {
        font-size: 16px;

--- a/ui-admin/package.json
+++ b/ui-admin/package.json
@@ -41,6 +41,7 @@
    "babel-jest": "^29.3.1",
    "babel-loader": "^9.1.0",
    "babel-plugin-transform-amd-to-commonjs": "^1.6.0",
+    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",

--- a/ui-admin/src/img/favicon.ico
+++ b/ui-admin/src/img/favicon.ico
--- 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/resources/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} width='200' height='89' />
+                </div>
                <Typography variant='h6' classes={{ root: classes.header }}>
                  Login
                </Typography>

--- a/ui-admin/src/resources/img/android-chrome-192x192.png
+++ b/ui-admin/src/resources/img/android-chrome-192x192.png
--- a/ui-admin/src/resources/img/android-chrome-512x512.png
+++ b/ui-admin/src/resources/img/android-chrome-512x512.png
--- a/ui-admin/src/resources/img/apple-touch-icon.png
+++ b/ui-admin/src/resources/img/apple-touch-icon.png
--- a/ui-admin/src/resources/img/favicon-16x16.png
+++ b/ui-admin/src/resources/img/favicon-16x16.png
--- a/ui-admin/src/resources/img/favicon-32x32.png
+++ b/ui-admin/src/resources/img/favicon-32x32.png
--- a/ui-admin/src/resources/img/favicon.ico
+++ b/ui-admin/src/resources/img/favicon.ico
--- a/ui-admin/src/resources/img/openbis-logo-transparent.png
+++ b/ui-admin/src/resources/img/openbis-logo-transparent.png
--- a/ui-admin/src/resources/manifest/site.webmanifest
+++ b/ui-admin/src/resources/manifest/site.webmanifest
+{
+  "name": "openBIS Admin UI",
+  "short_name": "Admin UI",
+  "icons": [
+    {
+      "src": "img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/ui-admin/webpack.config.dev.js
+++ b/ui-admin/webpack.config.dev.js
 /* eslint-disable */
 const Webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const path = require('path')

 module.exports = {
@@ -25,9 +26,12 @@ module.exports = {
    devMiddleware: {
      publicPath: '/admin/'
    },
-    static: {
-      directory: './src/js'
-    }
+    static: [
+      {
+        directory: './src/resources',
+        publicPath: '/admin'
+      }
+    ]
  },

  devtool: 'source-map',
@@ -47,7 +51,7 @@ module.exports = {
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-        type: 'asset',
+        type: 'asset'
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

--- a/ui-admin/webpack.config.js
+++ b/ui-admin/webpack.config.js
 /* eslint-disable */
 const Webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const path = require('path')

 module.exports = {
@@ -26,7 +27,7 @@ module.exports = {
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-        type: 'asset',
+        type: 'asset'
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
@@ -61,6 +62,9 @@ module.exports = {
    }),
    new Webpack.ProvidePlugin({
      process: 'process/browser'
+    }),
+    new CopyWebpackPlugin({
+      patterns: [{ from: 'src/resources' }]
    })
  ]
 }
--- a/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/etc/config.js
+++ b/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/etc/config.js
@@ -14,10 +14,24 @@ var loadJSResorce = function(pathToResource, onLoad) {

 var setFavicons = function(img) {
    var head = document.getElementsByTagName('head')[0];
-    var iconLink= document.createElement('link');
-    iconLink.setAttribute('rel', 'icon');
-    iconLink.setAttribute('href', img);
-    head.appendChild(iconLink);
+
+    if(_.isString(img)){
+        var iconLink= document.createElement('link');
+        iconLink.setAttribute('rel', 'icon');
+        iconLink.setAttribute('href', img);
+        head.appendChild(iconLink);
+    }else if(_.isObject(img)){
+        Object.keys(img).forEach(function(linkKey){
+            var linkDefinition = img[linkKey]
+            var linkElement = document.createElement('link');
+            if(_.isObject(linkDefinition)){
+                Object.keys(linkDefinition).forEach(function(attributeName){
+                    linkElement.setAttribute(attributeName, linkDefinition[attributeName]);
+                })
+                head.appendChild(linkElement);
+            }
+        })
+    }
 };

 var setHelp = function(url) {
@@ -42,7 +56,12 @@ var onLoadInstanceProfileResorceFunc = function() {

 //<PROFILE_PLACEHOLDER>
 loadJSResorce("./etc/InstanceProfile.js", onLoadInstanceProfileResorceFunc);
-setFavicons("./img/favicon.ico");
+setFavicons({
+    appleTouchIcon : { href : "./img/apple-touch-icon.png", rel: "apple-touch-icon", sizes: "180x180" },
+    favicon32 : { href : "./img/favicon-32x32.png", rel: "icon", type: "image/png", sizes: "32x32" },
+    favicon16 : { href : "./img/favicon-16x16.png", rel: "icon", type: "image/png", sizes: "16x16" },
+    manifest : { href : "./site.webmanifest", rel: "manifest" }
+});
 //</PROFILE_PLACEHOLDER>

 var PLUGINS_CONFIGURATION = {

--- a/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/android-chrome-192x192.png
+++ b/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/android-chrome-192x192.png
--- a/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/android-chrome-512x512.png
+++ b/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/android-chrome-512x512.png
--- a/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/apple-touch-icon.png
+++ b/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/apple-touch-icon.png
--- a/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/favicon-16x16.png
+++ b/ui-eln-lims/src/core-plugins/eln-lims/1/as/webapps/eln-lims/html/img/favicon-16x16.png