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 data-bind="component: { name: 'stopwatch' }"></div>
<div class="ui-widget ui-corner-all" data-bind="foreach: watches">
<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>
<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>

View file

@ -1,5 +1,5 @@
define([
'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button'
'jquery', 'knockout', 'text!./Stopwatch.html', 'jquery-ui/dialog', 'kojqui/button'
], function(jquery, ko, htmlString) {
function ViewModel(params) {
@ -10,6 +10,17 @@ define([
self.addWatch = function() {
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() {

View file

@ -1,14 +1,9 @@
<div class="ui-widget ui-corner-all">
<div class="ui-widget-header">Stopwatch</div>
<div class="ui-widget-content ui-corner-all">
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
data-bind="text: secondsDisplay"></span>
</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>
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
data-bind="text: secondsDisplay"></span>
</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>