You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/08/31 09:10:38 UTC

[incubator-echarts-doc] branch next updated: editor: indenting use block when editing prefix param

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git


The following commit(s) were added to refs/heads/next by this push:
     new a8de07f  editor: indenting use block when editing prefix param
a8de07f is described below

commit a8de07f3779df31a4182d293b98298087ca74512
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Aug 31 17:10:26 2020 +0800

    editor: indenting use block when editing prefix param
---
 editor/src/components/BlockUse.vue  | 12 +++++++++++-
 editor/src/components/Target.vue    | 23 +++++++++++++++++++----
 editor/src/layouts/EditorLayout.vue | 20 ++++++++++++++++----
 editor/src/store/store.js           |  8 +++++++-
 4 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/BlockUse.vue b/editor/src/components/BlockUse.vue
index 178cda9..276d1ba 100644
--- a/editor/src/components/BlockUse.vue
+++ b/editor/src/components/BlockUse.vue
@@ -27,7 +27,7 @@
             <q-icon name="label" class="text-blue-8 q-mx-md" style="font-size:20px;"></q-icon>
             <q-input v-model="arg[0]"></q-input>
             <div class="q-mx-md equal">=</div>
-            <q-input v-model="arg[1]"></q-input>
+            <q-input v-model="arg[1]" @keyup="onArgValEditing(arg)"></q-input>
         </div>
     </div>
        <!-- {{block.target}} -->
@@ -38,6 +38,7 @@
 <script>
 
 import { store } from '../store/store';
+import { countLevel } from '../../common/blockHelper';
 
 export default {
     props: ['block'],
@@ -72,6 +73,15 @@ export default {
                     ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
                 }
             });
+        },
+
+        onArgValEditing(arg) {
+            const usedTarget = store.targetsMap[this.block.target];
+            if (arg[0] === 'prefix' && usedTarget) {
+                if (arg[1].match(/#+/)) {
+                    this.block.level = countLevel(arg[1]) + usedTarget.topLevel;
+                }
+            }
         }
     }
 }
diff --git a/editor/src/components/Target.vue b/editor/src/components/Target.vue
index eb0d905..ca15b0c 100644
--- a/editor/src/components/Target.vue
+++ b/editor/src/components/Target.vue
@@ -1,7 +1,12 @@
 <template>
 <q-expansion-item v-model="expanded" :expand-icon-toggle="true">
     <template v-slot:header>
-        <q-input label="Target" v-model="target.name"></q-input>
+        <h5>{{target.name}}</h5>
+        <q-popup-edit v-model="editingLabel" content-class="bg-dark text-white" buttons
+            @before-show="startEdit" @save="saveEdit"
+        >
+            <q-input dark color="white" v-model="editingLabel" autofocus counter></q-input>
+        </q-popup-edit>
     </template>
     <div v-for="block in target.blocks" :key="block.key" :class="['block', 'block-level-' + block.level || 0]">
         <Block :block="block"></Block>
@@ -22,16 +27,25 @@ export default {
 
     data() {
         return {
+            editingLabel: '',
             expanded: true
         };
+    },
+
+    methods: {
+        startEdit() {
+            this.editingLabel = this.target.name
+        },
+        saveEdit() {
+            this.target.name = this.editingLabel;
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
 .q-expansion-item {
-    margin-top: 10px;
-    margin-bottom: 50px;
+    margin-top: 50px;
 
     @for $level from 1 through 7 {
         .block-level-#{$level} {
@@ -39,9 +53,10 @@ export default {
         }
     }
 
-    .q-input {
+    h5 {
         font-size: 30px;
         width: 100%;
+        margin: 0;
     }
 }
 </style>
diff --git a/editor/src/layouts/EditorLayout.vue b/editor/src/layouts/EditorLayout.vue
index 4a91090..eaadf30 100644
--- a/editor/src/layouts/EditorLayout.vue
+++ b/editor/src/layouts/EditorLayout.vue
@@ -41,7 +41,8 @@ export default {
             navOpen: true,
             shared: store,
 
-            hasUnsaved: false
+            hasUnsaved: false,
+            showClearConfirm: false
         };
     },
 
@@ -51,9 +52,20 @@ export default {
             this.hasUnsaved = false;
         },
         restore() {
-            restore();
-            clearLocalStorage();
-            this.hasUnsaved = false;
+            this.$q.dialog({
+                title: 'Confirm',
+                message: 'Are you sure to clear the editing content?',
+                cancel: true,
+                persistent: true,
+                dark: true
+                // position: 'bottom'
+            }).onOk(() => {
+                restore();
+                clearLocalStorage();
+                this.hasUnsaved = false;
+            }).onCancel(() => {
+            }).onDismiss(() => {
+            })
         }
     },
 
diff --git a/editor/src/store/store.js b/editor/src/store/store.js
index 761a3ba..7c7e311 100644
--- a/editor/src/store/store.js
+++ b/editor/src/store/store.js
@@ -8,17 +8,22 @@ export const store = {
 
     targets: [],
 
+    targetsMap: {},
+
     editorExists: false
 };
 
 function updateTargets() {
     const targets = [];
+    const targetsMap = {};
     for (const fileName in store.blocks) {
         for (const target of store.blocks[fileName]) {
             targets.push(target);
+            targetsMap[target.name] = target;
         }
     }
-    store.targets = targets;
+    store.targets = Object.freeze(targets);
+    store.targetsMap = Object.freeze(targetsMap);
 }
 
 socket.on('initial-blocks', function (blocks) {
@@ -82,6 +87,7 @@ export const detectChangeAndSaveToLocal = _.debounce((changed, unchanged) => {
         changed();
     }
     else {
+        clearLocalStorage();
         unchanged();
     }
 }, 1000);


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org