hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 11:31:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix Panel and Channels (#189)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-13 12:55:08 +03:00 committed by GitHub
parent ed3954e5da
commit 91b9543599
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/panel/src/components/Panel.svelte
View File

@ -64,15 +64,21 @@
</div>
<div class="title">{title}</div>
</div>
{#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
<div class="content"><ScrollBox vertical stretch><slot /></ScrollBox></div>
{#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
<div class="flex-col h-full scroll-container">
<ScrollBox vertical stretch>
<div class="flex-col content">
<slot />
</div>
</ScrollBox>
</div>
</div>
<div class="rightSection">
<div class="flex-row-center header">
<div class="icon"><IconActivity size={'small'} /></div>
<div class="title">Activity</div>
</div>
<div class="content">
<div class="flex-col h-full content">
<ScrollBox vertical stretch>
{#if comments}
<Grid column={1} rowGap={1.5}>
@ -97,14 +103,16 @@
</div>
<div class="title">{title}</div>
</div>
{#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
{#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
<ScrollBox vertical stretch noShift>
<div class="content"><slot /></div>
<div class="flex-col content">
<slot />
</div>
<div class="flex-row-center activity header">
<div class="icon"><IconActivity size={'small'} /></div>
<div class="title">Activity</div>
</div>
<div class="activity content">
<div class="flex-col activity content">
{#if comments}
<Grid column={1} rowGap={1.5}>
{#each comments as comment}
@ -160,8 +168,6 @@
.subtitle {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 2rem;
height: 3.5rem;
border-bottom: 1px solid var(--theme-card-divider);
@ -174,52 +180,56 @@
display: flex;
flex-direction: column;
height: max-content;
}
.content {
overflow: visible;
display: flex;
flex-direction: column;
padding: 1.5rem 2.5rem;
height: max-content;
}
.activity {
background-color: var(--theme-bg-accent-color);
&.header { border-bottom: none; }
&.content {
flex-grow: 1;
padding-bottom: 0;
.content {
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: 1.5rem 2.5rem;
height: max-content;
}
.activity {
background-color: var(--theme-bg-accent-color);
&.header { border-bottom: none; }
&.content {
flex-grow: 1;
padding-bottom: 0;
background-color: var(--theme-bg-accent-color);
}
}
}
.fullSize {
flex-direction: row;
left: 1.5rem;
}
.leftSection, .rightSection {
flex-basis: 50%;
display: flex;
flex-direction: column;
}
.leftSection {
border-right: 1px solid var(--theme-bg-accent-hover);
.leftSection, .rightSection {
flex-basis: 50%;
display: flex;
flex-direction: column;
}
.leftSection {
border-right: 1px solid var(--theme-bg-accent-hover);
.scroll-container {
flex-grow: 1;
padding: 2rem 2rem 1rem;
.content {
flex-grow: 1;
margin-top: 2.5rem;
}
}
.rightSection {
background-color: transparent;
.header { border-bottom: 1px solid var(--theme-card-divider); }
.content {
flex-grow: 1;
padding-top: 2.5rem;
padding-bottom: 0;
background-color: var(--theme-bg-accent-color);
padding: .5rem .5rem .5rem;
}
}
}
.rightSection {
background-color: transparent;
.header { border-bottom: 1px solid var(--theme-card-divider); }
.content {
flex-grow: 1;
padding: 2.5rem 2.5rem 0;
background-color: var(--theme-bg-accent-color);
}
}
.ref-input {
background-color: var(--theme-bg-accent-color);
padding: 1.5rem 2.5rem;

5
packages/presentation/src/components/Channels.svelte
View File

@ -74,7 +74,7 @@
<Icon icon={item.icon} size={'small'}/>
</div>
</div>
<div class="window">
<div class="window {reverse ? 'right' : 'left'}">
<div class="circle circle-icon">
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
</div>
@ -162,7 +162,6 @@
justify-content: space-between;
padding: 1rem;
top: 2.25rem;
right: 0;
min-width: 100%;
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-button-border-enabled);
@ -174,6 +173,8 @@
z-index: 4;
visibility: visible;
}
&.right { right: 0; }
&.left { left: 0; }
}
}
.label {

2
plugins/recruit-resources/src/components/EditCandidate.svelte
View File

@ -50,8 +50,8 @@
<Panel icon={Contact} title={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
<svelte:fragment slot="subtitle">
<div class="flex-between flex-reverse" style="width: 100%">
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
<Channels value={object.channels}/>
<CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
</div>
</svelte:fragment>