Skip to content

Commit 1075f48

Browse files
author
Matthew Matz
committed
Improved top nav bar UI system
1 parent 6be953e commit 1075f48

File tree

9 files changed

+402
-131
lines changed

9 files changed

+402
-131
lines changed

‎src/main/resources/com/parallax/server/blocklyprop/internationalization/translations.properties‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -195,11 +195,12 @@ login.forgotlink = Forgot your password?
195195
login.notconfirmedlink = Email not yet confirmed?
196196

197197
editor.newproject.title = New project
198-
editor.newproject.spin = S3 Robot
198+
editor.newproject.spin = Scribbler Robot
199199
editor.newproject.c = Propeller C
200200
editor.projects.title = Projects
201201
editor.view.title = View
202202
editor.view.blocks = Blocks
203+
editor.view.code = Code
203204
editor.view.c = Propeller C
204205
editor.view.spin = Spin
205206
editor.view.xml = XML
@@ -211,18 +212,19 @@ editor.run.terminal = Serial terminal
211212
editor.run.configure = Configure client
212213
editor.project = Project
213214
editor.save = Save
214-
editor.save-as = Save as
215+
editor.save-as = Save project as
215216
editor.client.title = BlocklyPropClient
216-
editor.client.checking = Checking for BlocklyPropClient
217-
editor.client.available = BlocklyPropClient available
218-
editor.client.not-available = BlocklyPropClient not available
219-
editor.download = Download
220-
editor.upload = Upload
217+
editor.client.checking = <i class="glyphicon glyphicon-info-sign"></i> Looking for BlocklyPropClient
218+
editor.client.available = <strong>Select the correct port,</strong> then click <i class="glyphicon glyphicon-save"></i> or <i class="glyphicon glyphicon-arrow-down"></i>.
219+
editor.client.available.short = <strong>Select the correct port,</strong> then click <i class="glyphicon glyphicon-save"></i>.
220+
editor.client.not-available = <i class="glyphicon glyphicon-exclamation-sign"></i> BlocklyPropClient <strong>is not running</strong>
221+
editor.download = Download blocks file
222+
editor.upload = Upload blocks file
221223
editor.upload.selectfile = Select File
222224
editor.upload.valid = The selected file appears valid.
223225
editor.upload.notvalid = The selected file is not valid.
224226
editor.upload.boardtype.warning = <strong>Warning!</strong> You are about to upload a blocks file from a different board than you are currently using. If the blocks you are trying to upload are not available for your current board, uploading this blocks file into your project may <strong>break your project</strong>. If your project does break after uploading this file - do not save it! Click your browser's refresh button to reload your project.
225-
editor.clear-workspace = Clear Workspace
227+
editor.clear-workspace = Clear workspace
226228
editor.button.close = Close
227229
editor.button.cancel = Cancel
228230
editor.button.replace = Replace

‎src/main/webapp/WEB-INF/includes/pageparts/editor-menu.jsp‎

Lines changed: 71 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -7,110 +7,78 @@
77
<%@page contentType="text/html" pageEncoding="UTF-8"%>
88
<%@ include file="/WEB-INF/includes/include.jsp"%>
99

