From 07a7915bad20b854ce36289b96f1ccb763f67958 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sat, 11 Jun 2016 18:24:53 -0300 Subject: [PATCH 1/5] [Ivan Diaz] - Fix dropdown issues, update icon support --- client/src/app/main/main-layout-header.js | 9 ++--- client/src/app/main/main-layout-header.scss | 4 --- client/src/core-components/drop-down.js | 39 +++++++++++++++------ client/src/core-components/drop-down.scss | 13 +++++++ client/src/core-components/icon.js | 2 +- client/src/core-components/menu.js | 0 tests/clean_db.sh | 2 +- 7 files changed, 46 insertions(+), 23 deletions(-) create mode 100644 client/src/core-components/menu.js diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js index ba54472b..12b60c08 100644 --- a/client/src/app/main/main-layout-header.js +++ b/client/src/app/main/main-layout-header.js @@ -32,13 +32,10 @@ let MainLayoutHeader = React.createClass({ }, getLanguageList() { - return languageList.map((item) => { + return languageList.map((language) => { return { - content: ( - - {item} - - ) + content: language, + icon: codeLanguages[language] }; }); }, diff --git a/client/src/app/main/main-layout-header.scss b/client/src/app/main/main-layout-header.scss index d0c525ef..fbb2feda 100644 --- a/client/src/app/main/main-layout-header.scss +++ b/client/src/app/main/main-layout-header.scss @@ -19,9 +19,5 @@ position: relative; top: 5px; left: -6px; - - .language-icon { - margin-right: 10px; - } } } \ No newline at end of file diff --git a/client/src/core-components/drop-down.js b/client/src/core-components/drop-down.js index 53f63c57..ba2dd31a 100644 --- a/client/src/core-components/drop-down.js +++ b/client/src/core-components/drop-down.js @@ -1,18 +1,19 @@ -import React from 'react'; -import classNames from 'classnames'; -import _ from 'lodash'; -import {Motion, spring} from 'react-motion'; +const React = require('react'); +const classNames = require('classnames'); +const _ = require('lodash'); +const {Motion, spring} = require('react-motion'); +const callback = require('lib-core/callback'); -import callback from 'lib-core/callback'; +const Icon = require('core-components/icon'); -let DropDown = React.createClass({ +const DropDown = React.createClass({ propTypes: { defaultSelectedIndex: React.PropTypes.number, selectedIndex: React.PropTypes.number, items: React.PropTypes.arrayOf(React.PropTypes.shape({ - content: React.PropTypes.node.isRequired, + content: React.PropTypes.string.isRequired, icon: React.PropTypes.string })).isRequired }, @@ -48,11 +49,12 @@ let DropDown = React.createClass({ render() { let animation = this.getAnimationStyles(); + let selectedItem = this.props.items[this.getSelectedIndex()]; return (
- {this.props.items[this.getSelectedIndex()].content} + {this.renderItem(selectedItem)}
{this.renderList} @@ -67,23 +69,38 @@ let DropDown = React.createClass({ return (
    - {this.props.items.map(this.renderItem)} + {this.props.items.map(this.renderListItem)}
); }, - renderItem(item, index) { + renderListItem(item, index) { return (
  • - {item.content} + {this.renderItem(item)}
    • ); }, + renderItem(item) { + return ( + + {(item.icon) ? this.renderIcon(item.icon) : null}{item.content} + + ); + }, + + renderIcon(icon) { + return ( + + ); + }, + getClass() { let classes = { 'drop-down': true, + 'drop-down_closed': !this.state.opened, [this.props.className]: (this.props.className) }; diff --git a/client/src/core-components/drop-down.scss b/client/src/core-components/drop-down.scss index 8b45ad67..f7b5d3ac 100644 --- a/client/src/core-components/drop-down.scss +++ b/client/src/core-components/drop-down.scss @@ -18,6 +18,7 @@ background-color: white; position: absolute; width: 150px; + z-index: 5; } &--list { @@ -35,4 +36,16 @@ } } } + + &--icon { + margin-right: 8px; + margin-bottom: 2px; + } + + &_closed { + + .drop-down--list-container { + pointer-events: none; + } + } } \ No newline at end of file diff --git a/client/src/core-components/icon.js b/client/src/core-components/icon.js index 0ead35eb..3642c1d0 100644 --- a/client/src/core-components/icon.js +++ b/client/src/core-components/icon.js @@ -8,7 +8,7 @@ let Icon = React.createClass({ render() { return ( - + ); } diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js new file mode 100644 index 00000000..e69de29b diff --git a/tests/clean_db.sh b/tests/clean_db.sh index e0b432ae..d99eb4c2 100755 --- a/tests/clean_db.sh +++ b/tests/clean_db.sh @@ -1,7 +1,7 @@ #!/bin/bash # DELETE ALL TABLES -TABLES=$(mysql -u root development -e "SHOW TABLES IN os_dev;" | awk '{ print $1}' | grep -v '^Tables') +TABLES=$(mysql -u root development -e "SHOW TABLES IN development;" | awk '{ print $1}' | grep -v '^Tables') for t in $TABLES do From 6033e4afba81991d2fa421838fc73a97277e4d9e Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sat, 11 Jun 2016 20:55:55 -0300 Subject: [PATCH 2/5] [Ivan Diaz] - Add menu component and implement it in dropdown --- client/src/core-components/drop-down.js | 55 +++++-------- client/src/core-components/drop-down.scss | 29 ++----- client/src/core-components/menu.js | 97 +++++++++++++++++++++++ client/src/core-components/menu.scss | 23 ++++++ 4 files changed, 144 insertions(+), 60 deletions(-) create mode 100644 client/src/core-components/menu.scss diff --git a/client/src/core-components/drop-down.js b/client/src/core-components/drop-down.js index ba2dd31a..c608b498 100644 --- a/client/src/core-components/drop-down.js +++ b/client/src/core-components/drop-down.js @@ -4,6 +4,7 @@ const _ = require('lodash'); const {Motion, spring} = require('react-motion'); const callback = require('lib-core/callback'); +const Menu = require('core-components/menu'); const Icon = require('core-components/icon'); const DropDown = React.createClass({ @@ -11,11 +12,7 @@ const DropDown = React.createClass({ propTypes: { defaultSelectedIndex: React.PropTypes.number, selectedIndex: React.PropTypes.number, - - items: React.PropTypes.arrayOf(React.PropTypes.shape({ - content: React.PropTypes.string.isRequired, - icon: React.PropTypes.string - })).isRequired + items: Menu.propTypes.items }, getDefaultProps() { @@ -53,9 +50,7 @@ const DropDown = React.createClass({ return (
    -
    - {this.renderItem(selectedItem)} -
    + {this.renderCurrentItem(selectedItem)} {this.renderList} @@ -65,35 +60,30 @@ const DropDown = React.createClass({ renderList({opacity, translateY}) { let style = { opacity: opacity, transform: `translateY(${translateY}px)`}; + let menuProps = { + items: this.props.items, + onItemClick: this.handleItemClick, + onMouseDown: this.handleListMouseDown + }; return (
    -
      - {this.props.items.map(this.renderListItem)} -
    +
    ); }, - renderListItem(item, index) { - return ( -
  • - {this.renderItem(item)} -
    • - ); - }, + renderCurrentItem(item) { + var iconNode = null; - renderItem(item) { - return ( - - {(item.icon) ? this.renderIcon(item.icon) : null}{item.content} - - ); - }, + if (item.icon) { + iconNode = ; + } - renderIcon(icon) { return ( - +
    + {iconNode}{item.content} +
    ); }, @@ -108,15 +98,6 @@ const DropDown = React.createClass({ return classNames(classes); }, - getItemProps(index) { - return { - className: 'drop-down--list-item', - onClick: this.handleItemClick.bind(this, index), - onMouseDown: this.handleItemMouseDown, - key: index - }; - }, - handleBlur() { this.setState({ opened: false @@ -142,7 +123,7 @@ const DropDown = React.createClass({ } }, - handleItemMouseDown(event) { + handleListMouseDown(event) { event.preventDefault(); }, diff --git a/client/src/core-components/drop-down.scss b/client/src/core-components/drop-down.scss index f7b5d3ac..74eb1270 100644 --- a/client/src/core-components/drop-down.scss +++ b/client/src/core-components/drop-down.scss @@ -7,41 +7,24 @@ user-select: none; cursor: pointer; - &--current { + &--current-item { background-color: $light-grey; border-radius: 4px 4px 0 0; color: $primary-black; padding: 6px; } + &--current-item-icon { + margin-right: 8px; + margin-bottom: 2px; + } + &--list-container { - background-color: white; position: absolute; width: 150px; z-index: 5; } - &--list { - color: $dark-grey; - margin: 0; - padding: 0; - list-style-type: none; - - &-item { - padding: 8px; - - &:hover { - background-color: $primary-red; - color: white; - } - } - } - - &--icon { - margin-right: 8px; - margin-bottom: 2px; - } - &_closed { .drop-down--list-container { diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js index e69de29b..3b144174 100644 --- a/client/src/core-components/menu.js +++ b/client/src/core-components/menu.js @@ -0,0 +1,97 @@ +const React = require('react'); +const _ = require('lodash'); +const classNames = require('classnames'); + +const Icon = require('core-components/icon'); + +const Menu = React.createClass({ + + propTypes: { + type: React.PropTypes.oneOf(['primary', 'secondary']), + items: React.PropTypes.arrayOf(React.PropTypes.shape({ + content: React.PropTypes.string.isRequired, + icon: React.PropTypes.string + })).isRequired, + selectedIndex: React.PropTypes.number + }, + + getDefaultProps() { + return { + type: 'primary', + selectedIndex: 0 + }; + }, + + render() { + return ( +
      + {this.props.items.map(this.renderListItem)} +
    + ) + }, + + renderListItem(item, index) { + return ( +
  • + {this.renderItem(item)} +
    • + ); + }, + + renderItem(item) { + return ( + + {(item.icon) ? this.renderIcon(item.icon) : null}{item.content} + + ); + }, + + renderIcon(icon) { + return ( + + ); + }, + + getProps() { + var props = _.clone(this.props); + + props.className = this.getClass(); + props.type = null; + + return props; + }, + + getClass() { + let classes = { + 'menu': true, + 'menu_secondary': (this.props.type === 'secondary') + }; + + return classNames(classes); + }, + + getItemProps(index) { + return { + className: this.getItemClass(index), + onClick: this.handleItemClick.bind(this, index), + key: index + }; + }, + + getItemClass(index) { + let classes = { + 'menu--list-item': true, + 'menu--list-item_selected': (this.props.selectedIndex === index) + }; + + return classNames(classes); + }, + + handleItemClick(index) { + if (this.props.onItemClick) { + this.props.onItemClick(index); + } + } +}); + +export default Menu; \ No newline at end of file diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss new file mode 100644 index 00000000..6e9f10aa --- /dev/null +++ b/client/src/core-components/menu.scss @@ -0,0 +1,23 @@ +@import "../scss/vars"; + +.menu { + background-color: white; + color: $dark-grey; + margin: 0; + padding: 0; + list-style-type: none; + + &--list-item { + padding: 8px; + + &:hover { + background-color: $primary-red; + color: white; + } + } + + &--icon { + margin-right: 8px; + margin-bottom: 2px; + } +} \ No newline at end of file From f466a24b4588300c699d082eb08a98e080affdaa Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sat, 11 Jun 2016 21:37:08 -0300 Subject: [PATCH 3/5] [Ivan Diaz] - Add secondary menu, $secondary-blue variable, refactor Icon component, update demo page [skip ci] --- client/src/app/demo/components-demo-page.js | 39 ++++++++++++++----- client/src/core-components/icon.js | 42 +++++++++++++++++---- client/src/core-components/menu.scss | 7 ++++ client/src/main.scss | 2 +- client/src/scss/_vars.scss | 1 + 5 files changed, 73 insertions(+), 18 deletions(-) diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index f32e42d0..38a79775 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -1,16 +1,23 @@ 'use strict'; -import React from 'react'; -import {Link} from 'react-router'; -import DocumentTitle from 'react-document-title'; +const React = require('react'); +const DocumentTitle = require('react-document-title'); -import Button from 'core-components/button'; -import Input from 'core-components/input'; -import Checkbox from 'core-components/checkbox'; -import Widget from 'core-components/widget'; -import DropDown from 'core-components/drop-down'; +const Button = require('core-components/button'); +const Input = require('core-components/input'); +const Checkbox = require('core-components/checkbox'); +const Widget = require('core-components/widget'); +const DropDown = require('core-components/drop-down'); +const Menu = require('core-components/menu'); let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}]; +let secondaryMenuItems = [ + {content: 'My Tickets', icon: 'file-text'}, + {content: 'New Ticket', icon: 'plus'}, + {content: 'Articles', icon: 'book'}, + {content: 'Edit Profile', icon: 'pencil'}, + {content: 'Close Session', icon: 'lock'} +]; let DemoPage = React.createClass({ @@ -58,13 +65,25 @@ let DemoPage = React.createClass({ render: ( ) + }, + { + title: 'Primary Menu', + render: ( + + ) + }, + { + title: 'Secondary Menu', + render: ( + + ) } ], render() { return ( -
    +
    {this.renderElements()}
    @@ -74,7 +93,7 @@ let DemoPage = React.createClass({ renderElements: function () { return this.elements.map((element) => { return ( -
    +

    {element.title}

    diff --git a/client/src/core-components/icon.js b/client/src/core-components/icon.js index 3642c1d0..26c0898e 100644 --- a/client/src/core-components/icon.js +++ b/client/src/core-components/icon.js @@ -1,17 +1,45 @@ -import React from 'react'; +const React = require('react'); +const classNames = require('classnames'); -let Icon = React.createClass({ +const Icon = React.createClass({ propTypes: { - name: React.PropTypes.string.isRequired + name: React.PropTypes.string.isRequired, + size: React.PropTypes.number + }, + + getDefaultProps() { + return { + size: 0 + }; }, render() { - return ( - - ); - } + return (this.props.name.length > 2) ? this.renderFontIcon() : this.renderFlag(); + }, + renderFontIcon() { + return ( +