Allow tagging of Accounts, Addresses and Contracts

js/package.json

@@ -119,6 +119,7 @@
     "lodash": "^4.11.1",
     "marked": "^0.3.6",
     "material-ui": "^0.15.4",
+    "material-ui-chip-input": "github:ngotchac/material-ui-chip-input",
     "moment": "^2.14.1",
     "react": "^15.2.1",
     "react-addons-css-transition-group": "^15.2.1",

js/src/modals/EditMeta/editMeta.js

@@ -17,6 +17,8 @@
 import React, { Component, PropTypes } from 'react';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 import ContentSave from 'material-ui/svg-icons/content/save';
+// import ChipInput from 'material-ui-chip-input';
+import ChipInput from 'material-ui-chip-input/src/ChipInput';
 
 import { Button, Form, Input, Modal } from '../../ui';
 import { validateName } from '../../util/validation';
@@ -55,6 +57,7 @@ export default class EditMeta extends Component {
             error={ nameError }
             onSubmit={ this.onNameChange } />
           { this.renderMetaFields() }
+          { this.renderTags() }
         </Form>
       </Modal>
     );
@@ -96,6 +99,21 @@ export default class EditMeta extends Component {
     });
   }
 
+  renderTags () {
+    const { meta } = this.state;
+    const { tags } = meta || [];
+    const onChange = (chips) => this.onMetaChange('tags', chips);
+
+    return (<ChipInput
+      defaultValue={ tags }
+      onChange={ onChange }
+      floatingLabelText='(optional) tags'
+      hintText='press <Enter> to add a tag'
+      floatingLabelFixed
+      fullWidth
+    />);
+  }
+
   onNameChange = (name) => {
     this.setState(validateName(name));
   }

js/src/ui/Actionbar/Search/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './search';

js/src/ui/Actionbar/Search/search.css

@@ -0,0 +1,43 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.searchcontainer {
+  display: flex;
+  overflow: hidden;
+}
+
+.searchButton {
+  min-width: 50px !important;
+}
+
+.input {
+  width: 500px !important;
+}
+
+.inputContainer {
+  transition: width 450ms ease-in-out 0ms, height 0ms ease-in-out 0ms;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 500px;
+  height: 100%;
+  position: relative;
+}
+
+.inputContainerShown {
+  transition: width 450ms ease-in-out 0ms, height 0ms ease-in-out 400ms;
+  width: 0;
+  height: 0;
+}

js/src/ui/Actionbar/Search/search.js

