Skip to content

Commit c3ab3c2

Browse files
MarkusBordihnMarkusBordihn
committed
Replaced toolbar with statusbutton for runner instance.
1 parent 3ae79d9 commit c3ab3c2

File tree

10 files changed

+89
-387
lines changed

10 files changed

+89
-387
lines changed

‎src/ui/preview/preview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ cwc.ui.Preview.prototype.decorate = function(node) {
143143
this.statusbar.decorate(nodeStatusbar);
144144
}
145145

146-
// Status Button and actions
146+
// Status Button and actions buttons
147147
let nodeStatusButton = goog.dom.getElement(this.prefix + 'statusbutton');
148148
if (nodeStatusButton) {
149149
this.statusButton.decorate(nodeStatusButton)

‎src/ui/runner/monitor/runner_monitor.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,6 @@ cwc.ui.RunnerMonitor = function(helper) {
4343
/** @type {Element} */
4444
this.node = null;
4545

46-
/** @type {Element} */
47-
this.nodeToolbar = null;
48-
4946
/** @type {Element} */
5047
this.nodeContent = null;
5148

@@ -121,9 +118,8 @@ cwc.ui.RunnerMonitor.prototype.decorate = function(node) {
121118
this.nodeMainRun = goog.dom.getElement(this.prefix + 'main-run');
122119
this.nodeMainStop = goog.dom.getElement(this.prefix + 'main-stop');
123120

124-
// Statusbar and Toolbar
121+
// Statusbar
125122
this.nodeStatusbar = goog.dom.getElement(this.prefix + 'statusbar');
126-
this.nodeToolbar = goog.dom.getElement(this.prefix + 'toolbar');
127123

128124
goog.events.listen(this.nodeMainRun, goog.events.EventType.CLICK,
129125
this.handleRun_, false, this);
@@ -257,11 +253,6 @@ cwc.ui.RunnerMonitor.prototype.adjustSize = function() {
257253
let parentSize = goog.style.getSize(this.node);
258254
let newHeight = parentSize.height;
259255

260-
if (this.nodeToolbar) {
261-
let toolbarSize = goog.style.getSize(this.nodeToolbar);
262-
newHeight = newHeight - toolbarSize.height;
263-
}
264-
265256
if (this.nodeStatusbar) {
266257
let infobarSize = goog.style.getSize(this.nodeStatusbar);
267258
newHeight = newHeight - infobarSize.height;

‎src/ui/runner/runner.gss‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,6 @@
2626
justify-content: flex-start;
2727
}
2828

29-
#{$prefix}runner-toolbar-chrome {
30-
flex: 0 1 auto;
31-
min-height: 34px;
32-
}
33-
34-
#{$prefix}runner-toolbar-chrome > .mdl-layout__header-row {
35-
height: 34px;
36-
}
37-
38-
#{$prefix}runner-toolbar-chrome > .mdl-layout__header-row .mdl-navigation__link {
39-
padding: 0 5px;
40-
}
41-
4229
#{$prefix}runner-body .mdl-layout__header-row {
4330
padding: 0 10px 0 20px;
4431
}

