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

Fix colors and Panel layout. Update popups. (#1346)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-04-09 10:01:07 +03:00 committed by GitHub
parent b5c6f649d0
commit 9b9c785da5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 102 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/theme/styles/panel.scss
View File

@ -18,9 +18,10 @@
overflow: hidden;
min-width: 400px;
background: var(--popup-bg-color);
background: var(--body-accent);
border-radius: .5rem;
flex-direction: row;
box-shadow: var(--popup-shadow);
// left: 1rem;
.ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }

1
packages/theme/styles/popups.scss
View File

@ -19,6 +19,7 @@
display: flex;
flex-direction: column;
width: min-content;
min-width: 10rem;
max-width: 45rem;
max-height: 20rem;
background: var(--popup-bg-color);

1
packages/ui/src/components/Panel.svelte
View File

@ -81,6 +81,7 @@
</div>
</div>
</div>
<style lang="scss">
.panel-content {
display: flex;

2
packages/ui/src/components/Scroller.svelte
View File

@ -323,7 +323,7 @@
width: 0;
height: 0;
// background-color: red;
background-color: var(--theme-bg-accent-color);
background-color: var(--body-color);
z-index: -1;
}
.fly-head {

6
plugins/activity-resources/src/components/Activity.svelte
View File

@ -109,7 +109,7 @@
</div>
</Scroller>
{#if showCommenInput}
<div class="ref-input fill">
<div class="ref-input">
<Component is={chunter.component.CommentInput} props={{ object }} />
</div>
{/if}
@ -129,14 +129,14 @@
padding: 1.5rem 2.5rem;
&.fill {
background-color: var(--theme-bg-accent-normal);
background-color: var(--body-color);
}
}
.p-activity {
padding: 1.5rem 2.5rem 2.5rem;
}
.scroller-back {
background-color: var(--theme-bg-accent-normal);
background-color: var(--body-accent);
}
:global(.grid .msgactivity-container:last-child::after) {

10
plugins/recruit-resources/src/components/CandidateCard.svelte
View File

@ -65,9 +65,15 @@
padding: 1rem 1.5rem 1.25rem;
background-color: 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 {
margin-bottom: 1.75rem;

14
plugins/recruit-resources/src/components/VacancyCard.svelte
View File

@ -62,9 +62,17 @@
<style lang="scss">
.card-container {
padding: 1rem 1.5rem 1.25rem;
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: .75rem;
background-color: var(--board-card-bg-color);
border: 1px solid var(--board-card-bg-color);
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 {
width: 5rem;

98
plugins/recruit-resources/src/components/review/EditReview.svelte
View File

@ -19,7 +19,7 @@
import { getClient, UserBox, UserBoxList } from '@anticrm/presentation'
import type { Review } from '@anticrm/recruit'
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 { createEventDispatcher, onMount } from 'svelte'
import recruit from '../../plugin'
@ -46,58 +46,56 @@
</script>
{#if object !== undefined}
<div class="mb-2">
<div class="mb-2">
<Grid column={2}>
<StylishEdit
label={calendar.string.Title}
bind:value={object.title}
on:change={() => client.update(object, { title: object.title })}
/>
<div class="antiComponentBox over-underline" on:click={() => {
if (candidate !== undefined) {
showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full')
}
}}>
<UserBox
readonly
_class={contact.class.Person}
label={recruit.string.Candidate}
placeholder={recruit.string.Candidates}
value={object.attachedTo}
/>
</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}
<Grid column={2}>
<EditBox
icon={recruit.icon.Review}
label={calendar.string.Title}
maxWidth={'20rem'}
bind:value={object.title}
on:change={() => client.update(object, { title: object.title })}
/>
<div class="clear-mins" on:click={() => {
if (candidate !== undefined) {
showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full')
}
}}>
<UserBox
readonly
_class={contact.class.Person}
label={recruit.string.Candidate}
placeholder={recruit.string.Candidates}
value={object.attachedTo}
kind={'link'} size={'x-large'} justify={'left'} width={'100%'}
/>
</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>
<StylishEdit
label={recruit.string.Verdict}
bind:value={object.verdict}

39
plugins/task-resources/src/components/state/DoneStatesPopup.svelte
View File

@ -43,33 +43,26 @@
}
</script>
<div class="antiPopup">
<div class="ap-space" />
{#each states as state}
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', state)
}}
>
<div class="color" style="background-color: {getColor(state._class)}" />
{state.title}
</button>
{/each}
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', null)
}}
>
<div class="color background-card-divider" />
<Label label={task.string.NoDoneState}/>
</button>
<div class="ap-space" />
<div class="selectPopup">
<div class="scroll">
<div class="box">
{#each states as state}
<button class="menu-item" on:click={() => { dispatch('close', state) }}>
<div class="color" style="background-color: {getColor(state._class)}" />
<span class="label">{state.title}</span>
</button>
{/each}
<button class="menu-item" on:click={() => { dispatch('close', null) }}>
<div class="color background-card-divider" />
<Label label={task.string.NoDoneState}/>
</button>
</div>
</div>
</div>
<style lang="scss">
.color {
flex-shrink: 0;
margin-right: .75rem;
width: .5rem;
height: .5rem;

25
plugins/task-resources/src/components/state/StatesPopup.svelte
View File

@ -38,20 +38,17 @@
)
</script>
<div class="antiPopup">
<div class="ap-space" />
{#each states as state}
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', state)
}}
>
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
{state.title}
</button>
{/each}
<div class="ap-space" />
<div class="selectPopup">
<div class="scroll">
<div class="box">
{#each states as state}
<button class="menu-item" on:click={() => { dispatch('close', state) }}>
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
<span class="label">{state.title}</span>
</button>
{/each}
</div>
</div>
</div>
<style lang="scss">