@@ -0,0 +1,176 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+// import ChipInput from 'material-ui-chip-input';
+import ChipInput from 'material-ui-chip-input/src/ChipInput';
+import ActionSearch from 'material-ui/svg-icons/action/search';
+import { uniq } from 'lodash';
+
+import { Button } from '../../';
+
+import styles from './search.css';
+
+export default class ActionbarSearch extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    tokens: PropTypes.array
+  };
+
+  state = {
+    showSearch: false,
+    stateChanging: false,
+    inputValue: '',
+    timeoutIds: []
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { tokens } = nextProps;
+
+    if (tokens.length > 0 && this.props.tokens.length === 0) {
+      this.handleOpenSearch(true, true);
+    }
+  }
+
+  componentWillUnmount () {
+    const { timeoutIds } = this.state;
+
+    if (timeoutIds.length > 0) {
+      timeoutIds.map(id => window.clearTimeout(id));
+    }
+  }
+
+  render () {
+    const { showSearch } = this.state;
+    const { tokens } = this.props;
+
+    const inputContainerClasses = [ styles.inputContainer ];
+
+    if (!showSearch) {
+      inputContainerClasses.push(styles.inputContainerShown);
+    }
+
+    return (
+      <div
+        className={ styles.searchcontainer }
+        key='searchAccount'>
+        <div className={ inputContainerClasses.join(' ') }>
+          <ChipInput
+            clearOnBlur={ false }
+            className={ styles.input }
+            hintText='Enter search input...'
+            hintStyle={ {
+              transition: 'none'
+            } }
+            ref='searchInput'
+            value={ tokens }
+            onBlur={ this.handleSearchBlur }
+            onRequestAdd={ this.handleTokenAdd }
+            onRequestDelete={ this.handleTokenDelete }
+            onUpdateInput={ this.handleInputChange } />
+        </div>
+
+        <Button
+          className={ styles.searchButton }
+          icon={ <ActionSearch /> }
+          label=''
+          onClick={ this.handleSearchClick } />
+      </div>
+    );
+  }
+
+  handleTokenAdd = (value) => {
+    const { tokens } = this.props;
+
+    const newSearchValues = uniq([].concat(tokens, value));
+
+    this.setState({
+      inputValue: ''
+    });
+
+    this.handleSearchChange(newSearchValues);
+  }
+
+  handleTokenDelete = (value) => {
+    const { tokens } = this.props;
+
+    const newSearchValues = []
+      .concat(tokens)
+      .filter(v => v !== value);
+
+    this.setState({
+      inputValue: ''
+    });
+
+    this.handleSearchChange(newSearchValues);
+    this.refs.searchInput.focus();
+  }
+
+  handleInputChange = (value) => {
+    this.setState({ inputValue: value });
+  }
+
+  handleSearchChange = (searchValues) => {
+    const { onChange } = this.props;
+    const newSearchValues = searchValues.filter(v => v.length > 0);
+
+    onChange(newSearchValues);
+  }
+
+  handleSearchClick = () => {
+    const { showSearch } = this.state;
+
+    this.handleOpenSearch(!showSearch);
+  }
+
+  handleSearchBlur = () => {
+    const timeoutId = window.setTimeout(() => {
+      const { inputValue } = this.state;
+      const { tokens } = this.props;
+
+      if (tokens.length === 0 && inputValue.length === 0) {
+        this.handleOpenSearch(false);
+      }
+    }, 250);
+
+    this.setState({
+      timeoutIds: [].concat(this.state.timeoutIds, timeoutId)
+    });
+  }
+
+  handleOpenSearch = (showSearch, force) => {
+    if (this.state.stateChanging && !force) return false;
+
+    this.setState({
+      showSearch: showSearch,
+      stateChanging: true
+    });
+
+    if (showSearch) {
+      this.refs.searchInput.focus();
+    } else {
+      this.refs.searchInput.getInputNode().blur();
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      this.setState({ stateChanging: false });
+    }, 450);
+
+    this.setState({
+      timeoutIds: [].concat(this.state.timeoutIds, timeoutId)
+    });
+  }
+}

js/src/ui/Actionbar/Sort/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './sort';

js/src/ui/Actionbar/Sort/sort.css

@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.sortButton {
+  min-width: 50px !important;
+}

js/src/ui/Actionbar/Sort/sort.js

@@ -0,0 +1,72 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import IconMenu from 'material-ui/IconMenu';
+import MenuItem from 'material-ui/MenuItem';
+
+import SortIcon from 'material-ui/svg-icons/content/sort';
+
+import { Button } from '../../';
+
+import styles from './sort.css';
+
+export default class ActionbarSort extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    order: PropTypes.string
+  };
+
+  state = {
+    menuOpen: false
+  }
+
+  render () {
+    return (
+      <IconMenu
+        iconButtonElement={
+          <Button
+            className={ styles.sortButton }
+            label=''
+            icon={ <SortIcon /> }
+            onClick={ this.handleMenuOpen }
+            />
+        }
+        open={ this.state.menuOpen }
+        onRequestChange={ this.handleMenuChange }
+        onItemTouchTap={ this.handleSortChange }
+        targetOrigin={ { horizontal: 'right', vertical: 'top' } }
+        anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
+        >
+        <MenuItem value='tags' primaryText='Sort by tags' />
+        <MenuItem value='name' primaryText='Sort by name' />
+      </IconMenu>
+    );
+  }
+
+  handleSortChange = (event, child) => {
+    const order = child.props.value;
+    this.props.onChange(order);
+  }
+
+  handleMenuOpen = () => {
+    this.setState({ menuOpen: true });
+  }
+
+  handleMenuChange = (open) => {
+    this.setState({ menuOpen: open });
+  }
+}