10-
<nav class="navbar navbar-default" role="navigation">
11-
<div class="containter-fluid">
12-
<span id="nav-title"><a id="nav-logo" href="<url:getUrl url="/"/>"><strong>BETA</strong> BlocklyProp</a> <span class="project-name"></span> <span class="project-owner"></span></span>
13-
<div class="collapse navbar-collapse">
14-
<ul class="nav navbar-nav" id="navbar-left">
15-
<!-- <li><a href="help/index.html">Manual</a></li> -->
16-
17-
<!-- Activate From Here ---------------------------
18-
<li><a class="external_link" href="<url:getUrl url="/projectcreate.jsp?lang=PROPC"/>" ><fmt:message key="editor.newproject.title" /></a></li>
19-
---- To Here when closing SPIN access --------- -->
20-
21-
<!-- Delete From Here ------------------------- -->
22-
<li class="dropdown">
23-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="editor.newproject.title" /><b class="caret"></b></a>
24-
<ul class="dropdown-menu">
25-
<li><a href="<url:getUrl url="/projectcreate.jsp?lang=SPIN"/>"><fmt:message key="editor.newproject.spin" /></a></li>
26-
<li><a href="<url:getUrl url="/projectcreate.jsp?lang=PROPC"/>"><fmt:message key="editor.newproject.c" /></a></li>
27-
</ul>
28-
</li>
29-
<!-- To Here when closing SPIN access --------- -->
30-
31-
<li class="dropdown">
32-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="editor.projects.title" /> <b class="caret"></b></a>
33-
<ul class="dropdown-menu" role="menu">
34-
<li><a href="<url:getUrl url="/projects.jsp"/>"><fmt:message key="menu.community_projects" /></a></li>
35-
<li><a href="<url:getUrl url="/my/projects.jsp"/>"><fmt:message key="menu.my_projects" /></a></li>
36-
</ul>
37-
</li>
38-
<li class="dropdown">
39-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="editor.view.title" /> <b class="caret"></b></a>
40-
<ul class="dropdown-menu">
41-
<li class="active" id="tab_blocks"><a href="#" onclick="tabClick('tab_blocks')"><fmt:message key="editor.view.blocks" /></a></li>
42-
<c:if test="${param.editor_lang == 'c'}">
43-
<li id="tab_propc"><a href="#" onclick="tabClick('tab_propc')"><fmt:message key="editor.view.c" /></a></li>
44-
</c:if>
45-
<c:if test="${param.editor_lang == 'spin'}">
46-
<li id="tab_spin"><a href="#" onclick="tabClick('tab_spin')"><fmt:message key="editor.view.spin" /></a></li>
47-
</c:if>
48-
<% if ("1".equals(request.getParameter("debug"))) {%>
49-
<li id="tab_xml"><a href="#" onclick="tabClick('tab_xml')"><fmt:message key="editor.view.xml" /></a></li>
50-
<% }%>
10+
<nav class="navbar navbar-default clearfix" role="navigation">
11+
<div style="width:100%;">
12+
<div style="display:inline;"><span><a id="nav-logo" href="<url:getUrl url="/"/>">BlocklyProp<br><strong>BETA</strong></a></span>
13+
</div>
14+
<div style="display:inline;">
15+
<div style="width:100%; ">
16+
<div style="display:inline; padding-left: 10px; line-height: 30px;">
17+
<span id="client-searching" class="bp-client-warning">
18+
<a class="client-searching-link" data-toggle="modal" data-target="#client-download-modal" href="#"><fmt:message key="editor.client.checking" /></span></a>
19+
</span>
20+
<span id="client-unavailable" class="bp-client-danger hidden">
21+
<a class="client-unavailable-link" data-toggle="modal" data-target="#client-download-modal" href="#"><fmt:message key="editor.client.not-available" /></span></a>
22+
</span>
23+
<span id="client-available" class="bp-client-available hidden">
24+
<c:if test="${param.editor_lang == 'c'}">
25+
<fmt:message key="editor.client.available" />
26+
</c:if>
27+
<c:if test="${param.editor_lang == 'spin'}">
28+
<fmt:message key="editor.client.available.short" />
29+
</c:if>
30+
</span>
31+
</div>
32+
<div class="project-name-wrapper" align="right">
33+
<span class="project-name"></span> <span class="project-owner"></span>
34+
</div>
35+
</div>
36+
<div style="width:100%;">
37+
<div style="display:inline; padding-left: 10px;">
38+
<a onclick="compile()" data-toggle="tooltip" title="Verify code (compile)" data-placement="bottom" href="#" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-ok"></i></a>
39+
<c:if test="${param.editor_lang == 'c'}">
40+
<a onclick="loadIntoRam()" data-toggle="tooltip" title="Run once (load code to RAM)" data-placement="bottom" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-arrow-down"></i></a>
41+
</c:if>
42+
<a onclick="loadIntoEeprom()" data-toggle="tooltip" title="Load and run (save code to EEPROM)" data-placement="bottom" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-save"></i></a>
43+
<a onclick="serial_console()" data-toggle="tooltip" title="Open Serial Terminal" data-placement="bottom" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-list-alt"></i></a>
44+
</div>
45+
<div style="display:inline; clear:right; float:right; padding-right: 10px;" align="right">
5146

