update

cocoblockly.css

@@ -781,7 +781,7 @@ footer.page-footer {
     background-color: #fff;
     margin: 0;
     display: none;
-    min-width: 120px;
+    min-width: 137px;
     max-height: 650px;
     overflow-y: auto;
     opacity: 0;
@@ -1599,4 +1599,46 @@ nav ul a {
     right: 0;
     cursor: pointer;
     z-index: 10;
+}
+
+nav ul li {
+    -webkit-transition: none;
+    transition: none;
+    float: left;
+    padding: 0;
+}
+
+#button_load span,#button_import_cloud span,#button_save span,#button_save_cloud span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#button_load:hover span,#button_import_cloud:hover span,#button_save:hover span,#button_save_cloud:hover span{
+    background-color: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#button_download_uploader span,#button_upgrade_firmware span,#button_connection_type span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#button_download_uploader:hover span,#button_upgrade_firmware:hover span,#button_connection_type:hover span{
+    background-color: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+.sketch_name::-webkit-input-placeholder{
+    color:#CACACA;
+}
+.sketch_name::-moz-placeholder{   /* Mozilla Firefox 19+ */
+    color:#CACACA;
+}
+.sketch_name:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+    color:#CACACA;
+}
+.sketch_name:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
+    color:#CACACA;
 }

index.html

@@ -177,94 +177,107 @@
                     <li>
                         <img style="height: 40px;margin-top: 10px;" class="left nav-icon" src="./icons/logo.png">
                     </li>
-                    <li>
-                        <span class="vertical-separator"></span>
-                    </li>
-                    <!-- help button -->
-                    <li>
-                        <input id="sketch_name" placeholder="My Project Name"
-                            class="sketch_name translatable_sketch_name"
-                            style="background: rgba(0,0,0,0.4);padding: 4px 10px 4px 5px;border-radius: 20px;"
-                            type="text">
-                    </li>
-                    <li>
-                        <button id="downloadbutton" class="translatable_sketch_save"
-                            style="color: #2c4fcd;font-weight: 700;border-radius: 30px;background: #fff;border: none;margin: 0 0 0 15px;font-size: 14px;padding: 8px 14px;">Save</button>
-                    </li>
-                    <li id="cloudBtn-shares">
-                        <i class="material-icons" style="margin-left:5px;cursor: pointer;">share</i>
-                    </li>
-                    <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
-                        style="margin-left:5px;cursor: pointer;">photo_camera</i>
-                    <i id="button_delete" class="material-icons sketch_name_icon right"
-                        style="margin-left:5px;cursor: pointer;">delete</i>
-                </ul>
-                <!-- <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
-                    style="margin-left:5px;cursor: pointer;">photo_camera</i> -->
-                <!-- <i class="material-icons sketch_name_icon right">create</i> -->
-                <!-- <input id="sketch_name" class="sketch_name" type="text"> -->
-                <input id="sketch_name_w" class="sketch_name" type="text" name="wifi" style="display:none">
-                </span>
-                <!-- </a> -->
-                <!-- Horizontal Navbar links only shown on large resolutions -->
-                <ul id="nav-mobile" class="right hide-on-med-and-down nav-mobile-right" style="display: flex;">
-                    <!-- AI Demo -->
                     <!-- <li>
-                    <a id="AI_experience" class='dropdown-button lang_resize' data-activates='AI_experience_dropdown' style="position:relative">
-                        <span class="translatable_AI_experience">AI</span>
-                        <img class="left nav-icon" src="./icons/nav-ai-experience.png">
-                    </a>
-                    <ul id='AI_experience_dropdown' class='dropdown-content' style="top:62px">
-                        <li id="webcam" class='modal-trigger' href="#webcam_capture_modal">
-                            <span class="translatable_AI_emotion">Emotion Recognotion</span>
-                        </li>
-                        <li class="divider"></li>
-                        <li id="voice-input" class='modal-trigger' href="#voice_input_modal">
-                            <span class="translatable_AI_speech">Speech Recognotion</span>
-                        </li>
-                    </ul>
-                </li> -->
-                    <!-- help button -->
-                    <li style="display: none;">
-                        <a id="help" style="display:none" class='dropdown-button lang_resize'
-                            data-activates="help_board" style="position:relative">
-                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
-                            <span class="translatable_help_board">Help</span>
-                            <img class="left nav-icon" src="./icons/nav_help.png">
+                        <span class="vertical-separator"></span>
+                    </li> -->
+                    <li style="display: block;">
+                        <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
+                            style="position:relative;padding: 0 25px;">
+                            <span class="translatable_storage">文件</span>
+                            <!-- <img class="left nav-icon" src="./icons/local_storage.png"> -->
                         </a>
