mirror of
https://github.com/RetroShare/RetroShare.git
synced 2025-08-05 21:04:14 -04:00
webui:
- added better live reload. It uses the Retroshare built in server. Grunt is not required anymore. - removed unused buttons - started ChatHandler git-svn-id: http://svn.code.sf.net/p/retroshare/code/trunk@8185 b45a01b8-16f6-495d-af2f-9b41ad6348cc
This commit is contained in:
electron128
parent
90d6ac6697
commit
b05ee805e4
13 changed files with 179 additions and 63 deletions
|
|
@ -1,13 +0,0 @@
|
|||
module.exports = function(grunt) {
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
watch: {
|
||||
// important: exclude node_modules
|
||||
files: ['dist/**','!**/node_modules/**'],
|
||||
options: {
|
||||
livereload: true,
|
||||
}
|
||||
}
|
||||
});
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
};
|
||||
|
|
@ -6,9 +6,13 @@ HTML = index.html
|
|||
JSGUI = gui.jsx
|
||||
CSS = green-black.css
|
||||
|
||||
all: dist $(JSEXTLIBS) $(addprefix dist/, $(JSLIBS)) $(addprefix dist/, $(HTML)) $(addprefix dist/, $(JSGUI)) $(addprefix dist/, $(CSS))
|
||||
all: dist $(JSEXTLIBS) $(addprefix dist/, $(JSLIBS)) $(addprefix dist/, $(HTML)) $(addprefix dist/, $(JSGUI)) $(addprefix dist/, $(CSS)) dist/livereload
|
||||
.PHONY: all
|
||||
|
||||
dist/livereload: dist $(JSEXTLIBS) $(addprefix dist/, $(JSLIBS)) $(addprefix dist/, $(HTML)) $(addprefix dist/, $(JSGUI)) $(addprefix dist/, $(CSS))
|
||||
wget -qO- http://localhost:9090/api/v2/livereload/trigger
|
||||
touch dist/livereload
|
||||
|
||||
dist/react.js:
|
||||
cd dist && wget --no-check-certificate --output-document react.js http://fb.me/react-$(REACT_VERSION).js
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ DEVELOPMENT
|
|||
- Windows: download and install nodejs from http://nodejs.org
|
||||
- Download development tools with the nodejs package manager (short npm)
|
||||
npm install
|
||||
- during development, run these two commands at the same time
|
||||
- run Retroshare with webinterface on port 9090
|
||||
- during development, run this command (use MinGW shell on Windows)
|
||||
while true; do make --silent; sleep 1; done
|
||||
grunt watch
|
||||
- command one will copy the source files to the "dist" directory if they change
|
||||
- command two will tell the browser to reload if a file changes
|
||||
- the command will copy the source files to the "dist" directory if they change
|
||||
- it will trigger livereload at http://localhost:9090/api/v2/livereload/trigger
|
||||
|
||||
API DOCUMENTATION
|
||||
-----------------
|
||||
|
|
|
|||
|
|
@ -5,6 +5,18 @@ RS.start();
|
|||
var api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/api/v2/";
|
||||
var filestreamer_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/fstream/";
|
||||
|
||||
// livereload
|
||||
function start_live_reload()
|
||||
{
|
||||
RS.request({path: "livereload"}, function(resp){
|
||||
RS.register_token_listener(function(){
|
||||
// Reload the current page, without using the cache
|
||||
document.location.reload(true);
|
||||
},resp.statetoken);
|
||||
});
|
||||
}
|
||||
start_live_reload();
|
||||
|
||||
// implements automatic update using the state token system
|
||||
// components using this mixin should have a member "getPath()" to specify the resource
|
||||
var AutoUpdateMixin =
|
||||
|
|
@ -612,6 +624,49 @@ var Menu = React.createClass({
|
|||
<div className="btn2" onClick={function(){outer.emit("change_url", {url: "search"});}}>
|
||||
Search
|
||||
</div>
|
||||
{/*<div className="btn2" onClick={function(){outer.emit("change_url", {url: "testwidget"});}}>
|
||||
TestWidget
|
||||
</div>*/}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
var TestWidget = React.createClass({
|
||||
mixins: [SignalSlotMixin],
|
||||
getInitialState: function(){
|
||||
return {s:"one"};
|
||||
},
|
||||
componentWillMount: function()
|
||||
{
|
||||
},
|
||||
one: function(){
|
||||
this.setState({s:"one"});
|
||||
},
|
||||
two: function(){
|
||||
this.setState({s:"two"});
|
||||
},
|
||||
render: function(){
|
||||
var outer = this;
|
||||
var outercontainerstyle = {borderStyle: "solid", borderColor: "darksalmon", overflow: "hidden", width: "100%"};
|
||||
var transx = "0px";
|
||||
if(this.state.s === "two")
|
||||
transx = "-45%";
|
||||
var innercontainerstyle = {width: "200%", transform: "translatex("+transx+")", WebkitTransform: "translatex("+transx+")", transition: "all 0.5s ease-in-out", WebkitTransition: "all 0.5s ease-in-out"};
|
||||
var innerstyle = {float:"left", width: "45%"};
|
||||
var two = <div></div>;
|
||||
if(this.state.s === "two")
|
||||
two = <div style={innerstyle} className="btn2" onClick={function(){outer.one();}}>
|
||||
two
|
||||
</div>;
|
||||
return (
|
||||
<div style={outercontainerstyle}>
|
||||
<div style={innercontainerstyle}>
|
||||
<div style={innerstyle} className="btn2" onClick={function(){outer.two();}}>
|
||||
one
|
||||
</div>
|
||||
{two}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
@ -665,18 +720,11 @@ var MainWidget = React.createClass({
|
|||
The component system makes this very simple.
|
||||
Updating the GUI is also very simple: one React mixin can handle updating for all components.
|
||||
</p>
|
||||
|
||||
<div className="btn2">Div Button</div>
|
||||
<div className="btn2">Div Button</div>
|
||||
</div>;
|
||||
}
|
||||
if(this.state.page === "friends")
|
||||
{
|
||||
mainpage =
|
||||
<div>
|
||||
<p>the list updates itself when something changes. Lots of magic happens here!</p>
|
||||
<Peers2 />
|
||||
</div>;
|
||||
mainpage = <Peers2 />;
|
||||
}
|
||||
if(this.state.page === "downloads")
|
||||
{
|
||||
|
|
@ -698,6 +746,10 @@ var MainWidget = React.createClass({
|
|||
{
|
||||
mainpage = <Menu/>;
|
||||
}
|
||||
if(this.state.page === "testwidget")
|
||||
{
|
||||
mainpage = <TestWidget/>;
|
||||
}
|
||||
}
|
||||
|
||||
var menubutton = <div onClick={function(){outer.emit("change_url", {url: "menu"});}} className="btn2"><- menu</div>;
|
||||
|
|
@ -707,25 +759,6 @@ var MainWidget = React.createClass({
|
|||
<div>
|
||||
<PasswordWidget/>
|
||||
<AudioPlayerWidget/>
|
||||
{/*
|
||||
<ul className="nav">
|
||||
<li onClick={function(){outer.emit("change_url", {url: "main"});}}>
|
||||
Start
|
||||
</li>
|
||||
<li onClick={function(){outer.emit("change_url", {url: "login"});}}>
|
||||
Login
|
||||
</li>
|
||||
<li onClick={function(){outer.emit("change_url", {url: "friends"});}}>
|
||||
Friends
|
||||
</li>
|
||||
<li onClick={function(){outer.emit("change_url", {url: "downloads"});}}>
|
||||
Downloads
|
||||
</li>
|
||||
<li onClick={function(){outer.emit("change_url", {url: "search"});}}>
|
||||
Search
|
||||
</li>
|
||||
</ul>
|
||||
*/}
|
||||
{menubutton}
|
||||
{mainpage}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@
|
|||
|
||||
<script type="text/jsx" src="gui.jsx"></script>
|
||||
|
||||
<!-- automatic page reload -->
|
||||
<!--<script src="http://localhost:9091"></script>-->
|
||||
<!-- load this last, because it contains errors -->
|
||||
<!--<script src="http://localhost:35729/livereload.js"></script>-->
|
||||
<script src="http://192.168.1.102:35720/livereload.js"></script>
|
||||
|
||||
<link href="green-black.css" rel="stylesheet">
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
|
|
|||
|
|
@ -4,17 +4,7 @@
|
|||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"live-reload": "^1.1.0",
|
||||
"onchange": "^1.0.0",
|
||||
"parallelshell": "^1.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"comment": "rem stuff below does not work, except the livereload",
|
||||
"watch": "parallelshell \"npm run build\" \"npm run build:watch\" \"npm run livereload\"",
|
||||
"watch:build": "onchange '**.html' -- 'npm run build'",
|
||||
"build": "copy /Y index.html build",
|
||||
"livereload": "live-reload --port 9091 build/"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue