-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #83 from appirio-tech/dev
Merging new navbar and tooltips into master
- Loading branch information
Showing
50 changed files
with
1,382 additions
and
231 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,4 +7,5 @@ coverage | |
| .idea | ||
| .env | ||
| npm-debug.log | ||
| .DS_Store | ||
| .DS_Store | ||
| dist | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| require('./Carousel.scss') | ||
| import classNames from 'classnames' | ||
|
|
||
| import React, { Component } from 'react' | ||
| import ReactDOM from 'react-dom' | ||
|
|
||
| import LeftArrowIcon from '../Icons/LeftArrowIcon' | ||
| import RightArrowIcon from '../Icons/RightArrowIcon' | ||
|
|
||
| export default class Carousel extends Component { | ||
| componentWillMount() { | ||
| this.handleResize = this.handleResize.bind(this) | ||
| window.addEventListener('resize', this.handleResize) | ||
| this.handlePageUp = this.handlePageUp.bind(this) | ||
| this.handlePageDown = this.handlePageDown.bind(this) | ||
| this.setState({firstVisibleItem: this.props.firstVisibleItem || 0}) | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize) | ||
| } | ||
|
|
||
| handleResize() { | ||
| this.validatePagers() | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.validatePagers() | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| this.validatePagers() | ||
| } | ||
|
|
||
| validatePagers() { | ||
| const pageDownClass = classNames( | ||
| 'page-down', | ||
| { hidden: this.state.firstVisibleItem === 0 } | ||
| ) | ||
| const pageUpClass = classNames( | ||
| 'page-up', | ||
| { hidden: this.lastElementVisible(this.state.firstVisibleItem) } | ||
| ) | ||
| const node = ReactDOM.findDOMNode(this) | ||
| const pageDownNode = node.querySelector('.page-down') | ||
| const pageUpNode = node.querySelector('.page-up') | ||
| pageDownNode.className = pageDownClass | ||
| pageUpNode.className = pageUpClass | ||
| } | ||
|
|
||
|
|
||
| lastElementVisible(firstVisibleItem) { | ||
| const node = ReactDOM.findDOMNode(this) | ||
| const parentNode = node.parentNode | ||
| const maxWidth = parentNode.getBoundingClientRect().width | ||
| const visibleAreaNode = node.querySelector('.visible-area') | ||
| visibleAreaNode.style.width = maxWidth + 'px' | ||
| const itemNodes = visibleAreaNode.children | ||
| let width = 0 | ||
| if (firstVisibleItem > 0) { | ||
| // if first item is not visible, account 20px for page-down element | ||
| width += 20 | ||
| // account the right margin for page-down (see Carousel.scss) | ||
| width += 15 | ||
| } | ||
| for (let i = 0; i < itemNodes.length; i++) { | ||
| const itemNode = itemNodes[i] | ||
| width += itemNode.getBoundingClientRect().width | ||
| if (i < itemNodes.length - 1) { | ||
| // account 30px for every carousel-item (see Carousel.scss) | ||
| width += 30 | ||
| } | ||
| if (width > maxWidth) { | ||
| return false | ||
| } | ||
| } | ||
| return true | ||
| } | ||
|
|
||
| handlePageUp() { | ||
| if (!this.lastElementVisible(this.state.firstVisibleItem + 1)) { | ||
| const nextFirstVisibleItem = this.state.firstVisibleItem + 1 | ||
| this.setState({firstVisibleItem: nextFirstVisibleItem}) | ||
| } | ||
| } | ||
|
|
||
| handlePageDown() { | ||
| if (this.state.firstVisibleItem > 0) { | ||
| const nextFirstVisibleItem = this.state.firstVisibleItem - 1 | ||
| this.setState({firstVisibleItem: nextFirstVisibleItem}) | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const carouselItem = (item, idx) => { | ||
| if (idx < this.state.firstVisibleItem) { | ||
| return | ||
| } | ||
|
|
||
| return ( | ||
| <div key={idx} className="carousel-item"> | ||
| {item} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="Carousel"> | ||
| <div className="page-down" onClick={this.handlePageDown}> | ||
| <LeftArrowIcon fill="#FFFFFF" /> | ||
| </div> | ||
| <div className="visible-area"> | ||
| { this.props.children.map(carouselItem) } | ||
| </div> | ||
| <div className="page-up" onClick={this.handlePageUp}> | ||
| <RightArrowIcon fill="#FFFFFF" /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| @import 'topcoder/tc-includes'; | ||
|
|
||
| $pager-bg-color: #737380; | ||
|
|
||
| .Carousel { | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| .page-down { | ||
| width: 20px; | ||
| margin-right: 15px; | ||
| background-color: $pager-bg-color; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
|
|
||
| &.hidden { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .page-up { | ||
| width: 20px; | ||
| background-color: $pager-bg-color; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
|
|
||
| &.hidden { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .visible-area { | ||
| display: flex; | ||
| flex-direction: row; | ||
| overflow: hidden; | ||
|
|
||
| .carousel-item:not(:first-child) { | ||
| margin-left: 30px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react' | ||
| import Carousel from './Carousel' | ||
|
|
||
| import StandardListItem from '../StandardListItem/StandardListItem' | ||
|
|
||
| require('./CarouselExamples.scss') | ||
|
|
||
|
|
||
| const CarouselExamples = () => ( | ||
|
|
||
| <div className="CarouselExamples"> | ||
| <p>With limited width</p> | ||
| <div className="limited-width"> | ||
| <Carousel> | ||
| <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} /> | ||
| </Carousel> | ||
| </div> | ||
| <p>With full width</p> | ||
| <div className="full-width"> | ||
| <Carousel> | ||
| <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} /> | ||
| </Carousel> | ||
| </div> | ||
| <p>With limited width and custom first visible element</p> | ||
| <div className="limited-width"> | ||
| <Carousel firstVisibleItem={1}> | ||
| <StandardListItem labelText="Community" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Compete" imgSrc={require('./placeholder.svg')} /> | ||
| <StandardListItem labelText="Learn" imgSrc={require('./placeholder.svg')} /> | ||
| </Carousel> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| module.exports = CarouselExamples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| @import 'topcoder/tc-includes'; | ||
|
|
||
| .Carousel { | ||
| .StandardListItem { | ||
| padding: 0px; | ||
| } | ||
| } | ||
|
|
||
| .CarouselExamples { | ||
| > p { | ||
| border: 1px solid $accent-gray; | ||
| margin: 20px 0px; | ||
| } | ||
| .limited-width { | ||
| width: 200px; | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react' | ||
|
|
||
| const HamburgerIcon = ({ width, height, stroke }) => { | ||
| const s = (stroke || '#A3A3AE') | ||
| return ( | ||
| <svg width={ width || '22px' } height={ height || '16px' } viewBox="0 0 22 16" version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
| <title>ico-hamburger</title> | ||
| <desc>Created with Sketch.</desc> | ||
| <defs></defs> | ||
| <g id="Scaling" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd" strokeLinecap="round" strokeLinejoin="round"> | ||
| <g id="Components---Mobile" transform="translate(-1379.000000, -434.000000)" stroke={ s } strokeWidth="2"> | ||
| <g id="ico-mobile-menu-default" transform="translate(1380.000000, 434.000000)"> | ||
| <path d="M0,8 L20,8" id="Stroke-5456"></path> | ||
| <path d="M0,1 L20,1" id="Stroke-5460"></path> | ||
| <path d="M0,15 L20,15" id="Stroke-5461"></path> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export default HamburgerIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from 'react' | ||
|
|
||
| const LeftArrowIcon = ({ width, height, fill }) => { | ||
| const f = (fill || '#A3A3AE') | ||
| return ( | ||
| <svg width={ width || '12px' } height={ height || '19px' } viewBox="0 0 12 19" version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
| <title>ico-arrow-big-left</title> | ||
| <desc>Created with Sketch.</desc> | ||
| <defs></defs> | ||
| <g id="ASSETS-EXPORT" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd"> | ||
| <g id="Assets" transform="translate(-950.000000, -252.000000)" fill={ f }> | ||
| <path d="M959.025853,261.50145 L951.137711,253.305117 C950.841671,253.006868 950.841671,252.524146 951.137711,252.223687 C951.433751,251.925438 951.912055,251.925438 952.208095,252.223687 L960.857325,260.959078 C961.153365,261.258432 961.153365,261.742258 960.857325,262.040508 L952.208095,270.775899 C951.912055,271.075253 951.433751,271.074148 951.137711,270.775899 C950.841671,270.478754 950.841671,269.994927 951.137711,269.694469 L959.025853,261.50145 L959.025853,261.50145 Z" id="ico-arrow-big-left" transform="translate(955.997518, 261.500000) scale(-1, 1) translate(-955.997518, -261.500000) "></path> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export default LeftArrowIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react' | ||
|
|
||
| const MagnifyGlassIcon = ({ width, height, stroke }) => { | ||
| const s = (stroke || '#A3A3AE') | ||
| return ( | ||
| <svg width={ width || '22px' } height={ height || '22px' } viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
| <title>ico-magnify</title> | ||
| <defs></defs> | ||
| <g id="Scaling" stroke="none" strokeWidth="1" fill="none" fill-rule="evenodd" strokeLinecap="round" strokeLinejoin="round"> | ||
| <g id="Components---Mobile" transform="translate(-1327.000000, -432.000000)" stroke={ s } strokeWidth="2"> | ||
| <g id="ico-mobile-search-default" transform="translate(1328.000000, 433.000000)"> | ||
| <path d="M20,20 L14.632381,14.632381" id="Stroke-5191"></path> | ||
| <path d="M0,8.57142857 C0,3.83714286 3.83714286,0 8.57142857,0 C13.3057143,0 17.1428571,3.83714286 17.1428571,8.57142857 C17.1428571,13.3057143 13.3057143,17.1428571 8.57142857,17.1428571 C3.83714286,17.1428571 0,13.3057143 0,8.57142857 L0,8.57142857 Z" id="Stroke-5192"></path> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export default MagnifyGlassIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
|
|
||
| const PlaceholderIcon = ({ width, height, fill }) => { | ||
| const f = (fill || '#B47DD6') | ||
| return ( | ||
| <svg width={ width || '32px' } height={ height || '32px' } viewBox="0 0 32 32"> | ||
| <rect width="32" height="32" fill={ f }></rect> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export default PlaceholderIcon |
Oops, something went wrong.