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/07/02 02:26:06 UTC
[incubator-echarts-doc] branch master updated: feat: added support
for changing the layout of option example preview panel.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new c544fb1 feat: added support for changing the layout of option example preview panel.
new 28bef84 Merge pull request #121 from plainheart/feat-layout-switch-for-option-preview
c544fb1 is described below
commit c544fb183bef0a0b8f70366928eb330161646217
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Wed Jul 1 21:54:31 2020 +0800
feat: added support for changing the layout of option example preview panel.
---
en/option-gl/partial/shading.md | 2 +-
en/option-gl/partial/temporal-super-sampling.md | 2 +-
src/components/DocContent.vue | 45 +++++++-----
src/components/LiveExample.vue | 91 ++++++++++++++++++++++---
src/i18n.js | 18 ++++-
src/store.js | 38 ++++++++++-
6 files changed, 163 insertions(+), 33 deletions(-)
diff --git a/en/option-gl/partial/shading.md b/en/option-gl/partial/shading.md
index 7f820f3..ed931b2 100644
--- a/en/option-gl/partial/shading.md
+++ b/en/option-gl/partial/shading.md
@@ -43,7 +43,7 @@ The configuration item of the realistic material is valid when [shading](~${comp
The `roughness` attribute is used to indicate the roughness of the material, `0` is completely smooth, `1` is completely rough, and the middle value is between the two.
{{ block: roughness-compare }}
-The following images show the effect of `roughness` in `globe](~globe) `0.2` (smooth) and `0.8` (rough).
+The following images show the effect of `roughness` in [`globe`](~globe) `0.2` (smooth) and `0.8` (rough).
diff --git a/en/option-gl/partial/temporal-super-sampling.md b/en/option-gl/partial/temporal-super-sampling.md
index 4411f05..3098d8f 100644
--- a/en/option-gl/partial/temporal-super-sampling.md
+++ b/en/option-gl/partial/temporal-super-sampling.md
@@ -16,4 +16,4 @@ The following is the difference between not opening `temporalSuperSampling` and
##${prefix|default('#')} enable(boolean) = 'auto'
-Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect] (~${componentType}.postEffect) is turned on.
+Whether to enable temporal supersampling. By default, temporal supersampling is also turned on synchronously when [postEffect](~${componentType}.postEffect) is turned on.
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 8aefb1c..7441ca8 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -3,7 +3,7 @@
<div :class="[
'doc-content',
shared.showOptionExample ? 'option-example-actived' : '',
- isExampleTopDownPlayout ? 'option-example-down-layout' : 'option-example-right-layout'
+ 'option-example-' + shared.computedOptionExampleLayout + '-layout'
]">
<h2 :id="pageId">{{pageTitle}}</h2>
<div
@@ -28,10 +28,7 @@
</div>
</div>
<template v-if="showLiveExample">
- <LiveExample
- v-if="shared.showOptionExample"
- :isDownLayout="isExampleTopDownPlayout"
- ></LiveExample>
+ <LiveExample v-if="shared.showOptionExample" ref="liveExample"></LiveExample>
<div v-else class="open-option-example" @click="openOptionExample">
<i class="el-icon-data-line"></i> {{ $t('example.titleShort') }}
</div>
@@ -49,7 +46,7 @@ import {
getOutlineNode,
getDefaultPage
} from '../docHelper';
-import {store, getPagePath, isOptionDoc} from '../store';
+import {store, getPagePath, isOptionDoc, updateOptionExampleLayout} from '../store';
import {directTo} from '../route';
import DocContentItemCard from './DocContentItemCard.vue'
import scrollIntoView from 'scroll-into-view';
@@ -78,9 +75,7 @@ export default {
// Outline of this page
pageOutline: {},
- pageDescMap: {},
-
- isExampleTopDownPlayout: false
+ pageDescMap: {}
}
},
@@ -117,6 +112,11 @@ export default {
showLiveExample() {
return !this.shared.isMobile && isOptionDoc();
+ },
+
+ needScrollOffset() {
+ return this.shared.showOptionExample && !this.shared.isMobile
+ && this.shared.computedOptionExampleLayout === 'top';
}
},
@@ -145,7 +145,7 @@ export default {
methods: {
resize() {
- this.isExampleTopDownPlayout = window.innerWidth < 1400;
+ this.shared.optionExampleLayout === 'auto' && updateOptionExampleLayout('auto');
},
updateLazyload() {
@@ -162,14 +162,17 @@ export default {
scrollTo(path, time, timeDelay) {
// Scroll to.
setTimeout(() => {
- let container = store.isMobile ? document.body : this.$el.parentNode;
- let offset = store.isMobile ? -100 : -20;
+ //let container = store.isMobile ? document.body : this.$el.parentNode;
+ let offset = store.isMobile ? 100 : 20;
+ if (this.needScrollOffset) {
+ offset += this.$refs.liveExample.$el.offsetHeight;
+ }
// console.log(document.querySelector('#' + convertPathToId(path)), convertPathToId(path));
scrollIntoView(document.querySelector('#' + convertPathToId(path)), {
time: time || 400,
align: {
top: 0,
- topOffset: -offset
+ topOffset: offset
}
});
}, timeDelay || 0);
@@ -252,7 +255,13 @@ export default {
else {
this.shared.allOptionExamples = null;
}
- }
+ },
+ // 'shared.currentOptionExampleLayout'() {
+ // this.scrollTo(this.shared.currentPath);
+ // },
+ // 'shared.showOptionExample'() {
+ // this.scrollTo(this.shared.currentPath);
+ // }
}
}
</script>
@@ -297,9 +306,11 @@ export default {
// transition: margin-right 500ms cubic-bezier(0.215, 0.610, 0.355, 1);
&.option-example-actived {
-
- &.option-example-down-layout {
- // margin-bottom: 45%;
+ &.option-example-top-layout {
+ margin-top: 42%;
+ }
+ &.option-example-bottom-layout {
+ margin-bottom: 42%;
}
&.option-example-right-layout {
margin-right: 45%;
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 51bda78..53ff1c3 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -1,5 +1,5 @@
<template>
-<div id="example-panel" :class="[isDownLayout ? 'down-layout' : 'right-layout']">
+<div id="example-panel" :class="shared.computedOptionExampleLayout + '-layout'">
<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">
@@ -23,9 +23,38 @@
:label="shared.locale === 'en' ? item['title-en'] : item.title"
></el-option>
</el-select>
- <el-button v-if="shared.currentExampleOption" type="primary" icon="el-icon-refresh" size="mini" @click="refreshForce">{{$t('example.refresh')}}</el-button>
+ <el-button v-if="shared.currentExampleOption"
+ type="primary"
+ icon="el-icon-refresh"
+ size="mini"
+ :title="$t('example.refresh')"
+ @click="refreshForce"></el-button>
+ <el-button
+ style="margin-left: 0"
+ type="primary"
+ icon="el-icon-s-operation"
+ size="mini"
+ :title="$t('example.changeLayout')"
+ v-popover:changeLayoutPopover></el-button>
<el-button size='mini' circle icon="el-icon-close" @click="closeExamplePanel"></el-button>
</div>
+ <el-popover
+ ref="changeLayoutPopover"
+ placement="bottom"
+ trigger="click"
+ v-model="showChangeLayoutPopover">
+ <div class="example-change-layout">
+ <div class="layout-title"><i class="el-icon-s-operation"></i>{{$t('example.changeLayout')}}</div>
+ <div class="layout-mode">
+ <el-radio-group v-model="shared.optionExampleLayout" @change="changeLayout" size="mini">
+ <el-radio-button
+ v-for="layout in optionExampleLayouts"
+ :key="layout"
+ :label="layout">{{$t('example.layout.' + layout)}}</el-radio-button>
+ </el-radio-group>
+ </div>
+ </div>
+ </el-popover>
</div>
</template>
@@ -34,7 +63,7 @@
// Remarks:
// 代码不能编辑，可以跳转到 examples 带上 base64，在 examples 页面编辑
-import {store, getPagePath} from '../store';
+import {store, getPagePath, updateOptionExampleLayout, optionExampleLayouts} from '../store';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
// import 'codemirror/theme/paraiso-dark.css';
@@ -182,8 +211,6 @@ function updateOption(option, isRefreshForce) {
export default {
- props: ['isDownLayout'],
-
data() {
return {
shared: store,
@@ -192,7 +219,11 @@ export default {
lastUpdateExampleName: '',
- oldHighlightedLines: []
+ oldHighlightedLines: [],
+
+ showChangeLayoutPopover: false,
+
+ optionExampleLayouts
};
},
@@ -253,7 +284,7 @@ export default {
resize() {
const examplePanel = this.$el;
const previewMain = examplePanel.querySelector('.preview-main');
- if (this.isDownLayout) {
+ if (this.shared.computedOptionExampleLayout !== 'right') {
examplePanel.style.height = (window.innerHeight * 0.5 - 60) + 'px';
examplePanel.style.width = 'auto';
}
@@ -298,6 +329,14 @@ export default {
console.error(e);
console.log(code);
}
+ },
+
+ changeLayout(layout) {
+ this.showChangeLayoutPopover = false;
+ updateOptionExampleLayout(layout);
+ this.$nextTick(() => {
+ this.resize();
+ });
}
},
@@ -362,7 +401,7 @@ export default {
.preview-and-code {
position: absolute;
- top: 90px;
+ top: 75px;
bottom: 0;
left: 0;
right: 0;
@@ -373,7 +412,9 @@ export default {
top: 0;
}
.preview-main {
+ padding: 0 10px;
background: #fefefe;
+ box-sizing: border-box;
}
.example-code {
@@ -443,10 +484,10 @@ export default {
}
}
- &.down-layout {
+ &.bottom-layout {
left: 300px;
bottom: 0;
- right: 0;
+ right: 10px;
.preview-main {
width: 50%;
@@ -459,6 +500,36 @@ export default {
float: left;
}
}
+
+
+ &.top-layout {
+ left: 300px;
+ // dev
+ // top: 40px;
+ top: 50px;
+ right: 10px;
+
+ .preview-main {
+ width: 50%;
+ height: 100%;
+ float: left;
+ }
+ .example-code {
+ width: 50%;
+ height: 100%;
+ float: left;
+ }
+ }
+}
+
+.example-change-layout {
+ .layout-title > i {
+ font-size: 14px;
+ margin-right: 5px;
+ }
+ .layout-mode {
+ margin-top: 10px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
index 03c0887..93d3a4f 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -42,7 +42,14 @@ export default {
setOptionError: 'Something Unexpected Happerns. Click refresh to try again!',
refresh: 'Refresh',
- close: 'Close'
+ close: 'Close',
+ changeLayout: 'Change Layout',
+ layout: {
+ auto: 'Auto',
+ right: 'Right',
+ top: 'Top',
+ bottom: 'Bottom'
+ }
}
},
zh: {
@@ -88,7 +95,14 @@ export default {
setOptionError: '发生了一些意料之外的错误，点击刷新再试试！',
refresh: '刷新',
- close: '关闭'
+ close: '关闭',
+ changeLayout: '切换布局',
+ layout: {
+ auto: '自动',
+ right: '右侧',
+ top: '顶部',
+ bottom: '底部'
+ }
}
}
};
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 6dd52ea..31df2c0 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,35 @@
import {getOutlineNode} from './docHelper';
+const OPTION_EXAMPLE_LAYOUT = '_ec_option_example_layout';
+
+export const optionExampleLayouts = ['auto', 'top', 'bottom', 'right'];
+
+export function updateOptionExampleLayout(layout) {
+ if (layout === 'auto') {
+ store.computedOptionExampleLayout = window.innerWidth < 1400 ? 'bottom' : 'right';
+ }
+ else {
+ store.computedOptionExampleLayout = layout;
+ }
+ store.optionExampleLayout = layout;
+ window.localStorage && window.localStorage.setItem(OPTION_EXAMPLE_LAYOUT, layout);
+}
+
+function getInitialOptionExampleLayout() {
+ const layout = {};
+ const savedLayout = window.localStorage && window.localStorage.getItem(OPTION_EXAMPLE_LAYOUT);
+ if (!savedLayout || savedLayout === 'auto' || optionExampleLayouts.indexOf(savedLayout) < 0) {
+ layout.mode = 'auto';
+ layout.computedMode = window.innerWidth < 1400 ? 'bottom' : 'right';
+ }
+ else {
+ layout.mode = layout.computedMode = savedLayout;
+ }
+ return layout;
+}
+
+const initialOptionExampleLayout = getInitialOptionExampleLayout();
+
export const store = {
docType: '',
@@ -19,7 +49,11 @@ export const store = {
// Clear before setOption
cleanMode: false,
currentExampleName: '',
- currentExampleOption: ''
+ currentExampleOption: '',
+ // Can be `top`, `bottom`, `right`, `auto`
+ optionExampleLayout: initialOptionExampleLayout.mode,
+ // Can be `top`, `bottom`, `right`
+ computedOptionExampleLayout: initialOptionExampleLayout.computedMode
};
export function getPagePath() {
@@ -169,4 +203,4 @@ export function changeOption(option, path, value) {
}
return changeOptionRecursive(option, path.split('.'), '', '');
-}
\ No newline at end of file
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org