52-
</ul>
53-
</li>
54-
<li><a class="external_link" href="<url:getUrl url="/public/help"/>" target="_blank"><fmt:message key="menu.help" /></a></li>
55-
</ul>
56-
<ul class="nav navbar-nav navbar-right">
57-
<c:if test="${!param.demo}">
58-
<li id="client-unavailable">
59-
<p class="navbar-text"><a data-toggle="modal" data-target="#client-download-modal" href="#"><span id="client_status" data-not-available="<fmt:message key="editor.client.not-available" />" ><fmt:message key="editor.client.checking" /></span></a></p>
60-
</li>
61-
<li id="client-available" class="hidden">
62-
<p class="navbar-text"><fmt:message key="editor.client.available" /></p>
63-
</li>
64-
<li>
65-
<form class="navbar-form">
66-
<div class="form-group">
67-
<select class="form-control" id="comPort"></select>
68-
</div>
69-
</form>
70-
</li>
71-
</c:if>
72-
<li class="dropdown">
73-
<c:if test="${!param.demo}">
74-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="editor.run.title" /> <b class="caret"></b></a>
75-
<ul class="dropdown-menu">
76-
<li><a href="#" onclick="compile()"><fmt:message key="editor.run.compile" /></a></li>
77-
<li><a href="#" onclick="loadIntoRam()"><fmt:message key="editor.run.ram" /></a></li>
78-
<li><a href="#" onclick="loadIntoEeprom()"><fmt:message key="editor.run.eeprom" /></a></li>
79-
<li class="divider"></li>
80-
<li><a href="#" onclick="serial_console()"><fmt:message key="editor.run.terminal" /></a></li>
81-
<li class="divider"></li>
82-
<li><a href="#" onclick="configure_client()"><fmt:message key="editor.run.configure" /></a></li>
83-
</ul>
47+
<select class="dropdown port-dropdown" title="Ports" data-placement="left" id="comPort"></select>
48+
<c:if test="${param.editor_lang == 'c'}">
49+
<a class="btn-view-code" id="btn-view-propc" style="display:inline;" href="#" onclick="tabClick('tab_propc')"><i class="glyphicon glyphicon-eye-open"></i> Code</a>
8450
</c:if>
85-
<c:if test="${param.demo}">
86-
<a href="#" class="dropdown-toggle demo-function" ><fmt:message key="editor.run.title" /> <b class="caret"></b></a>
87-
</c:if>
88-
</li>
89-
<!-- <li><a href="#" onclick="project()"><fmt:message key="editor.project" /></a></li> -->
90-
<c:if test="${!param.demo}">
91-
<li>
92-
<div class="btn-group navbar-btn">
93-
<button id="save-project" type="button" class="btn btn-default"><fmt:message key="editor.save" /></button>
94-
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
95-
&nbsp;
96-
<span class="caret"></span>
97-
<span class="sr-only">Toggle Dropdown</span>
98-
</button>
99-
<ul class="dropdown-menu">
100-
<li><a id="save-project-as" href="#"><fmt:message key="editor.save-as" /></a></li>
101-
102-
<li><a id="download-project" href="#"><fmt:message key="editor.download" /></a></li>
103-
<li><a id="upload-project" href="#"><fmt:message key="editor.upload" /></a></li>
104-
<!-- -->
105-
<li><a id="clear-workspace" href="#"><fmt:message key="editor.clear-workspace" /></a></li>
106-
</ul>
107-
</div>
108-
</li>
109-
</c:if>
110-
<c:if test="${param.demo}">
111-
<li><a href="#" class="demo-function" ><fmt:message key="editor.save" /></a></li>
51+
<c:if test="${param.editor_lang == 'spin'}">
52+
<a class="btn-view-code" id="btn-view-spin" style="display:inline;" href="#" onclick="tabClick('tab_spin')"><i class="glyphicon glyphicon-eye-open"></i> Code</a>
11253
</c:if>
113-
</ul>
114-
</div><!-- /.navbar-collapse -->
115-
</div><!-- /.container-fluid -->
54+
<a class="btn-view-blocks" id="btn-view-blocks" style="display:none;" href="#" onclick="tabClick('tab_blocks')"><i class="glyphicon glyphicon-eye-open"></i> Blocks</a>
55+
<% if ("1".equals(request.getParameter("debug"))) {%>
56+
<a href="#" class="btn btn-sm btn-primary" id="tab_xml" onclick="tabClick('tab_xml')"><fmt:message key="editor.view.xml" /></a>
57+
<% }%>
58+
<a href="#" class="demo-function" id="save-project"><fmt:message key="editor.save" /></a>
59+
<span class="dropdown"><button class="btn btn-sm btn-default dropdown-toggle" id="options-menu" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-menu-hamburger"></i>
60+
<span class="caret"></span></button>
61+
<ul class="dropdown-menu pull-right btn-sm">
62+
<li><a id="save-project-as" href="#"><fmt:message key="editor.save-as" /></a></li>
63+
<hr style="line-height:5px; margin:5px;">
64+
<li><a href="<url:getUrl url="/projectcreate.jsp?lang=SPIN"/>">New <fmt:message key="editor.newproject.spin" /> project</a></li>
65+
<li><a href="<url:getUrl url="/projectcreate.jsp?lang=PROPC"/>">New <fmt:message key="editor.newproject.c" /> project</a></li>
66+
<li><a href="<url:getUrl url="/my/projects.jsp"/>"><fmt:message key="menu.my_projects" /></a></li>
67+
<li><a href="<url:getUrl url="/projects.jsp"/>"><fmt:message key="menu.community_projects" /></a></li>
68+
<hr style="line-height:5px; margin:5px;">
69+
<li><a href="<url:getUrl url="/public/help"/>" target="_blank"><fmt:message key="menu.help" /> & Reference</a></li>
70+
<hr style="line-height:5px; margin:5px;">
71+
<li><a id="clear-workspace" href="#"><fmt:message key="editor.clear-workspace" /></a></li>
72+
<hr style="line-height:5px; margin:5px;">
73+
<li><a id="download-side" href="#" onclick="downloadPropC()">Download SimpleIDE files</a></li>
74+
<li><a id="download-project" href="#"><fmt:message key="editor.download" /></a></li>
75+
<li><a id="upload-project" href="#"><fmt:message key="editor.upload" /></a></li>
76+
<hr style="line-height:5px; margin:5px;">
77+
<li><a href="#" onclick="configure_client()"><fmt:message key="editor.run.configure" /></a></li>
78+
79+
</ul></span>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
11684
</nav>

‎src/main/webapp/cdn/blockly/language/en/_messages.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ Blockly.Msg.DIALOG_CLEAR_WORKSPACE_WARNING = 'Are you sure you want to clear you
4848
Blockly.Msg.DIALOG_CHANGED_SINCE = 'The project has been changed since the last save.';
4949
Blockly.Msg.DIALOG_PROJECT_SAVED = 'Project saved';
5050
Blockly.Msg.DIALOG_PROJECT_SAVED_TEXT = 'The project has been saved';
51+
Blockly.Msg.DIALOG_SIDE_FILES = '';
52+
Blockly.Msg.DIALOG_SIDE_FILES_WARNING = '';
53+
Blockly.Msg.DIALOG_NO_CLIENT = '<i class="glyphicon glyphicon-exclamation-sign"></i> BlocklyPropClient <strong>is not running</strong>';
54+
Blockly.Msg.DIALOG_CLIENT_SEARCHING = '<i class="glyphicon glyphicon-info-sign"></i> Looking for BlocklyPropClient';
5155

5256
// Variable renaming.
5357
Blockly.MSG_CHANGE_VALUE_TITLE = 'Change value:';

0 commit comments

Comments
 (0)