mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-05 15:24:22 +00:00
Fix colors and Panel layout. Update popups. (#1346)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
b5c6f649d0
commit
9b9c785da5
@ -18,9 +18,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
|
|
||||||
background: var(--popup-bg-color);
|
background: var(--body-accent);
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
box-shadow: var(--popup-shadow);
|
||||||
// left: 1rem;
|
// left: 1rem;
|
||||||
|
|
||||||
.ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }
|
.ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: min-content;
|
width: min-content;
|
||||||
|
min-width: 10rem;
|
||||||
max-width: 45rem;
|
max-width: 45rem;
|
||||||
max-height: 20rem;
|
max-height: 20rem;
|
||||||
background: var(--popup-bg-color);
|
background: var(--popup-bg-color);
|
||||||
|
@ -81,6 +81,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.panel-content {
|
.panel-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -323,7 +323,7 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
background-color: var(--theme-bg-accent-color);
|
background-color: var(--body-color);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.fly-head {
|
.fly-head {
|
||||||
|
@ -109,7 +109,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</Scroller>
|
</Scroller>
|
||||||
{#if showCommenInput}
|
{#if showCommenInput}
|
||||||
<div class="ref-input fill">
|
<div class="ref-input">
|
||||||
<Component is={chunter.component.CommentInput} props={{ object }} />
|
<Component is={chunter.component.CommentInput} props={{ object }} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@ -129,14 +129,14 @@
|
|||||||
padding: 1.5rem 2.5rem;
|
padding: 1.5rem 2.5rem;
|
||||||
|
|
||||||
&.fill {
|
&.fill {
|
||||||
background-color: var(--theme-bg-accent-normal);
|
background-color: var(--body-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.p-activity {
|
.p-activity {
|
||||||
padding: 1.5rem 2.5rem 2.5rem;
|
padding: 1.5rem 2.5rem 2.5rem;
|
||||||
}
|
}
|
||||||
.scroller-back {
|
.scroller-back {
|
||||||
background-color: var(--theme-bg-accent-normal);
|
background-color: var(--body-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.grid .msgactivity-container:last-child::after) {
|
:global(.grid .msgactivity-container:last-child::after) {
|
||||||
|
@ -65,9 +65,15 @@
|
|||||||
padding: 1rem 1.5rem 1.25rem;
|
padding: 1rem 1.5rem 1.25rem;
|
||||||
background-color: var(--board-card-bg-color);
|
background-color: var(--board-card-bg-color);
|
||||||
border: 1px solid var(--board-card-bg-color);
|
border: 1px solid var(--board-card-bg-color);
|
||||||
border-radius: .25rem;
|
border-radius: .5rem;
|
||||||
|
transition-property: box-shadow, background-color;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: .15s;
|
||||||
|
|
||||||
&:hover { background-color: var(--board-card-bg-hover); }
|
&:hover {
|
||||||
|
background-color: var(--board-card-bg-hover);
|
||||||
|
box-shadow: var(--popup-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-bottom: 1.75rem;
|
margin-bottom: 1.75rem;
|
||||||
|
@ -62,9 +62,17 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.card-container {
|
.card-container {
|
||||||
padding: 1rem 1.5rem 1.25rem;
|
padding: 1rem 1.5rem 1.25rem;
|
||||||
background-color: var(--theme-button-bg-enabled);
|
background-color: var(--board-card-bg-color);
|
||||||
border: 1px solid var(--theme-bg-accent-color);
|
border: 1px solid var(--board-card-bg-color);
|
||||||
border-radius: .75rem;
|
border-radius: .5rem;
|
||||||
|
transition-property: box-shadow, background-color;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: .15s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--board-card-bg-hover);
|
||||||
|
box-shadow: var(--popup-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
import { getClient, UserBox, UserBoxList } from '@anticrm/presentation'
|
import { getClient, UserBox, UserBoxList } from '@anticrm/presentation'
|
||||||
import type { Review } from '@anticrm/recruit'
|
import type { Review } from '@anticrm/recruit'
|
||||||
import { StyledTextBox } from '@anticrm/text-editor'
|
import { StyledTextBox } from '@anticrm/text-editor'
|
||||||
import { Grid, Label, showPanel, StylishEdit } from '@anticrm/ui'
|
import { Grid, Label, showPanel, StylishEdit, EditBox } from '@anticrm/ui'
|
||||||
import view from '@anticrm/view'
|
import view from '@anticrm/view'
|
||||||
import { createEventDispatcher, onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
import recruit from '../../plugin'
|
import recruit from '../../plugin'
|
||||||
@ -46,58 +46,56 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if object !== undefined}
|
{#if object !== undefined}
|
||||||
<div class="mb-2">
|
<Grid column={2}>
|
||||||
<div class="mb-2">
|
<EditBox
|
||||||
<Grid column={2}>
|
icon={recruit.icon.Review}
|
||||||
<StylishEdit
|
label={calendar.string.Title}
|
||||||
label={calendar.string.Title}
|
maxWidth={'20rem'}
|
||||||
bind:value={object.title}
|
bind:value={object.title}
|
||||||
on:change={() => client.update(object, { title: object.title })}
|
on:change={() => client.update(object, { title: object.title })}
|
||||||
/>
|
/>
|
||||||
<div class="antiComponentBox over-underline" on:click={() => {
|
<div class="clear-mins" on:click={() => {
|
||||||
if (candidate !== undefined) {
|
if (candidate !== undefined) {
|
||||||
showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full')
|
showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full')
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<UserBox
|
<UserBox
|
||||||
readonly
|
readonly
|
||||||
_class={contact.class.Person}
|
_class={contact.class.Person}
|
||||||
label={recruit.string.Candidate}
|
label={recruit.string.Candidate}
|
||||||
placeholder={recruit.string.Candidates}
|
placeholder={recruit.string.Candidates}
|
||||||
value={object.attachedTo}
|
value={object.attachedTo}
|
||||||
/>
|
kind={'link'} size={'x-large'} justify={'left'} width={'100%'}
|
||||||
</div>
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 mb-2">
|
|
||||||
<StyledTextBox
|
|
||||||
label={recruit.string.Description}
|
|
||||||
emphasized
|
|
||||||
content={object.description}
|
|
||||||
on:value={(evt) => {
|
|
||||||
client.update(object, { description: evt.detail })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row">
|
|
||||||
<div class="mt-4 mb-2">
|
|
||||||
<Label label={calendar.string.Participants} />
|
|
||||||
</div>
|
|
||||||
<UserBoxList
|
|
||||||
_class={contact.class.Employee}
|
|
||||||
items={object.participants}
|
|
||||||
title={calendar.string.Participants}
|
|
||||||
on:open={(evt) => {
|
|
||||||
client.update(object, { $push: { participants: evt.detail._id } })
|
|
||||||
}}
|
|
||||||
on:delete={(evt) => {
|
|
||||||
client.update(object, { $pull: { participants: evt.detail._id } })
|
|
||||||
}}
|
|
||||||
noItems={calendar.string.NoParticipants}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</Grid>
|
||||||
|
<div class="mt-4 mb-4">
|
||||||
|
<StyledTextBox
|
||||||
|
label={recruit.string.Description}
|
||||||
|
emphasized
|
||||||
|
content={object.description}
|
||||||
|
on:value={(evt) => {
|
||||||
|
client.update(object, { description: evt.detail })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row mb-2">
|
||||||
|
<Label label={calendar.string.Participants} />
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<UserBoxList
|
||||||
|
_class={contact.class.Employee}
|
||||||
|
items={object.participants}
|
||||||
|
title={calendar.string.Participants}
|
||||||
|
on:open={(evt) => {
|
||||||
|
client.update(object, { $push: { participants: evt.detail._id } })
|
||||||
|
}}
|
||||||
|
on:delete={(evt) => {
|
||||||
|
client.update(object, { $pull: { participants: evt.detail._id } })
|
||||||
|
}}
|
||||||
|
noItems={calendar.string.NoParticipants}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<StylishEdit
|
<StylishEdit
|
||||||
label={recruit.string.Verdict}
|
label={recruit.string.Verdict}
|
||||||
bind:value={object.verdict}
|
bind:value={object.verdict}
|
||||||
|
@ -43,33 +43,26 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="antiPopup">
|
<div class="selectPopup">
|
||||||
<div class="ap-space" />
|
<div class="scroll">
|
||||||
{#each states as state}
|
<div class="box">
|
||||||
<button
|
{#each states as state}
|
||||||
class="ap-menuItem ap-woScroll flex-row-center"
|
<button class="menu-item" on:click={() => { dispatch('close', state) }}>
|
||||||
on:click={() => {
|
<div class="color" style="background-color: {getColor(state._class)}" />
|
||||||
dispatch('close', state)
|
<span class="label">{state.title}</span>
|
||||||
}}
|
</button>
|
||||||
>
|
{/each}
|
||||||
<div class="color" style="background-color: {getColor(state._class)}" />
|
<button class="menu-item" on:click={() => { dispatch('close', null) }}>
|
||||||
{state.title}
|
<div class="color background-card-divider" />
|
||||||
</button>
|
<Label label={task.string.NoDoneState}/>
|
||||||
{/each}
|
</button>
|
||||||
<button
|
</div>
|
||||||
class="ap-menuItem ap-woScroll flex-row-center"
|
</div>
|
||||||
on:click={() => {
|
|
||||||
dispatch('close', null)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="color background-card-divider" />
|
|
||||||
<Label label={task.string.NoDoneState}/>
|
|
||||||
</button>
|
|
||||||
<div class="ap-space" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.color {
|
.color {
|
||||||
|
flex-shrink: 0;
|
||||||
margin-right: .75rem;
|
margin-right: .75rem;
|
||||||
width: .5rem;
|
width: .5rem;
|
||||||
height: .5rem;
|
height: .5rem;
|
||||||
|
@ -38,20 +38,17 @@
|
|||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="antiPopup">
|
<div class="selectPopup">
|
||||||
<div class="ap-space" />
|
<div class="scroll">
|
||||||
{#each states as state}
|
<div class="box">
|
||||||
<button
|
{#each states as state}
|
||||||
class="ap-menuItem ap-woScroll flex-row-center"
|
<button class="menu-item" on:click={() => { dispatch('close', state) }}>
|
||||||
on:click={() => {
|
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
|
||||||
dispatch('close', state)
|
<span class="label">{state.title}</span>
|
||||||
}}
|
</button>
|
||||||
>
|
{/each}
|
||||||
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
|
</div>
|
||||||
{state.title}
|
</div>
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
<div class="ap-space" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
Loading…
Reference in New Issue
Block a user