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/10/26 07:00:18 UTC
[incubator-echarts-examples] branch next updated: fix editor
display on mobile
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-examples.git
The following commit(s) were added to refs/heads/next by this push:
new 058212c fix editor display on mobile
058212c is described below
commit 058212cb55f73ccf90076b79c2c749ce50802c68
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Oct 26 14:57:18 2020 +0800
fix editor display on mobile
---
public/data/thumb-dark/gauge-barometer.png | Bin 45189 -> 57940 bytes
public/data/thumb-dark/gauge-barometer.webp | Bin 9858 -> 8384 bytes
public/data/thumb-dark/gauge-grade.png | Bin 26515 -> 36273 bytes
public/data/thumb-dark/gauge-grade.webp | Bin 8100 -> 6656 bytes
public/data/thumb-dark/gauge-multi-title.png | Bin 33393 -> 52269 bytes
public/data/thumb-dark/gauge-multi-title.webp | Bin 8694 -> 8066 bytes
public/data/thumb-dark/gauge-speed-simple.png | Bin 26941 -> 41437 bytes
public/data/thumb-dark/gauge-speed-simple.webp | Bin 6870 -> 6130 bytes
public/data/thumb-dark/gauge-stage.png | Bin 31317 -> 49032 bytes
public/data/thumb-dark/gauge-stage.webp | Bin 9088 -> 8388 bytes
public/data/thumb-dark/gauge-temperature.png | Bin 0 -> 51256 bytes
public/data/thumb-dark/gauge-temperature.webp | Bin 0 -> 8266 bytes
public/data/thumb-dark/scatter-label-align-top.png | Bin 25395 -> 46434 bytes
.../data/thumb-dark/scatter-label-align-top.webp | Bin 8014 -> 8204 bytes
public/data/thumb/gauge-temperature.png | Bin 0 -> 34572 bytes
public/data/thumb/gauge-temperature.webp | Bin 0 -> 5288 bytes
src/common/store.js | 2 +
src/editor/Editor.vue | 46 +++++++++++++--------
src/editor/Preview.vue | 6 +--
19 files changed, 33 insertions(+), 21 deletions(-)
diff --git a/public/data/thumb-dark/gauge-barometer.png b/public/data/thumb-dark/gauge-barometer.png
index 0789536..eabdd42 100644
Binary files a/public/data/thumb-dark/gauge-barometer.png and b/public/data/thumb-dark/gauge-barometer.png differ
diff --git a/public/data/thumb-dark/gauge-barometer.webp b/public/data/thumb-dark/gauge-barometer.webp
index e8d7068..6bcc9e3 100644
Binary files a/public/data/thumb-dark/gauge-barometer.webp and b/public/data/thumb-dark/gauge-barometer.webp differ
diff --git a/public/data/thumb-dark/gauge-grade.png b/public/data/thumb-dark/gauge-grade.png
index a78e5cc..32d2358 100644
Binary files a/public/data/thumb-dark/gauge-grade.png and b/public/data/thumb-dark/gauge-grade.png differ
diff --git a/public/data/thumb-dark/gauge-grade.webp b/public/data/thumb-dark/gauge-grade.webp
index 946da05..6c9ff33 100644
Binary files a/public/data/thumb-dark/gauge-grade.webp and b/public/data/thumb-dark/gauge-grade.webp differ
diff --git a/public/data/thumb-dark/gauge-multi-title.png b/public/data/thumb-dark/gauge-multi-title.png
index bf8c01d..bc953f5 100644
Binary files a/public/data/thumb-dark/gauge-multi-title.png and b/public/data/thumb-dark/gauge-multi-title.png differ
diff --git a/public/data/thumb-dark/gauge-multi-title.webp b/public/data/thumb-dark/gauge-multi-title.webp
index ff12213..bb308af 100644
Binary files a/public/data/thumb-dark/gauge-multi-title.webp and b/public/data/thumb-dark/gauge-multi-title.webp differ
diff --git a/public/data/thumb-dark/gauge-speed-simple.png b/public/data/thumb-dark/gauge-speed-simple.png
index 2b7eeee..c2d0449 100644
Binary files a/public/data/thumb-dark/gauge-speed-simple.png and b/public/data/thumb-dark/gauge-speed-simple.png differ
diff --git a/public/data/thumb-dark/gauge-speed-simple.webp b/public/data/thumb-dark/gauge-speed-simple.webp
index 3aafdd2..ac248c5 100644
Binary files a/public/data/thumb-dark/gauge-speed-simple.webp and b/public/data/thumb-dark/gauge-speed-simple.webp differ
diff --git a/public/data/thumb-dark/gauge-stage.png b/public/data/thumb-dark/gauge-stage.png
index 9e7be36..dd93537 100644
Binary files a/public/data/thumb-dark/gauge-stage.png and b/public/data/thumb-dark/gauge-stage.png differ
diff --git a/public/data/thumb-dark/gauge-stage.webp b/public/data/thumb-dark/gauge-stage.webp
index 60da368..9842c59 100644
Binary files a/public/data/thumb-dark/gauge-stage.webp and b/public/data/thumb-dark/gauge-stage.webp differ
diff --git a/public/data/thumb-dark/gauge-temperature.png b/public/data/thumb-dark/gauge-temperature.png
new file mode 100644
index 0000000..9e3459a
Binary files /dev/null and b/public/data/thumb-dark/gauge-temperature.png differ
diff --git a/public/data/thumb-dark/gauge-temperature.webp b/public/data/thumb-dark/gauge-temperature.webp
new file mode 100644
index 0000000..9057c3b
Binary files /dev/null and b/public/data/thumb-dark/gauge-temperature.webp differ
diff --git a/public/data/thumb-dark/scatter-label-align-top.png b/public/data/thumb-dark/scatter-label-align-top.png
index d667d67..79b7591 100644
Binary files a/public/data/thumb-dark/scatter-label-align-top.png and b/public/data/thumb-dark/scatter-label-align-top.png differ
diff --git a/public/data/thumb-dark/scatter-label-align-top.webp b/public/data/thumb-dark/scatter-label-align-top.webp
index 921415b..a907127 100644
Binary files a/public/data/thumb-dark/scatter-label-align-top.webp and b/public/data/thumb-dark/scatter-label-align-top.webp differ
diff --git a/public/data/thumb/gauge-temperature.png b/public/data/thumb/gauge-temperature.png
new file mode 100644
index 0000000..27186ee
Binary files /dev/null and b/public/data/thumb/gauge-temperature.png differ
diff --git a/public/data/thumb/gauge-temperature.webp b/public/data/thumb/gauge-temperature.webp
new file mode 100644
index 0000000..fea56a9
Binary files /dev/null and b/public/data/thumb/gauge-temperature.webp differ
diff --git a/src/common/store.js b/src/common/store.js
index 5152bce..9089dfc 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -19,6 +19,8 @@ export const store = {
runCode: '',
sourceCode: '',
+ isMobile: window.innerWidth < 600,
+
editorStatus: {
type: '',
message: ''
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 9e0a69a..343ab0e 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -1,6 +1,6 @@
<template>
<div id="main-container">
- <div id="code-container" :style="{width: leftContainerSize + '%'}">
+ <div id="code-container" :style="{width: leftContainerSize + '%'}" v-if="!shared.isMobile">
<div id="control-panel">
<div id="code-info">
<template v-if="shared.editorStatus.message">
@@ -19,8 +19,8 @@
<CodeMonaco v-if="shared.typeCheck" id="code-panel" :initialCode="initialCode"></CodeMonaco>
<CodeAce v-else id="code-panel" :initialCode="initialCode"></CodeAce>
</div>
- <div class="handler" id="h-handler" @mousedown="onSplitterDragStart" :style="{left: leftContainerSize + '%'}"></div>
- <Preview inEditor="true" class="right-container" ref="preview" :style="{
+ <div class="handler" id="h-handler" @mousedown="onSplitterDragStart" :style="{left: leftContainerSize + '%'}" v-if="!shared.isMobile"></div>
+ <Preview :inEditor="true" class="right-container" ref="preview" :style="{
width: (100 - leftContainerSize) + '%',
left: leftContainerSize + '%'
}"></Preview>
@@ -46,6 +46,7 @@ export default {
return {
mousedown: false,
leftContainerSize: 40,
+ mobileMode: false,
shared: store,
initialCode: ''
};
@@ -71,22 +72,31 @@ export default {
mounted() {
- loadExampleCode().then(code => {
- // Only set the code in editor. editor will sync to the store.
- this.initialCode = parseSourceCode(code);
- });
-
- window.addEventListener('mousemove', (e) => {
- if (this.mousedown) {
- let percentage = e.clientX / window.innerWidth;
- percentage = Math.min(0.9, Math.max(0.1, percentage));
- this.leftContainerSize = percentage * 100;
- }
- });
+ if (store.isMobile) {
+ this.leftContainerSize = 0;
+ loadExampleCode().then(code => {
+ // No editor available. Set to runCode directly.
+ store.runCode = parseSourceCode(code);
+ });
+ }
+ else {
+ loadExampleCode().then(code => {
+ // Only set the code in editor. editor will sync to the store.
+ this.initialCode = parseSourceCode(code);
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (this.mousedown) {
+ let percentage = e.clientX / window.innerWidth;
+ percentage = Math.min(0.9, Math.max(0.1, percentage));
+ this.leftContainerSize = percentage * 100;
+ }
+ });
- window.addEventListener('mouseup', (e) => {
- this.mousedown = false;
- });
+ window.addEventListener('mouseup', (e) => {
+ this.mousedown = false;
+ });
+ }
},
methods: {
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 5290e63..bc70357 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -1,5 +1,5 @@
<template>
-<div :class="[inEditor ? '' : 'full']">
+<div :class="[(inEditor && !shared.isMobile) ? '' : 'full']">
<div v-loading="loading"
class="right-panel"
id="chart-panel"
@@ -49,8 +49,8 @@
<span class="render-config-trigger" slot="reference"><i class="el-icon-setting el-icon--left"></i>{{$t('editor.renderCfgTitle')}}</span>
</el-popover>
</div>
- <button v-if="inEditor" class="download btn btn-sm" @click="downloadExample">{{ $t('editor.download') }}</button>
- <a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{ $t('editor.edit') }}</a>
+ <button v-if="inEditor && !shared.isMobile" class="download btn btn-sm" @click="downloadExample">{{ $t('editor.download') }}</button>
+ <a :href="editLink" target="_blank" v-else-if="!shared.isMobile" class="edit btn btn-sm">{{ $t('editor.edit') }}</a>
</div>
</div>
</template>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org