-                        <ul id='help_board' class='dropdown-content' style="top:62px">
-                            <li id="">
-                                <a href="http://help.cocorobo.cn/" target="_blank">
-                                    <span class="translatable_tutorial">Tutorial</span>
-                                </a>
+                        <ul id='local_saveOrOpen' class='dropdown-content' style="top:62px">
+                            <li id="button_load">
+                                <span>导入本地文件</span>
+                            </li>
+                            <li id="button_import_cloud">
+                                <span>导入云端文件</span>
+                            </li>
+                            <li id ="button_save">
+                                <span>保存到本地</span>
+                            </li>
+                            <li id ="button_save_cloud">
+                                <span>保存到云端</span>
+                            </li>
+                            <!-- <li id="button_cloud" class='modal-trigger' href="#cloud_storage_modal">
+                                <span class="translatable_cloud_storage">Cloud</span>
                             </li>
-                            <!-- <li class="divider"></li>
-                        <li>
-                            <a href="#tourmode" class="modal-trigger">
-                                <span class="translatable_tour">Start Tour</span>
-                            </a>
-                        </li> -->
                             <li class="divider"></li>
-                            <!-- <li>
-                                <a href="#env_detect" class="modal-trigger">
-                                    <span class="translatable_env_detect">Environment Detect</span>
-                                </a>
-                            </li> -->
+                            <li id="button_load">
+                                <span class="translatable_import">Import</span>
+                            </li>
                             <li class="divider"></li>
-                            <li>
-                                <a href="http://help.cocorobo.cn/#/changelog" target="_blank">
-                                    <span class="translatable_changelog">Change Log</span>
-                                </a>
+                            <li id="button_save">
+                                <span class="translatable_export">Export</span>
+                            </li> -->
+                        </ul>
+                        <div id="fileImport" class="btn" style="display:none;">
+                            <input type="file" accept=".py">
+                        </div>
+                        <div id="xmlFileImport" class="btn" style="display:none;">
+                            <input type="file" accept=".xml">
+                        </div>
+                        <div id="pyFileImport" class="btn" style="display:none;">
+                            <input type="file" accept=".py">
+                        </div>
+                    </li>
+                    <li style="display: block;">
+                        <a id="local_connect" class='dropdown-button lang_resize' data-activates='local_connect_select'
+                            style="position:relative;padding: 0 25px;">
+                            <span>连接</span>
+                        </a>
+                        <ul id='local_connect_select' class='dropdown-content' style="top:62px">
+                            <li id="button_download_uploader">
+                                <span>下载安装程序</span>
+                            </li>
+                            <li id="button_upgrade_firmware">
+                                <span>固件升级</span>
+                            </li>
+                            <li id ="button_connection_type">
+                                <span>连接方式</span>
                             </li>
                         </ul>
                     </li>
-                    <li style="display:none;">
-                        <select onchange="selectmode(this)" id="mode"
-                            style="outline:0;position:relative;color: #fff;font-weight: 500;width: 175px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 15px 35px 0px 0px;display: block;">
-                            <option value="" style="color: #000;">Main Mode</option>
-                            <option value="" style="color: #000;">AI Mode</option>
-                        </select>
+
+                    <li>
+
+                        <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
+                            style="position:relative;padding: 0 25px;">
+                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
+                            <span class="translatable_help_board">帮助</span>
+                            <!-- <img class="left nav-icon" src="./icons/nav_help.png"> -->
+                        </a>
+                        <!-- <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
+                            <span class="translatable_devices">Devices</span>
+                            <img class="left nav-icon" src="./icons/Devices.png">
+                        </a> -->
+                    </li>
+
+
+                    <li>
+                        <div style="margin: 0px 20px 0px 0px;">
+                            <input type="text" value="IoT Module" id="iot_modules" readonly
+                                class="selectMode_input browser-default" style="font-size: 0.9rem;">
+                            <i class="down" style="position: relative;top: -20px;float: right;"></i>
+                            <div class="downbox MouduleBox">
+                                <div>
+                                    <div class="translatable_hardware_mode">Hardware Mode</div>
+                                    <i class="downboxdown"></i>
+                                    <ul class="Hardware2">
+                                        <li class="translatable_iot_module">IoT Module</li>
+                                        <li class="translatable_ai_module">A.I. Module</li>
+                                    </ul>
+                                </div>
+                                <div><a href="//python-blockly.cocorobo.cn" style="color: #424242 !important;"
+                                        class="translatable_cloud_mode">Cloud
+                                        Mode</a></div>
+                                <div><a href="//ai-blockly.cocorobo.cn" style="color: #424242 !important;"
+                                        class="translatable_javascript_mode">JavaScript Mode</a></div>
+                            </div>
+                        </div>
                     </li>
