WIP: Adds color labels redux

browser/components/BoardShowPage/Card/CardBadges/CardLabel.sass

@@ -11,6 +11,7 @@
   &:hover
     cursor: pointer
   &-text
+    min-height: 2em
     font-weight: bolder
     font-size: 80%
     padding: 0.4em 0.5em

browser/components/BoardShowPage/LabelMain.js

@@ -0,0 +1,239 @@
+// import React, {Component} from 'react'
+// import CardLabel from './Card/CardBadges/CardLabel'
+// import ColorBox from './ColorBox'
+// import Link from '../Link'
+// import Form from '../Form'
+// import Icon from '../Icon'
+// import Button from '../Button'
+// import ConfirmationButton from '../ConfirmationButton'
+// import ActionsMenuPane from '../ActionsMenuPane'
+// import boardStore from '../../stores/boardStore'
+// import commands from '../../commands'
+// import './Card/LabelMenu.sass'
+//
+// export default class MainLabelPanel extends Component {
+//
+//   static propTypes = {
+//     card: React.PropTypes.object.isRequired,
+//     board: React.PropTypes.object.isRequired,
+//     // TODO: onClose: React.PropTypes.func.isRequired
+//
+//   }
+//
+//
+//   //TODO: translate this constructor taken from LabelMenu for these components
+//   constructor(props){
+//     super(props)
+//     this.state = {
+//       null: null
+//     }
+//     this.editLabel = this.editLabel.bind(this)
+//   }
+//
+//   editLabel(labelId){
+//     this.setState({editingLabel: labelId})
+//   }
+//
+//
+//
+//   editLabel(labelId, event){
+//     event.preventDefault()
+//     this.props.editLabel(labelId)
+//     this.props.goToPane('Create Label Pane')()
+//   }
+//
+//
+//   addOrRemoveLabel(labelId, event) {
+//     event.preventDefault()
+//     commands.addOrRemoveLabel(this.props.card.id, labelId)
+//   }
+//
+//   render() {
+//     const { card, board } = this.props
+//     const boardLabels = board.labels.map( label => {
+//       const checked = card.label_ids.includes(label.id)
+//       return <LabelRow
+//         key={label.id}
+//         checked={checked}
+//         label={label}
+//         onEdit={this.editLabel.bind(this, label.id)}
+//         onClick={this.addOrRemoveLabel.bind(this, label.id)}
+//       />
+//     })
+//
+//     return <ActionsMenuPane
+//       heading="Labels"
+//       onClose={this.props.onClose}
+//       className="LabelMenu-MainLabelPane"
+//     >
+//       <div className="LabelMenu-labels">
+//         {boardLabels}
+//       </div>
+//       <div className="LabelMenu-controls">
+//         <Link className="LabelMenu-button" onClick={this.props.goToPane('Create Label Pane')}>
+//           Create Label
+//         </Link>
+//       </div>
+//     </ActionsMenuPane>
+//   }
+// }
+//
+// const LabelRow = (props) => {
+//   const {label, onClick, onEdit, checked} = props
+//
+//   return <div className="LabelMenu-LabelRow">
+//     <div className="LabelMenu-LabelRow-box" onClick={onClick}>
+//       <CardLabel key={label.id} color={label.color} text={label.text} checked={checked}/>
+//     </div>
+//     <Link onClick={onEdit} className="LabelMenu-LabelRow-edit"><Icon type="pencil" /></Link>
+//   </div>
+// }
+//
+// export class CreateLabelPanel extends Component {
+//
+//   constructor(props) {
+//     super(props)
+//     this.state = {}
+//
+//     if (props.state.editingLabel === null){
+//       this.state.labelText = ''
+//       this.state.labelColor = '#98A0A4'
+//     } else {
+//       const label = this.labelBeingEdited(props)
+//       this.state.labelText = label.text
+//       this.state.labelColor = label.color
+//     }
+//
+//     this.deleteLabel = this.deleteLabel.bind(this)
+//     this.changeColor = this.changeColor.bind(this)
+//     this.createOrEditLabel = this.createOrEditLabel.bind(this)
+//     this.handleChange = this.handleChange.bind(this)
+//     this.goBack = this.goBack.bind(this)
+//   }
+//
+//   labelBeingEdited(props=this.props){
+//     return this.isEditing(props) &&
+//       props.board.labels.find(label => label.id === props.state.editingLabel)
+//   }
+//
+//   isEditing(props=this.props){
+//     return typeof props.state.editingLabel === 'number'
+//   }
+//
+//   goBack(){
+//     this.props.goToPane('Main Label Pane')()
+//   }
+//
+//   deleteLabel(event) {
+//     if (event) event.preventDefault()
+//     commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack)
+//   }
+//
+//   changeColor(event) {
+//     if (event) event.preventDefault()
+//     this.setState({labelColor: event.target.attributes.color.value})
+//   }
+//
+//   createOrEditLabel(event){
+//     if (event) event.preventDefault()
+//     this.isEditing() ? this.updateLabel() : this.createLabel()
+//   }
+//
+//   updateLabel(){
+//     commands.updateLabel(
+//       this.props.board.id,
+//       this.props.state.editingLabel,
+//       {
+//         text: this.state.labelText,
+//         color: this.state.labelColor
+//       }
+//     )
+//       .then(this.goBack)
+//   }
+//
+//   createLabel(){
+//     commands.createLabel(this.props.board.id, {
+//       text: this.state.labelText,
+//       color:this.state.labelColor,
+//       cardId: this.props.card.id,
+//     }).then(this.goBack)
+//   }
+//
+//   handleChange(event) {
+//     this.setState({labelText: event.target.value})
+//   }
+//
+//   render() {
+//     const labelBeingEdited = this.labelBeingEdited()
+//     const header = this.isEditing() ? "Edit Label" : "Create Label"
+//
+//     const colorBoxes = colors.map(color => {
+//       const checked = (this.state.labelColor===color) ? true : false
+//       return <div
+//         key={color}
+//         className="LabelMenu-CreateLabelPanel-colorbox">
+//         <ColorBox
+//           checked={checked}
+//           color={color}
+//           boardId={this.props.board.id}
+//           onClick={this.changeColor}
+//           onClose={this.props.onClose}
+//         />
+//       </div>
+//     })
+//
+//     const deleteButton = this.isEditing() ?
+//       <ConfirmationButton
+//         className="LabelMenu-CreateLabelPanel-button"
+//         onConfirm={this.deleteLabel}
+//         type="danger"
+//         submit={false}
+//         title={`Delete Label`}
+//         message={`Are you sure you want to delete the "${labelBeingEdited.text}" label?`}
+//         buttonName="Delete"
+//       >
+//         Delete
+//       </ConfirmationButton> : null
+//
+//     return <ActionsMenuPane
+//       heading={header}
+//       board={this.props.board}
+//       card={this.props.card}
+//       onClose={this.props.onClose}
+//       onBack={this.goBack}
+//       className="LabelMenu-CreateLabelPanel"
+//     >
+//       <Form
+//         method="post"
+//         onSubmit={this.createOrEditLabel}
+//         className="LabelMenu-CreateLabelPanel-Form"
+//       >
+//         <input type="text" placeholder="Card Text" value={this.state.labelText} onChange={this.handleChange}/>
+//         <div className="LabelMenu-CreateLabelPanel-colors">{colorBoxes}</div>
+//         <br/>
+//         <div className="LabelMenu-CreateLabelPanel-controls">
+//           <Button
+//             className="LabelMenu-CreateLabelPanel-button"
+//             type="primary"
+//             submit={true}
+//           >
+//             Save
+//           </Button>
+//           {deleteButton}
+//         </div>
+//       </Form>
+//     </ActionsMenuPane>
+//   }
+// }
+//
+// const colors = [
+//   "#0079bf",
+//   "#d8a359",
+//   "#70a95d",
+//   "#bc6858",
+//   "#9d7cae",
+//   "#d478a4",
+//   "#6cc885",
+//   "#30bbd3",
+//   "#98a0a4"
+// ]

