Progress

2020-02-19 18:57:07 -05:00
parent be3daea78b
commit e37500c0cf
105 changed files with 1975 additions and 1393 deletions
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -0,0 +1,115 @@
+import { NavLink } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import Button from './button'
+import Icon from './icon'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class SidebarSectionItem extends PureComponent {
+  static propTypes = {
+    to: PropTypes.string,
+    active: PropTypes.bool,
+    icon: PropTypes.string,
+    image: PropTypes.string,
+    title: PropTypes.string,
+    me: PropTypes.bool,
+    suffix: PropTypes.node,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { to, active, icon, image, title, me, count } = this.props
+    const { hovering } = this.state
+
+    const iconSize = '16px'
+    const shouldShowActive = hovering || active
+    const isNotifications = to === '/notifications'
+
+    const containerClasses = cx({
+      default: 1,
+      maxWidth100PC: 1,
+      width100PC: 1,
+      flexRow: 1,
+      paddingVertical5PX: 1,
+      paddingHorizontal10PX: 1,
+      alignItemsCenter: 1,
+      radiusSmall: 1,
+      // border1PX: shouldShowActive,
+      // bordercolorSecondary: shouldShowActive,
+      backgroundSubtle2: shouldShowActive,
+    })
+
+    const textClasses = cx({
+      default: 1,
+      fontWeightNormal: 1,
+      fontSize15PX: 1,
+      text: 1,
+      textOverflowEllipsis: 1,
+      colorPrimary: shouldShowActive || me,
+      colorSecondary: !hovering && !active && !me,
+    })
+
+    const iconClasses = cx({
+      fillColorBlack: shouldShowActive,
+      fillcolorSecondary: !hovering && !active,
+    })
+
+    const countClasses = cx({
+      default: 1,
+      text: 1,
+      marginLeftAuto: 1,
+      fontSize12PX: 1,
+      paddingHorizontal5PX: 1,
+      marginRight2PX: 1,
+      lineHeight15: 1,
+      marginLeft5PX: 1,
+      colorSecondary: !isNotifications,
+      colorWhite: isNotifications,
+      backgroundColorBrand: isNotifications,
+      radiusSmall: isNotifications,
+    })
+
+    return (
+      <NavLink
+        to={to}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+        className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
+      >
+        <div className={containerClasses}>
+          <div className={[_s.default]}>
+            { icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
+            { image &&
+              <img
+                className={[_s.default, _s.circle].join(' ')}
+                width={iconSize}
+                height={iconSize}
+                src={image}
+              />
+            }
+          </div>
+          <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
+            <span className={textClasses}>{title}</span>
+          </div>
+          { count > 0 &&
+            <span className={countClasses}>
+              {count}
+            </span>
+          }
+        </div>
+      </NavLink>
+    )
+  }
+}