add text:ellipsis to some labels & add member deletion confirm

browser/main/HomePage/ArticleNavigator.js

@@ -8,10 +8,6 @@ import Preferences from 'boost/components/modal/Preferences'
 import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
 
 export default class ArticleNavigator extends React.Component {
-  componentDidMount () {
-    this.handlePreferencesButtonClick()
-  }
-
   handlePreferencesButtonClick (e) {
     openModal(Preferences)
   }

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -90,6 +90,7 @@ articleNavBgColor = #353535
       background-color transparent
       color white
       padding-left 15px
+      overflow ellipsis
       &:hover
         background-color transparentify(white, 5%)
       &.active, &:active

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -250,6 +250,36 @@ iptFocusBorderColor = #369DCD
             &>.control
               float right
           &>li
+            &.edit
+              .colDescription
+                font-size 14px
+                line-height 33px
+                padding-left 15px
+                float left
+                strong
+                  font-size 16px
+                  color brandColor
+              .colDeleteConfirm
+                float right
+                margin-right 15px
+                button
+                  border none
+                  height 30px
+                  width 60px
+                  margin-top 1.5px
+                  font-size 14px
+                  background-color transparent
+                  color stripBtnColor
+                  &:hover
+                    color stripHoverBtnColor
+                  &:disabled
+                    color lighten(stripBtnColor, 10%)
+                    cursor not-allowed
+                  &.primary
+                   color brandColor
+                   &:hover
+                    color lighten(brandColor, 10%)
+
             border-bottom 1px solid borderColor
             height 44px
             padding 0 25px
@@ -272,11 +302,14 @@ iptFocusBorderColor = #369DCD
               .userInfo
                 float left
                 margin-top 7px
+                width 205px
                 .userName
                   font-size 16px
                   margin-bottom 2px
+                  overflow ellipsis
                 .userEmail
                   font-size 12px
+                  overflow ellipsis
             .colRole
               float left
               width 75px
@@ -365,6 +398,7 @@ iptFocusBorderColor = #369DCD
                 font-size 14px
                 outline none
                 width 150px
+                overflow ellipsis
                 &:hover
                   border-color borderColor
                 &:focus

lib/components/modal/Preference/MemberRow.js

@@ -0,0 +1,106 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import api from 'boost/api'
+
+const IDLE = 'IDLE'
+const DELETE = 'DELETE'
+
+export default class MemberRow extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE
+    }
+  }
+  handleMemberRoleChange (e) {
+    let input = {
+      name: this.props.member.name,
+      role: e.target.value
+    }
+
+    api.setMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({mode: DELETE})
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({mode: IDLE})
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let input = {
+      name: this.props.member.name
+    }
+
+    api.deleteMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  render () {
+    let member = this.props.member
+    let currentUser = this.props.currentUser
+    let isDisabled = (currentUser.id === member.id)
+
+    switch (this.state.mode) {
+      case DELETE:
+        return (
+          <li className='MemberRow edit'>
+            <div className='colDescription'>
+              Are you sure to remove <strong>{member.profileName}</strong> ?
+            </div>
+            <div className='colDeleteConfirm'>
+              <button className='deleteButton primary' onClick={e => this.handleDeleteConfirmButtonClick(e)}>Sure</button>
+              <button className='deleteButton' onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </li>
+        )
+      case IDLE:
+      default:
+        return (
+          <li className='MemberRow'>
+            <div className='colUserName'>
+              <ProfileImage className='userPhoto' email={member.email} size='30'/>
+              <div className='userInfo'>
+                <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+                <div className='userEmail'>{member.email}</div>
+              </div>
+            </div>
+
+            <div className='colRole'>
+              <select onChange={e => this.handleMemberRoleChange(e)} disabled={isDisabled} value={member._pivot_role} className='userRole'>
+                <option value='owner'>Owner</option>
+                <option value='member'>Member</option>
+              </select>
+            </div>
+            <div className='colDelete'>
+              <button className='deleteButton' onClick={e => this.handleDeleteButtonClick(e)} disabled={isDisabled}><i className='fa fa-times fa-fw'/></button>
+            </div>
+          </li>
+        )
+    }
+  }
+}
+
+MemberRow.propTypes = {
+  member: PropTypes.shape(),
+  currentUser: PropTypes.shape(),
+  team: PropTypes.shape({
+    id: PropTypes.number
+  })
+}