‎src/ui/runner/runner.js‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ goog.require('cwc.soy.ui.Runner');
2424
goog.require('cwc.ui.RunnerInfobar');
2525
goog.require('cwc.ui.RunnerMonitor');
2626
goog.require('cwc.ui.RunnerTerminal');
27-
goog.require('cwc.ui.RunnerToolbar');
27+
goog.require('cwc.ui.StatusButton');
2828
goog.require('cwc.ui.Statusbar');
2929
goog.require('cwc.ui.StatusbarState');
3030
goog.require('cwc.ui.Turtle');
@@ -88,6 +88,9 @@ cwc.ui.Runner = function(helper) {
8888
/** @type {cwc.ui.StatusbarState} */
8989
this.status = cwc.ui.StatusbarState.UNKNOWN;
9090

91+
/** @type {cwc.ui.StatusButton} */
92+
this.statusButton = new cwc.ui.StatusButton(this.helper);
93+
9194
/** @type {cwc.ui.RunnerInfobar} */
9295
this.infobar = null;
9396

@@ -97,9 +100,6 @@ cwc.ui.Runner = function(helper) {
97100
/** @type {cwc.ui.RunnerTerminal} */
98101
this.terminal = null;
99102

100-
/** @type {cwc.ui.RunnerToolbar} */
101-
this.toolbar = null;
102-
103103
/** @type {cwc.ui.Turtle} */
104104
this.turtle = null;
105105

@@ -139,7 +139,6 @@ cwc.ui.Runner.prototype.decorate = function(node) {
139139

140140
goog.soy.renderElement(this.node, cwc.soy.ui.Runner.template, {
141141
prefix: this.prefix,
142-
toolbarPrefix: this.helper.getPrefix('runner-toolbar'),
143142
});
144143

145144
// Runtime
@@ -148,25 +147,40 @@ cwc.ui.Runner.prototype.decorate = function(node) {
148147
// Turtle
149148
this.nodeTurtle = goog.dom.getElement(this.prefix + 'turtle');
150149

151-
// Toolbar
152-
let nodeToolbar = goog.dom.getElement(this.prefix + 'toolbar-chrome');
153-
if (nodeToolbar) {
154-
this.toolbar = new cwc.ui.RunnerToolbar(this.helper);
155-
this.toolbar.decorate(nodeToolbar);
156-
}
157-
158150
// Statusbar
159151
let nodeStatusbar = goog.dom.getElement(this.prefix + 'statusbar');
160152
if (nodeStatusbar) {
161153
this.statusbar = new cwc.ui.Statusbar(this.helper);
162154
this.statusbar.decorate(nodeStatusbar);
163155
}
164156

157+
// Status Button and actions buttons
158+
let nodeStatusButton = goog.dom.getElement(this.prefix + 'statusbutton');
159+
if (nodeStatusButton) {
160+
this.statusButton.decorate(nodeStatusButton)
161+
.setFullscreenAction(() => {
162+
this.helper.getInstance('layout').setFullscreenPreview(true);
163+
})
164+
.setFullscreenExitAction(() => {
165+
this.helper.getInstance('layout').setFullscreenPreview(false);
166+
})
167+
.setReloadAction(() => {
168+
this.refresh();
169+
})
170+
.setTerminateAction(this.terminate.bind(this))
171+
.setRunAction(() => {
172+
this.run();
173+
})
174+
.setStopAction(this.stop.bind(this));
175+
}
176+
165177
// Monitor
166178
this.nodeMonitor = goog.dom.getElement(this.prefix + 'monitor');
167-
this.monitor = new cwc.ui.RunnerMonitor(this.helper);
168-
this.monitor.decorate(this.nodeMonitor);
169-
this.enableMonitor(false);
179+
if (this.nodeMonitor) {
180+
this.monitor = new cwc.ui.RunnerMonitor(this.helper);
181+
this.monitor.decorate(this.nodeMonitor);
182+
this.enableMonitor(false);
183+
}
170184

171185
// Terminal
172186
this.nodeTerminal = goog.dom.getElement(this.prefix + 'terminal');
@@ -351,8 +365,9 @@ cwc.ui.Runner.prototype.run = function() {
351365
if (this.status == cwc.ui.StatusbarState.LOADING ||
352366
this.status == cwc.ui.StatusbarState.UNRESPONSIVE) {
353367
this.terminate();
368+
} else {
369+
this.stop();
354370
}
355-
this.stop();
356371
goog.dom.removeChildren(this.nodeRuntime);
357372
}
358373
this.setStatus_(cwc.ui.StatusbarState.PREPARE);
@@ -466,8 +481,12 @@ cwc.ui.Runner.prototype.handleConsoleMessage_ = function(e) {
466481

467482
/**
468483
* Displays the start of load event.
484+
* @param {Event} e
469485
*/
470-
cwc.ui.Runner.prototype.handleLoadStart = function() {
486+
cwc.ui.Runner.prototype.handleLoadStart = function(e) {
487+
if (e && e['url'] === 'about:blank') {
488+
return;
489+
}
471490
this.startTime = new Date().getTime();
472491
this.setStatus_(cwc.ui.StatusbarState.LOADING);
473492
};
@@ -580,16 +599,6 @@ cwc.ui.Runner.prototype.send = function(command, optValue) {
580599
};
581600

582601

583-
/**
584-
* @param {boolean} visible
585-
*/
586-
cwc.ui.Runner.prototype.showRunButton = function(visible) {
587-
if (this.toolbar) {
588-
this.toolbar.showRunButton(visible);
589-
}
590-
};
591-
592-
593602
/**
594603
* @param {!cwc.ui.StatusbarState} status
595604
* @private
@@ -601,8 +610,8 @@ cwc.ui.Runner.prototype.setStatus_ = function(status) {
601610
if (this.statusbar) {
602611
this.statusbar.setStatus(status, this.startTime, this.stopTime);
603612
}
604-
if (this.toolbar) {
605-
this.toolbar.setStatus(status);
613+
if (this.statusButton) {
614+
this.statusButton.setStatus(status);
606615
}
607616
if (this.monitor) {
608617
this.monitor.setStatus(status);

‎src/ui/runner/runner.soy‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -25,79 +25,17 @@
2525
*/
2626
{template .template}
2727
{@param prefix: string}
28+
2829
<div id="{$prefix}body">
29-
{call .toolbar_ data="all" /}
3030
<div id="{$prefix}content">
31-
<div id="{$prefix}status"></div>
31+
<div id="{$prefix}statusbutton"></div>
3232
<div id="{$prefix}statusbar"></div>
3333
<div id="{$prefix}overlay"></div>
3434
<div id="{$prefix}turtle"></div>
3535
<div id="{$prefix}terminal"></div>
36-
<div id="{$prefix}runtime" class="hide"></div>
36+
<div id="{$prefix}runtime"></div>
3737
</div>
3838
<footer id="{$prefix}infobar" class="mdl-layout__header"></footer>
3939
<div id="{$prefix}monitor"></div>
4040
</div>
4141
{/template}
42-
43-
44-
/**
45-
* Toolbar template.
46-
*/
47-
{template .toolbar_ private="true"}
48-
{@param toolbarPrefix: string}
49-
<header id="{$toolbarPrefix}chrome" class="mdl-layout__header bg_10_pct_black">
50-
<div class="mdl-layout__header-row">
51-
<nav class="mdl-navigation">
52-
53-
{call cwc.soy.ui.Template.navigationIcon}
54-
{param prefix: $toolbarPrefix /}
55-
{param id: 'run' /}
56-
{param icon: 'play_arrow' /}
57-
{param opt_title: 'Runs the code and update preview' /}
58-
{/call}
59-
60-
{call cwc.soy.ui.Template.navigationIcon}
61-
{param prefix: $toolbarPrefix /}
62-
{param id: 'stop' /}
63-
{param icon: 'stop' /}
64-
{param opt_title: 'Stops or terminates the preview' /}
65-
{/call}
66-
67-
{call cwc.soy.ui.Template.navigationIcon}
68-
{param prefix: $toolbarPrefix /}
69-
{param id: 'reload' /}
70-
{param icon: 'refresh' /}
71-
{param opt_title: 'Reload preview' /}
72-
{/call}
73-
74-
{call cwc.soy.ui.Template.navigationIcon}
75-
{param prefix: $toolbarPrefix /}
76-
{param id: 'refresh' /}
77-
{param icon: 'refresh' /}
78-
{param opt_title: 'Refresh preview' /}
79-
{/call}
80-
81-
</nav>
82-
<div class="mdl-layout-spacer"></div>
83-
<nav class="mdl-navigation">
84-
85-
{call cwc.soy.ui.Template.navigationIcon}
86-
{param prefix: $toolbarPrefix /}
87-
{param id: 'expand' /}
88-
{param icon: 'fullscreen' /}
89-
{param opt_title: 'Expand Blockly editor' /}
90-
{/call}
91-
92-
{call cwc.soy.ui.Template.navigationIcon}
93-
{param prefix: $toolbarPrefix /}
94-
{param id: 'expand-exit' /}
95-
{param icon: 'fullscreen_exit' /}
96-
{param opt_title: 'Collapse Blockly editor.' /}
97-
{/call}
98-
99-
</nav>
100-
</div>
101-
</header>
102-
103-
{/template}

0 commit comments

Comments
 (0)