Author: jruchaud Date: 2015-04-28 15:23:03 +0000 (Tue, 28 Apr 2015) New Revision: 1286 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1286 Log: Edit time feature Modified: wit/css/style.less wit/js/components/ActionsBar.js wit/js/components/Time.js wit/js/services/TimerService.js Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-28 15:03:26 UTC (rev 1285) +++ wit/css/style.less 2015-04-28 15:23:03 UTC (rev 1286) @@ -15,3 +15,17 @@ .nav > li > a { padding: 15px; } + +.editButton { + position: absolute; + right: 15px; + margin-top: 3px; +} + +.editInput { + margin: 20px 0 15px 0; + + input { + font-family: Digital; + } +} Modified: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js 2015-04-28 15:03:26 UTC (rev 1285) +++ wit/js/components/ActionsBar.js 2015-04-28 15:23:03 UTC (rev 1286) @@ -20,37 +20,9 @@ timer.nextHistory(); }, - onReassign: function(e) { - React.findDOMNode(this.refs.reassign).classList.toggle("hidden"); - React.findDOMNode(this.refs.actions).classList.toggle("hidden"); - - var time = timer.getTime() || "00:00:00"; - var reassignValue = React.findDOMNode(this.refs.reassignValue); - reassignValue.value = time; - reassignValue.max = time; - }, - - onReassignValue: function(e) { - React.findDOMNode(this.refs.reassign).classList.toggle("hidden"); - React.findDOMNode(this.refs.actions).classList.toggle("hidden"); - - var reassignValue = React.findDOMNode(this.refs.reassignValue); - timer.reassignTime(reassignValue.value); - }, - render: function() { return ( <div className="text-center"> - <div ref="reassign" className="input-group hidden"> - - <input ref="reassignValue" type="time" className="form-control" - min="00:00:00" step="1"/> - - <span className="input-group-btn"> - <button className="btn btn-primary" type="button" onClick={this.onReassignValue}>OK</button> - </span> - </div> - <div ref="actions" className="btn-group" role="group"> <button type="button" className="btn btn-primary btn-lg" onClick={this.prevHistory}> <span className="glyphicon glyphicon-step-backward" aria-hidden="true"></span> @@ -61,9 +33,6 @@ <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" onClick={this.onReassign}> - <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span> - </button> <button type="button" className="btn btn-primary btn-lg" onClick={this.nextHistory}> <span className="glyphicon glyphicon-step-forward" aria-hidden="true"></span> </button> Modified: wit/js/components/Time.js =================================================================== --- wit/js/components/Time.js 2015-04-28 15:03:26 UTC (rev 1285) +++ wit/js/components/Time.js 2015-04-28 15:23:03 UTC (rev 1286) @@ -15,12 +15,47 @@ timer.unsubscribeTimeChanged(this.forceUpdate_bound); }, + onEdit: function(e) { + React.findDOMNode(this.refs.editButton).classList.toggle("hidden"); + React.findDOMNode(this.refs.editInput).classList.toggle("hidden"); + React.findDOMNode(this.refs.timeValue).classList.toggle("hidden"); + + var time = timer.getTime() || "00:00:00"; + var editInputTime = React.findDOMNode(this.refs.editInputTime); + editInputTime.value = time; + editInputTime.max = time; + }, + + onSaveTime: function(e) { + React.findDOMNode(this.refs.editButton).classList.toggle("hidden"); + React.findDOMNode(this.refs.editInput).classList.toggle("hidden"); + React.findDOMNode(this.refs.timeValue).classList.toggle("hidden"); + + var editInputTime = React.findDOMNode(this.refs.editInputTime); + timer.editTime(editInputTime.value); + }, + render: function() { return ( <div> - <h1 className="digit"> + <button ref="editButton" type="button" className="btn btn-primary btn-small editButton" onClick={this.onEdit}> + <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span> + </button> + + <div ref="editInput" className="input-group editInput hidden"> + + <input ref="editInputTime" type="time" className="form-control" + min="00:00:00" step="1"/> + + <span className="input-group-btn"> + <button className="btn btn-primary" type="button" onClick={this.onSaveTime}>Save</button> + </span> + </div> + + <h1 ref="timeValue" className="digit"> {this.state.getTime() ? this.state.getTime() : "00:00:00"} </h1> + <h5 className="digit"> {this.state.getDayTime() ? this.state.getDayTime() : "00:00:00"} </h5> Modified: wit/js/services/TimerService.js =================================================================== --- wit/js/services/TimerService.js 2015-04-28 15:03:26 UTC (rev 1285) +++ wit/js/services/TimerService.js 2015-04-28 15:23:03 UTC (rev 1286) @@ -138,7 +138,7 @@ eventEmitter.emit('onTimeChanged'); }; -exports.reassignTime = function(value) { +exports.editTime = function(value) { if (time) { var d = moment.duration(value); idleTime = moment(time).add(d.asMilliseconds(), "ms").toDate();