Merge branch 'release/3.45.0'

README.md

@@ -76,19 +76,14 @@ For more information on how to use the following functions, please see [characte
 
 ## Changelogs
 
-### [v3.44.0](https://github.com/purocean/yn/releases/tag/v3.44.0) 2022-11-21
-
-[Windows](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-win-x64-3.44.0.exe) | [macOS arm64](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-mac-arm64-3.44.0.dmg) | [macOS x64](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-mac-x64-3.44.0.dmg) | [Linux AppImage](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-linux-x86_64-3.44.0.AppImage) | [Linux deb](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-linux-amd64-3.44.0.deb)
-
-1. feat: add new file search panel
-2. feat: the status bar adds a switch theme button
-3. feat: add a prompt that fails to pull the index from the extension registry
-4. upd: adjust the file directory style
-5. fix: fix the problem that the editor list was not refreshed when the custom editor extension was enabled
-6. fix: fix the problem that the mouse pointer may be detached when changing the terminal size
-7. fix: fix the problem that the mind map may fail to load when opening the application
-8. feat(plugin): add `ctx.base.findInRepository` method
-9. fix(plugin): fix abnormal behavior of registration Hook with `once` parameters
+### [v3.45.0](https://github.com/purocean/yn/releases/tag/v3.45.0) 2022-11-26
+
+[Windows](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-win-x64-3.45.0.exe) | [macOS arm64](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-mac-arm64-3.45.0.dmg) | [macOS x64](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-mac-x64-3.45.0.dmg) | [Linux AppImage](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-linux-x86_64-3.45.0.AppImage) | [Linux deb](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-linux-amd64-3.45.0.deb)
+
+1. feat: some interaction and visual optimization
+2. feat: presentation mode adds exit button
+3. fix: fix the problem that HTML a tag links may not be opened when in browser
+4. refactor(plugin): Refactor some interfaces and add `ctx.workbench` module
 
 [More release notes](https://github.com/purocean/yn/releases)
 

README_ZH-CN.md

@@ -76,19 +76,14 @@
 
 ## 更新日志
 
-### [v3.44.0](https://github.com/purocean/yn/releases/tag/v3.44.0) 2022-11-21
-
-[Windows](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-win-x64-3.44.0.exe) | [macOS arm64](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-mac-arm64-3.44.0.dmg) | [macOS x64](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-mac-x64-3.44.0.dmg) | [Linux AppImage](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-linux-x86_64-3.44.0.AppImage) | [Linux deb](https://github.com/purocean/yn/releases/download/v3.44.0/Yank-Note-linux-amd64-3.44.0.deb)
-
-1. feat: 增加新版文件搜索面板
-2. feat: 状态栏增加切换主题按钮
-3. feat: 增加从扩展注册中心拉取索引失败的提示
-4. upd: 调整文件目录样式
-5. fix: 修复启用自定义编辑器扩展时候没刷新编辑器列表问题
-6. fix: 修复更改终端尺寸可能鼠标指针脱离问题
-7. fix: 修复打开应用时候脑图可能加载失败问题
-8. feat(plugin): 增加 `ctx.base.findInRepository` 方法
-9. fix(plugin): 修复注册 Hook `once` 参数行为异常问题
+### [v3.45.0](https://github.com/purocean/yn/releases/tag/v3.45.0) 2022-11-26
+
+[Windows](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-win-x64-3.45.0.exe) | [macOS arm64](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-mac-arm64-3.45.0.dmg) | [macOS x64](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-mac-x64-3.45.0.dmg) | [Linux AppImage](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-linux-x86_64-3.45.0.AppImage) | [Linux deb](https://github.com/purocean/yn/releases/download/v3.45.0/Yank-Note-linux-amd64-3.45.0.deb)
+
+1. feat: 一些交互和视觉优化
+2. feat: 演示模式增加退出演示按钮
+3. fix: 修复在浏览器中使用时 HTML a 标签链接可能不能打开问题
+4. refactor(plugin): 重构部分接口，增加 `ctx.workbench` 模块
 
 [更多发布说明](https://github.com/purocean/yn/releases)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yank.note",
-  "version": "3.44.1",
+  "version": "3.45.0",
   "description": "Yank Note: A hackable markdown note application for programmers",
   "main": "dist/main/app.js",
   "license": "AGPL-3.0",

src/renderer/components/ActionBar.vue

@@ -2,7 +2,7 @@
   <div class="action-bar">
     <div class="btns">
       <div>
-        <div class="btn flat" @click="toggleOutline()" :title="$t(showOutline ? 'files' : 'outline') + ' ' + getKeysLabel('layout.toggle-outline')">
+        <div class="btn flat" @click="toggleOutline()" :title="$t(showOutline ? 'files' : 'outline') + ' ' + getKeysLabel('workbench.toggle-outline')">
           <svg-icon v-if="showOutline" name="folder-tree-solid" />
           <svg-icon v-else name="list" />
         </div>
@@ -37,18 +37,17 @@
 import { onBeforeUnmount, ref, toRef } from 'vue'
 import { useStore } from 'vuex'
 import { registerAction, removeAction } from '@fe/core/action'
-import { getSchema, Schema } from '@fe/services/control-center'
 import { useContextMenu } from '@fe/support/ui/context-menu'
 import type { AppState } from '@fe/support/store'
 import { useI18n } from '@fe/services/i18n'
-import { toggleOutline } from '@fe/services/layout'
+import { toggleOutline, ControlCenter } from '@fe/services/workbench'
 import { findInRepository } from '@fe/services/base'
 import { getKeysLabel } from '@fe/core/command'
-import type { FileSort } from '@fe/types'
+import type { FileSort, Components } from '@fe/types'
 import SvgIcon from './SvgIcon.vue'
 
 const store = useStore<AppState>()
-const navigation = ref<Schema['navigation']>()
+const navigation = ref<Components.ControlCenter.Schema['navigation']>()
 const showOutline = toRef(store.state, 'showOutline')
 const treeSort = toRef(store.state, 'treeSort')
 
@@ -86,7 +85,7 @@ function showSortMenu () {
 registerAction({
   name: 'action-bar.refresh',
   handler () {
-    navigation.value = getSchema().navigation
+    navigation.value = ControlCenter.getSchema().navigation
   }
 })
 

src/renderer/components/ContextMenu.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="context-menu">
-    <div class="mask" v-if="isShow" @click="hide" @contextmenu.prevent.stop="hide"></div>
-    <ul class="menu" ref="refMenu" :style="{visibility: isShow ? 'visible' : 'hidden'}" @contextmenu.prevent>
+  <Mask transparent :show="items && items.length > 0" @close="hide" :style="{ zIndex: 2147483646 }">
+    <ul class="menu" ref="refMenu" @contextmenu.prevent>
       <template v-for="(item, i) in items">
         <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type" />
         <li v-else :key="item.id" v-show="!item.hidden" @click="handleClick(item)" :class="item.type || 'normal'">
@@ -10,32 +9,27 @@
         </li>
       </template>
     </ul>
-  </div>
+  </Mask>
 </template>
 
 <script lang="ts">
 import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { Components } from '@fe/types'
+import Mask from './Mask.vue'
 import SvgIcon from './SvgIcon.vue'
 
 export default defineComponent({
   name: 'context-menu',
-  components: { SvgIcon },
+  components: { SvgIcon, Mask },
   setup () {
     const refMenu = ref<HTMLUListElement | null>(null)
     const items = ref<Components.ContextMenu.Item[]>([])
-    const isShow = ref(false)
 
     let mouseX = 0
     let mouseY = 0
 
-    function hideMenu () {
-      isShow.value = false
-    }
-
     function hide () {
       items.value = []
-      hideMenu()
     }
 
     function handleClick (item: Components.ContextMenu.NormalItem) {
@@ -48,7 +42,7 @@ export default defineComponent({
       mouseY = e.clientY
     }
 
-    function showMenu (opts?: Components.ContextMenu.ShowOpts) {
+    function setPosition (opts?: Components.ContextMenu.ShowOpts) {
       if (!refMenu.value) {
         return
       }
@@ -72,8 +66,6 @@ export default defineComponent({
       refMenu.value.style.left = x + 'px'
       refMenu.value.style.height = y < 0 ? `${menuHeight + y}px` : 'unset'
       refMenu.value.style.top = y < 0 ? '0px' : y + 'px'
-
-      isShow.value = true
     }
 
     function show (menuItems: Components.ContextMenu.Item[], opts?: Components.ContextMenu.ShowOpts) {
@@ -84,7 +76,7 @@ export default defineComponent({
       }
 
       nextTick(() => {
-        showMenu(opts)
+        setPosition(opts)
       })
     }
 
@@ -100,7 +92,6 @@ export default defineComponent({
 
     return {
       refMenu,
-      isShow,
       items,
       hide,
       show,
@@ -111,23 +102,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2147483646;
-}
-
 .menu {
   list-style: none;
   padding: 1px;
   margin: 0;
   position: fixed;
   left: -99999px;
   top: -99999px;
-  visibility: hidden;
   overflow-y: auto;
   background: rgba(var(--g-color-77-rgb), 0.65);
   backdrop-filter: var(--g-backdrop-filter);

src/renderer/components/ControlCenter.vue

@@ -1,73 +1,87 @@
 <template>
-  <div
-    v-if="store.state.showControlCenter && schema"
-    class="control-center"
-    tabindex="0"
-    @blur="onBlur"
-    ref="container"
-  >
-    <div v-for="(row, category) in schema" :key="category" class="row">
-      <template v-for="(item, i) in row?.items" :key="i">
-        <div
-          v-if="item.type === 'btn'"
-          :class="{ btn: true, flat: item.flat, disabled: item.disabled, checked: item.checked }"
-          :title="item.title"
-          @click.stop="item.onClick"
-        >
-          <svg-icon :name="item.icon" />
-        </div>
-      </template>
+  <teleport to="body">
+    <div v-if="visible && schema" class="control-center" v-fixed-float="{ onClose: () => toggle(false) }">
+      <div v-for="(row, category) in schema" :key="category" class="row">
+        <template v-for="(item, i) in row?.items" :key="i">
+          <div
+            v-if="item.type === 'btn'"
+            :class="{ btn: true, flat: item.flat, disabled: item.disabled, checked: item.checked }"
+            :title="item.title"
+            @click.stop="item.onClick"
+          >
+            <svg-icon :name="item.icon" />
+          </div>
+        </template>
+      </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script lang="ts" setup>
+import { onBeforeUnmount, ref } from 'vue'
 import { registerAction, removeAction } from '@fe/core/action'
-import { getSchema, Schema, toggle } from '@fe/services/control-center'
-import { onBeforeUnmount, ref, watch } from 'vue'
-import { useStore } from 'vuex'
+import { Alt, Escape, getKeysLabel } from '@fe/core/command'
+import { ControlCenter, FileTabs } from '@fe/services/workbench'
+import { t } from '@fe/services/i18n'
+import type { Components } from '@fe/types'
 import SvgIcon from './SvgIcon.vue'
 
-const schema = ref<Schema | null>(null)
-const store = useStore()
+const visible = ref(false)
+const schema = ref<Components.ControlCenter.Schema | null>(null)
 
-const container = ref<HTMLElement>()
-
-function onBlur () {
-  setTimeout(() => {
-    toggle(false)
-  }, 0)
+function toggle (val?: boolean) {
+  visible.value = typeof val === 'boolean' ? val : !visible.value
 }
 
 registerAction({
   name: 'control-center.refresh',
   handler () {
-    schema.value = getSchema()
+    schema.value = ControlCenter.getSchema()
   }
 })
 
-onBeforeUnmount(() => {
-  removeAction('control-center.refresh')
+registerAction({
+  name: 'control-center.toggle',
+  handler: toggle,
+  keys: [Alt, 'c']
 })
 
-watch(() => store.state.showControlCenter, (val) => {
-  if (val) {
-    setTimeout(() => {
-      container.value?.focus()
-    }, 0)
-  }
+registerAction({
+  name: 'control-center.hide',
+  handler: () => toggle(false),
+  keys: [Escape],
+  when: () => visible.value
 })
 
+const tabsActionBtnTapper = (btns: Components.Tabs.ActionBtn[]) => {
+  btns.push({ type: 'separator', order: 9999 })
+  btns.push({
+    type: 'normal',
+    icon: 'sliders-solid',
+    title: t('control-center.control-center', getKeysLabel('control-center.toggle')),
+    onClick: () => toggle(),
+    order: 9999,
+  })
+}
+
+FileTabs.tapActionBtns(tabsActionBtnTapper)
+
+onBeforeUnmount(() => {
+  removeAction('control-center.refresh')
+  removeAction('control-center.toggle')
+  removeAction('control-center.hide')
+  FileTabs.removeActionBtnTapper(tabsActionBtnTapper)
+})
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .control-center {
   position: fixed;
-  right: 25px;
-  bottom: 40px;
+  right: 14px;
+  top: 36px;
   z-index: 1000;
   outline: none;
-  background: rgba(var(--g-color-85-rgb), 0.8);
+  background: var(--g-color-backdrop);
   backdrop-filter: var(--g-backdrop-filter);
   color: var(--g-color-10);
   overflow: hidden;
@@ -82,6 +96,7 @@ watch(() => store.state.showControlCenter, (val) => {
 
     &:last-of-type {
       border-bottom: none;
+      justify-content: space-between;
     }
 
     .btn {
@@ -95,7 +110,7 @@ watch(() => store.state.showControlCenter, (val) => {
       font-size: 14px;
 
       border-radius: var(--g-border-radius);
-      margin: 4px;
+      margin: 4px 4.3px;
       transition: .1s ease-in-out;
 
       &.flat {
@@ -124,4 +139,8 @@ watch(() => store.state.showControlCenter, (val) => {
     }
   }
 }
+
+:root[electron="true"] .control-center {
+  top: 66px;
+}
 </style>