From ec151a405ad06ba7a935b77ef11c866a04ce65d3 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 23 Feb 2022 20:19:58 +0800
Subject: [PATCH] feat: bring back simple code toggle

---
 components/OneDemo.vue     | 45 +++++++++++++++++++++++---------------
 components/OneEditLink.vue |  8 +++++--
 plugins/l10n.js            |  8 +++++--
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index 086c616..2efef8a 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -35,20 +35,8 @@
     >
       <veui-icon name="one-demo-stackblitz"/>
     </veui-button>
-    <veui-button
-      v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
-      class="toggle-editor"
-      ui="icon"
-      @click="editing = !editing"
-    >
-      <veui-icon
-        scale="1.2"
-        :name="editing ? 'one-demo-code-off' : 'one-demo-code'"
-      />
-    </veui-button>
     <veui-button
       v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
-      class="toggle-source"
       ui="icon"
       @click="codeExpanded = !codeExpanded"
     >
@@ -57,9 +45,18 @@
         :name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
       />
     </veui-button>
+    <veui-button
+      v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
+      class="toggle-editor"
+      ui="text"
+      @click="editing = !editing"
+    >
+      Live
+    </veui-button>
     <one-edit-link
       class="edit"
       variant="quiet"
+      type="demo"
       :path="path"
     />
   </section>
@@ -240,7 +237,7 @@ Icon.register({
   .codeExpanded &
     border-radius 0
 
-  .veui-button
+  .veui-button:not(.toggle-editor)
     font-size 18px
 
   .veui-button + .veui-button
@@ -277,13 +274,25 @@ Icon.register({
   opacity 0
   transform scale(0.99) translateY(3px)
 
-.toggle-source
-  display none
+.toggle-editor
+  height 20px
+  padding 0 3px
+  font-weight 600
+
+  &::after
+    content none !important
+
+  &
+  &:hover
+  &[data-focus-visible-added]
+  &:active
+    border 1.5px solid currentColor !important
+
+  &[data-focus-visible-added]
+    border-color #0052cc !important
+    box-shadow 0 0 0 2px rgba(0, 102, 255, 0.2) !important
 
 @media (max-width 480px)
-  .toggle-source
-    display inline-flex
-
   .toggle-editor
     display none
 </style>
diff --git a/components/OneEditLink.vue b/components/OneEditLink.vue
index d0cdf0f..06dd862 100644
--- a/components/OneEditLink.vue
+++ b/components/OneEditLink.vue
@@ -13,7 +13,7 @@
   rel="noopener"
 >
   <slot :label="t('editOnGitHub')">
-    <span class="full">{{ t('editOnGitHub') }}</span>
+    <span class="full">{{ t('editOnGitHub', { item: t(type) }) }}</span>
     <span class="short">{{ t('edit') }}</span>
     <veui-icon
       class="icon"
@@ -41,7 +41,11 @@ export default {
       type: String,
       default: 'default'
     },
-    path: String
+    path: String,
+    type: {
+      type: String,
+      default: 'page'
+    }
   },
   computed: {
     href () {
diff --git a/plugins/l10n.js b/plugins/l10n.js
index 7e6482c..7418b84 100644
--- a/plugins/l10n.js
+++ b/plugins/l10n.js
@@ -113,7 +113,9 @@ i18n.register(
 i18n.register(
   'zh-Hans',
   {
-    editOnGitHub: '在 GitHub 上编辑此页',
+    editOnGitHub: '在 GitHub 上编辑此{item}',
+    page: '页面',
+    demo: '示例',
     edit: '编辑'
   },
   {
@@ -124,7 +126,9 @@ i18n.register(
 i18n.register(
   'en-US',
   {
-    editOnGitHub: 'Edit this page on GitHub',
+    editOnGitHub: 'Edit this {item} on GitHub',
+    page: 'page',
+    demo: 'demo',
     edit: 'Edit'
   },
   {