+
+
                     <li class="Mode_select_box">
                         <div class="ModeSelectBox">
                             <div class="ModeSelect">
@@ -529,30 +542,109 @@
                             </div>
                         </div>
                     </li>
+                    
+                    <!-- help button -->
+                    
+                    <!-- <li id="cloudBtn-shares">
+                        <i class="material-icons" style="margin-left:5px;cursor: pointer;">share</i>
+                    </li>
+                    <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
+                        style="margin-left:5px;cursor: pointer;">photo_camera</i>
+                    <i id="button_delete" class="material-icons sketch_name_icon right"
+                        style="margin-left:5px;cursor: pointer;">delete</i> -->
+                </ul>
+                <!-- <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
+                    style="margin-left:5px;cursor: pointer;">photo_camera</i> -->
+                <!-- <i class="material-icons sketch_name_icon right">create</i> -->
+                <!-- <input id="sketch_name" class="sketch_name" type="text"> -->
+                <input id="sketch_name_w" class="sketch_name" type="text" name="wifi" style="display:none">
+                </span>
+                <!-- </a> -->
+                <!-- Horizontal Navbar links only shown on large resolutions -->
+                <ul id="nav-mobile" class="right hide-on-med-and-down nav-mobile-right" style="display: flex;">
+                    <!-- AI Demo -->
+                    <!-- <li>
+                    <a id="AI_experience" class='dropdown-button lang_resize' data-activates='AI_experience_dropdown' style="position:relative">
+                        <span class="translatable_AI_experience">AI</span>
+                        <img class="left nav-icon" src="./icons/nav-ai-experience.png">
+                    </a>
+                    <ul id='AI_experience_dropdown' class='dropdown-content' style="top:62px">
+                        <li id="webcam" class='modal-trigger' href="#webcam_capture_modal">
+                            <span class="translatable_AI_emotion">Emotion Recognotion</span>
+                        </li>
+                        <li class="divider"></li>
+                        <li id="voice-input" class='modal-trigger' href="#voice_input_modal">
+                            <span class="translatable_AI_speech">Speech Recognotion</span>
+                        </li>
+                    </ul>
+                </li> -->
+                    <!-- help button -->
+                    <li style="display: none;">
+                        <a id="help" style="display:none" class='dropdown-button lang_resize'
+                            data-activates="help_board" style="position:relative">
+                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
+                            <span class="translatable_help_board">Help</span>
+                            <img class="left nav-icon" src="./icons/nav_help.png">
+                        </a>
+                        <ul id='help_board' class='dropdown-content' style="top:62px">
+                            <li id="">
+                                <a href="http://help.cocorobo.cn/" target="_blank">
+                                    <span class="translatable_tutorial">Tutorial</span>
+                                </a>
+                            </li>
+                            <!-- <li class="divider"></li>
+                        <li>
+                            <a href="#tourmode" class="modal-trigger">
+                                <span class="translatable_tour">Start Tour</span>
+                            </a>
+                        </li> -->
+                            <li class="divider"></li>
+                            <!-- <li>
+                                <a href="#env_detect" class="modal-trigger">
+                                    <span class="translatable_env_detect">Environment Detect</span>
+                                </a>
+                            </li> -->
+                            <li class="divider"></li>
+                            <li>
+                                <a href="http://help.cocorobo.cn/#/changelog" target="_blank">
+                                    <span class="translatable_changelog">Change Log</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li style="display:none;">
+                        <select onchange="selectmode(this)" id="mode"
+                            style="outline:0;position:relative;color: #fff;font-weight: 500;width: 175px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 15px 35px 0px 0px;display: block;">
+                            <option value="" style="color: #000;">Main Mode</option>
+                            <option value="" style="color: #000;">AI Mode</option>
+                        </select>
+                    </li>
+                    
+
+                    <li id="cloudBtn-shares">
+                        <i class="material-icons" style="margin-left:5px;cursor: pointer;display: none;">share</i>
+                    </li>
+                    <i id="workspace_screenshot" 
+                        style="margin-left:5px;cursor: pointer;">
+                       <img src="/images/screenshot.png" style="width: 50px;height: 45px;margin-top:8px;"/>
+                    </i>
+                    <i id="button_delete" class="material-icons sketch_name_icon right"
+                        style="margin-left:5px;cursor: pointer;display: none;">delete</i>
+
                     <li>
