UI Customisation

admin/src/app.js

@@ -0,0 +1,231 @@
+/**
+ *
+ * app.js
+ *
+ * Entry point of the application
+ */
+
+// NOTE TO PLUGINS DEVELOPERS:
+// If you modify this file by adding new options to a plugin entry point
+// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-field-api.md
+// Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
+// Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
+// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
+
+/* eslint-disable */
+
+import '@babel/polyfill';
+import 'sanitize.css/sanitize.css';
+
+// Third party css library needed
+import 'bootstrap/dist/css/bootstrap.css';
+// import "../styles/ietnitk.scss";
+import 'font-awesome/css/font-awesome.min.css';
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/js/all.min.js';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+// Strapi provider with the internal APIs
+import { StrapiProvider } from 'strapi-helper-plugin';
+import { merge } from 'lodash';
+import Fonts from './components/Fonts';
+import { freezeApp, pluginLoaded, unfreezeApp, updatePlugin } from './containers/App/actions';
+import { showNotification } from './containers/NotificationProvider/actions';
+import { showNotification as showNewNotification } from './containers/NewNotification/actions';
+
+import basename from './utils/basename';
+import getInjectors from './utils/reducerInjectors';
+import injectReducer from './utils/injectReducer';
+import injectSaga from './utils/injectSaga';
+import Strapi from './utils/Strapi';
+
+// Import root component
+import App from './containers/App';
+// Import Language provider
+import LanguageProvider from './containers/LanguageProvider';
+
+import configureStore from './configureStore';
+import { SETTINGS_BASE_URL } from './config';
+
+// Import i18n messages
+import { translationMessages, languages } from './i18n';
+
+// Create redux store with history
+import history from './utils/history';
+
+import plugins from './plugins';
+
+const strapi = Strapi();
+
+const initialState = {};
+const store = configureStore(initialState, history);
+const { dispatch } = store;
+const MOUNT_NODE = document.getElementById('app') || document.createElement('div');
+
+Object.keys(plugins).forEach(current => {
+  const registerPlugin = plugin => {
+    return plugin;
+  };
+  const currentPluginFn = plugins[current];
+
+  // By updating this by adding required methods
+  // to load a plugin you need to update this file
+  // strapi-generate-plugins/files/admin/src/index.js needs to be updated
+  const plugin = currentPluginFn({
+    registerComponent: strapi.componentApi.registerComponent,
+    registerField: strapi.fieldApi.registerField,
+    registerPlugin,
+    settingsBaseURL: SETTINGS_BASE_URL || '/settings',
+  });
+
+  const pluginTradsPrefixed = languages.reduce((acc, lang) => {
+    const currentLocale = plugin.trads[lang];
+
+    if (currentLocale) {
+      const localeprefixedWithPluginId = Object.keys(currentLocale).reduce((acc2, current) => {
+        acc2[`${plugin.id}.${current}`] = currentLocale[current];
+
+        return acc2;
+      }, {});
+
+      acc[lang] = localeprefixedWithPluginId;
+    }
+
+    return acc;
+  }, {});
+
+  // Inject plugins reducers
+  const pluginReducers = plugin.reducers || {};
+
+  Object.keys(pluginReducers).forEach(reducerName => {
+    getInjectors(store).injectReducer(reducerName, pluginReducers[reducerName]);
+  });
+
+  try {
+    merge(translationMessages, pluginTradsPrefixed);
+    dispatch(pluginLoaded(plugin));
+  } catch (err) {
+    console.log({ err });
+  }
+});
+
+// TODO
+const remoteURL = (() => {
+  // Relative URL (ex: /dashboard)
+  if (REMOTE_URL[0] === '/') {
+    return (window.location.origin + REMOTE_URL).replace(/\/$/, '');
+  }
+
+  return REMOTE_URL.replace(/\/$/, '');
+})();
+
+const displayNotification = (message, status) => {
+  console.warn(
+    // Validate the text
+    'Deprecated: Will be deleted.\nPlease use strapi.notification.toggle(config).\nDocs : https://strapi.io/documentation/developer-docs/latest/development/local-plugins-customization.html#strapi-notification'
+  );
+  dispatch(showNotification(message, status));
+};
+const displayNewNotification = config => {
+  dispatch(showNewNotification(config));
+};
+const lockApp = data => {
+  dispatch(freezeApp(data));
+};
+const unlockApp = () => {
+  dispatch(unfreezeApp());
+};
+
+const lockAppWithOverlay = () => {
+  const overlayblockerParams = {
+    children: <div />,
+    noGradient: true,
+  };
+
+  lockApp(overlayblockerParams);
+};
+
+window.strapi = Object.assign(window.strapi || {}, {
+  node: MODE || 'host',
+  env: NODE_ENV,
+  remoteURL,
+  backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
+  notification: {
+    // New notification api
+    toggle: config => {
+      displayNewNotification(config);
+    },
+    success: message => {
+      displayNotification(message, 'success');
+    },
+    warning: message => {
+      displayNotification(message, 'warning');
+    },
+    error: message => {
+      displayNotification(message, 'error');
+    },
+    info: message => {
+      displayNotification(message, 'info');
+    },
+  },
+  refresh: pluginId => ({
+    translationMessages: translationMessagesUpdated => {
+      render(merge({}, translationMessages, translationMessagesUpdated));
+    },
+    leftMenuSections: leftMenuSectionsUpdated => {
+      store.dispatch(updatePlugin(pluginId, 'leftMenuSections', leftMenuSectionsUpdated));
+    },
+  }),
+  router: history,
+  languages,
+  currentLanguage:
+    window.localStorage.getItem('strapi-admin-language') ||
+    window.navigator.language ||
+    window.navigator.userLanguage ||
+    'en',
+  lockApp,
+  lockAppWithOverlay,
+  unlockApp,
+  injectReducer,
+  injectSaga,
+  store,
+});
+
+const render = messages => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <StrapiProvider strapi={strapi}>
+        <Fonts />
+        <LanguageProvider messages={messages}>
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </LanguageProvider>
+      </StrapiProvider>
+    </Provider>,
+    MOUNT_NODE
+  );
+};
+
+if (module.hot) {
+  module.hot.accept(['./i18n', './containers/App'], () => {
+    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
+
+    render(translationMessages);
+  });
+}
+
+if (NODE_ENV !== 'test') {
+  render(translationMessages);
+}
+
+// @Pierre Burgy exporting dispatch for the notifications...
+export { dispatch };
+
+// TODO remove this for the new Cypress tests
+if (window.Cypress) {
+  window.__store__ = Object.assign(window.__store__ || {}, { store });
+}

