1
0
Fork 0

Phi: Detachable Stopwatch

This commit is contained in:
Torsten Dreyer 2015-03-17 10:41:04 +01:00
parent 19c57ca01d
commit 166de9c7e3
3 changed files with 35 additions and 16 deletions

View file

@ -1,4 +1,17 @@
<div data-bind="foreach: watches"> <div class="ui-widget ui-corner-all" data-bind="foreach: watches">
<div data-bind="component: { name: 'stopwatch' }"></div> <div class="ui-widget-header">
Stopwatch
<button style="float: right"
data-bind="button: {
icons: {
primary: 'ui-icon-newwin'
},
text: false
},
click: $parent.toDialog"
title="Detach"
></button>
</div>
<div class="ui-widget-content ui-corner-all" data-bind="component: { name: 'Stopwatch' }"></div>
</div> </div>
<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button> <button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>

View file

@ -1,5 +1,5 @@
define([ define([
'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button' 'jquery', 'knockout', 'text!./Stopwatch.html', 'jquery-ui/dialog', 'kojqui/button'
], function(jquery, ko, htmlString) { ], function(jquery, ko, htmlString) {
function ViewModel(params) { function ViewModel(params) {
@ -10,6 +10,17 @@ define([
self.addWatch = function() { self.addWatch = function() {
self.watches.push(self.watches().length); self.watches.push(self.watches().length);
} }
self.toDialog = function(a,evt) {
var p = jquery(evt.target).parent();
p.next().dialog({
title: p.text(),
closeOnEscape: false,
});
p.remove();
}
self.addWatch();
} }
ViewModel.prototype.dispose = function() { ViewModel.prototype.dispose = function() {

View file

@ -1,14 +1,9 @@
<div class="ui-widget ui-corner-all"> <div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
<div class="ui-widget-header">Stopwatch</div> <span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
<div class="ui-widget-content ui-corner-all"> data-bind="text: secondsDisplay"></span>
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;""> </div>
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span <div>
data-bind="text: secondsDisplay"></span> <button data-bind="button: { refreshOn: startIcons, text: false, icons: startIcons, label: startLabel }, click: startStopPause">Start</button>
</div> <button data-bind="button: { text: false, icons: { primary: ' ui-icon-refresh' } }, click: clear">Restart</button>
<div> </div>
<button data-bind="button: { refreshOn: startIcons, text: false, icons: startIcons, label: startLabel }, click: startStopPause">Start</button>
<button data-bind="button: { text: false, icons: { primary: ' ui-icon-refresh' } }, click: clear">Restart</button>
</div>
</div>
</div>