mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-10 19:57:43 +02:00
Update components layout, DoneStatesPopup (#906)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
@@ -77,17 +77,6 @@
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.contacts-header-container {
|
||||
display: grid;
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} />
|
||||
</ScrollBox>
|
||||
@@ -65,17 +65,6 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.categories-header-container {
|
||||
display: grid;
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
@@ -83,11 +83,10 @@
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.panel-component {
|
||||
.antiPanel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
@@ -68,17 +68,6 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.customers-header-container {
|
||||
display: grid;
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
@@ -76,17 +76,6 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.candidates-header-container {
|
||||
display: grid;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-navigator">
|
||||
<div class="antiPanel-navigator filled indent">
|
||||
<div class="flex-between navheader-container">
|
||||
<span class="fs-title overflow-label">
|
||||
<Label label={setting.string.Settings}/>
|
||||
@@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component filled">
|
||||
{#if category}
|
||||
<Component is={category.component} />
|
||||
{/if}
|
||||
@@ -69,32 +69,12 @@
|
||||
height: 100%;
|
||||
background: var(--theme-menu-color);
|
||||
|
||||
.panel-navigator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
min-width: 18rem;
|
||||
width: 18rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
|
||||
.signout {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.panel-component {
|
||||
.signout {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.navheader-container {
|
||||
padding: 0 1.75rem;
|
||||
|
||||
@@ -65,14 +65,13 @@
|
||||
{#if state}
|
||||
<DoneStatePresenter value={state} showTitle />
|
||||
{:else}
|
||||
<div class="color"/>
|
||||
<div class="color background-card-divider"/>
|
||||
<Label label={task.string.NoDoneState} />
|
||||
{/if}
|
||||
</div>
|
||||
<style lang="scss">
|
||||
.color {
|
||||
border: 0.5px #ffffff55 solid;
|
||||
margin-right: 0.75rem;
|
||||
margin-right: .75rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@@ -42,58 +42,36 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex-col statuses-container">
|
||||
<div class="antiPopup">
|
||||
<div class="ap-space" />
|
||||
{#each states as state}
|
||||
<div
|
||||
class="flex-row-center 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}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
<div
|
||||
class="flex-row-center state"
|
||||
on:click={() => {
|
||||
dispatch('close', null)
|
||||
}}
|
||||
>
|
||||
<div class="color" style="border: 0.5px #ffffff55 solid"/>
|
||||
<Label label={task.string.NoDoneState}/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<style lang="scss">
|
||||
.statuses-container {
|
||||
padding: 0.5rem;
|
||||
max-height: 100%;
|
||||
min-width: 10rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: 0.75rem;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
|
||||
|
||||
.state {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
}
|
||||
.color {
|
||||
margin-right: 0.75rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-done {
|
||||
margin-left: 1.25rem;
|
||||
.color {
|
||||
margin-right: .75rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -234,12 +234,11 @@
|
||||
align-items: center;
|
||||
.menuRow {
|
||||
visibility: hidden;
|
||||
margin-left: 0.5rem;
|
||||
opacity: 0.6;
|
||||
margin-left: .5rem;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
.checkCell {
|
||||
|
||||
@@ -136,8 +136,8 @@
|
||||
<path d="M0,0v45h45V0H0z M29.5,20c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S32.3,20,29.5,20z" />
|
||||
</clipPath>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="panel-app" on:click={toggleNav}>
|
||||
<div class="workbench-container">
|
||||
<div class="antiPanel-application" on:click={toggleNav}>
|
||||
<div class="flex-col">
|
||||
<ActivityStatus status="active" />
|
||||
<AppItem
|
||||
@@ -162,14 +162,14 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if currentApplication && navigatorModel && navigator && visibileNav}
|
||||
<div class="panel-navigator antiNav">
|
||||
<div class="antiPanel-navigator filled indent">
|
||||
{#if currentApplication}
|
||||
<NavHeader label={currentApplication.label} />
|
||||
{/if}
|
||||
<Navigator model={navigatorModel} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="panel-component">
|
||||
<div class="antiPanel-component filled indent">
|
||||
{#if currentApplication && currentApplication.component}
|
||||
<Component is={currentApplication.component} />
|
||||
{:else}
|
||||
@@ -191,41 +191,9 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.workbench-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.panel-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 5rem;
|
||||
width: 5rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.panel-navigator {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
min-width: 18rem;
|
||||
width: 18rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
}
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user