Improving appearance of system messages. (Fontawesome upgrade required)

ReCodEx · May 17, 2019 · c8b8043 · c8b8043
1 parent c6b8c77
commit c8b8043
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 68 deletions.
diff --git a/.babelrc b/.babelrc
@@ -14,6 +14,6 @@
       "plugins": [
         "@babel/plugin-transform-react-inline-elements"
       ]
-	}
+    }
   }
 }
diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-inline-elements": "^7.0.0",
-    "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-free-brands": "^5.0.13",
-    "@fortawesome/fontawesome-free-regular": "^5.0.13",
-    "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@fortawesome/react-fontawesome": "^0.1.0",
+    "@fortawesome/fontawesome-free": "^5.8.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-brands-svg-icons": "^5.8.2",
+    "@fortawesome/free-regular-svg-icons": "^5.8.2",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "@iktakahiro/markdown-it-katex": "^3.0.3",
     "admin-lte": "2.3.11",
     "ajv": "5.5.1",

diff --git a/src/components/SystemMessages/MessagesList/MessagesList.js b/src/components/SystemMessages/MessagesList/MessagesList.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { Alert } from 'react-bootstrap';
 import { defaultMemoize } from 'reselect';
 
 import SortableTable, { SortableTableColumnDescriptor } from '../../widgets/SortableTable';
@@ -10,6 +9,7 @@ import DateTime from '../../widgets/DateTime';
 import { roleLabels, rolePriorities } from '../../helpers/usersRoles';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
 import FilterSystemMessagesForm from '../../forms/FilterSystemMessagesForm/FilterSystemMessagesForm';
+import { TypedMessageIcon } from '../../icons';
 
 import styles from './MessagesList.less';
 
@@ -78,8 +78,7 @@ class MessagesList extends Component {
         'type',
         <FormattedMessage id="app.systemMessagesList.type" defaultMessage="Type" />,
         {
-          comparator: ({ type: t1 }, { type: t2 }) => t1.localeCompare(t2, locale),
-          cellRenderer: type => type && <Alert bsStyle={type} className={styles.alertType} />,
+          cellRenderer: type => type && <TypedMessageIcon type={type} className={`text-${type}`} />,
           className: 'text-center valign-middle',
         }
       ),

diff --git a/src/components/SystemMessages/MessagesList/MessagesList.less b/src/components/SystemMessages/MessagesList/MessagesList.less
@@ -2,14 +2,14 @@
   margin: 0px;
   padding: 0px;
   height: 16px;
-	width: 16px;
-	display: inline-block;
+  width: 16px;
+  display: inline-block;
 }
 
 .textPreview {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-	max-width: 20vw;
-	vertical-align: middle !important;
+  max-width: 20vw;
+  vertical-align: middle !important;
 }
