mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 19:11:33 +03:00
Update components layout, DoneStatesPopup (#906)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
04efff3b49
commit
a8fbdbecde
@ -451,6 +451,7 @@ a.no-line {
|
||||
.background-highlight-red { background-color: var(--highlight-red); }
|
||||
.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); }
|
||||
.background-menu-divider { background-color: var(--theme-menu-divider); }
|
||||
.background-card-divider { background-color: var(--theme-card-divider); }
|
||||
.background-primary-color { background-color: var(--primary-button-enabled); }
|
||||
.background-bg-accent { background-color: var(--theme-bg-accent-color); }
|
||||
|
||||
|
||||
80
packages/theme/styles/common.scss
Normal file
80
packages/theme/styles/common.scss
Normal file
@ -0,0 +1,80 @@
|
||||
//
|
||||
// Copyright © 2021 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
|
||||
/* Panels */
|
||||
.antiPanel-application {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 5rem;
|
||||
width: 5rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.antiPanel-navigator,
|
||||
.antiPanel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.indent { margin-right: 1rem; }
|
||||
&.filled { background-color: var(--theme-bg-color); }
|
||||
}
|
||||
.antiPanel-navigator {
|
||||
min-width: 18rem;
|
||||
max-width: 18rem;
|
||||
width: 18rem;
|
||||
}
|
||||
.antiPanel-component { flex-grow: 1; }
|
||||
|
||||
/* Navigation */
|
||||
.antiNav-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 1.5rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--theme-menu-divider);
|
||||
}
|
||||
.antiNav-scroll {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
max-height: 10rem;
|
||||
height: max-content;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem);
|
||||
|
||||
&::-webkit-scrollbar-track { margin: 0; }
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
&:hover { background-color: var(--theme-menu-divider); }
|
||||
}
|
||||
}
|
||||
.antiNav-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.antiNav-space {
|
||||
flex-shrink: 0;
|
||||
height: 1rem;
|
||||
}
|
||||
.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
|
||||
@ -90,174 +90,3 @@
|
||||
}
|
||||
}
|
||||
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
|
||||
|
||||
/* Popups */
|
||||
.antiPopup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
|
||||
user-select: none;
|
||||
|
||||
.ap-space {
|
||||
flex-shrink: 0;
|
||||
height: .5rem;
|
||||
}
|
||||
.ap-scroll {
|
||||
flex-grow: 1;
|
||||
margin: 0 .25rem;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar-track { margin: 0; }
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
&:hover { background-color: var(--theme-menu-divider); }
|
||||
}
|
||||
}
|
||||
.ap-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 .25rem;
|
||||
height: 100%;
|
||||
}
|
||||
.ap-menuItem {
|
||||
justify-content: start;
|
||||
padding: .5rem;
|
||||
color: var(--theme-content-color);
|
||||
border-radius: .5rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&.ap-woScroll { margin: 0 .5rem; }
|
||||
&.selected { background-color: var(--theme-button-bg-hovered); }
|
||||
&.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-style: italic;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-content-trans-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.ap-check {
|
||||
margin-left: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&-withHeader {
|
||||
.ap-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 .5rem;
|
||||
text-align: left;
|
||||
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 .75rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-withTitle {
|
||||
.ap-title {
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 1rem .25rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.ap-header {
|
||||
margin: .25rem 1rem 0;
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-withCategory {
|
||||
.ap-category {
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
margin: 1rem 1rem .25rem;
|
||||
|
||||
.ap-categoryItem {
|
||||
margin: .25rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected { color: var(--theme-caption-color); }
|
||||
&:hover { color: var(--theme-content-accent-color); }
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal { height: .125rem; }
|
||||
&::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
|
||||
}
|
||||
.ap-header {
|
||||
margin: .25rem 1rem 0;
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .popup .tr-body:hover { background-color: transparent !important; } // Remove highlights table rows in popups
|
||||
|
||||
/* Navigation */
|
||||
.antiNav-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 1.5rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--theme-menu-divider);
|
||||
}
|
||||
.antiNav-scroll {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
max-height: 10rem;
|
||||
height: max-content;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem);
|
||||
|
||||
&::-webkit-scrollbar-track { margin: 0; }
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
&:hover { background-color: var(--theme-menu-divider); }
|
||||
}
|
||||
}
|
||||
.antiNav-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.antiNav-space {
|
||||
flex-shrink: 0;
|
||||
height: 1rem;
|
||||
}
|
||||
.antiNav-topFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-bottomFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-bothFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem, rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100%); }
|
||||
.antiNav-noneFade { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1px, rgba(0, 0, 0, 1) calc(100% - 1px), rgba(0, 0, 0, 0) 100%); }
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
|
||||
@import "./_colors.scss";
|
||||
@import "./_layouts.scss";
|
||||
@import "./common.scss";
|
||||
@import "./components.scss";
|
||||
@import "./popups.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
@font-face {
|
||||
|
||||
151
packages/theme/styles/popups.scss
Normal file
151
packages/theme/styles/popups.scss
Normal file
@ -0,0 +1,151 @@
|
||||
//
|
||||
// Copyright © 2021 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
|
||||
/* Popups */
|
||||
.antiPopup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
|
||||
user-select: none;
|
||||
|
||||
.ap-space {
|
||||
flex-shrink: 0;
|
||||
height: .5rem;
|
||||
}
|
||||
.ap-scroll {
|
||||
flex-grow: 1;
|
||||
margin: 0 .25rem;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar-track { margin: 0; }
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
&:hover { background-color: var(--theme-menu-divider); }
|
||||
}
|
||||
}
|
||||
.ap-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 .25rem;
|
||||
height: 100%;
|
||||
}
|
||||
.ap-menuItem {
|
||||
justify-content: start;
|
||||
padding: .5rem;
|
||||
color: var(--theme-content-color);
|
||||
border-radius: .5rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&.ap-woScroll { margin: 0 .5rem; }
|
||||
&.selected { background-color: var(--theme-button-bg-hovered); }
|
||||
&.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-style: italic;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-content-trans-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.ap-check {
|
||||
margin-left: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&-withHeader {
|
||||
.ap-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 .5rem;
|
||||
text-align: left;
|
||||
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 .75rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-withTitle {
|
||||
.ap-title {
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 1rem .25rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.ap-header {
|
||||
margin: .25rem 1rem 0;
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-withCategory {
|
||||
.ap-category {
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
margin: 1rem 1rem .25rem;
|
||||
|
||||
.ap-categoryItem {
|
||||
margin: .25rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected { color: var(--theme-caption-color); }
|
||||
&:hover { color: var(--theme-content-accent-color); }
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal { height: .125rem; }
|
||||
&::-webkit-scrollbar-thumb { background-color: var(--theme-button-bg-hovered); }
|
||||
}
|
||||
.ap-header {
|
||||
margin: .25rem 1rem 0;
|
||||
.ap-caption {
|
||||
margin: .5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove highlights table rows and hide dots in popups
|
||||
.popup .tr-body:hover, .popup-tooltip .tr-body:hover { background-color: transparent !important; }
|
||||
.popup-tooltip .tr-body .menuRow { visibility: hidden !important; }
|
||||
@ -145,8 +145,8 @@
|
||||
<clipPath id="nub-border"><path d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z" /></clipPath>
|
||||
</svg>
|
||||
{#if $tooltip.component}
|
||||
<div class="popup" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
|
||||
{#if $tooltip.label}<div class="header"><Label label={$tooltip.label} /></div>{/if}
|
||||
<div class="popup-tooltip" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
|
||||
{#if $tooltip.label}<div class="fs-title mb-4"><Label label={$tooltip.label} /></div>{/if}
|
||||
<svelte:component this={$tooltip.component} {...$tooltip.props} />
|
||||
</div>
|
||||
<div bind:this={nubHTML} class="nub {nubDirection ?? ''}" />
|
||||
@ -157,14 +157,7 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.popup {
|
||||
.popup-tooltip {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
|
||||
@ -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,16 +69,6 @@
|
||||
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;
|
||||
@ -86,16 +76,6 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.navheader-container {
|
||||
padding: 0 1.75rem;
|
||||
height: 4rem;
|
||||
|
||||
@ -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"
|
||||
<button
|
||||
class="ap-menuItem ap-woScroll flex-row-center"
|
||||
on:click={() => {
|
||||
dispatch('close', null)
|
||||
}}
|
||||
>
|
||||
<div class="color" style="border: 0.5px #ffffff55 solid"/>
|
||||
<div class="color background-card-divider" />
|
||||
<Label label={task.string.NoDoneState}/>
|
||||
</div>
|
||||
</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;
|
||||
margin-right: .75rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-done {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user