admin/src/components/LeftMenu/LeftMenuHeader/Wrapper.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import Logo from '../../../assets/images/logo-strapi.png';
+
+const Wrapper = styled.div`
+  background-color: #ffffff;
+  padding-left: 2rem;
+  height: ${props => props.theme.main.sizes.leftMenu.height};
+
+  .leftMenuHeaderLink {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .projectName {
+    display: block;
+    width: 100%;
+    height: ${props => props.theme.main.sizes.leftMenu.height};
+    font-size: 2rem;
+    letter-spacing: 0.2rem;
+    color: $white;
+
+    background-image: url(${Logo});
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: auto 2.5rem;
+  }
+`;
+
+Wrapper.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        leftMenu: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Wrapper.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default Wrapper;

admin/src/containers/HomePage/index.js

@@ -26,30 +26,18 @@ import {
 import SocialLink from "./SocialLink";
 
 const SOCIAL_LINKS = [
-  {
-    name: "GitHub",
-    link: "https://github.com/iet-nitk",
-  },
-  {
-    name: "MS Teams",
-    link: "https://slack.strapi.io/",
-  },
   {
     name: "Facebook",
-    link: "https://medium.com/@strapi",
-  },
-  {
-    name: "Twitter",
-    link: "https://medium.com/@strapi",
-  },
-  {
-    name: "Instagram",
-    link: "https://twitter.com/strapijs",
+    link: "https://facebook.com/ietnitk",
   },
   {
-    name: "Telegram",
-    link: "https://www.reddit.com/r/Strapi/",
+    name: "LinkedIn",
+    link: "https://linkedin.com/in/ietnitk",
   },
+  { href: "https://www.github.com/IET-NITK", name: "Github" },
+  { href: "https://t.me/IET_NITK", name: "Telegram" },
+  { href: "https://www.youtube.com/c/IETNITK", name: "Youtube" },
+  { href: "https://www.instagram.com/ietnitk", name: "Instagram" },
   {
     name: "Website",
     link: "https://iet.nitk.ac.in",

admin/src/themes/colors.js

@@ -0,0 +1,50 @@
+const colors = {
+  black: '#333740',
+  white: '#ffffff',
+  red: '#ff203c',
+  orange: '#ff5d00',
+  lightOrange: '#f64d0a',
+  yellow: '#ffd500',
+  green: '#6dbb1a',
+  blue: '#0097f7',
+  teal: '#5bc0de',
+  pink: '#ff5b77',
+  purple: '#613d7c',
+  gray: '#464a4c',
+  border: '#e3e9f3',
+  'gray-dark': '#292b2c',
+  grayLight: '#636c72',
+  'gray-lighter': '#eceeef',
+  'gray-lightest': '#f7f7f9',
+  brightGrey: '#f0f3f8',
+  darkGrey: '#e3e9f3',
+  lightGrey: '#fafafa',
+  lightestGrey: '#fbfbfb',
+  mediumGrey: '#f2f3f4',
+  grey: '#9ea7b8',
+  greyDark: '#292b2c',
+  greyAlpha: 'rgba(227, 233, 243, 0.5)',
+  lightestBlue: '#e4f0fc',
+  lightBlue: '#e6f0fb',
+  mediumBlue: '#007eff',
+  darkBlue: '#aed4fb',
+  pale: '#f7f8f8',
+  content: {
+    background: '#fafafb',
+    'background-alpha': 'rgba(14, 22, 34, 0.02)',
+  },
+  leftMenu: {
+    'link-hover': '#5f256b',
+    'link-color': '#f5f5f5',
+    'title-color': '#ffffff',
+  },
+  strapi: {
+    'gray-light': '#eff3f6',
+    gray: '#535f76',
+    'blue-darker': '#803391',
+    'blue-dark': '#53274E',
+    blue: '#ffffff',
+  },
+};
+
+export default colors;

admin/styles/ietnitk.scss

@@ -0,0 +1,25 @@
+/*
+NOTE: Dont override anything here unless absolutely necessary. Always prefer to override it from Strapi side instead.
+*/
+
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+// import customization
+
+
+
+$enable-gradients: true;
+
+$pagination-active-bg: map-get($map: $theme-colors, $key: "primary");
+$pagination-color: map-get($map: $theme-colors, $key: "primary");
+$pagination-hover-color: map-get($map: $theme-colors, $key: "primary");
+$dropdown-link-color: map-get($map: $theme-colors, $key: "primary");
+$link-color: map-get($map: $theme-colors, $key: "primary");
+$dropdown-link-active-bg: map-get($map: $theme-colors, $key: "primary");
+$component-active-bg: map-get($map: $theme-colors, $key: "primary");
+// $pagination-color: #803391;
+
+
+// finally, import Bootstrap to set the changes!
+@import "../../../node_modules/bootstrap/scss/bootstrap";