Update components layout, DoneStatesPopup (#906)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2022-02-02 10:05:33 +01:00
committed by GitHub
parent 04efff3b49
commit a8fbdbecde
16 changed files with 281 additions and 346 deletions
@@ -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>