Add styling changes and beginnings of adding notes
Zoom set to 85% since components can't be resized. Added start of functionality to add notes.
This commit is contained in:
Joey Payne
parent
6912567122
commit
cfeb438af2
5 changed files with 118 additions and 43 deletions
|
|
@ -12,6 +12,17 @@ import SelectableList from 'SelectableList'
|
|||
|
||||
import Item from 'Item'
|
||||
|
||||
import uuid from 'node-uuid'
|
||||
import path from 'path-extra'
|
||||
|
||||
import * as utils from 'utils'
|
||||
import glob from 'glob'
|
||||
|
||||
import fs from 'fs'
|
||||
import mkdirp from 'mkdirp'
|
||||
import jsfile from 'jsonfile'
|
||||
import rmdir from 'rimraf'
|
||||
|
||||
const {AppBar,
|
||||
AppCanvas,
|
||||
FontIcon,
|
||||
|
|
@ -56,6 +67,17 @@ export default class EntrySelector extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
addNoteTapped = () => {
|
||||
this.createNewNote((note) => {
|
||||
var notes = this.state.notes
|
||||
notes.splice(0, 0, note)
|
||||
this.setState({notes: notes}, () => {
|
||||
//this.refs['textField0'].focus()
|
||||
})
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
render(){
|
||||
return (
|
||||
<Paper id={this.props.id} className={this.props.className} zDepth={0}>
|
||||
|
|
@ -65,11 +87,16 @@ export default class EntrySelector extends React.Component {
|
|||
active={false}
|
||||
selected={false}
|
||||
leftIcon={<Search color={colors.grey600}/>}
|
||||
rightIconButton={<IconButton tooltip="Add New Note">
|
||||
rightIconButton={<IconButton
|
||||
style={{'zIndex': 1000}}
|
||||
touch={true}
|
||||
onTouchTap={this.addNoteTapped}
|
||||
tooltip="Add New Note">
|
||||
<Add color={colors.grey600}/>
|
||||
</IconButton>}>
|
||||
<TextField
|
||||
hintText="Filter by keyword, title or tag."
|
||||
style={{width: 210}}
|
||||
onKeyDown={()=>{}}
|
||||
onEnterKeyDown={()=>{}}
|
||||
/>
|
||||
|
|
@ -80,7 +107,7 @@ export default class EntrySelector extends React.Component {
|
|||
ref="entryList"
|
||||
selectedItemStyle={{backgroundColor: colors.grey300}}>
|
||||
<ListItem
|
||||
leftAvatar={<Description color={colors.grey700}/>}
|
||||
leftIcon={<Description color={colors.grey600}/>}
|
||||
primaryText="Today's Notes"
|
||||
secondaryText={
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -30,15 +30,6 @@ import rmdir from 'rimraf'
|
|||
|
||||
const colors = styles.Colors
|
||||
|
||||
function eventFire(el, etype){
|
||||
if (el.fireEvent) {
|
||||
el.fireEvent('on' + etype);
|
||||
} else {
|
||||
var evObj = document.createEvent('Events');
|
||||
evObj.initEvent(etype, true, false);
|
||||
el.dispatchEvent(evObj);
|
||||
}
|
||||
}
|
||||
String.prototype.trunc = String.prototype.trunc || function(n){
|
||||
return (this.length > n) ? this.substr(0, n-1)+'...' : this;
|
||||
};
|
||||
|
|
@ -108,7 +99,6 @@ export default class LibraryNav extends React.Component {
|
|||
notebooks: [
|
||||
]
|
||||
}
|
||||
this.sortNotebooks(true)
|
||||
this.getNotebooks()
|
||||
}
|
||||
|
||||
|
|
@ -134,8 +124,8 @@ export default class LibraryNav extends React.Component {
|
|||
}
|
||||
|
||||
this.state.notebooks.push(nb)
|
||||
this.sortNotebooks(true)
|
||||
}
|
||||
this.sortNotebooks(true)
|
||||
};
|
||||
|
||||
compareNotebooks = (a, b) => {
|
||||
|
|
@ -210,17 +200,27 @@ export default class LibraryNav extends React.Component {
|
|||
};
|
||||
|
||||
|
||||
createNewNotebook = (notebook, callback) => {
|
||||
var notePath = utils.getNotebookPath(notebook)
|
||||
mkdirp(notePath, (err) => {
|
||||
createNewNotebook = (callback) => {
|
||||
var nbUuid = uuid.v4().toUpperCase()
|
||||
var nbPath = utils.getNotebookPathFromUUID(nbUuid)
|
||||
|
||||
var nb = {
|
||||
'state': 'editing',
|
||||
'title': '',
|
||||
'uuid': nbUuid,
|
||||
'path': nbPath,
|
||||
'notes': 0
|
||||
}
|
||||
|
||||
mkdirp(nbPath, (err) => {
|
||||
if (callback){
|
||||
callback(nb, err)
|
||||
}
|
||||
if(err){
|
||||
console.log('There was an error creating the directory '+notePath)
|
||||
console.log(err)
|
||||
}
|
||||
else{
|
||||
if (callback){
|
||||
callback()
|
||||
}
|
||||
this.createNotebookMeta(notebook)
|
||||
}
|
||||
})
|
||||
|
|
@ -242,7 +242,6 @@ export default class LibraryNav extends React.Component {
|
|||
};
|
||||
|
||||
newNotebookUnfocus = (i) => {
|
||||
|
||||
var nb = this.state.notebooks[i]
|
||||
|
||||
var tf = this.refs["textField"+i]
|
||||
|
|
@ -263,23 +262,13 @@ export default class LibraryNav extends React.Component {
|
|||
};
|
||||
|
||||
addNotebookTapped = () => {
|
||||
var nb_uuid = uuid.v4().toUpperCase()
|
||||
|
||||
var nb = {
|
||||
'state': 'editing',
|
||||
'title': '',
|
||||
'uuid': nb_uuid,
|
||||
'notes': 0
|
||||
}
|
||||
|
||||
this.createNewNotebook(nb, () => {
|
||||
this.createNewNotebook((nb, err) => {
|
||||
var nbs = this.state.notebooks
|
||||
nbs.splice(0, 0, nb)
|
||||
this.setState({notebooks: nbs}, () => {
|
||||
this.refs['textField0'].focus()
|
||||
})
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
newNotebookTyped = (i) => {
|
||||
|
|
@ -347,6 +336,10 @@ export default class LibraryNav extends React.Component {
|
|||
this.refs.mainList.setIndex(-1)
|
||||
};
|
||||
|
||||
preventEventProp = (ev) => {
|
||||
ev.stopPropagation();
|
||||
};
|
||||
|
||||
notebookList = () => {
|
||||
return (<div id="notebook-list">
|
||||
|
||||
|
|
@ -359,13 +352,16 @@ export default class LibraryNav extends React.Component {
|
|||
value={i}
|
||||
innerDivStyle={{'paddingBottom': 0,
|
||||
'paddingTop': 0}}
|
||||
onTouchTap={this.noteBookTapped.bind(this, i)}
|
||||
leftIcon={<NoteBook color={colors.grey500}/>}
|
||||
rightIcon={<Badge badgeContent={notebook.notes}/>}>
|
||||
|
||||
|
||||
<TextField
|
||||
ref={"textField"+i}
|
||||
fullWidth={true}
|
||||
hintText={notebook.title.trunc(18) || "Notebook Name"}
|
||||
style={{maxWidth: 120}}
|
||||
hintText={notebook.title.trunc(14) || "Notebook Name"}
|
||||
underlineShow={false}
|
||||
onBlur={this.newNotebookUnfocus.bind(this, i)}
|
||||
onEnterKeyDown={this.newNotebookUnfocus.bind(this, i)}
|
||||
|
|
@ -377,14 +373,21 @@ export default class LibraryNav extends React.Component {
|
|||
l = <ListItem
|
||||
key={notebook.uuid || i}
|
||||
value={i}
|
||||
primaryText={notebook.title.trunc(18)}
|
||||
primaryText={notebook.title.trunc(14)}
|
||||
tooltip={notebook.title}
|
||||
ref={notebook.title+i}
|
||||
className="noselect"
|
||||
onTouchTap={this.noteBookTapped.bind(this, i)}
|
||||
leftIcon={<NoteBook
|
||||
leftIcon={
|
||||
<IconButton
|
||||
onClick={this.preventEventProp}
|
||||
onTouchTap={this.notebookIconTapped.bind(this, i)}
|
||||
color={colors.grey500}/>}
|
||||
style={{padding: 0}}
|
||||
>
|
||||
<NoteBook
|
||||
color={colors.grey500}/>
|
||||
</IconButton>
|
||||
}
|
||||
rightIcon={<Badge
|
||||
style={{'padding': 0}}
|
||||
badgeContent={notebook.notes} />}
|
||||
|
|
@ -397,6 +400,7 @@ export default class LibraryNav extends React.Component {
|
|||
};
|
||||
|
||||
notebookIconTapped = (i, ev) => {
|
||||
ev.stopPropagation()
|
||||
};
|
||||
|
||||
render(){
|
||||
|
|
@ -406,7 +410,7 @@ export default class LibraryNav extends React.Component {
|
|||
ref='mainList'
|
||||
className="list"
|
||||
id="main-nav"
|
||||
selectedItemStyle={{backgroundColor: "#C8C8C8"}}
|
||||
selectedItemStyle={{backgroundColor: colors.lightBlue100}}
|
||||
subheader="Library">
|
||||
{this.state.navItems.map((item, i) => {
|
||||
return <ListItem
|
||||
|
|
@ -424,12 +428,13 @@ export default class LibraryNav extends React.Component {
|
|||
id="nblist"
|
||||
className="list"
|
||||
ref='notebookList'
|
||||
selectedItemStyle={{backgroundColor: "#C8C8C8"}}
|
||||
selectedItemStyle={{backgroundColor: colors.lightBlue100}}
|
||||
subheader={<div>
|
||||
<div className="inline">NoteBooks</div>
|
||||
<IconButton
|
||||
onTouchTap={this.addNotebookTapped}
|
||||
tooltip="Add New Notebook"
|
||||
touch={true}
|
||||
style={{'zIndex': 1000}}
|
||||
className="right inline">
|
||||
<AddCircleOutline
|
||||
|
|
|
|||
|
|
@ -1,10 +1,52 @@
|
|||
import path from 'path-extra'
|
||||
import uuid from 'node-uuid'
|
||||
|
||||
import * as utils from 'utils'
|
||||
import glob from 'glob'
|
||||
|
||||
import fs from 'fs'
|
||||
import mkdirp from 'mkdirp'
|
||||
import jsfile from 'jsonfile'
|
||||
import rmdir from 'rimraf'
|
||||
|
||||
|
||||
export function getAppDataPath(){
|
||||
return path.datadir(APP_NAME)
|
||||
}
|
||||
|
||||
export function getNotebookPath(notebook){
|
||||
export function getNotePath(notebook, note){
|
||||
var notePath = getAppDataPath()
|
||||
return path.join(notePath, notebook.uuid+'.qvnotebook')
|
||||
var notebookPath = getNotebookPath(notebook)
|
||||
return path.join(notebookPath, note.uuid+'.qvnote')
|
||||
}
|
||||
|
||||
export function getNotebookPath(notebook){
|
||||
var noteBookPath = getAppDataPath()
|
||||
return path.join(noteBookPath, notebook.uuid+'.qvnotebook')
|
||||
}
|
||||
|
||||
export function loadNotebookByName(nameOrUUID){
|
||||
var dataPath = getAppDataPath()
|
||||
var notebookPath = path.join(dataPath, nameOrUUID+'.qvnotebook')
|
||||
var obj = jsfile.readFileSync(path.join(notebookPath, 'meta.json'))
|
||||
var notes = glob.sync(path.join(notebookPath, '*.qvnote'))
|
||||
|
||||
var nb = {
|
||||
'title': obj.name,
|
||||
'uuid': obj.uuid,
|
||||
'notes': notes.length,
|
||||
'path': notebookPath
|
||||
}
|
||||
|
||||
if(nb.title == ''){
|
||||
nb.state = 'editing'
|
||||
}
|
||||
else{
|
||||
nb.state = 'displaying'
|
||||
}
|
||||
return nb
|
||||
}
|
||||
|
||||
export function getNotebookPathFromUUID(uuid){
|
||||
return getNotebookPath({uuid: uuid})
|
||||
}
|
||||
|
|
|
|||
6
main.js
6
main.js
|
|
@ -56,7 +56,7 @@ app.on('ready', function() {
|
|||
"webgl": true,
|
||||
"allowRunningInsecureContent": false,
|
||||
"webaudio": true,
|
||||
"zoomFactor": 1.0,
|
||||
"zoomFactor": 0.85,
|
||||
"blinkFeatures": "",
|
||||
"experimentalFeatures": false,
|
||||
"allowDisplayingInsecureContent": false,
|
||||
|
|
@ -65,7 +65,7 @@ app.on('ready', function() {
|
|||
"partition": "",
|
||||
"webSecurity": true
|
||||
},
|
||||
"title": "Electrify",
|
||||
"title": "TechNote",
|
||||
"disableAutoHideCursor": false,
|
||||
"center": true
|
||||
});
|
||||
|
|
@ -75,7 +75,7 @@ app.on('ready', function() {
|
|||
mainWindow.webContents.setUserAgent("");
|
||||
|
||||
mainWindow.webContents.on('did-finish-load',function(){
|
||||
mainWindow.setTitle("Electrify");
|
||||
mainWindow.setTitle("TechNote");
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ body, html{
|
|||
#entry-selector{
|
||||
border-right: solid 1px #d9d9d9;
|
||||
min-width: 250px;
|
||||
max-width: 390px !important;
|
||||
max-width: 350px !important;
|
||||
}
|
||||
#library-nav{
|
||||
border-right: solid 1px #d9d9d9;
|
||||
|
|
@ -51,5 +51,6 @@ body, html{
|
|||
padding-bottom: 0px !important;
|
||||
}
|
||||
#notebook-list{
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue