1. Prepare to Release 0.0.2

imboost · May 25, 2020 · d697bb0 · d697bb0
1 parent 9ecfa11
commit d697bb0
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pro7",
     "productName": "Pro7",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Pro7 is Integrated Development Environment for build Progressive Web Application (PWA) based on Framework7. It enables user to design, develop, debug, test, and release application quickly.",
     "main": "main.js",
     "scripts": {
@@ -14,7 +14,8 @@
     "build": {
         "appId": "com.nowdb.pro7",
         "dmg": {
-            "contents": [{
+            "contents": [
+                {
                     "x": 110,
                     "y": 150
                 },
@@ -64,7 +65,6 @@
         "localStorage": "^1.0.4",
         "mkdirp": "^1.0.4",
         "monaco-editor": "^0.20.0",
-        "monaco-loader": "^0.8.2",
         "monaco-themes": "^0.3.3",
         "node-pty": "^0.9.0",
         "open-file-explorer": "^1.0.2",
@@ -84,4 +84,4 @@
         "url": "https://github.com/NowDB/Pro7/issues"
     },
     "homepage": "https://github.com/NowDB/Pro7#readme"
-}
+}
diff --git a/www/designer/js/constant.js b/www/designer/js/constant.js
@@ -15,12 +15,36 @@ const fs = require('fs-extra');
 const path = require('path');
 const url = require('url');
 const os = require('os');
-const editorLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
-const editorRequire = editorLoader.require;
 const { Terminal } = require('xterm');
 const { FitAddon } = require('xterm-addon-fit');
 const beautify = require('beautify');
 
+function loadTheme(theme) {
+    var path = '../node_modules/monaco-themes/themes/' + theme + '.json';
+    return fetch(path).then(r => r.json()).then(data => {
+        return data;
+    });
+}
+
+const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
+const amdRequire = amdLoader.require;
+const amdDefine = amdLoader.require.define;
+
+function uriFromPath(_path) {
+    var pathName = path.resolve(_path).replace(/\\/g, '/');
+    if (pathName.length > 0 && pathName.charAt(0) !== '/') {
+        pathName = '/' + pathName;
+    }
+    return encodeURI('file://' + pathName);
+}
+
+amdRequire.config({
+    baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
+});
+
+// workaround monaco-css not understanding the environment
+self.module = undefined;
+
 let term = null;
 let ptyProcess = null;
 

diff --git a/www/designer/js/editor.js b/www/designer/js/editor.js
@@ -3,9 +3,20 @@ $$(document).on('page:init', '.page[data-name="editor"]', function(callback) {
 });
 
 $$(document).on('click', '#btn-code-editor', function() {
+    page_history = app.views.main.history;
+    page_count = page_history.length;
+    page_current = page_history[page_count - 1];
+
     // save previous
+    var active_file_path_designer = null;
+    var active_file_name_designer = null;
     if (active_file_name !== '') {
-        func_file_save(active_file_name, active_file_path);
+        if (page_current.split('/')[1] === "designer") {
+            active_file_path_designer = active_file_path;
+            active_file_name_designer = active_file_name;
+        } else {
+            func_file_save(active_file_name, active_file_path);
+        }
     }
 
     active_file_name = $$(this).attr('data-file');
@@ -30,18 +41,17 @@ $$(document).on('click', '#btn-code-editor', function() {
     active_tab_file_dir = active_file_dir;
     active_tab_file_path = active_file_path;
 
-    page_history = app.views.main.history;
-    page_count = page_history.length;
-    page_current = page_history[page_count - 1];
-
     if (page_current.split('/')[1] === "designer") {
+        // save design html
         editor_value = editor.getHtml();
         editor_value = pretty(editor_value, { ocd: true });
+        fs.writeFileSync(active_file_path_designer, editor_value, 'utf-8');
+
+        we[active_file_name_designer].setValue(editor_value);
+
+        // load custom.css and save new css design
         editor_style = editor.getCss();
         editor_style = pretty(editor_style, { ocd: true });
-
-        // save designer
-        fs.writeFileSync(active_file_path, editor_value, 'utf-8');
         var customcss = path.join(path.join(active_dir_project_www, 'css'), 'custom.css');
         fs.readFile(customcss, 'utf-8', (err, code_data) => {
             var customcss_value = beautify(editor_style, { format: 'css' });
@@ -138,7 +148,7 @@ func_tab_open = function() {
         '   </span>' +
         '   <i class="icon"></i>' +
         '</a>');
-    $$(document).find('#tab-editor').append('<div id="tab-' + active_file_name_replace + '" class="page-content tab tab-active"><div style="height:100%;overflow-y: hidden;" id="editor-' + active_file_name_replace + '"></div></div>');
+    $$(document).find('#tab-editor').append('<div id="tab-' + active_file_name_replace + '" class="page-content tab tab-active"><div style="height:100%;overflow-y: hidden;overflow-x: hidden;" id="editor-' + active_file_name_replace + '"></div></div>');
 
     $$(document).find('#btn-code-remove').attr('data-file', active_file_name);
     $$(document).find('#btn-code-remove').attr('data-replace', active_file_name_replace);
@@ -153,13 +163,8 @@ func_tab_open = function() {
             app.preloader.hide();
             return;
         } else {
-            editorRequire.config({
-                baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
-            });
-
-            editorRequire(['vs/editor/editor.main'], function() {
+            amdRequire(['vs/editor/editor.main'], function() {
                 me = monaco.editor;
-                we[active_file_name] = window.editor;
 
                 loadTheme('Monokai').then(function(callback) {
                     me.defineTheme(callback.base, {
@@ -169,30 +174,35 @@ func_tab_open = function() {
                         colors: callback.colors
                     });
                     me.setTheme(callback.base);
-
-                    we[active_file_name] = me.create(document.getElementById('editor-' + active_file_name_replace), {
-                        value: code_data,
-                        parameterHints: { enabled: true },
-                        scrollBeyondLastLine: false,
-                        fixedOverflowWidgets: true,
-                        lineNumbers: 'on',
-                        lineDecorationsWidth: 36,
-                        matchBrackets: "always",
-                        lineHeight: 19,
-                        folding: true,
-                        autoIndent: true,
-                        automaticLayout: true,
-                        foldingHighlight: true,
-                        showFoldingControls: 'always',
-                        fontLigatures: true,
-                        showUnused: true,
-                        smoothScrolling: true,
-                        language: active_file_type
-                    });
                 });
 
-                app.preloader.hide();
+                we[active_file_name] = me.create(document.getElementById('editor-' + active_file_name_replace), {
+                    value: code_data.toString(),
+                    parameterHints: {
+                        enabled: true
+                    },
+                    scrollBeyondLastLine: false,
+                    fixedOverflowWidgets: true,
+                    lineNumbers: 'on',
+                    lineDecorationsWidth: 36,
+                    matchBrackets: "always",
+                    lineHeight: 19,
+                    folding: true,
+                    autoIndent: true,
+                    automaticLayout: true,
+                    foldingHighlight: true,
+                    showFoldingControls: 'always',
+                    fontLigatures: true,
+                    showUnused: true,
+                    smoothScrolling: true,
+                    language: active_file_type
+                });
             });
+
+            // Remove class="margin" in line numbers (not good solution)
+            $$(document).find("[role=presentation]").removeClass('margin');
+
+            app.preloader.hide();
         }
     });
 }

diff --git a/www/designer/js/init_designer.js b/www/designer/js/init_designer.js
@@ -2,8 +2,8 @@ var $$ = Dom7;
 
 var app = new Framework7({
     root: '#app',
-    id: 'com.project.app',
-    name: 'Application',
+    id: 'net.nowdb.pro7',
+    name: 'Pro7',
     theme: 'md',
     touch: {
         fastclick: true,

diff --git a/www/designer/js/listener.js b/www/designer/js/listener.js
@@ -76,13 +76,6 @@ var navigate_left_to = function(path, reloadCurrent = false, reloadPrevious = fa
     });
 }
 
-function loadTheme(theme) {
-    var path = '../node_modules/monaco-themes/themes/' + theme + '.json';
-    return fetch(path).then(r => r.json()).then(data => {
-        return data;
-    });
-}
-
 function uriFromPath(_path) {
     var pathName = path.resolve(_path).replace(/\\/g, '/');
     if (pathName.length > 0 && pathName.charAt(0) !== '/') {

diff --git a/www/designer/js/project.js b/www/designer/js/project.js
@@ -3,10 +3,15 @@
  */
 
 $$(document).on('click', '#btn-dev', function() {
-    const { ipcRenderer } = require('electron');
     ipcRenderer.send('devtool');
 });
 
+$$(document).on('click', '#btn-reload', function() {
+    app.preloader.show();
+
+    window.location.reload();
+});
+
 panel_left_morph();
 
 var terminal_home = function() {
@@ -51,12 +56,6 @@ var terminal_home = function() {
     });
 }
 
-$$(document).on('click', '#btn-reload', function() {
-    app.preloader.show();
-
-    window.location.reload();
-});
-
 app.sheet.open('.sheet-terminal');
 
 terminal_home();

diff --git a/www/designer/pages/editor.html b/www/designer/pages/editor.html
@@ -38,8 +38,9 @@
                 <a class="button icon-only text-color-gray popover-open btn-snippet-js" title="Condition" href="#" data-popover=".snippet-if" style="display: none;">
                     <i class="icon material-icons">device_hub</i>
                 </a>
-                <a class="button icon-only text-color-gray" title="UI Designer" id="btn-design-html" style="display: none;">
+                <a class="button icon-only text-color-yellow" title="Layout & Style" id="btn-design-html" style="display: none;">
                     <i class="icon material-icons">web</i>
+                    <span style="font-weight: normal;font-size:smaller;">UI Designer</span>
                 </a>
                 <a class="button icon-only text-color-red" title="Remove" id="btn-code-remove" style="display: none;">
                     <i class="icon material-icons">delete</i>

diff --git a/www/designer/pages/home.html b/www/designer/pages/home.html
@@ -11,6 +11,7 @@
             <div class="right">
                 <a class="button sheet-open" href="#" data-sheet=".sheet-terminal" title="Open Terminal">
                     <i class="icon f7-icons color-gray">greaterthan_square</i>
+                    <span style="font-weight: normal;font-size:smaller;" class="text-color-white">Terminal</span>
                 </a>
             </div>
         </div>
@@ -27,22 +28,22 @@
                                     <div class="col-25 elevation-3 padding text-align-center" style="font-size:x-small;">
                                         <span style="font-size:small;">Single View</span>
                                         <br/><br/>
-                                        <a class="button button-outline button-small color-deeporange" id="btn-application-new" data-layout="single">Create</a>
+                                        <a class="button button-outline button-small color-blue" id="btn-application-new" data-layout="single">Create</a>
                                     </div>
                                     <div class="col-25 elevation-3 padding text-align-center" style="font-size:x-small;">
                                         <span style="font-size:small;">Split View</span>
                                         <br/><br/>
-                                        <a class="button button-outline button-small color-deeporange" id="btn-application-new" data-layout="split">Create</a>
+                                        <a class="button button-outline button-small color-blue" id="btn-application-new" data-layout="split">Create</a>
                                     </div>
                                     <div class="col-25 elevation-3 padding text-align-center" style="font-size:x-small;">
                                         <span style="font-size:small;">Tabs View</span>
                                         <br/><br/>
-                                        <a class="button button-outline button-small color-deeporange" id="btn-application-new" data-layout="tabs">Create</a>
+                                        <a class="button button-outline button-small color-blue" id="btn-application-new" data-layout="tabs">Create</a>
                                     </div>
                                     <div class="col-25 elevation-3 padding text-align-center" style="font-size:x-small;">
                                         <span style="font-size:small;">Split Tabs View</span>
                                         <br/><br/>
-                                        <a class="button button-outline button-small color-deeporange" id="btn-application-new" data-layout="split_tabs">Create</a>
+                                        <a class="button button-outline button-small color-blue" id="btn-application-new" data-layout="split_tabs">Create</a>
                                     </div>
                                 </div>
                             </div>
@@ -74,8 +75,9 @@
                                 <div class="list links-list">
                                     <ul>
                                         <li><a onclick="shell.openExternal('https://framework7.io');">Framework7</a></li>
-                                        <li><a onclick="shell.openExternal('https://electronjs.org');">ElectronJS</a></li>
-                                        <li><a onclick="shell.openExternal('https://nodejs.org');">NodeJS</a></li>
+                                        <li><a onclick="shell.openExternal('https://web.dev/progressive-web-apps/');">PWA</a></li>
+                                        <li><a onclick="shell.openExternal('https://app-manifest.firebaseapp.com/');">Manifest & Icon Generator</a></li>
+                                        <li><a onclick="shell.openExternal('https://www.favicon-generator.org/');">Favicon Generator</a></li>
                                     </ul>
                                 </div>
                             </div>

diff --git a/www/index.html b/www/index.html
@@ -93,9 +93,9 @@
     <script src="designer/js/init.js"></script>
     <script src="designer/js/listener.js"></script>
     <script src="designer/js/project.js"></script>
-    <script src="designer/js/editor.js"></script>
     <script src="designer/js/snippet.js"></script>
     <script src="designer/js/designer.js"></script>
+    <script src="designer/js/editor.js"></script>
 </body>
 
 </html>
diff --git a/www/sample/manifest.json b/www/sample/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "Pewe",
-    "short_name": "Pewe",
+    "name": "Pro7",
+    "short_name": "Pro7",
     "theme_color": "#2196f3",
     "background_color": "#2196f3",
     "display": "standalone",