-                        <div style="margin: 0px 20px 0px 0px;">
-                            <input type="text" value="IoT Module" id="iot_modules" readonly
-                                class="selectMode_input browser-default" style="font-size: 0.9rem;">
-                            <i class="down" style="position: relative;top: -20px;float: right;"></i>
-                            <div class="downbox MouduleBox">
-                                <div>
-                                    <div class="translatable_hardware_mode">Hardware Mode</div>
-                                    <i class="downboxdown"></i>
-                                    <ul class="Hardware2">
-                                        <li class="translatable_iot_module">IoT Module</li>
-                                        <li class="translatable_ai_module">A.I. Module</li>
-                                    </ul>
-                                </div>
-                                <div><a href="//python-blockly.cocorobo.cn" style="color: #424242 !important;"
-                                        class="translatable_cloud_mode">Cloud
-                                        Mode</a></div>
-                                <div><a href="//ai-blockly.cocorobo.cn" style="color: #424242 !important;"
-                                        class="translatable_javascript_mode">JavaScript Mode</a></div>
-                            </div>
-                        </div>
+                        <input id="sketch_name" placeholder="请输入作品名称"
+                            class="sketch_name"
+                            style="background: #fff;padding: 4px 10px 4px 20px;color:#222222;width:220px;font-style: initial;"
+                            type="text">
                     </li>
-                    <!-- App Center demo -->
+
                     <li>
+                        <button id="downloadbutton" class="translatable_sketch_save"
+                            style="color: #fff;font-weight: 700;background: #4A6AFF;border: none;font-size: 15px;padding: 13px 20px;height: 40px;">保存</button>
+                    </li>
+
+                    <!-- App Center demo -->
+                    <!-- <li>
                         <a id="app_center_title" href="#app_center_modal" class="modal-trigger lang_resize"
                             style="position:relative">
                             <span id="app_center_title_demo">
@@ -560,11 +652,11 @@
                                 <img class="left nav-icon" src="./icons/cocoblockly-navbar_labs-icon.png">
                             </span>
                         </a>
-                    </li>
-                    <li>
+                    </li> -->
+                    <!-- <li>
                         <a id="nav_learn" class='dropdown-button lang_resize' data-activates="learn_board"
                             style="position:relative">
-                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
+                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                             <span class="translatable_learn_board">Files</span>
                             <img class="left nav-icon" src="./icons/learn_nav_icon.png">
                         </a>
@@ -605,16 +697,16 @@
                                 </a>
                             </li>
                         </ul>
-                    </li>
-                    <li>
-                        <!-- target="_blank" -->
+                    </li> -->
+                    <!-- <li>
+                        target="_blank"
                         <a id="help" style="display: none;" class='dropdown-button lang_resize'
                             href="//x.help.cocorobo.cn" style="position:relative">
-                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
+                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                             <span class="translatable_help_board">Help</span>
                             <img class="left nav-icon" src="./icons/nav_help.png">
                         </a>
-                    </li>
+                    </li> -->
                     <!-- <li>
                         <a target="_blank" id="nav_journal" class='dropdown-button lang_resize' href="/md.html"
                             style="position:relative">
