wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-07 00:09:34 +00:00
Code Issues Actions 2 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; 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); }

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

@ -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);

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

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

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

@ -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 {

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

@ -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) {

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

@ -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;

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

@ -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;

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

@ -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}

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

@ -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;

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

@ -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">