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 2021/09/07 08:52:12 UTC
[echarts-examples] 02/02: add js and ts tag in explore page
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch typescript
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 4bed1e1a908b1dafd4cfc8ba2769ea47cf9bf583
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 7 16:51:28 2021 +0800
add js and ts tag in explore page
---
src/common/store.js | 4 +-
src/explore/ExampleCard.vue | 103 +++++++++++++++++++++++++++++++-------------
src/explore/Explore.vue | 1 -
3 files changed, 75 insertions(+), 33 deletions(-)
diff --git a/src/common/store.js b/src/common/store.js
index 6dbb3ee..a73ec0d 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -13,7 +13,9 @@ export const store = {
renderer: URL_PARAMS.renderer || 'canvas',
typeCheck:
- getExampleConfig().ts && (URL_PARAMS.lang || '').toLowerCase() === 'ts',
+ getExampleConfig() &&
+ getExampleConfig().ts &&
+ (URL_PARAMS.lang || '').toLowerCase() === 'ts',
useDirtyRect: 'useDirtyRect' in URL_PARAMS,
runCode: '',
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 17d6959..bc9f352 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -6,9 +6,21 @@
src="../asset/placeholder.jpg"
:data-src="screenshotURL"
/>
- <h4 class="example-title">{{ title }}</h4>
- <h5 class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</h5>
</a>
+ <div class="example-title">{{ title }}</div>
+ <div class="example-subtitle" v-if="showSubtitle">{{ subtitle }}</div>
+ <div class="example-tags">
+ <el-tooltip :content="$t('editor.tooltip.jsMode')" placement="bottom">
+ <a class="js" :href="exampleLink" target="_blank">JS</a>
+ </el-tooltip>
+ <el-tooltip
+ :content="$t('editor.tooltip.tsMode')"
+ placement="bottom"
+ v-if="example.ts"
+ >
+ <a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
+ </el-tooltip>
+ </div>
</div>
</template>
@@ -80,42 +92,71 @@ export default {
margin-bottom: 30px;
border-radius: 2px;
+ position: relative;
+
+ .chart-area {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+ margin-top: 10px;
+ cursor: pointer;
+ }
+
+ .example-title {
+ color: $clr-primary;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ padding: 10px 10px 2px 10px;
+ margin: 0;
+ display: block;
+ font-size: 14px;
+ text-align: left;
+ }
- .example-link {
- position: relative;
+ .example-subtitle {
+ font-size: 12px;
+ text-align: left;
+ color: #aaa;
display: block;
+ // font-weight: 200;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 3px 0 0 0;
+ padding-left: 10px;
+ }
+
+ .example-tags {
+ position: absolute;
+ right: 10px;
+ bottom: 20px;
+
+ & > * {
+ display: inline-block;
+ padding: 1px 6px;
+ margin-left: 5px;
+ vertical-align: middle;
+ border-radius: 3px;
+ font-size: 12px;
+ font-weight: bold;
+ opacity: 0.8;
- .chart-area {
- width: 100%;
- height: 100%;
- border-radius: 5px;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
- margin-top: 10px;
+ &:hover {
+ opacity: 1;
+ }
}
- .example-title {
- color: $clr-primary;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- padding: 10px 10px 2px 10px;
- margin: 0;
- font-weight: normal;
- font-size: 14px;
- text-align: center;
+ .js {
+ background: #f7df1e;
+ color: #444;
}
- .example-subtitle {
- font-size: 12px;
- text-align: center;
- color: #aaa;
- font-weight: normal;
- // font-weight: 200;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 3px 0 0 0;
+ .ts {
+ background: #3178c6;
+ color: #eee;
}
}
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index cd81d4c..945c60d 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -375,7 +375,6 @@ $pd-lg: 20px;
li {
// transition: background-color 0.5s;
- cursor: pointer;
a {
height: 45px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org