diff --git a/browser/styles/main/HomeContainer/lib/Preferences.styl b/browser/styles/main/HomeContainer/lib/Preferences.styl index 91e42766..20b746c4 100644 --- a/browser/styles/main/HomeContainer/lib/Preferences.styl +++ b/browser/styles/main/HomeContainer/lib/Preferences.styl @@ -356,6 +356,41 @@ iptFocusBorderColor = #369DCD float right width 145px text-align center + &.newFolder + .folderName input + height 33px + border 1px solid transparent + border-radius 5px + padding 0 10px + font-size 14px + outline none + width 150px + &:hover + border-color borderColor + &:focus + border-color iptFocusBorderColor + .folderPublic select + height 33px + border 1px solid transparent + background-color white + outline none + display block + margin 0 auto + font-size 14px + &:hover + border-color borderColor + &:focus + border-color iptFocusBorderColor + .folderControl + button + border none + height 30px + margin-top 1.5px + font-size 14px + background-color transparent + color brandColor + &:hover + color lighten(brandColor, 10%) &.FolderRow .folderName input height 33px @@ -374,6 +409,7 @@ iptFocusBorderColor = #369DCD outline none display block margin 0 auto + font-size 14px &:focus border-color iptFocusBorderColor .folderControl diff --git a/lib/actions.js b/lib/actions.js index eebc5c6e..56349d49 100644 --- a/lib/actions.js +++ b/lib/actions.js @@ -3,6 +3,7 @@ export const USER_UPDATE = 'USER_UPDATE' export const ARTICLE_REFRESH = 'ARTICLE_REFRESH' export const ARTICLE_UPDATE = 'ARTICLE_UPDATE' export const ARTICLE_DESTROY = 'ARTICLE_DESTROY' +export const FOLDER_DESTROY = 'FOLDER_DESTROY' export const SWITCH_USER = 'SWITCH_USER' export const SWITCH_FOLDER = 'SWITCH_FOLDER' @@ -50,6 +51,13 @@ export function destroyArticle (userId, articleKey) { } } +export function destroyFolder (userId, folderId) { + return { + type: FOLDER_DESTROY, + data: { userId, folderId } + } +} + // Nav export function switchUser (userId) { return { diff --git a/lib/components/modal/Preference/FolderSettingTab.js b/lib/components/modal/Preference/FolderSettingTab.js index 776b7501..83f272b6 100644 --- a/lib/components/modal/Preference/FolderSettingTab.js +++ b/lib/components/modal/Preference/FolderSettingTab.js @@ -1,8 +1,18 @@ import React, { PropTypes } from 'react' import _ from 'lodash' import FolderRow from './FolderRow' +import linkState from 'boost/linkState' +import api from 'boost/api' export default class FolderSettingTab extends React.Component { + constructor (props) { + super(props) + + this.state = { + name: '', + public: 0 + } + } getCurrentTeam (props) { if (props == null) props = this.props @@ -13,6 +23,32 @@ export default class FolderSettingTab extends React.Component { this.props.switchTeam(e.target.value) } + handleFolderPublicChange (e) { + this.setState({public: e.target.value}) + } + + handleSaveButtonClick (e) { + let team = this.getCurrentTeam() + let input = { + UserId: team.id, + name: this.state.name, + public: !!parseInt(this.state.public, 10) + } + + api.createFolder(input) + .then(res => { + console.log(res.body) + this.setState({ + name: '', + public: 0 + }) + }) + .catch(err => { + if (err.status != null) throw err + else console.error(err) + }) + } + renderTeamOptions () { return this.props.teams.map(team => { return ( @@ -49,6 +85,20 @@ export default class FolderSettingTab extends React.Component {