Author: jruchaud Date: 2015-04-22 16:58:01 +0000 (Wed, 22 Apr 2015) New Revision: 1245 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1245 Log: Begin to do the style on bootstrap for the moment Added: wit/css/time.less wit/font/ wit/font/DIGITALDREAM.ttf wit/font/DIGITALDREAMFAT.ttf wit/font/DIGITALDREAMFATNARROW.ttf wit/font/DIGITALDREAMFATSKEW.ttf wit/font/DIGITALDREAMFATSKEWNARROW.ttf wit/font/DIGITALDREAMNARROW.ttf wit/font/DIGITALDREAMSKEW.ttf wit/font/DIGITALDREAMSKEWNARROW.ttf wit/test.html Modified: wit/css/style.less wit/index.html wit/js/App.js wit/js/TimerService.js wit/js/components/ActionsBar.js wit/js/components/Tags.js wit/js/components/Time.js wit/package.json Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/css/style.less 2015-04-22 16:58:01 UTC (rev 1245) @@ -1,16 +1,13 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; +@font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); } -body { - width: 100%; - height: 100%; - background-color: #f8f8f8; - color: #f3f3f3; +.digit { + font-family: Digital; + text-align: center; } -table { - color: black; +.nav > li > a { + padding: 15px; } Added: wit/css/time.less =================================================================== --- wit/css/time.less (rev 0) +++ wit/css/time.less 2015-04-22 16:58:01 UTC (rev 1245) @@ -0,0 +1,15 @@ + +@font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); +} + +#time { + font-family: Digital; + font-size: 48px; + padding: 15px; + text-align: center; + + color: #00aad8; + border-bottom: 2px #00aad8 solid; +} Added: wit/font/DIGITALDREAM.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAM.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMFAT.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFAT.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMFATNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATNARROW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMFATSKEW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATSKEW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMFATSKEWNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATSKEWNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMSKEW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMSKEW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMSKEWNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMSKEWNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/index.html 2015-04-22 16:58:01 UTC (rev 1245) @@ -18,14 +18,30 @@ <script type="text/jsx" src="js/main.js"></script> <!-- For Less --> + <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet/less" type="text/css" href="css/style.less" /> - <link rel="stylesheet/less" type="text/css" href="css/select.less" /> - <link rel="stylesheet/less" type="text/css" href="css/actions.less" /> <script type="text/javascript" src="node_modules/less/dist/less.min.js"></script> </head> <body> - <div id="content"></div> + <div class="container-fluid"> + + <div class="navbar navbar-default"> + <div class="navbar-header pull-left"> + <a class="navbar-brand" href="#">WIT</a> + </div> + + <div class="nav navbar-header pull-right"> + <ul class="nav pull-right"> + <li class="pull-left"><a href="#">Timer</a></li> + <li class="pull-left"><a href="#">Rapport</a></li> + <li class="pull-left"><a href="#">Tags</a></li> + <li class="pull-left"><a href="#">Options</a></li> + </ul> + </div> + </div> + <div id="content"></div> + </div> </body> </html> Modified: wit/js/App.js =================================================================== --- wit/js/App.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/App.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -4,11 +4,10 @@ render: function() { return ( <div> - <Tags /> <Time /> + <Tags /> <ActionsBar /> </div> ); } }); - Modified: wit/js/TimerService.js =================================================================== --- wit/js/TimerService.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/TimerService.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -80,7 +80,7 @@ if (time) { timeChangeTimer = setTimeout(timeChange.bind(), 1000); - updateUserIdleTime(); + //updateUserIdleTime(); } }; Modified: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/ActionsBar.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -21,17 +21,22 @@ render: function() { return ( - <div className="actions"> - <div id="play" onClick={this.onPlay}> - <div className="icon"></div> + <div className="text-center"> + <div className="btn-group" role="group"> + <button type="button" className="btn btn-primary btn-lg"> + <span className="glyphicon glyphicon-backward" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg" onClick={this.onPlay}> + <span className="glyphicon glyphicon-play" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg" onClick={this.onStop}> + <span className="glyphicon glyphicon-stop" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg"> + <span className="glyphicon glyphicon-forward" aria-hidden="true"></span> + </button> </div> - <div id="stop" onClick={this.onStop}> - <div className="icon"></div> - </div> - <div id="rapport" onClick={this.onRapport}> - <div className="icon">R</div> - </div> - </div> + </div> ); } }); Modified: wit/js/components/Tags.js =================================================================== --- wit/js/components/Tags.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/Tags.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -33,17 +33,21 @@ var items = this.state.getTags().map(function(item, index) { return ( - <li className="tag"><span className="remove" onClick={self.onRemove} data-index={index}>x</span>{item}</li> + <li className="list-group-item"> + <button type="button" className="close" aria-label="Close" onClick={self.onRemove} data-index={index}> + <span aria-hidden="true">×</span> + </button> + {item} + </li> ); }); return ( - <div className="selection"> - <ul id="tags"> - {items} - <li className="input"><input id="inputTag" onKeyDown={this.onKey} tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input></li> - </ul> - </div> + <ul className="list-group"> + {items} + </ul> ); } }); + +// <li className="input"><input id="inputTag" onKeyDown={this.onKey} tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input></li> Modified: wit/js/components/Time.js =================================================================== --- wit/js/components/Time.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/Time.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -11,23 +11,11 @@ timer.subscribeIdle(this.forceUpdate.bind(this)); }, - keepTime: function() { - timer.keepTime(); - this.forceUpdate(); - }, - - keepIdle: function() { - timer.keepIdle(); - this.forceUpdate(); - }, - render: function() { return ( - <div id="time"> - <span onClick={this.keepTime}>{this.state.getTime() ? "time: " + this.state.getTime() : "Not started"}</span> -   - <span onClick={this.keepIdle}>{this.state.getIdle() ? "idle: " + this.state.getIdle() : ""}</span> - </div> + <h1 className="digit"> + {this.state.getTime() ? this.state.getTime() : "00:00:00"} + </h1> ); } }); Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/package.json 2015-04-22 16:58:01 UTC (rev 1245) @@ -4,12 +4,13 @@ "version": "1.0.0", "window": { "width": 480, - "height": 180, + "height": 400, "toolbar": true, "frame": true, "transparent": false }, "dependencies": { + "bootstrap": "^3.3.4", "less": "^2.5.0", "moment": "^2.10.2", "nedb": "^1.1.2", Added: wit/test.html =================================================================== --- wit/test.html (rev 0) +++ wit/test.html 2015-04-22 16:58:01 UTC (rev 1245) @@ -0,0 +1,69 @@ +<html> + <head> + <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> + <style> + @font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); + } + + .digit { + font-family: Digital; + text-align: center; + } + + .nav > li > a { + padding: 15px; + } + + </style> + </head> + <body> + <div class="container-fluid"> + + <div class="navbar navbar-default"> + <div class="navbar-header pull-left"> + <a class="navbar-brand" href="#">WIT</a> + </div> + + <div class="nav navbar-header pull-right"> + <ul class="nav pull-right"> + <li class="pull-left"><a href="#">Timer</a></li> + <li class="pull-left"><a href="#">Rapport</a></li> + <li class="pull-left"><a href="#">Tags</a></li> + <li class="pull-left"><a href="#">Options</a></li> + </ul> + </div> + </div> + + <h1 class="digit">00:00:00</h1> + + <ul class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">Porta ac consectetur ac</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> + + <div class="text-center"> + <div class="btn-group" role="group"> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-backward" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-play" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-forward" aria-hidden="true"></span> + </button> + </div> + </div> + + </div> + + </body> +</html> \ No newline at end of file