mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
Started note list
This commit is contained in:
parent
243d6e9845
commit
18bb02244f
@ -67,13 +67,11 @@ class Application extends BaseApplication {
|
||||
let application_ = null;
|
||||
|
||||
function app() {
|
||||
console.info('AAAAAAAAA');
|
||||
if (!application_) throw new Error('Application has not been initialized');
|
||||
return application_;
|
||||
}
|
||||
|
||||
function initApp(electronApp) {
|
||||
console.info('INIT');
|
||||
if (application_) throw new Error('Application has already been initialized');
|
||||
application_ = new Application(electronApp);
|
||||
return application_;
|
||||
|
20
ElectronClient/app/gui/ItemList.jsx
Normal file
20
ElectronClient/app/gui/ItemList.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
class ItemList extends React.Component {
|
||||
|
||||
render() {
|
||||
const items = this.props.items;
|
||||
|
||||
let itemComps = [];
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const itemComp = this.props.itemRenderer(i, items[i]);
|
||||
itemComps.push(itemComp);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ itemComps }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { ItemList };
|
33
ElectronClient/app/gui/NoteList.jsx
Normal file
33
ElectronClient/app/gui/NoteList.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
const { ItemList } = require('./ItemList.min.js');
|
||||
|
||||
class NoteListComponent extends React.Component {
|
||||
|
||||
itemRenderer(index, item) {
|
||||
let classes = ['item'];
|
||||
classes.push(index % 2 === 0 ? 'even' : 'odd');
|
||||
return <div onClick={() => {console.info(item)}} className={classes.join(' ')} key={index}>{item.title}</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={"note-list"}>
|
||||
<h1>Notes</h1>
|
||||
<ItemList
|
||||
items={this.props.notes}
|
||||
itemRenderer={ (index, item) => { return this.itemRenderer(index, item) } }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
notes: state.notes,
|
||||
};
|
||||
};
|
||||
|
||||
const NoteList = connect(mapStateToProps)(NoteListComponent);
|
||||
|
||||
module.exports = { NoteList };
|
@ -1,22 +1,30 @@
|
||||
const React = require('react');
|
||||
const { render } = require('react-dom');
|
||||
const { createStore } = require('redux');
|
||||
const { Provider } = require('react-redux');
|
||||
const { connect, Provider } = require('react-redux');
|
||||
|
||||
const { NoteList } = require('./gui/NoteList.min.js');
|
||||
|
||||
const { app } = require('electron').remote.require('./app');
|
||||
|
||||
class ReactRoot extends React.Component {
|
||||
class ReactRootComponent extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Aaaa
|
||||
<div style={{height: "1000px"}}>
|
||||
<NoteList></NoteList>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const ReactRoot = connect(mapStateToProps)(ReactRootComponent);
|
||||
|
||||
const store = app().store();
|
||||
|
||||
render(
|
@ -3,13 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hello World!</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
We are using node <script>document.write(process.versions.node)</script>,
|
||||
Chrome <script>document.write(process.versions.chrome)</script>,
|
||||
and Electron <script>document.write(process.versions.electron)</script>.
|
||||
<div id="react-root"></div>
|
||||
<script src="ReactRoot.min.js"></script>
|
||||
<div style="height: '1000px';" id="react-root"></div>
|
||||
<script src="gui/Root.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
9
ElectronClient/app/style.css
Normal file
9
ElectronClient/app/style.css
Normal file
@ -0,0 +1,9 @@
|
||||
.note-list .item {
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-list .item.odd {
|
||||
background-color: lightgray;
|
||||
}
|
@ -5,9 +5,12 @@ BUILD_DIR="$ROOT_DIR/app"
|
||||
|
||||
rsync -a "$ROOT_DIR/../ReactNativeClient/lib/" "$BUILD_DIR/lib/"
|
||||
|
||||
for JSX_FILE in "$BUILD_DIR"/*.jsx; do
|
||||
JS_FILE="${JSX_FILE::-4}.min.js"
|
||||
"$ROOT_DIR/app/node_modules/.bin/babel" --presets react "$JSX_FILE" > "$JS_FILE"
|
||||
for JSX_FILE in "$BUILD_DIR"/gui/*.jsx; do
|
||||
JS_FILE="${JSX_FILE::-4}.min.js"
|
||||
"$ROOT_DIR/app/node_modules/.bin/babel" --presets react "$JSX_FILE" > "$JS_FILE"
|
||||
if [[ $? != 0 ]]; then
|
||||
exit 1
|
||||
fi
|
||||
done
|
||||
|
||||
TRANSLATION_BUILD_SCRIPT="$ROOT_DIR/../CliClient/build/build-translation.js"
|
||||
@ -16,19 +19,4 @@ if [[ ! -f $TRANSLATION_BUILD_SCRIPT ]]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
node "$TRANSLATION_BUILD_SCRIPT" --silent
|
||||
|
||||
|
||||
# ROOT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
|
||||
# BUILD_DIR="$ROOT_DIR/build"
|
||||
|
||||
# rsync -a app/ $BUILD_DIR/
|
||||
# rsync -a "$ROOT_DIR/../ReactNativeClient/lib/" "$BUILD_DIR/lib/"
|
||||
|
||||
# TRANSLATION_BUILD_SCRIPT="$ROOT_DIR/../CliClient/build/build-translation.js"
|
||||
# if [[ ! -f $TRANSLATION_BUILD_SCRIPT ]]; then
|
||||
# echo "Build the CLI app first ($TRANSLATION_BUILD_SCRIPT missing)"
|
||||
# exit 1
|
||||
# fi
|
||||
|
||||
# node "$TRANSLATION_BUILD_SCRIPT" --silent
|
||||
node "$TRANSLATION_BUILD_SCRIPT" --silent
|
@ -1,6 +1,6 @@
|
||||
#!/bin/bash
|
||||
ROOT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
|
||||
cd "$ROOT_DIR"
|
||||
./build.sh
|
||||
./build.sh || exit 1
|
||||
cd "$ROOT_DIR/app"
|
||||
node_modules/.bin/electron . --env dev --log-level debug "$@"
|
@ -278,11 +278,11 @@ class AppComponent extends React.Component {
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
historyCanGoBack: state.historyCanGoBack,
|
||||
showSideMenu: state.showSideMenu,
|
||||
syncStarted: state.syncStarted,
|
||||
appState: state.appState,
|
||||
};
|
||||
historyCanGoBack: state.historyCanGoBack,
|
||||
showSideMenu: state.showSideMenu,
|
||||
syncStarted: state.syncStarted,
|
||||
appState: state.appState,
|
||||
};
|
||||
};
|
||||
|
||||
const App = connect(mapStateToProps)(AppComponent);
|
||||
|
Loading…
Reference in New Issue
Block a user