New panel update (#1559)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2022-04-27 14:34:15 +07:00 committed by GitHub
parent 203850269b
commit 38cff61f60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 57 deletions

View File

@ -47,19 +47,22 @@
</script> </script>
<Panel <Panel
{title} {subtitle} {icon} {title}
{subtitle}
{icon}
rightSection={isFullSize} rightSection={isFullSize}
{showHeader} {showHeader}
bind:panelWidth bind:innerWidth bind:panelWidth
isProperties={innerWidth >= 900 || isProperties} bind:innerWidth
isProperties={innerWidth >= 500 || isProperties}
isSubtitle={innerWidth < 900 || isSubtitle} isSubtitle={innerWidth < 900 || isSubtitle}
on:close on:close
> >
<svelte:fragment slot="subtitle"> <svelte:fragment slot="subtitle">
{#if $$slots['subtitle']}<slot name="subtitle" />{/if} {#if $$slots.subtitle}<slot name="subtitle" />{/if}
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="properties"> <svelte:fragment slot="properties">
{#if $$slots['properties']}<slot name="properties" />{/if} {#if $$slots.properties}<slot name="properties" />{/if}
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="navigate-actions"> <svelte:fragment slot="navigate-actions">
<slot name="navigate-actions" /> <slot name="navigate-actions" />
@ -81,12 +84,7 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="actions"> <svelte:fragment slot="actions">
{#if allowFullSize} {#if allowFullSize}
<Button <Button icon={IconExpand} size={'medium'} kind={'transparent'} on:click={resizePanel} />
icon={IconExpand}
size={'medium'}
kind={'transparent'}
on:click={resizePanel}
/>
{/if} {/if}
</svelte:fragment> </svelte:fragment>
{#if isFullSize} {#if isFullSize}

View File

@ -34,8 +34,8 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
</script> </script>
<div class="antiPanel antiComponent" bind:clientWidth={panelWidth}> <div class="antiPanel antiComponent" bind:clientWidth={panelWidth}>
<div class:panel-content={!rightSection} class:ad-section-50={rightSection} class:divide={rightSection}> <div class='panel-content-container'>
{#if showHeader} {#if showHeader}
<div class="ac-header short mirror divide highlight"> <div class="ac-header short mirror divide highlight">
<div class="buttons-group"> <div class="buttons-group">
@ -45,7 +45,8 @@
kind={'transparent'} kind={'transparent'}
on:click={() => { on:click={() => {
dispatch('close') dispatch('close')
}} /> }}
/>
{#if $$slots['navigate-actions']} {#if $$slots['navigate-actions']}
<div class="buttons-group xsmall-gap"> <div class="buttons-group xsmall-gap">
<slot name="navigate-actions" /> <slot name="navigate-actions" />
@ -63,11 +64,10 @@
{#if subtitle}<span class="ac-header__description">{subtitle}</span>{/if} {#if subtitle}<span class="ac-header__description">{subtitle}</span>{/if}
</div> </div>
</div> </div>
{#if rightSection} <div class="buttons-group xsmall-gap mr-4">
<div class="buttons-group xsmall-gap mr-4"> <slot name="commands" />
<slot name="commands" /> <slot name="actions" />
</div> </div>
{/if}
</div> </div>
{:else} {:else}
<div class="ac-header short mirror divide highlight"> <div class="ac-header short mirror divide highlight">
@ -110,6 +110,9 @@
<slot /> <slot />
</div> </div>
{/if} {/if}
{#if rightSection}
<slot name="rightSection" />
{/if}
{#if $$slots.properties && isProperties} {#if $$slots.properties && isProperties}
<div class="properties-container"> <div class="properties-container">
<slot name="properties" /> <slot name="properties" />
@ -117,25 +120,13 @@
{/if} {/if}
</div> </div>
</div> </div>
{#if rightSection}
<slot name="rightSection" />
{/if}
<div class="ad-tools buttons-group xsmall-gap h-4" class:grow-reverse={reverseCommands}>
{#if !rightSection && $$slots.commands}
<slot name="commands" />
{/if}
<slot name="actions" />
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
.panel-content { .panel-content-container {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
align-content: stretch;
} }
.main-content { .main-content {
display: flex; display: flex;
@ -143,7 +134,8 @@
flex-wrap: nowrap; flex-wrap: nowrap;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
height: 100%; flex-grow: 1;
// height: 100%;
&.withProperties { &.withProperties {
flex-direction: row; flex-direction: row;
@ -155,7 +147,7 @@
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
min-width: 20rem; min-width: 20rem;
width: 25%; width: 20rem;
// background-color: var(--board-card-bg-color); // background-color: var(--board-card-bg-color);
&::before { &::before {

View File

@ -64,7 +64,7 @@
</div> </div>
</div> </div>
{/if} {/if}
<div class="flex-col h-full min-h-0" class:background-accent-bg-color={!transparent}> <div class="flex-col flex-grow min-h-0" class:background-accent-bg-color={!transparent}>
<Scroller> <Scroller>
<div class="p-10 select-text"> <div class="p-10 select-text">
{#if txes} {#if txes}

View File

@ -43,7 +43,7 @@
</script> </script>
<div <div
class="flex-row-center cursor-pointer" class="flex-row-center cursor-pointer p-4"
bind:this={container} bind:this={container}
on:click|preventDefault={() => { on:click|preventDefault={() => {
if (!opened) { if (!opened) {

View File

@ -18,7 +18,17 @@
import { createQuery, getClient, UserBox } from '@anticrm/presentation' import { createQuery, getClient, UserBox } from '@anticrm/presentation'
import { StyledTextBox } from '@anticrm/text-editor' import { StyledTextBox } from '@anticrm/text-editor'
import type { Issue, IssueStatus, Team } from '@anticrm/tracker' import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
import { AnyComponent, Button, EditBox, IconDownOutline, IconUpOutline, Label, Scroller, IconMoreH, IconEdit } from '@anticrm/ui' import {
AnyComponent,
Button,
EditBox,
IconDownOutline,
IconUpOutline,
Label,
Scroller,
IconMoreH,
IconEdit
} from '@anticrm/ui'
import { createEventDispatcher, onMount } from 'svelte' import { createEventDispatcher, onMount } from 'svelte'
import tracker from '../../plugin' import tracker from '../../plugin'
// import Card from '../Card.svelte' // import Card from '../Card.svelte'
@ -38,7 +48,7 @@
let issue: Issue | undefined let issue: Issue | undefined
let currentTeam: Team | undefined let currentTeam: Team | undefined
let issueStatuses: WithLookup<IssueStatus>[] | undefined let issueStatuses: WithLookup<IssueStatus>[] | undefined
let fullSize: boolean = false const fullSize: boolean = false
let innerWidth: number let innerWidth: number
$: _id && $: _id &&
@ -95,9 +105,7 @@
dispatch('close') dispatch('close')
}} }}
> >
<svelte:fragment slot="custom-title"> <svelte:fragment slot="custom-title">Custom Title</svelte:fragment>
Custom Title
</svelte:fragment>
<svelte:fragment slot="subtitle"> <svelte:fragment slot="subtitle">
<div class="flex-between flex-grow"> <div class="flex-between flex-grow">
{#if currentTeam} {#if currentTeam}
@ -227,22 +235,16 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
// .main-panel { .header {
// flex-grow: 2; max-width: 56.25rem;
// flex-basis: 47.5rem; width: calc(100% - 5rem);
justify-content: space-between;
padding: 0 1.25rem;
}
.header { .content {
max-width: 56.25rem; width: 100%;
width: calc(100% - 5rem); }
justify-content: space-between;
padding: 0 1.25rem;
}
.content {
max-width: 53.75rem;
width: calc(100% - 7.5rem);
}
// }
.right-panel { .right-panel {
.header { .header {