lib/components/modal/Preference/MemberSettingTab.js

@@ -3,6 +3,7 @@ import ProfileImage from 'boost/components/ProfileImage'
 import Select from 'react-select'
 import api from 'boost/api'
 import _ from 'lodash'
+import MemberRow from './MemberRow'
 
 function getUsers (input, cb) {
   api.searchUser(input)
@@ -60,42 +61,6 @@ export default class MemberSettingTab extends React.Component {
         else console.error(err)
       })
   }
-  handleMemberRoleChange (name) {
-    return e => {
-      let team = this.getCurrentTeam()
-      let input = {
-        name: name,
-        role: e.target.value
-      }
-
-      api.setMember(team.id, input)
-        .then(res => {
-          console.log(res.body)
-        })
-        .catch(err => {
-          if (err.status != null) throw err
-          else console.error(err)
-        })
-    }
-  }
-
-  handleMemberDeleteButtonClick (name) {
-    return e => {
-      let team = this.getCurrentTeam()
-      let input = {
-        name: name
-      }
-
-      api.deleteMember(team.id, input)
-        .then(res => {
-          console.log(res.body)
-        })
-        .catch(err => {
-          if (err.status != null) throw err
-          else console.error(err)
-        })
-    }
-  }
 
   renderTeamOptions () {
     return this.props.teams.map(team => {
@@ -113,31 +78,9 @@ export default class MemberSettingTab extends React.Component {
       return this.renderNoTeam()
     }
 
-    let membersEl = team.Members.map(member => {
+    let membersEl = team.Members.map(member => (
-      let isCurrentUser = this.props.currentUser.id === member.id
+      <MemberRow key={'user-' + member.id} member={member} team={team} currentUser={this.props.currentUser}/>
-
+    ))
-      return (
-        <li key={'user-' + member.id}>
-          <div className='colUserName'>
-            <ProfileImage className='userPhoto' email={member.email} size='30'/>
-            <div className='userInfo'>
-              <div className='userName'>{`${member.profileName} (${member.name})`}</div>
-              <div className='userEmail'>{member.email}</div>
-            </div>
-          </div>
-
-          <div className='colRole'>
-            <select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
-              <option value='owner'>Owner</option>
-              <option value='member'>Member</option>
-            </select>
-            </div>
-          <div className='colDelete'>
-            <button className='deleteButton' onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
-          </div>
-        </li>
-      )
-    })
 
     return (
       <div className='MemberSettingTab content'>

package.json

@@ -1,17 +1,17 @@
 {
   "name": "boost",
-  "version": "0.4.0-alpha.3",
+  "version": "0.4.0-alpha.4",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {
     "start": "BOOST_ENV=development electron ./main.js",
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
     "compile": "NODE_ENV=production webpack --config webpack.config.production.js",
-    "build": "electron-packager ./ Boost $npm_package_config_platform  $npm_package_config_version $npm_package_config_ignore --overwrite",
+    "build": "electron-packager ./ Boost --app-version=$npm_package_version $npm_package_config_platform  $npm_package_config_version $npm_package_config_ignore --overwrite",
     "codesign": "codesign --verbose --deep --force --sign \"MAISIN solutions Inc.\" Boost-darwin-x64/Boost.app"
   },
   "config": {
-    "version": "--version=0.33.0 --app-version=$npm_package_version --app-bundle-id=com.maisin.boost",
+    "version": "--version=0.33.0 --app-bundle-id=com.maisin.boost",
     "platform": "--platform=darwin --arch=x64 --prune --icon=resources/app.icns",
     "ignore": "--ignore=Boost-darwin-x64 --ignore=node_modules/devicon/icons --ignore=submodules/ace/(?!src-min)|submodules/ace/(?=src-min-noconflict)"
   },