jyapayne/TechNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more navigation functionality

Browse source
This commit is contained in:
Joey Payne 2016-02-16 18:42:42 -07:00
commit 42822d2ec9
2 changed files with 131 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

185
app/modules/LibraryNav.jsx
View file

@ -7,11 +7,13 @@ import styles from 'material-ui/lib/styles'
import List from 'material-ui/lib/lists/list'
import ListItem from 'material-ui/lib/lists/list-item'
import ActionGrade from 'material-ui/lib/svg-icons/action/grade'
import NoteBook from 'material-ui/lib/svg-icons/action/class'
import History from 'material-ui/lib/svg-icons/action/history'
import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline'
import Folder from 'material-ui/lib/svg-icons/file/folder'
import Delete from 'material-ui/lib/svg-icons/action/delete'
import Divider from 'material-ui/lib/divider'
import { SelectableContainerEnhance } from 'material-ui/lib/hoc/selectable-enhance'
const colors = styles.Colors
@ -25,106 +27,179 @@ const {AppBar,
Mixins,
RaisedButton,
FlatButton,
Badge,
TextField,
Dialog,
Styles,
Tab,
Tabs,
Paper} = mui
let SelectableList = SelectableContainerEnhance(List)
function wrapState(ComposedComponent) {
const StateWrapper = React.createClass({
getInitialState() {
return {selectedIndex: 0};
},
handleUpdateSelectedIndex(e, index) {
this.setState({
selectedIndex: index,
});
},
render() {
return (
<ComposedComponent
{...this.props}
{...this.state}
valueLink={{value: this.state.selectedIndex, requestChange: this.handleUpdateSelectedIndex}}
/>
);
},
});
return StateWrapper;
}
SelectableList = wrapState(SelectableList);
const DefaultRawTheme = Styles.LightRawTheme
export default class LibraryNav extends React.Component {
constructor(props){
super(props)
this.state = {open: false, items: []}
this.state = {
open: false,
navItems: [
{
'name': 'Entries',
'icon': <img src="images/note.svg"/>,
'notes': 10
},
{
'name': 'Starred',
'icon': <ActionGrade color={colors.amberA700}/>,
'notes': 1
},
{
'name': 'Recents',
'icon': <History color="#4BAE4E"/>,
'notes': 10
},
{
'name': 'Trash',
'icon': <Delete color={colors.grey500}/>,
'notes': 0
},
{
'name': 'All Notes',
'icon': <Folder color="#FFCC5F" />,
'notes': 0
},
],
notebooks: [
{'state': 'editing', 'title': '', 'notes': 0},
{'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}
]
}
}
static get childContextTypes(){
return {muiTheme: React.PropTypes.object}
}
handleOpen = () => {
console.log(this);
this.setState({open: true})
};
handleClose = () => {
this.setState({open: false})
};
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
}
}
displayDialog(){
console.log(this)
}
readDir = () => {
console.log(fs.readdirSync('.'))
};
entriesTapped = () => {
var items = this.state.items
items.push({name: 'Stuff '+(items.length+1), id: items.length})
this.setState({items: items})
};
blank(){
}
newNotebookUnfocus = (i) => {
var nb = this.state.notebooks[i]
var tf = this.refs["textField"+i]
var notebookName = tf.getValue()
if (notebookName){
nb.title = notebookName
nb.state = 'displaying'
this.setState({notebooks: this.state.notebooks})
}
};
addNotebookTapped = () => {
var nbs = this.state.notebooks
nbs.push({'state': 'editing',
'title': '',
'notes': 0})
this.setState({notebooks: nbs})
};
newNotebookTyped = (i) => {
};
render(){
return (
<div id={this.props.id} className={this.props.className || ""}>
<List subheader="Library">
<ListItem
primaryText="Entries"
onTouchTap={this.props.entriesTapped || this.blank}
leftIcon={<img src="images/note.svg"/>}
className="noselect"/>
<ListItem
primaryText="Starred"
onTouchTap={this.props.starredTapped || this.blank}
leftIcon={<ActionGrade color={colors.amberA700}/>}
className="noselect" />
<ListItem
primaryText="Recents"
onTouchTap={this.props.recentsTapped || this.blank}
leftIcon={<History color="#4BAE4E"/>}
className="noselect" />
<ListItem
primaryText="Trash"
onTouchTap={this.props.trashTapped || this.blank}
leftIcon={<Delete color={colors.grey500}/>}
className="noselect" />
<ListItem
primaryText="All Notes"
onTouchTap={this.props.allNotesTapped || this.blank}
leftIcon={<Folder color="#FFCC5F" />}
className="noselect" />
{this.state.items.map(function(item){
<SelectableList subheader="Library">
{this.state.navItems.map(function(item, i){
return <ListItem
primaryText={item.name}
key={item.id}
key={i}
leftIcon={item.icon}
rightIcon={<Badge badgeContent={item.notes} />}
value={i}
className="noselect"/>;
})}
</List>
</SelectableList>
<Divider />
<List subheader={<div>
<div className="inline">NoteBooks</div>
<IconButton
touch={true}
onTouchTap={this.props.addNotebookTapped || this.blank}
onTouchTap={this.addNotebookTapped}
tooltip="Add New Notebook"
style={{'zIndex': 10000}}
className="right inline">
<AddCircleOutline
color={colors.grey500}/>
</IconButton>
</div>}>
{this.state.notebooks.map((notebook, i) =>{
var l = null
if (notebook.state == 'editing'){
l = <ListItem
key={i}
innerDivStyle={{'paddingBottom': 0,
'paddingTop': 0}}
primaryText={<TextField
ref={"textField"+i}
fullWidth={true}
hintText={notebook.title || "Notebook Name"}
underlineShow={false}
onBlur={this.newNotebookUnfocus.bind(this, i)}
onEnterKeyDown={this.newNotebookUnfocus.bind(this, i)}
/>}
leftIcon={<NoteBook color={colors.grey500}/>}
rightIcon={<Badge badgeContent={notebook.notes} />}
/>
}
else{
l = <ListItem
key={i}
primaryText={notebook.title}
className="noselect"
leftIcon={<NoteBook color={colors.grey500}/>}
rightIcon={<Badge badgeContent={notebook.notes} />}
/>
}
return l
})}
</List>
</div>

2
style.css
View file

@ -22,5 +22,5 @@ body, html{
}
#library-nav{
border-right: solid 1px #d9d9d9;
width: 200px;
width: 300px;
}