diff --git a/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js b/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js
@@ -45,7 +45,7 @@ const EditSystemMessageForm = ({
     <Modal.Header closeButton>
       <Modal.Title>
         {createNew ? (
-          <FormattedMessage id="app.editSystemMessageForm.title" defaultMessage="Edit System Message" />
+          <FormattedMessage id="app.systemMessages.newSystemMessage" defaultMessage="New System Message" />
         ) : (
           <FormattedMessage id="app.editSystemMessageForm.title" defaultMessage="Edit System Message" />
         )}

diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -6,6 +6,8 @@ import Icon from './Icon';
  * Icons with meta-names
  */
 
+const defaultMessageIcon = ['far', 'envelope'];
+
 export const AddIcon = props => <Icon {...props} icon="plus" />;
 export const AdressIcon = props => <Icon {...props} icon="at" />;
 export const ArchiveGroupIcon = ({ archived = false, ...props }) => (
@@ -33,7 +35,7 @@ export const InfoIcon = props => <Icon {...props} icon="info-circle" />;
 export const LoadingIcon = props => <Icon {...props} icon="spinner" pulse style={{ opacity: 0.8 }} />;
 export const LocalIcon = props => <Icon {...props} icon="thumbtack" />;
 export const LockIcon = props => <Icon {...props} icon="lock" />;
-export const MailIcon = props => <Icon {...props} icon={['far', 'envelope']} />;
+export const MailIcon = props => <Icon {...props} icon={defaultMessageIcon} />;
 export const NeedFixingIcon = props => <Icon {...props} icon="medkit" />;
 export const PipelineIcon = props => <Icon {...props} icon="random" />;
 export const RefreshIcon = props => <Icon {...props} icon="sync" />;
@@ -62,6 +64,17 @@ export const SuperadminIcon = props => <Icon {...props} icon="chess-queen" />;
 export const SupervisorIcon = props => <Icon {...props} icon="user-graduate" />;
 export const SupervisorStudentIcon = props => <Icon {...props} icon="chalkboard-teacher" />;
 export const TransferIcon = props => <Icon {...props} icon="exchange-alt" />;
+
+const messageIconTypes = {
+  success: ['far', 'check-circle'],
+  info: 'info-circle',
+  danger: 'radiation',
+  warning: 'exclamation-triangle',
+};
+export const TypedMessageIcon = ({ type, ...props }) => (
+  <Icon {...props} icon={messageIconTypes[type] || defaultMessageIcon} />
+);
+
 export const UnlockIcon = props => <Icon {...props} icon="unlock" />;
 export const UploadIcon = props => <Icon {...props} icon="cloud-upload-alt" />;
 export const UserIcon = props => <Icon {...props} icon={['far', 'user']} />;

diff --git a/src/components/widgets/HeaderNotificationsDropdown/headerNotificationDropdown.less b/src/components/widgets/HeaderNotificationsDropdown/headerNotificationDropdown.less
@@ -1,4 +1,5 @@
 .dropdownMenu {
   width: 42vw !important;
   min-width: 400px !important;
+	box-shadow: 8px 8px 16px #999 !important;
 }
diff --git a/src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.js b/src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.js
@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classnames from 'classnames';
-import { Label, Alert } from 'react-bootstrap';
+import { Label, Table } from 'react-bootstrap';
 
-import Icon from '../../icons';
+import UsersNameContainer from '../../../containers/UsersNameContainer';
+import Icon, { TypedMessageIcon } from '../../icons';
 import Markdown from '../Markdown';
 import { getLocalizedText } from '../../../helpers/localizedData';
 
 import styles from './HeaderSystemMessagesDropdown.less';
+import DateTime from '../DateTime';
 
 const preventClickPropagation = ev => ev.stopPropagation();
 
@@ -26,19 +28,43 @@ const HeaderSystemMessagesDropdown = ({ isOpen, toggleOpen, systemMessages, intl
     </a>
     <ul className={classnames(['dropdown-menu', styles.dropdownMenu])}>
       <li className="header">
-        <FormattedMessage
-          id="app.systemMessages.title"
-          defaultMessage="You have {count, number} active {count, plural, one {message} two {messages} other {messages}}"
-          values={{ count: systemMessages.length }}
-        />
+        <small>
+          <FormattedMessage
+            id="app.systemMessages.title"
+            defaultMessage="You have {count, number} active {count, plural, one {message} two {messages} other {messages}}"
+            values={{ count: systemMessages.length }}
+          />
+        </small>
       </li>
       <li>
         <ul className={classnames(['menu', styles.messageList])}>
-          {systemMessages.map((message, idx) => (
-            <Alert key={idx} bsStyle={message.type} className={styles.messageAlert}>
-              <Markdown source={getLocalizedText(message, locale)} />
-            </Alert>
-          ))}
+          <li>
+            <Table responsive hover className="no-margin">
+              <tbody>
+                {systemMessages.map((message, idx) => (
+                  <tr key={idx}>
+                    <td className={`text-${message.type} bg-${message.type} shrink-col valign-middle text-center`}>
+                      <TypedMessageIcon type={message.type} size="lg" />
+                    </td>
+                    <td>
+                      <Markdown source={getLocalizedText(message, locale)} />
+                      <small className="text-muted text-nowrap pull-right">
+                        <UsersNameContainer userId={message.authorId} isSimple />
+                        &nbsp;
+                        <DateTime
+                          unixts={message.visibleFrom}
+                          showDate={false}
+                          showTime={false}
+                          showRelative={true}
+                          showOverlay={true}
+                        />
+                      </small>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          </li>
         </ul>
       </li>
     </ul>

diff --git a/src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.less b/src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.less
@@ -1,10 +1,16 @@
 .dropdownMenu {
   width: 70vw !important;
 	min-width: 400px !important;
+	box-shadow: 8px 8px 16px #999 !important;
 }
 
 .messageList {
-	max-height: calc(100vh - 100px) !important;
+  max-height: calc(100vh - 100px) !important;
+}
+
+.messageList small {
+	margin-top: -5px;
+	font-size: 75%;
 }
 
 .messageAlert {

diff --git a/src/containers/App/App.js b/src/containers/App/App.js
@@ -13,11 +13,10 @@ import { fetchManyGroupsStatus } from '../../redux/selectors/groups';
 import { logout, refresh, selectInstance } from '../../redux/modules/auth';
 import { getJsData, resourceStatus } from '../../redux/helpers/resourceManager';
 
-// import fontawesome from '@fortawesome/fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import regularIcons from '@fortawesome/fontawesome-free-regular';
-import solidIcons from '@fortawesome/fontawesome-free-solid';
-import brandIcons from '@fortawesome/fontawesome-free-brands';
+import { far as regularIcons } from '@fortawesome/free-regular-svg-icons';
+import { fas as solidIcons } from '@fortawesome/free-solid-svg-icons';
+import { fab as brandIcons } from '@fortawesome/free-brands-svg-icons';
 
 import { LoadingIcon } from '../../components/icons';
 

diff --git a/views/index.ejs b/views/index.ejs
@@ -3,9 +3,9 @@
   <head <%- head.htmlAttributes.toString() %>
     >
     <meta charset="utf-8" />
-	<%- head.title.toString() %>
-	<%- head.meta.toString() %>
-	<%- head.link.toString() %>
+    <%- head.title.toString() %>
+    <%- head.meta.toString() %>
+    <%- head.link.toString() %>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/png" href="<%= urlPrefix %>/public/favicon.ico" />
     <link

diff --git a/yarn.lock b/yarn.lock
@@ -676,47 +676,48 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-common-types@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
-
-"@fortawesome/fontawesome-common-types@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.0.tgz#6bcf6481030f59e7ffd1a40a67cd464d47780f6a"
+"@fortawesome/fontawesome-common-types@^0.2.18":
+  version "0.2.18"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz#c0d8f073a5116b2de0a2c8a7aba66093a6956ce7"
+  integrity sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q==
 
-"@fortawesome/fontawesome-free-brands@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz#4d15ff4e1e862d5e4a4df3654f8e8acbd47e9c09"
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
+"@fortawesome/fontawesome-free@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.8.2.tgz#fae4112c4fb47086f6ae167e32524b280000abd5"
+  integrity sha512-E4fDUF4fbu9AxKpaQQqCN3XBnNzb/5e0Gvd9OaQsYkK574LVI57v/EqqPfIm/mC7jYbxaPNrhvT5AF+Yzwyizg==
 
-"@fortawesome/fontawesome-free-regular@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.13.tgz#eb78c30184e3f456a423a1dcfa0f682f7b50de4a"
+"@fortawesome/fontawesome-svg-core@^1.2.18":
+  version "1.2.18"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.18.tgz#c26cbded461895ebe260f0dea771ca29d8cb3517"
+  integrity sha512-1vyLWVQqxQ8q8bA2zgZcljk3RkeELlDJ757ymLk+ebK019AFgEFH5kTnR5OMN1SFsTwW1OHlFQO3VufdeCg/Gg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
+    "@fortawesome/fontawesome-common-types" "^0.2.18"
 
-"@fortawesome/fontawesome-free-solid@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz#24b61aaf471a9d34a5364b052d64a516285ba894"
+"@fortawesome/free-brands-svg-icons@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz#e68a509c986d5d197cc5bd9ae8d966eff513468d"
+  integrity sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
+    "@fortawesome/fontawesome-common-types" "^0.2.18"
 
-"@fortawesome/fontawesome-svg-core@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.0.tgz#b0ec14af25cdc11d38ede7d8c94b89b478ab67ab"
+"@fortawesome/free-regular-svg-icons@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.2.tgz#f61c603c73695a41bcee9d6f9d44e2ca4829f151"
+  integrity sha512-499WODlsDcXA9hM+Y3ZqoWj1kKhVLCHS8PnJs3zEaoPr5W6yrE9Jnp3C9Hb9KpwnRMh3IRXZ3XqxyUaQFMMRFw==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.0"
+    "@fortawesome/fontawesome-common-types" "^0.2.18"
 
-"@fortawesome/fontawesome@^1.1.8":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+"@fortawesome/free-solid-svg-icons@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz#aa2f042f73aca43eb4a26149907e63bf26d2e31c"
+  integrity sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
+    "@fortawesome/fontawesome-common-types" "^0.2.18"
 
-"@fortawesome/react-fontawesome@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.0.tgz#1fabf7e02582037cb9ff63d5ced631d43f34886b"
+"@fortawesome/react-fontawesome@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz#18d61d9b583ca289a61aa7dccc05bd164d6bc9ad"
+  integrity sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==
   dependencies:
     humps "^2.0.1"
     prop-types "^15.5.10"
@@ -4747,6 +4748,7 @@ https-browserify@0.0.1:
 humps@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
 
 hyphenate-style-name@^1.0.0:
   version "1.0.2"
@@ -7257,7 +7259,6 @@ preserve@^0.2.0:
 prettier@^1.16.4:
   version "1.16.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
-  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-ms@^2.1.0:
   version "2.1.0"