commit 48057fd3c3f9d8f918fbca12136a47de2270d759
author plainheart <yhen@all-my-life.cn> Thu Aug 04 11:11:01 2022 +0800
committer plainheart <yhen@all-my-life.cn> Thu Aug 04 11:12:44 2022 +0800
tree 50e3130a079e253314a5d7ca0b73a98a7601d0fa
parent ffcd7758cf90e48d5eaa2424be1305dc23c83438

enlarge edit button in live preview and improve the style of loading mask

src/App.vue

diff --git a/src/App.vue b/src/App.vue
index 8128042..45540a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -163,6 +163,7 @@
     }
 
     &>.el-main {
+        position: relative;
         text-align: center;
 
         &>div {

src/components/DocContent.vue

diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index efe5d0a..677414b 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -289,6 +289,9 @@
             Vue.nextTick(() => {
                 this.updateDocContentMargin(!newVal);
             });
+        },
+        loading(val) {
+            this.$el.parentElement.style.overflow = val ? 'hidden' : '';
         }
     }
 }
@@ -300,6 +303,7 @@
 @import "../style/mixin.scss";
 
 .doc-main {
+    position: static!important;
     margin-left: 10px;
 
     .open-option-example {

src/components/LiveExample.vue

diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 677547a..a3dc710 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -3,7 +3,7 @@
     <h2>{{$t('example.title')}}</h2>
     <p class="intro">{{ shared.allOptionExamples ? $t('example.intro') : $t('example.noExample')}}</p>
     <div class="preview-and-code" v-if="shared.currentExampleOption">
-        <div class="preview-main"></div>
+        <div class="preview-main" v-loading="isLoading"></div>
         <div class="example-code">
             <div class="codemirror-main">
                 <el-link
@@ -85,13 +85,17 @@
 let echartsLoadPromise;
 
 function fetchECharts() {
-    return echartsLoadPromise || (echartsLoadPromise = new Promise(function (resolve) {
+    return echartsLoadPromise || (echartsLoadPromise = new Promise(function (resolve, reject) {
         const script = document.createElement('script');
         script.src = ECHARTS_LIB;
         script.async = true;
         script.onload = function () {
-            resolve();
             echartsLoadPromise = null;
+            resolve();
+        }
+        script.onerror = function () {
+            echartsLoadPromise = null;
+            reject('Failed to load echarts');
         }
         document.body.appendChild(script);
     }));
@@ -162,6 +166,7 @@
     this.hasError = false;
     if (typeof echarts === 'undefined') {
         // TODO Put fetch charts when component is initialized.
+        this.isLoading = true;
         fetchECharts().then(() => {
             if (!this.echartsInstance) {
                 this.chartInstance = echarts.init(viewport);
@@ -170,7 +175,9 @@
                 this.chartInstance.clear();
             }
             this.chartInstance.setOption(option, true);
-        })
+        }).finally(() => {
+            this.isLoading = false;
+        });
     }
     else {
         if (!this.echartsInstance) {
@@ -236,7 +243,9 @@
 
             showChangeLayoutPopover: false,
 
-            optionExampleLayouts
+            optionExampleLayouts,
+
+            isLoading: true
         };
     },
 
@@ -352,6 +361,7 @@
         },
 
         toEditor() {
+            // PENDING: use pure base64 rather than lz-string to encode the code?
             const code = compressToBase64(this.formattedOptionCodeStr)
                 .replace(/\+/g, '-')
                 .replace(/\//g, '_')
@@ -483,6 +493,7 @@
             right: 5px;
             top: 8px;
             z-index: 10;
+            font-size: 16px;
 
             &:not(:hover) {
                 color: #fff;