mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-18 06:13:52 +00:00
Alexey Zinoviev
GitHub
parent
82e5d2fca9
commit
7d12548067
@ -45,6 +45,8 @@
|
||||
export let customAside: ButtonItem[] | undefined = undefined
|
||||
export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
|
||||
export let kind: 'default' | 'modern' = 'default'
|
||||
export let printHeader = true
|
||||
export let printAside = false
|
||||
|
||||
export function getAside (): string | boolean {
|
||||
return panel.getAside()
|
||||
@ -109,6 +111,8 @@
|
||||
bind:useMaxWidth
|
||||
{isFullSize}
|
||||
{customAside}
|
||||
{printHeader}
|
||||
{printAside}
|
||||
bind:selectedAside
|
||||
on:select={(result) => {
|
||||
selectedAside = result.detail
|
||||
@ -131,7 +135,7 @@
|
||||
<svelte:fragment slot="utils">
|
||||
{#if isUtils && $$slots.utils}
|
||||
<slot name="utils" />
|
||||
<div class="buttons-divider max-h-7 h-7 mx-2" />
|
||||
<div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
@ -183,6 +187,14 @@
|
||||
<slot name="post-utils" />
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="page-header">
|
||||
<slot name="page-header" />
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="page-footer">
|
||||
<slot name="page-footer" />
|
||||
</svelte:fragment>
|
||||
|
||||
{#if $deviceInfo.isMobile}
|
||||
<div bind:this={content} class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
|
||||
<slot />
|
||||
|
||||
@ -562,7 +562,7 @@
|
||||
</div>
|
||||
|
||||
{#if refActions.length > 0}
|
||||
<div class="buttons-panel flex-between clear-mins">
|
||||
<div class="buttons-panel flex-between clear-mins no-print">
|
||||
<div class="buttons-group xsmall-gap mt-3">
|
||||
{#each refActions as a}
|
||||
<Button
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="root no-print">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="toc" class:hovered on:click={handleOpenToc}>
|
||||
|
||||
21
packages/theme/styles/_print.scss
Normal file
21
packages/theme/styles/_print.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pagebreak {
|
||||
page-break-before: always;
|
||||
}
|
||||
}
|
||||
|
||||
@media not print {
|
||||
.only-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin watermark {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
page-break-after: always;
|
||||
}
|
||||
@ -17,6 +17,7 @@
|
||||
@import "./_colors.scss";
|
||||
@import "./_lumia-colors.scss";
|
||||
@import "./_layouts.scss";
|
||||
@import "./_print.scss";
|
||||
@import "./common.scss";
|
||||
@import "./button.scss";
|
||||
@import "./editors.scss";
|
||||
@ -142,4 +143,8 @@ body {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
|
||||
@media print {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -372,12 +372,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// &.asideShown .popupPanel-body__main {
|
||||
// border: 1px solid var(--divider-color);
|
||||
// border-radius: 0 0 .5rem .5rem;
|
||||
// }
|
||||
}
|
||||
|
||||
.popupPanel-pageHeader {
|
||||
@include watermark;
|
||||
|
||||
top: 0;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.popupPanel-pageFooter {
|
||||
@include watermark;
|
||||
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.modern {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--small-focus-BorderRadius);
|
||||
@ -386,6 +406,10 @@
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Full size state
|
||||
|
||||
@ -45,6 +45,8 @@
|
||||
export let customAside: ButtonItem[] | undefined = undefined
|
||||
export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
|
||||
export let kind: 'default' | 'modern' = 'default'
|
||||
export let printHeader = true
|
||||
export let printAside = false
|
||||
|
||||
export function getAside (): string | boolean {
|
||||
if (customAside) return selectedAside
|
||||
@ -130,36 +132,51 @@
|
||||
}
|
||||
dispatch('select', result.detail)
|
||||
}
|
||||
|
||||
let isPrinting = false
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:beforeprint={() => {
|
||||
isPrinting = true
|
||||
}}
|
||||
on:afterprint={() => {
|
||||
isPrinting = false
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
bind:this={el}
|
||||
class="popupPanel panel {kind}"
|
||||
class:withPageHeader={$$slots['page-header'] !== undefined}
|
||||
class:withPageFooter={$$slots['page-footer'] !== undefined}
|
||||
class:embedded
|
||||
use:resizeObserver={(element) => {
|
||||
panelWidth = element.clientWidth
|
||||
checkPanel()
|
||||
}}
|
||||
>
|
||||
<div class="popupPanel-title" class:indent={allowClose}>
|
||||
<div class="popupPanel-title" class:no-print={!printHeader} class:indent={allowClose}>
|
||||
{#if allowClose}
|
||||
<Button
|
||||
id={'btnPClose'}
|
||||
focusIndex={10001}
|
||||
icon={IconClose}
|
||||
iconProps={{ size: 'medium' }}
|
||||
kind={'icon'}
|
||||
on:click={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
/>
|
||||
<div class="antiHSpacer x2" />
|
||||
<div class="no-print">
|
||||
<Button
|
||||
id={'btnPClose'}
|
||||
focusIndex={10001}
|
||||
icon={IconClose}
|
||||
iconProps={{ size: 'medium' }}
|
||||
kind={'icon'}
|
||||
on:click={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
/>
|
||||
<div class="antiHSpacer x2" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="popupPanel-title__content">
|
||||
{#if !withoutTitle}<slot name="title" />{/if}
|
||||
</div>
|
||||
<slot name="pre-utils" />
|
||||
<div class="flex-row-center ml-3">
|
||||
<div class="flex-row-center ml-3 no-print">
|
||||
<slot name="utils" />
|
||||
{#if $$slots.aside && isAside}
|
||||
{#if customAside}
|
||||
@ -242,11 +259,17 @@
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
{#if isPrinting && printAside}
|
||||
<div class="only-print pagebreak">
|
||||
<slot name="aside" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $$slots.aside && isAside && asideShown}
|
||||
<Separator name={'panel-aside'} float={asideFloat} index={0} />
|
||||
<div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
|
||||
<div class="popupPanel-body__aside no-print" class:float={asideFloat} class:shown={asideShown}>
|
||||
<Separator name={'panel-aside'} float={asideFloat ? 'aside' : true} index={0} />
|
||||
<div class="antiPanel-wrap__content">
|
||||
<slot name="aside" />
|
||||
@ -254,4 +277,10 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="popupPanel-pageHeader only-print" id="page-header">
|
||||
<slot name="page-header" />
|
||||
</div>
|
||||
<div class="popupPanel-pageFooter only-print" id="page-footer">
|
||||
<slot name="page-footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -148,6 +148,12 @@
|
||||
on:keydown={(evt) => {
|
||||
if (props) handleKeydown(evt)
|
||||
}}
|
||||
on:beforeprint={() => {
|
||||
if (props && contentPanel) fitPopup(props, contentPanel)
|
||||
}}
|
||||
on:afterprint={() => {
|
||||
if (props && contentPanel) fitPopup(props, contentPanel)
|
||||
}}
|
||||
/>
|
||||
{#if props}
|
||||
{#if !component}
|
||||
@ -204,6 +210,13 @@
|
||||
z-index: 401;
|
||||
position: fixed;
|
||||
background-color: transparent;
|
||||
|
||||
@media print {
|
||||
position: static;
|
||||
z-index: initial;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
|
||||
@ -844,6 +844,10 @@
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
</script>
|
||||
|
||||
<div class="flex-stretch tabs-container" class:small={size === 'small'} style:padding class:noMargin>
|
||||
<div class="flex-stretch tabs-container no-print" class:small={size === 'small'} style:padding class:noMargin>
|
||||
{#each model as tab, i}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
|
||||
@ -247,10 +247,15 @@
|
||||
.clock {
|
||||
margin: 0 12px 0 8px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - var(--status-bar-height));
|
||||
|
||||
.error {
|
||||
|
||||
@ -265,7 +265,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={refContainer} on:paste={pasteAction}>
|
||||
<div class="no-print" bind:this={refContainer} on:paste={pasteAction}>
|
||||
<input
|
||||
bind:this={inputFile}
|
||||
multiple
|
||||
|
||||
@ -236,6 +236,7 @@
|
||||
isCustomAttr={false}
|
||||
isSub={false}
|
||||
useMaxWidth={false}
|
||||
printHeader={false}
|
||||
{embedded}
|
||||
{kind}
|
||||
bind:content
|
||||
|
||||
@ -350,4 +350,10 @@
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.workbench-container:has(~ .panel-instance) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -183,6 +183,7 @@
|
||||
{embedded}
|
||||
{kind}
|
||||
withoutActivity={false}
|
||||
printAside={true}
|
||||
bind:content
|
||||
bind:innerWidth
|
||||
on:open
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
</Button>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="flex-row-center gap-2">
|
||||
<div class="flex-row-center gap-2 no-print">
|
||||
{#if hasSubIssues}
|
||||
<ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'ghost'} bind:viewlet />
|
||||
{/if}
|
||||
|
||||
@ -646,7 +646,7 @@
|
||||
class:modern-app={modern}
|
||||
style:flex-direction={appsDirection === 'horizontal' ? 'column-reverse' : 'row'}
|
||||
>
|
||||
<div class="antiPanel-application {appsDirection}" class:lastDivider={!visibleNav}>
|
||||
<div class="antiPanel-application {appsDirection} no-print" class:lastDivider={!visibleNav}>
|
||||
<div
|
||||
class="hamburger-container clear-mins"
|
||||
class:portrait={appsDirection === 'horizontal'}
|
||||
@ -750,7 +750,7 @@
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
{#if navFloat}<div class="cover shown" on:click={() => (visibleNav = false)} />{/if}
|
||||
<div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
|
||||
<div class="antiPanel-navigator no-print {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
|
||||
<div class="antiPanel-wrap__content">
|
||||
{#if currentApplication}
|
||||
<NavHeader label={currentApplication.label} />
|
||||
@ -1017,4 +1017,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.workbench-container:has(~ .panel-instance) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user