From 8d9cd5bbd1181d9f855164de2fffe26b75312611 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Mon, 26 Oct 2015 13:01:04 +0900 Subject: [PATCH] add text:ellipsis to some labels & add member deletion confirm --- browser/main/HomePage/ArticleNavigator.js | 4 - .../components/ArticleNavigator.styl | 1 + .../main/HomeContainer/lib/Preferences.styl | 34 ++++++ lib/components/modal/Preference/MemberRow.js | 106 ++++++++++++++++++ .../modal/Preference/MemberSettingTab.js | 65 +---------- package.json | 6 +- 6 files changed, 148 insertions(+), 68 deletions(-) create mode 100644 lib/components/modal/Preference/MemberRow.js diff --git a/browser/main/HomePage/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js index 8b4ec9fc..b277916c 100644 --- a/browser/main/HomePage/ArticleNavigator.js +++ b/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) } diff --git a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl index 84158d77..4accb134 100644 --- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl +++ b/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 diff --git a/browser/styles/main/HomeContainer/lib/Preferences.styl b/browser/styles/main/HomeContainer/lib/Preferences.styl index 20b746c4..56573b8a 100644 --- a/browser/styles/main/HomeContainer/lib/Preferences.styl +++ b/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 diff --git a/lib/components/modal/Preference/MemberRow.js b/lib/components/modal/Preference/MemberRow.js new file mode 100644 index 00000000..d52d8c33 --- /dev/null +++ b/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 ( +
  • +
    + Are you sure to remove {member.profileName} ? +
    +
    + + +
    +
    • + ) + case IDLE: + default: + return ( +
  • +
    + +
    +
    {`${member.profileName} (${member.name})`}
    +
    {member.email}
    +
    +
    + +
    + +
    +
    + +
    +
    • + ) + } + } +} + +MemberRow.propTypes = { + member: PropTypes.shape(), + currentUser: PropTypes.shape(), + team: PropTypes.shape({ + id: PropTypes.number + }) +} diff --git a/lib/components/modal/Preference/MemberSettingTab.js b/lib/components/modal/Preference/MemberSettingTab.js index 50de5420..42d3fed8 100644 --- a/lib/components/modal/Preference/MemberSettingTab.js +++ b/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 isCurrentUser = this.props.currentUser.id === member.id - - return ( -
  • -
    - -
    -
    {`${member.profileName} (${member.name})`}
    -
    {member.email}
    -
    -
    - -
    - -
    -
    - -
    -
    • - ) - }) + let membersEl = team.Members.map(member => ( + + )) return (
    diff --git a/package.json b/package.json index cad840cb..cc22ca1a 100644 --- a/package.json +++ b/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)" },