opensource/yn
3
0
Fork 0
mirror of https://github.com/purocean/yn.git synced 2026-09-24 15:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 预览界面目录新增固定按钮

Browse Source
This commit is contained in:
purocean
2021-10-21 14:25:05 +08:00
parent f3c31fb0ba
commit c1598972b2
2 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/Preview.vue
+51 -3
View File
@@ -17,8 +17,13 @@
</div>
</div>
</div>
<div class="outline">
<div style="padding: .5em;"><b>目录</b></div>
<div :class="{outline: true, pined: pinOutline}">
<div class="outline-title">
<b>目录</b>
<div class="outline-pin" @click="togglePinOutline">
<SvgIcon style="width: 12px; height: 12px" name="thumbtack" />
</div>
</div>
<div class="catalog" :style="{maxHeight: `min(${(height - 120) + 'px'}, 70vh)`}">
<div v-for="(head, index) in heads" :key="index" :style="{paddingLeft: `${head.level + 1}em`}" @click="syncScroll(head.sourceLine)">
{{ head.text }}
@@ -45,6 +50,7 @@ import { useBus } from '@fe/support/bus'
import { getActionHandler, registerAction, removeAction } from '@fe/context/action'
import { revealLineInCenter } from '@fe/context/editor'
import Render from './Render.vue'
import SvgIcon from './SvgIcon.vue'
import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/atom-one-dark.css'
@@ -52,11 +58,12 @@ import 'katex/dist/katex.min.css'
export default defineComponent({
name: 'xview',
components: { Render },
components: { Render, SvgIcon },
setup () {
const bus = useBus()
const store = useStore()
const pinOutline = ref(false)
const { currentContent, currentFile, autoPreview, presentation } = toRefs(store.state)
const fileName = computed(() => currentFile.value?.name)
const filePath = computed(() => currentFile.value?.path)
@@ -83,6 +90,10 @@ export default defineComponent({
bottom: `max(100vh - ${height.value - (isElectron ? 0 : 20)}px, 40px)`
}))
function togglePinOutline () {
pinOutline.value = !pinOutline.value
}
function resizeHandler () {
width.value = refViewWrapper.value!.clientWidth
height.value = refViewWrapper.value!.clientHeight
@@ -222,6 +233,7 @@ export default defineComponent({
})
return {
pinOutline,
refViewWrapper,
refView,
presentation,
@@ -232,6 +244,7 @@ export default defineComponent({
heads,
todoCount,
todoDoneCount,
togglePinOutline,
scrollTop,
print,
showExport,
@@ -313,6 +326,7 @@ export default defineComponent({
margin-top: 1em;
}
.outline.pined,
.outline:hover {
max-height: 75vh;
max-width: 20em;
@@ -338,6 +352,40 @@ export default defineComponent({
background: var(--g-color-75);
}
.outline-title {
padding: .5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.outline-pin {
width: 20px;
height: 20px;
overflow: hidden;
transition: left .1s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 50%;
left: 40px;
color: var(--g-color-20);
&:hover {
background: var(--g-color-75);
}
}
.outline:hover .outline-pin,
.outline.pined .outline-pin {
left: 3px;
}
.outline.pined .outline-pin {
background: var(--g-color-70);
}
.action-btns {
font-size: 14px;
pointer-events: initial;
src/renderer/components/SvgIcon.vue
+1
View File
@@ -24,6 +24,7 @@ export default defineComponent({
clipboard: '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="clipboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-clipboard fa-w-12"><path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" class=""></path></svg>',
'chevron-down': '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" class=""></path></svg>',
terminal: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="terminal" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-terminal fa-w-20"><path fill="currentColor" d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z" class=""></path></svg>',
thumbtack: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbtack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-thumbtack fa-w-12"><path fill="currentColor" d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z" class=""></path></svg>',
}
const html = ref(icons[props.name!])