mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
Merge pull request #853 from PrimaMateria/feature-rearrange-storage
Feature rearrange storage
This commit is contained in:
SuenagaRyota
303
browser/main/modals/PreferencesModal/FolderItem.js
Normal file
303
browser/main/modals/PreferencesModal/FolderItem.js
Normal file
@@ -0,0 +1,303 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import ReactDOM from 'react-dom'
|
||||
import styles from './FolderItem.styl'
|
||||
import dataApi from 'browser/main/lib/dataApi'
|
||||
import store from 'browser/main/store'
|
||||
import { SketchPicker } from 'react-color'
|
||||
import { SortableElement, SortableHandle } from 'react-sortable-hoc'
|
||||
|
||||
class FolderItem extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
status: 'IDLE',
|
||||
folder: {
|
||||
showColumnPicker: false,
|
||||
colorPickerPos: { left: 0, top: 0 },
|
||||
color: props.color,
|
||||
name: props.name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleEditChange (e) {
|
||||
let { folder } = this.state
|
||||
|
||||
folder.name = this.refs.nameInput.value
|
||||
this.setState({
|
||||
folder
|
||||
})
|
||||
}
|
||||
|
||||
handleConfirmButtonClick (e) {
|
||||
this.confirm()
|
||||
}
|
||||
|
||||
confirm () {
|
||||
let { storage, folder } = this.props
|
||||
dataApi
|
||||
.updateFolder(storage.key, folder.key, {
|
||||
color: this.state.folder.color,
|
||||
name: this.state.folder.name
|
||||
})
|
||||
.then((data) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_FOLDER',
|
||||
storage: data.storage
|
||||
})
|
||||
this.setState({
|
||||
status: 'IDLE'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleColorButtonClick (e) {
|
||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
|
||||
this.setState({ folder }, function () {
|
||||
// After the color picker has been painted, re-calculate its position
|
||||
// by comparing its dimensions to the host dimensions.
|
||||
const { hostBoundingBox } = this.props
|
||||
const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
|
||||
const colorPickerBox = colorPickerNode.getBoundingClientRect()
|
||||
const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
|
||||
const folder = Object.assign({}, this.state.folder, {
|
||||
colorPickerPos: {
|
||||
left: 25,
|
||||
top: offsetTop < 0 ? offsetTop - 5 : 0 // subtract 5px for aestetics
|
||||
}
|
||||
})
|
||||
this.setState({ folder })
|
||||
})
|
||||
}
|
||||
|
||||
handleColorChange (color) {
|
||||
const folder = Object.assign({}, this.state.folder, { color: color.hex })
|
||||
this.setState({ folder })
|
||||
}
|
||||
|
||||
handleColorPickerClose (event) {
|
||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
|
||||
this.setState({ folder })
|
||||
}
|
||||
|
||||
handleCancelButtonClick (e) {
|
||||
this.setState({
|
||||
status: 'IDLE'
|
||||
})
|
||||
}
|
||||
|
||||
handleFolderItemBlur (e) {
|
||||
let el = e.relatedTarget
|
||||
while (el != null) {
|
||||
if (el === this.refs.root) {
|
||||
return false
|
||||
}
|
||||
el = el.parentNode
|
||||
}
|
||||
this.confirm()
|
||||
}
|
||||
|
||||
renderEdit (e) {
|
||||
const popover = { position: 'absolute', zIndex: 2 }
|
||||
const cover = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
const pickerStyle = Object.assign({}, {
|
||||
position: 'absolute'
|
||||
}, this.state.folder.colorPickerPos)
|
||||
return (
|
||||
<div styleName='folderItem'
|
||||
onBlur={(e) => this.handleFolderItemBlur(e)}
|
||||
tabIndex='-1'
|
||||
ref='root'
|
||||
>
|
||||
<div styleName='folderItem-left'>
|
||||
<button styleName='folderItem-left-colorButton' style={{color: this.state.folder.color}}
|
||||
onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
|
||||
>
|
||||
{this.state.folder.showColumnPicker
|
||||
? <div style={popover}>
|
||||
<div style={cover}
|
||||
onClick={() => this.handleColorPickerClose()}
|
||||
/>
|
||||
<div style={pickerStyle}>
|
||||
<SketchPicker
|
||||
ref='colorPicker'
|
||||
color={this.state.folder.color}
|
||||
onChange={(color) => this.handleColorChange(color)}
|
||||
onChangeComplete={(color) => this.handleColorChange(color)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<i className='fa fa-square' />
|
||||
</button>
|
||||
<input styleName='folderItem-left-nameInput'
|
||||
value={this.state.folder.name}
|
||||
ref='nameInput'
|
||||
onChange={(e) => this.handleEditChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div styleName='folderItem-right'>
|
||||
<button styleName='folderItem-right-confirmButton'
|
||||
onClick={(e) => this.handleConfirmButtonClick(e)}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button styleName='folderItem-right-button'
|
||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleDeleteConfirmButtonClick (e) {
|
||||
let { storage, folder } = this.props
|
||||
dataApi
|
||||
.deleteFolder(storage.key, folder.key)
|
||||
.then((data) => {
|
||||
store.dispatch({
|
||||
type: 'DELETE_FOLDER',
|
||||
storage: data.storage,
|
||||
folderKey: data.folderKey
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
renderDelete () {
|
||||
return (
|
||||
<div styleName='folderItem'>
|
||||
<div styleName='folderItem-left'>
|
||||
Are you sure to <span styleName='folderItem-left-danger'>delete</span> this folder?
|
||||
</div>
|
||||
<div styleName='folderItem-right'>
|
||||
<button styleName='folderItem-right-dangerButton'
|
||||
onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button styleName='folderItem-right-button'
|
||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleEditButtonClick (e) {
|
||||
let { folder: propsFolder } = this.props
|
||||
let { folder: stateFolder } = this.state
|
||||
const folder = Object.assign({}, stateFolder, propsFolder)
|
||||
this.setState({
|
||||
status: 'EDIT',
|
||||
folder
|
||||
}, () => {
|
||||
this.refs.nameInput.select()
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteButtonClick (e) {
|
||||
this.setState({
|
||||
status: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
renderIdle () {
|
||||
let { folder } = this.props
|
||||
return (
|
||||
<div styleName='folderItem'
|
||||
onDoubleClick={(e) => this.handleEditButtonClick(e)}
|
||||
>
|
||||
<div styleName='folderItem-left'
|
||||
style={{borderColor: folder.color}}
|
||||
>
|
||||
<span styleName='folderItem-left-name'>{folder.name}</span>
|
||||
<span styleName='folderItem-left-key'>({folder.key})</span>
|
||||
</div>
|
||||
<div styleName='folderItem-right'>
|
||||
<button styleName='folderItem-right-button'
|
||||
onClick={(e) => this.handleEditButtonClick(e)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button styleName='folderItem-right-button'
|
||||
onClick={(e) => this.handleDeleteButtonClick(e)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
switch (this.state.status) {
|
||||
case 'DELETE':
|
||||
return this.renderDelete()
|
||||
case 'EDIT':
|
||||
return this.renderEdit()
|
||||
case 'IDLE':
|
||||
default:
|
||||
return this.renderIdle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FolderItem.propTypes = {
|
||||
hostBoundingBox: PropTypes.shape({
|
||||
bottom: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
left: PropTypes.number,
|
||||
right: PropTypes.number,
|
||||
top: PropTypes.number,
|
||||
width: PropTypes.number
|
||||
}),
|
||||
storage: PropTypes.shape({
|
||||
key: PropTypes.string
|
||||
}),
|
||||
folder: PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
name: PropTypes.string
|
||||
})
|
||||
}
|
||||
|
||||
class Handle extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div styleName='folderItem-drag-handle'>
|
||||
<i className='fa fa-reorder' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class SortableFolderItemComponent extends React.Component {
|
||||
render () {
|
||||
const StyledHandle = CSSModules(Handle, this.props.styles)
|
||||
const DragHandle = SortableHandle(StyledHandle)
|
||||
|
||||
const StyledFolderItem = CSSModules(FolderItem, this.props.styles)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DragHandle />
|
||||
<StyledFolderItem {...this.props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CSSModules(SortableElement(SortableFolderItemComponent), styles)
|
||||
103
browser/main/modals/PreferencesModal/FolderItem.styl
Normal file
103
browser/main/modals/PreferencesModal/FolderItem.styl
Normal file
@@ -0,0 +1,103 @@
|
||||
.folderItem
|
||||
height 35px
|
||||
box-sizing border-box
|
||||
padding 2.5px 15px
|
||||
&:hover
|
||||
background-color darken(white, 3%)
|
||||
|
||||
.folderItem-drag-handle
|
||||
height 35px
|
||||
border none
|
||||
padding 0 10px
|
||||
line-height 35px
|
||||
float left
|
||||
cursor row-resize
|
||||
|
||||
.folderItem-left
|
||||
height 30px
|
||||
border-left solid 2px transparent
|
||||
padding 0 10px
|
||||
line-height 30px
|
||||
float left
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
font-weight bold
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-inactive-text-color
|
||||
font-size 10px
|
||||
margin 0 5px
|
||||
border none
|
||||
|
||||
.folderItem-left-colorButton
|
||||
colorDefaultButton()
|
||||
height 25px
|
||||
width 25px
|
||||
line-height 23px
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
vertical-align middle
|
||||
border $ui-border
|
||||
border-radius 2px
|
||||
margin-right 5px
|
||||
margin-left -15px
|
||||
|
||||
.folderItem-left-nameInput
|
||||
height 25px
|
||||
box-sizing border-box
|
||||
vertical-align middle
|
||||
border $ui-border
|
||||
border-radius 2px
|
||||
padding 0 5px
|
||||
outline none
|
||||
|
||||
.folderItem-right
|
||||
float right
|
||||
|
||||
.folderItem-right-button
|
||||
vertical-align middle
|
||||
height 25px
|
||||
margin-top 2.5px
|
||||
colorDefaultButton()
|
||||
border-radius 2px
|
||||
border $ui-border
|
||||
margin-right 5px
|
||||
padding 0 5px
|
||||
&:last-child
|
||||
margin-right 0
|
||||
|
||||
.folderItem-right-confirmButton
|
||||
@extend .folderItem-right-button
|
||||
border none
|
||||
colorPrimaryButton()
|
||||
|
||||
.folderItem-right-dangerButton
|
||||
@extend .folderItem-right-button
|
||||
border none
|
||||
colorDangerButton()
|
||||
|
||||
body[data-theme="dark"]
|
||||
.folderItem
|
||||
&:hover
|
||||
background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
|
||||
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
font-weight bold
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.folderItem-left-colorButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.folderItem-right-button
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.folderItem-right-confirmButton
|
||||
colorDarkPrimaryButton()
|
||||
|
||||
.folderItem-right-dangerButton
|
||||
colorDarkDangerButton()
|
||||
84
browser/main/modals/PreferencesModal/FolderList.js
Normal file
84
browser/main/modals/PreferencesModal/FolderList.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import dataApi from 'browser/main/lib/dataApi'
|
||||
import styles from './FolderList.styl'
|
||||
import store from 'browser/main/store'
|
||||
import FolderItem from './FolderItem'
|
||||
import { SortableContainer, arrayMove } from 'react-sortable-hoc'
|
||||
|
||||
class FolderList extends React.Component {
|
||||
render () {
|
||||
let { storage, hostBoundingBox } = this.props
|
||||
|
||||
let folderList = storage.folders.map((folder, index) => {
|
||||
return <FolderItem key={folder.key}
|
||||
folder={folder}
|
||||
storage={storage}
|
||||
index={index}
|
||||
hostBoundingBox={hostBoundingBox}
|
||||
/>
|
||||
})
|
||||
|
||||
return (
|
||||
<div styleName='folderList'>
|
||||
{folderList.length > 0
|
||||
? folderList
|
||||
: <div styleName='folderList-empty'>No Folders</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FolderList.propTypes = {
|
||||
hostBoundingBox: PropTypes.shape({
|
||||
bottom: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
left: PropTypes.number,
|
||||
right: PropTypes.number,
|
||||
top: PropTypes.number,
|
||||
width: PropTypes.number
|
||||
}),
|
||||
storage: PropTypes.shape({
|
||||
key: PropTypes.string
|
||||
}),
|
||||
folder: PropTypes.shape({
|
||||
key: PropTypes.number,
|
||||
color: PropTypes.string,
|
||||
name: PropTypes.string
|
||||
})
|
||||
}
|
||||
|
||||
class SortableFolderListComponent extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.onSortEnd = ({oldIndex, newIndex}) => {
|
||||
let { storage } = this.props
|
||||
dataApi
|
||||
.reorderFolder(storage.key, oldIndex, newIndex)
|
||||
.then((data) => {
|
||||
store.dispatch({
|
||||
type: 'REORDER_FOLDER',
|
||||
storage: data.storage
|
||||
})
|
||||
this.setState()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const StyledFolderList = CSSModules(FolderList, this.props.styles)
|
||||
const SortableFolderList = SortableContainer(StyledFolderList)
|
||||
|
||||
return (
|
||||
<SortableFolderList
|
||||
helperClass='sortableItemHelper'
|
||||
onSortEnd={this.onSortEnd}
|
||||
useDragHandle
|
||||
{...this.props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CSSModules(SortableFolderListComponent, styles)
|
||||
@@ -1,265 +1,13 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './StorageItem.styl'
|
||||
import consts from 'browser/lib/consts'
|
||||
import dataApi from 'browser/main/lib/dataApi'
|
||||
import store from 'browser/main/store'
|
||||
import FolderList from './FolderList'
|
||||
|
||||
const { shell, remote } = require('electron')
|
||||
const { dialog } = remote
|
||||
import { SketchPicker } from 'react-color'
|
||||
|
||||
class UnstyledFolderItem extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
status: 'IDLE',
|
||||
folder: {
|
||||
showColumnPicker: false,
|
||||
colorPickerPos: { left: 0, top: 0 },
|
||||
color: props.color,
|
||||
name: props.name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleEditChange (e) {
|
||||
let { folder } = this.state
|
||||
|
||||
folder.name = this.refs.nameInput.value
|
||||
this.setState({
|
||||
folder
|
||||
})
|
||||
}
|
||||
|
||||
handleConfirmButtonClick (e) {
|
||||
this.confirm()
|
||||
}
|
||||
|
||||
confirm () {
|
||||
let { storage, folder } = this.props
|
||||
dataApi
|
||||
.updateFolder(storage.key, folder.key, {
|
||||
color: this.state.folder.color,
|
||||
name: this.state.folder.name
|
||||
})
|
||||
.then((data) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_FOLDER',
|
||||
storage: data.storage
|
||||
})
|
||||
this.setState({
|
||||
status: 'IDLE'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleColorButtonClick (e) {
|
||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
|
||||
this.setState({ folder }, function () {
|
||||
// After the color picker has been painted, re-calculate its position
|
||||
// by comparing its dimensions to the host dimensions.
|
||||
const { hostBoundingBox } = this.props
|
||||
const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
|
||||
const colorPickerBox = colorPickerNode.getBoundingClientRect()
|
||||
const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
|
||||
const folder = Object.assign({}, this.state.folder, {
|
||||
colorPickerPos: {
|
||||
left: 25,
|
||||
top: offsetTop < 0 ? offsetTop - 5 : 0 // subtract 5px for aestetics
|
||||
}
|
||||
})
|
||||
this.setState({ folder })
|
||||
})
|
||||
}
|
||||
|
||||
handleColorChange (color) {
|
||||
const folder = Object.assign({}, this.state.folder, { color: color.hex })
|
||||
this.setState({ folder })
|
||||
}
|
||||
|
||||
handleColorPickerClose (event) {
|
||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
|
||||
this.setState({ folder })
|
||||
}
|
||||
|
||||
handleCancelButtonClick (e) {
|
||||
this.setState({
|
||||
status: 'IDLE'
|
||||
})
|
||||
}
|
||||
|
||||
handleFolderItemBlur (e) {
|
||||
let el = e.relatedTarget
|
||||
while (el != null) {
|
||||
if (el === this.refs.root) {
|
||||
return false
|
||||
}
|
||||
el = el.parentNode
|
||||
}
|
||||
this.confirm()
|
||||
}
|
||||
|
||||
renderEdit (e) {
|
||||
const popover = { position: 'absolute', zIndex: 2 }
|
||||
const cover = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
const pickerStyle = Object.assign({}, {
|
||||
position: 'absolute'
|
||||
}, this.state.folder.colorPickerPos)
|
||||
return (
|
||||
<div styleName='folderList-item'
|
||||
onBlur={(e) => this.handleFolderItemBlur(e)}
|
||||
tabIndex='-1'
|
||||
ref='root'
|
||||
>
|
||||
<div styleName='folderList-item-left'>
|
||||
<button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
|
||||
onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
|
||||
>
|
||||
{this.state.folder.showColumnPicker
|
||||
? <div style={popover}>
|
||||
<div style={cover}
|
||||
onClick={() => this.handleColorPickerClose()}
|
||||
/>
|
||||
<div style={pickerStyle}>
|
||||
<SketchPicker
|
||||
ref='colorPicker'
|
||||
color={this.state.folder.color}
|
||||
onChange={(color) => this.handleColorChange(color)}
|
||||
onChangeComplete={(color) => this.handleColorChange(color)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<i className='fa fa-square' />
|
||||
</button>
|
||||
<input styleName='folderList-item-left-nameInput'
|
||||
value={this.state.folder.name}
|
||||
ref='nameInput'
|
||||
onChange={(e) => this.handleEditChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div styleName='folderList-item-right'>
|
||||
<button styleName='folderList-item-right-confirmButton'
|
||||
onClick={(e) => this.handleConfirmButtonClick(e)}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button styleName='folderList-item-right-button'
|
||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleDeleteConfirmButtonClick (e) {
|
||||
let { storage, folder } = this.props
|
||||
dataApi
|
||||
.deleteFolder(storage.key, folder.key)
|
||||
.then((data) => {
|
||||
store.dispatch({
|
||||
type: 'DELETE_FOLDER',
|
||||
storage: data.storage,
|
||||
folderKey: data.folderKey
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
renderDelete () {
|
||||
return (
|
||||
<div styleName='folderList-item'>
|
||||
<div styleName='folderList-item-left'>
|
||||
Are you sure to <span styleName='folderList-item-left-danger'>delete</span> this folder?
|
||||
</div>
|
||||
<div styleName='folderList-item-right'>
|
||||
<button styleName='folderList-item-right-dangerButton'
|
||||
onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button styleName='folderList-item-right-button'
|
||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleEditButtonClick (e) {
|
||||
let { folder: propsFolder } = this.props
|
||||
let { folder: stateFolder } = this.state
|
||||
const folder = Object.assign({}, stateFolder, propsFolder)
|
||||
this.setState({
|
||||
status: 'EDIT',
|
||||
folder
|
||||
}, () => {
|
||||
this.refs.nameInput.select()
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteButtonClick (e) {
|
||||
this.setState({
|
||||
status: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
renderIdle () {
|
||||
let { folder } = this.props
|
||||
return (
|
||||
<div styleName='folderList-item'
|
||||
onDoubleClick={(e) => this.handleEditButtonClick(e)}
|
||||
>
|
||||
<div styleName='folderList-item-left'
|
||||
style={{borderColor: folder.color}}
|
||||
>
|
||||
<span styleName='folderList-item-left-name'>{folder.name}</span>
|
||||
<span styleName='folderList-item-left-key'>({folder.key})</span>
|
||||
</div>
|
||||
<div styleName='folderList-item-right'>
|
||||
<button styleName='folderList-item-right-button'
|
||||
onClick={(e) => this.handleEditButtonClick(e)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button styleName='folderList-item-right-button'
|
||||
onClick={(e) => this.handleDeleteButtonClick(e)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
switch (this.state.status) {
|
||||
case 'DELETE':
|
||||
return this.renderDelete()
|
||||
case 'EDIT':
|
||||
return this.renderEdit()
|
||||
case 'IDLE':
|
||||
default:
|
||||
return this.renderIdle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const FolderItem = CSSModules(UnstyledFolderItem, styles)
|
||||
|
||||
class StorageItem extends React.Component {
|
||||
constructor (props) {
|
||||
@@ -349,13 +97,7 @@ class StorageItem extends React.Component {
|
||||
|
||||
render () {
|
||||
let { storage, hostBoundingBox } = this.props
|
||||
let folderList = storage.folders.map((folder) => {
|
||||
return <FolderItem key={folder.key}
|
||||
folder={folder}
|
||||
storage={storage}
|
||||
hostBoundingBox={hostBoundingBox}
|
||||
/>
|
||||
})
|
||||
|
||||
return (
|
||||
<div styleName='root' key={storage.key}>
|
||||
<div styleName='header'>
|
||||
@@ -404,12 +146,9 @@ class StorageItem extends React.Component {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div styleName='folderList'>
|
||||
{folderList.length > 0
|
||||
? folderList
|
||||
: <div styleName='folderList-empty'>No Folders</div>
|
||||
}
|
||||
</div>
|
||||
<FolderList storage={storage}
|
||||
hostBoundingBox={hostBoundingBox}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -426,11 +165,6 @@ StorageItem.propTypes = {
|
||||
}),
|
||||
storage: PropTypes.shape({
|
||||
key: PropTypes.string
|
||||
}),
|
||||
folder: PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
name: PropTypes.string
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -63,75 +63,6 @@
|
||||
z-index 10
|
||||
white-space nowrap
|
||||
|
||||
.folderList-item
|
||||
height 35px
|
||||
box-sizing border-box
|
||||
padding 2.5px 15px
|
||||
&:hover
|
||||
background-color darken(white, 3%)
|
||||
.folderList-item-left
|
||||
height 30px
|
||||
border-left solid 2px transparent
|
||||
padding 0 10px
|
||||
line-height 30px
|
||||
float left
|
||||
.folderList-item-left-danger
|
||||
color $danger-color
|
||||
font-weight bold
|
||||
|
||||
.folderList-item-left-key
|
||||
color $ui-inactive-text-color
|
||||
font-size 10px
|
||||
margin 0 5px
|
||||
border none
|
||||
|
||||
.folderList-item-left-colorButton
|
||||
colorDefaultButton()
|
||||
height 25px
|
||||
width 25px
|
||||
line-height 23px
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
vertical-align middle
|
||||
border $ui-border
|
||||
border-radius 2px
|
||||
margin-right 5px
|
||||
margin-left -15px
|
||||
|
||||
.folderList-item-left-nameInput
|
||||
height 25px
|
||||
box-sizing border-box
|
||||
vertical-align middle
|
||||
border $ui-border
|
||||
border-radius 2px
|
||||
padding 0 5px
|
||||
outline none
|
||||
|
||||
.folderList-item-right
|
||||
float right
|
||||
|
||||
.folderList-item-right-button
|
||||
vertical-align middle
|
||||
height 25px
|
||||
margin-top 2.5px
|
||||
colorDefaultButton()
|
||||
border-radius 2px
|
||||
border $ui-border
|
||||
margin-right 5px
|
||||
padding 0 5px
|
||||
&:last-child
|
||||
margin-right 0
|
||||
|
||||
.folderList-item-right-confirmButton
|
||||
@extend .folderList-item-right-button
|
||||
border none
|
||||
colorPrimaryButton()
|
||||
|
||||
.folderList-item-right-dangerButton
|
||||
@extend .folderList-item-right-button
|
||||
border none
|
||||
colorDangerButton()
|
||||
|
||||
body[data-theme="dark"]
|
||||
.header
|
||||
border-color $ui-dark-borderColor
|
||||
@@ -153,28 +84,3 @@ body[data-theme="dark"]
|
||||
top 25px
|
||||
z-index 10
|
||||
white-space nowrap
|
||||
|
||||
.folderList-item
|
||||
&:hover
|
||||
background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
|
||||
|
||||
.folderList-item-left-danger
|
||||
color $danger-color
|
||||
font-weight bold
|
||||
|
||||
.folderList-item-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.folderList-item-left-colorButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.folderList-item-right-button
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.folderList-item-right-confirmButton
|
||||
colorDarkPrimaryButton()
|
||||
|
||||
.folderList-item-right-dangerButton
|
||||
colorDarkDangerButton()
|
||||
|
||||
Reference in New Issue
Block a user