@@ -622,20 +714,20 @@
                             <img class="left nav-icon" src="./icons/news.png">
                         </a>
                     </li> -->
-                    <li>
+                    <!-- <li>
 
                         <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
                             style="position:relative">
-                            <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
+                            <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
                             <span class="translatable_help_board">Help</span>
                             <img class="left nav-icon" src="./icons/nav_help.png">
                         </a>
-                        <!-- <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
+                        <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
                             <span class="translatable_devices">Devices</span>
                             <img class="left nav-icon" src="./icons/Devices.png">
-                        </a> -->
-                    </li>
-                    <li style="display: block;">
+                        </a>
+                    </li> -->
+                    <!-- <li style="display: block;">
                         <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
                             style="position:relative">
                             <span class="translatable_storage">Files</span>
@@ -663,8 +755,8 @@
                         <div id="pyFileImport" class="btn" style="display:none;">
                             <input type="file" accept=".py">
                         </div>
-                    </li>
-                    <li>
+                    </li> -->
+                    <!-- <li>
                         <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages'
                             style="position:relative">
                             <span class="translatable_language">Language</span>
@@ -683,21 +775,21 @@
                                 <a>简体中文</a>
                             </li>
                         </ul>
-                    </li>
+                    </li> -->
                     <!-- <li>
                         <span class="vertical-separator"></span>
                     </li> -->
-                    <li>
+                    <!-- <li>
                         <a id="nav_account" href="#login_modal" class="modal-trigger lang_resize"
                             style="position:relative"
                             onclick="$('#api-key').html(''); $('#api-key').html($('#cloud_events').val()); document.getElementById('api-key').value = $('#cloud_events').val();">
                             <span id="account_alias"></span>
                             <button id="account_loginTitle" class="translatable_login_title"
                                 style="color: #fff;font-weight: 500;width: 80px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 0 0 0 15px;">Login</button>
-                            <!-- <span id="account_loginTitle" class="translatable_login_title">Login</span> -->
+                            <span id="account_loginTitle" class="translatable_login_title">Login</span>
                             <img class="nav-icon2 left" src="./icons/user.png">
                         </a>
-                    </li>
+                    </li> -->
                     <!--<li>
                         <a id="back_home" class="lang_resize" target="_blank" href="//cocorobo.cn/online/"
                             style="position:relative">
@@ -1144,12 +1236,12 @@
                 </li>
             </ul>
         </div>
-        <footer id="footer">
+        <!-- <footer id="footer">
             <div style="padding:0 1.5rem">
                 <div><span class="translatable_copyright" style="color:#fff;">CocoRobo LTD © 2020 Copyright</span></div>
                 <div><span>CocoBlockly X</span></div>
             </div>
-        </footer>
+        </footer> -->
         <!-- app center modal -->
         <div id="app_center_modal" class="modal modal_closes">
             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i

index.js

@@ -587,7 +587,7 @@ function fanyi() {
   // $('.ModeBox ul')[3].children[4].innerHTML = Ardublockly.LOCALISED_TEXT.select_English;
   // $('.ModeBox ul')[3].children[4].innerHTML = Ardublockly.LOCALISED_TEXT.select_Cantonese;
   // $('#uploadFiles')[0].innerHTML = Ardublockly.LOCALISED_TEXT.uploadFiles;
-  $("#sketch_name").val(Ardublockly.LOCALISED_TEXT.sketch_name);
+  // $("#sketch_name").val(Ardublockly.LOCALISED_TEXT.sketch_name);
   $('#runCode')[0].innerHTML = Ardublockly.LOCALISED_TEXT.runCode;
   $('#uploadFiles')[0].innerHTML = Ardublockly.LOCALISED_TEXT.uploadFiles;
   $('#resetDevice')[0].innerHTML = Ardublockly.LOCALISED_TEXT.resetDevice;

src/blockly/ardublockly_design.js

@@ -865,7 +865,7 @@ Ardublockly.sketchNameSizeEffect = function () {
     var correctInput = function () {
         // If nothing in the input, add default name
         if ($(this).val() == '') {
-            $(this).val(Ardublockly.LOCALISED_TEXT.sketch_name);
+            // $(this).val(Ardublockly.LOCALISED_TEXT.sketch_name);
             $(this).attr('size', 8);
         }
         // Replace all spaces with underscores