Final polishing.

ReCodEx · Sep 9, 2019 · 0da7e86 · 0da7e86
1 parent 4c7739a
commit 0da7e86
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 52 deletions.
diff --git a/src/components/widgets/Sidebar/LoadingMenuItem/LoadingMenuItem.js b/src/components/widgets/Sidebar/LoadingMenuItem/LoadingMenuItem.js
@@ -2,14 +2,13 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LoadingIcon } from '../../../icons';
 
+import styles from '../Sidebar.less';
+
 const LoadingMenuItem = () => (
   <li>
     <a>
       <LoadingIcon gapRight />
-      <span
-        style={{
-          whiteSpace: 'normal',
-        }}>
+      <span className={styles.menuItem}>
         <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
       </span>
     </a>

diff --git a/src/components/widgets/Sidebar/MenuAvatar/MenuAvatar.js b/src/components/widgets/Sidebar/MenuAvatar/MenuAvatar.js
@@ -2,18 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import styles from './MenuAvatar.less';
+import styles from '../Sidebar.less';
 import AvatarContainer from '../../../../containers/AvatarContainer/AvatarContainer';
 
-const MenuAvatar = ({
-  title,
-  avatarUrl,
-  firstName,
-  notificationsCount = 0,
-  isActive = false,
-  useGravatar = false,
-  onClick,
-}) => (
+const MenuAvatar = ({ title, avatarUrl, firstName, notificationsCount = 0, isActive = false, onClick }) => (
   <li
     className={classnames({
       active: isActive,
@@ -23,22 +15,15 @@ const MenuAvatar = ({
         e.preventDefault();
         onClick();
       }}
-      style={{ cursor: 'pointer' }}>
+      className={styles.cursorPointer}>
       <AvatarContainer
         avatarUrl={avatarUrl}
         fullName={title}
         firstName={firstName}
         size={20}
         altClassName={styles.avatar}
       />
-      <span
-        style={{
-          whiteSpace: 'normal',
-          display: 'inline-block',
-          verticalAlign: 'top',
-        }}>
-        {title}
-      </span>
+      <span className={styles.menuItem}>{title}</span>
       {notificationsCount > 0 && <small className="label pull-right bg-yellow">{notificationsCount}</small>}
     </a>
   </li>
@@ -51,7 +36,6 @@ MenuAvatar.propTypes = {
   onClick: PropTypes.func,
   notificationsCount: PropTypes.number,
   isActive: PropTypes.bool,
-  useGravatar: PropTypes.bool,
 };
 
 export default MenuAvatar;
diff --git a/src/components/widgets/Sidebar/MenuAvatar/MenuAvatar.less b/src/components/widgets/Sidebar/MenuAvatar/MenuAvatar.less
diff --git a/src/components/widgets/Sidebar/MenuGroup/MenuGroup.js b/src/components/widgets/Sidebar/MenuGroup/MenuGroup.js
@@ -10,6 +10,8 @@ import { isLoading } from '../../../../redux/helpers/resourceManager';
 import { getLocalizedName } from '../../../../helpers/localizedData';
 import Icon from '../../../icons';
 
+import styles from '../Sidebar.less';
+
 class MenuGroup extends Component {
   state = {
     open: null,
@@ -44,11 +46,6 @@ class MenuGroup extends Component {
       intl: { locale },
     } = this.props;
 
-    const dropdownStyles = {
-      overflowY: 'auto',
-      overflowX: 'hidden',
-    };
-
     const itemsNotificationsCount = item => notifications[item.getIn(['data', 'id'])];
     const notificationsCount = items.reduce((acc, item) => acc + itemsNotificationsCount(item), 0);
 
@@ -60,20 +57,13 @@ class MenuGroup extends Component {
         })}>
         <a href="#" onClick={this.toggle}>
           <Icon icon={icon} gapRight fixedWidth />
-          <span
-            style={{
-              whiteSpace: 'normal',
-              display: 'inline-block',
-              verticalAlign: 'top',
-            }}>
-            {title}
-          </span>
+          <span className={styles.menuItem}>{title}</span>
           <span className="pull-right-container">
             {notificationsCount > 0 && <small className="label pull-right bg-blue">{notificationsCount}</small>}
-            <Icon icon="angle-left" className="pull-right" style={{ height: '15px' }} />
+            <Icon icon="angle-left" className={classnames({ [styles.arrowIcon]: true, 'pull-right': true })} />
           </span>
         </a>
-        <ul className="treeview-menu" style={dropdownStyles}>
+        <ul className={classnames({ 'treeview-menu': true, [styles.dropdown]: true })}>
           {items.map((item, key) =>
             isLoading(item) ? (
               <LoadingMenuItem key={key} />

diff --git a/src/components/widgets/Sidebar/MenuItem/MenuItem.js b/src/components/widgets/Sidebar/MenuItem/MenuItem.js
@@ -5,6 +5,7 @@ import { withRouter } from 'react-router';
 import { Link } from 'react-router-dom';
 
 import Icon from '../../../icons';
+import styles from '../Sidebar.less';
 
 const MenuItem = ({
   title,
@@ -24,14 +25,7 @@ const MenuItem = ({
     })}>
     <Link to={link} target={inNewTab ? '_blank' : undefined}>
       <Icon icon={icon} fixedWidth gapRight />
-      <span
-        style={{
-          whiteSpace: 'normal',
-          display: 'inline-block',
-          verticalAlign: 'top',
-        }}>
-        {title}
-      </span>
+      <span className={styles.menuItem}>{title}</span>
       {notificationsCount > 0 && <small className="label pull-right bg-yellow">{notificationsCount}</small>}
     </Link>
   </li>

diff --git a/src/components/widgets/Sidebar/Sidebar.less b/src/components/widgets/Sidebar/Sidebar.less
@@ -0,0 +1,22 @@
+.avatar {
+  margin-right: 6px;
+}
+
+.menuItem {
+  white-space: normal;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.cursorPointer {
+  cursor: pointer;
+}
+
+.arrowIcon {
+  height: 15px !important;
+}
+
+.dropdown {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
diff --git a/src/containers/CAS/AuthenticationButtonContainer.js b/src/containers/CAS/AuthenticationButtonContainer.js
@@ -7,7 +7,7 @@ import withLinks from '../../helpers/withLinks';
 const makeAbsolute = url =>
   typeof window === 'undefined' ? url : `${window.location.origin}/${url.indexOf('/') === 0 ? url.substr(1) : url}`;
 
-const ensureAbsoluteUrl = url => (url.match('^(https?:)?//.+') !== null ? url : makeAbsolute(url));
+const ensureAbsoluteUrl = url => (url.match('^https?://.+') !== null ? url : makeAbsolute(url));
 
 class AuthenticationButtonContainer extends Component {
   constructor(props, context) {

diff --git a/src/pages/routes.js b/src/pages/routes.js
@@ -198,7 +198,7 @@ const createLink = path => {
       const res = [...tokens]; // make a copy of URL path tokens (so we can fill in parameters)
       index.forEach(idx => (res[idx] = params.shift())); // fill in parameters using indexed positions
       while (res.length > 0 && !res[res.length - 1]) {
-        // remove empty parameters at the end
+        // remove empty parameters at the end (params.shift() will fill in undefined for every missing parameter)
         res.pop();
       }
       res.unshift(URL_PATH_PREFIX);