browser/components/BoardShowPage/LabelsPane.js

@@ -0,0 +1,30 @@
+// import React, { Component, PropTypes } from 'react'
+// import CardLabel from './Card/CardBadges/CardLabel'
+
+
+// // This component is designed to be given to ActionsMenu
+// export default class LabelsPane extends Component {
+
+//   static propTypes = {
+//     board: PropTypes.object.isRequired,
+//   }
+
+//   render(){
+//     const { board } = this.props
+
+//     const labels = board.labels.map( label => {
+//       return <Label key={label.id} label={label} />
+//     })
+
+//     return <div className="LabelsPane">
+//       {labels}
+//     </div>
+//   }
+
+// }
+
+
+// const Label = ({label}) =>
+//   <div className="LabelsPane-Label">
+//     <CardLabel key={label.id} color={label.color} text={label.text} checked={false}/>
+//   </div>

browser/components/BoardShowPage/MenuSideBar/LabelsPane.js

@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react'
+import CardLabel from '../Card/CardBadges/CardLabel'
+import SearchBar from './SearchBar'
+import PopoverMenuButton from '../../PopoverMenuButton'
+import './LabelsPane.sass'
+
+
+// This component is designed to be given to ActionsMenu
+export default class LabelsPane extends Component {
+
+  static propTypes = {
+    board: PropTypes.object.isRequired,
+  }
+
+  constructor(props){
+    super(props)
+
+    // states for this component
+    this.state = {
+      searchTerm: '',
+    }
+    // bind properties like this:
+    this.setSearchTerm = this.setSearchTerm.bind(this)
+  }
+
+  setSearchTerm(event) {
+    this.setState({
+      searchTerm: event.target.value
+    })
+  }
+
+  render(){
+    const { board } = this.props
+
+    const labels = board.labels.map( label => {
+      return <CardLabel
+        key={label.id}
+        className="CardLabel"
+        color={label.color}
+        text={label.text}
+        checked={false}
+      />
+    })
+
+    return <div className="BoardShowPage-MenuSideBar-LabelsPane">
+      <SearchBar
+        type="text"
+        className="BoardShowPage-MenuSideBar-LabelsPane-SearchBox"
+        placeholder="Placeholder for searching unarchive."
+        value={this.state.searchTerm}
+        onChange={this.setSearchTerm}
+      />
+
+      {labels}
+
+   <PopoverMenuButton
+    className="BoardShowPage-RenameBoardButton"
+    type="invisible"
+    popover={labels} />
+
+    </div>
+  }
+
+}

browser/components/BoardShowPage/MenuSideBar/LabelsPane.sass

@@ -0,0 +1,2 @@
+.CardLabel
+  	margin-bottom: 1em

browser/components/BoardShowPage/MenuSideBar/SearchBar.js

@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react'
+import Link from '../../Link'
+
+const SearchBar = (props) => {
+  const className = `BoardShowPage-MenuSideBar-SearchBar ${props.className||''}`
+    return <input
+      type="text"
+      className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+      placeholder="Search archive..."
+      value={props.value}
+      onChange={props.onChange}
+    />
+  }
+
+SearchBar.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+}
+
+module.exports = SearchBar

browser/components/BoardShowPage/MenuSideBar/SearchBar.sass

@@ -0,0 +1,13 @@
+.ToggleDisplay
+  padding-left: 15px
+  padding-right: 50px
+  position: relative
+  user-select: none
+  font-size: 14px
+  min-width: 9em
+  &:active
+    background: #CDD2D4
+    color: #4d4d4d
+  &:hover
+    background: #D6DADC
+    color: #4d4d4d