wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-05-31 20:57:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ezqms-762: extract base content from toc popup (#5489)

Browse Source 
Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>
This commit is contained in:
Alexey Zinoviev 2024-04-30 10:31:58 +04:00 committed by GitHub
parent 7b0a8827ed
commit d5af222ec2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/text-editor/src/components/toc/TableOfContentsContent.svelte Normal file
View File

@ -0,0 +1,74 @@
<!--
//
// Copyright © 2023 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
//
-->
<script lang="ts">
import { FocusHandler, Label, Scroller, createFocusManager } from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import textEditorPlugin from '../../plugin'
import { Heading } from '../../types'
export let items: Heading[] = []
export let selected: Heading | undefined = undefined
$: minLevel = items.reduce((p, v) => Math.min(p, v.level), Infinity)
function getIndentLevel (level: number): number {
return 1 * (level - minLevel)
}
const dispatch = createEventDispatcher()
const manager = createFocusManager()
</script>
<FocusHandler {manager} />
<div class="header">
<span class="fs-title overflow-label title">
<Label label={textEditorPlugin.string.TableOfContents} />
</span>
</div>
<Scroller align="start">
{#each items as item}
{@const level = getIndentLevel(item.level)}
<button class="menu-item no-focus flex-row-center item" on:click={() => dispatch('close', item)}>
<div class="label overflow-label flex-grow" class:selected={item.id === selected?.id}>
<span style={`padding-left: ${level * 1.5}rem;`}>
{item.title}
</span>
</div>
</button>
{/each}
</Scroller>
<div class="menu-space" />
<style lang="scss">
.selected {
color: var(--theme-primary-default);
}
.title {
@media print {
line-height: 3rem;
margin-left: 0;
}
}
.item {
@media print {
line-height: 2rem;
}
}
</style>

38
packages/text-editor/src/components/toc/TableOfContentsPopup.svelte
View File

@ -15,49 +15,17 @@
//
-->
<script lang="ts">
import { FocusHandler, Label, Scroller, createFocusManager, resizeObserver } from '@hcengineering/ui'
import { resizeObserver } from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import textEditorPlugin from '../../plugin'
import { Heading } from '../../types'
import TableOfContentsContent from './TableOfContentsContent.svelte'
export let items: Heading[] = []
export let selected: Heading | undefined = undefined
$: minLevel = items.reduce((p, v) => Math.min(p, v.level), Infinity)
function getIndentLevel (level: number): number {
return 1 * (level - minLevel)
}
const dispatch = createEventDispatcher()
const manager = createFocusManager()
</script>
<FocusHandler {manager} />
<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
<div class="header">
<span class="fs-title overflow-label ml-2">
<Label label={textEditorPlugin.string.TableOfContents} />
</span>
</div>
<Scroller>
{#each items as item}
{@const level = getIndentLevel(item.level)}
<button class="menu-item no-focus flex-row-center" on:click={() => dispatch('close', item)}>
<div class="label overflow-label flex-grow" class:selected={item.id === selected?.id}>
<span style={`padding-left: ${level * 1.5}rem;`}>
{item.title}
</span>
</div>
</button>
{/each}
</Scroller>
<div class="menu-space" />
<TableOfContentsContent {items} {selected} on:close />
</div>
<style lang="scss">
.selected {
color: var(--theme-primary-default);
}
</style>

1
packages/text-editor/src/index.ts
View File

@ -36,6 +36,7 @@ export { default as TextEditorStyleToolbar } from './components/TextEditorStyleT
export { default as AttachIcon } from './components/icons/Attach.svelte'
export { default as TableIcon } from './components/icons/Table.svelte'
export { default as TableOfContents } from './components/toc/TableOfContents.svelte'
export { default as TableOfContentsContent } from './components/toc/TableOfContentsContent.svelte'
export * from './components/node-view'
export { default } from './plugin'
export * from './types'