Update Login. Fix warnings. (#2300)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-10-13 07:54:38 +03:00 committed by GitHub
parent bda16877d9
commit 009865fe33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 152 additions and 362 deletions

View File

@ -668,6 +668,9 @@ a.no-line {
box-shadow: 0 0 0 3px var(--primary-button-outline);
& > .icon { color: var(--theme-caption-color); }
}
&.bordered,
&.bordered:hover { border-color: var(--theme-button-border-pressed); }
}
.overflow-x-auto { overflow-x: auto; }

View File

@ -20,7 +20,7 @@
onDestroy(() => clearInterval(interval))
</script>
<div>
<div style="min-width: 2.5rem">
<span>{hours}</span>
<span style="visibility: {delimiter ? 'visible' : 'hidden'}">:</span>
<span>{minutes}</span>

View File

@ -42,7 +42,7 @@
export let viewlets: Map<ActivityKey, TxViewlet>
export let showIcon: boolean = true
export let isNew: boolean = false
export let showDocument = false
// export let showDocument = false
let ptx: DisplayTx | undefined

View File

@ -19,7 +19,7 @@
import { ContextMenu } from '@hcengineering/view-resources'
export let requests: Request[]
export let date: Date
// export let date: Date
export let editable: boolean = false
const client = getClient()

View File

@ -133,89 +133,3 @@
<Label label={hr.string.NoEmployeesInDepartment} />
</div>
{/if}
<style lang="scss">
table {
position: relative;
width: 100%;
td,
th {
width: auto;
width: 2rem;
min-width: 1.5rem;
border: none;
&.fixed {
width: 5rem;
padding: 0 0.125rem;
hyphens: auto;
}
&:first-child {
width: 15rem;
padding: 0.5rem;
}
}
th {
flex-shrink: 0;
padding: 0;
height: 2.5rem;
min-height: 2.5rem;
max-height: 2.5rem;
text-transform: uppercase;
font-weight: 500;
font-size: 0.75rem;
line-height: 105%;
color: var(--dark-color);
box-shadow: inset 0 -1px 0 0 var(--divider-color);
user-select: none;
cursor: pointer;
span {
display: block;
font-weight: 600;
font-size: 1rem;
}
&.today {
color: var(--caption-color);
}
&.weekend:not(.today) {
color: var(--warning-color);
}
}
td {
height: 3.5rem;
border: none;
color: var(--caption-color);
&.today {
background-color: var(--theme-bg-accent-hover);
}
&.weekend:not(.today) {
background-color: var(--theme-bg-accent-color);
}
}
td:not(:last-child) {
border-right: 1px solid var(--divider-color);
}
tr:not(.scroller-thead__tr) {
border-bottom: 1px solid var(--divider-color);
}
tr.scroller-thead__tr:not(:last-child) {
border-right: 1px solid var(--divider-color);
}
.hovered {
position: relative;
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--caption-color);
opacity: 0.15;
}
}
}
</style>

View File

@ -242,89 +242,3 @@
<Label label={hr.string.NoEmployeesInDepartment} />
</div>
{/if}
<style lang="scss">
table {
position: relative;
width: 100%;
td,
th {
width: auto;
width: 2rem;
min-width: 1.5rem;
border: none;
&.fixed {
width: 5rem;
padding: 0 0.125rem;
hyphens: auto;
}
&:first-child {
width: 15rem;
padding: 0.5rem;
}
}
th {
flex-shrink: 0;
padding: 0;
height: 2.5rem;
min-height: 2.5rem;
max-height: 2.5rem;
text-transform: uppercase;
font-weight: 500;
font-size: 0.75rem;
line-height: 105%;
color: var(--dark-color);
box-shadow: inset 0 -1px 0 0 var(--divider-color);
user-select: none;
cursor: pointer;
span {
display: block;
font-weight: 600;
font-size: 1rem;
}
&.today {
color: var(--caption-color);
}
&.weekend:not(.today) {
color: var(--warning-color);
}
}
td {
height: 3.5rem;
border: none;
color: var(--caption-color);
&.today {
background-color: var(--theme-bg-accent-hover);
}
&.weekend:not(.today) {
background-color: var(--theme-bg-accent-color);
}
}
td:not(:last-child) {
border-right: 1px solid var(--divider-color);
}
tr:not(.scroller-thead__tr) {
border-bottom: 1px solid var(--divider-color);
}
tr.scroller-thead__tr:not(:last-child) {
border-right: 1px solid var(--divider-color);
}
.hovered {
position: relative;
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--caption-color);
opacity: 0.15;
}
}
}
</style>

View File

@ -191,11 +191,6 @@
width: 2rem;
min-width: 1.5rem;
border: none;
&.fixed {
width: 5rem;
padding: 0 0.125rem;
hyphens: auto;
}
&:first-child {
width: 15rem;
padding: 0.5rem;

View File

@ -187,9 +187,6 @@
&.today {
color: var(--caption-color);
}
&.weekend:not(.today) {
color: var(--warning-color);
}
}
td {
height: 3.5rem;
@ -198,9 +195,6 @@
&.today {
background-color: var(--theme-bg-accent-hover);
}
&.weekend:not(.today) {
background-color: var(--theme-bg-accent-color);
}
}
td:not(:last-child) {
border-right: 1px solid var(--divider-color);
@ -211,20 +205,5 @@
tr.scroller-thead__tr:not(:last-child) {
border-right: 1px solid var(--divider-color);
}
.hovered {
position: relative;
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--caption-color);
opacity: 0.15;
}
}
}
</style>

View File

@ -14,7 +14,7 @@
// limitations under the License.
-->
<script lang="ts">
import { StylishEdit, Label, Button, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
import { StylishEdit, Label, Button, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
import StatusControl from './StatusControl.svelte'
import { OK, Status, Severity } from '@hcengineering/platform'
import type { IntlString } from '@hcengineering/platform'
@ -107,49 +107,51 @@
<div class="status">
<StatusControl {status} />
</div>
<div class="form">
{#each fields as field (field.name)}
<div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
<StylishEdit
label={field.i18n}
name={field.id}
password={field.password}
bind:value={object[field.name]}
on:input={validate}
on:blur={() => {
trim(field.name)
}}
/>
</div>
{/each}
<Scroller padding={'.125rem 0'}>
<div class="form">
{#each fields as field (field.name)}
<div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
<StylishEdit
label={field.i18n}
name={field.id}
password={field.password}
bind:value={object[field.name]}
on:input={validate}
on:blur={() => {
trim(field.name)
}}
/>
</div>
{/each}
<div class="form-row send">
<Button
label={action.i18n}
kind={'primary'}
size={'x-large'}
width="100%"
loading={inAction}
disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
on:click={(e) => {
e.preventDefault()
performAction(action)
}}
/>
</div>
{#if secondaryButtonLabel && secondaryButtonAction}
<div class="form-row">
<div class="form-row send">
<Button
label={secondaryButtonLabel}
label={action.i18n}
kind={'primary'}
size={'x-large'}
width="100%"
loading={inAction}
disabled={status.severity !== Severity.OK && status.severity !== Severity.ERROR}
on:click={(e) => {
e.preventDefault()
secondaryButtonAction?.()
performAction(action)
}}
/>
</div>
{/if}
</div>
{#if secondaryButtonLabel && secondaryButtonAction}
<div class="form-row">
<Button
label={secondaryButtonLabel}
width="100%"
on:click={(e) => {
e.preventDefault()
secondaryButtonAction?.()
}}
/>
</div>
{/if}
</div>
</Scroller>
{#if bottomCaption || (bottomActionLabel && bottomActionFunc)}
<div class="grow-separator" />
<div class="footer">

View File

@ -16,10 +16,11 @@
<script lang="ts">
import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
export let size: 'small' | 'medium' = 'medium'
export let landscape: boolean = false
export let mini: boolean = false
</script>
<div class="intro">
<div class="intro" class:landscape class:mini>
<div class="content">
<div class="logo {$deviceInfo.theme === 'theme-light' ? 'dark' : 'light'}" />
</div>
@ -44,12 +45,16 @@
justify-content: center;
align-items: center;
flex-grow: 1;
transition: all 0.15s var(--timing-main);
.logo {
position: relative;
&::after {
&::after,
&::before {
position: absolute;
content: '';
transform: translate(-50%, -50%);
}
&::after {
width: 63px;
height: 79px;
}
@ -60,9 +65,6 @@
background: center url('../../img/logo-dark.svg');
}
&::before {
position: absolute;
content: '';
transform: translate(-50%, -50%);
width: 16rem;
height: 16rem;
border: 1.8px solid var(--caption-color);
@ -72,6 +74,7 @@
}
}
.slogan {
transition: all 0.15s var(--timing-main);
margin-bottom: 60px;
p {
margin: 0;
@ -82,5 +85,52 @@
opacity: 0.8;
}
}
&.landscape {
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 20rem;
min-height: 10rem;
margin-bottom: 1.25rem;
.content .logo::after,
.content .logo::before {
transform: translate(-50%, -50%) scale(0.5);
}
.content {
max-width: 8rem;
max-height: 10rem;
margin: 0 1rem 0 0;
}
.slogan {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 0 0 1rem;
}
&.mini {
min-width: 16rem;
min-height: 8rem;
.content .logo::after,
.content .logo::before {
transform: translate(-50%, -50%) scale(0.35);
}
.content {
max-width: 5.5rem;
max-height: 8rem;
margin: 0 0.5rem 0 0;
}
.slogan {
margin: 0 0 0 0.5rem;
p {
font-size: 0.6rem;
}
}
}
}
}
</style>

View File

@ -47,9 +47,11 @@
<Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
<div
class="panel"
class:minHeight={!$deviceInfo.isPortrait}
class:landscape={$deviceInfo.docWidth > 768}
style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
>
<div class="flex-grow" />
{#if page === 'login'}
<LoginForm {navigateUrl} />
{:else if page === 'signup'}
@ -62,7 +64,7 @@
<Join />
{/if}
</div>
<Intro />
<Intro landscape={$deviceInfo.docWidth <= 768} mini={$deviceInfo.docWidth <= 480} />
</Scroller>
<Popup />
@ -71,11 +73,14 @@
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
height: max-content;
height: 100%;
background: var(--popup-bg-color);
box-shadow: var(--popup-aside-shadow);
&.minHeight {
min-height: 40rem;
}
$circle-size: calc(1vh + 1vw);
$r1: 23;
$r2: 17;
@ -87,16 +92,18 @@
z-index: -1;
}
&::before {
top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 4);
left: calc(-1 * $circle-size * $r1 / 2);
top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 5);
left: auto;
right: calc(-1 * $circle-size * $r1 / 2);
width: calc($circle-size * $r1);
height: calc($circle-size * $r1);
border: 1px solid var(--content-color);
opacity: 0.05;
}
&::after {
top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 4);
left: calc(-1 * $circle-size * $r2 / 2);
top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 5);
left: auto;
right: calc(-1 * $circle-size * $r2 / 2);
width: calc($circle-size * $r2);
height: calc($circle-size * $r2);
background: var(--dark-color);
@ -106,6 +113,14 @@
&.landscape {
margin-right: 1.25rem;
width: 41.75rem;
&::before {
left: calc(-1 * $circle-size * $r1 / 2);
right: auto;
}
&::after {
left: calc(-1 * $circle-size * $r2 / 2);
right: auto;
}
}
}
</style>

View File

@ -22,7 +22,9 @@
Label,
Location,
navigate,
setMetadataLocalStorage
setMetadataLocalStorage,
deviceOptionsStore as deviceInfo,
Scroller
} from '@hcengineering/ui'
import { workbenchId } from '@hcengineering/workbench'
import login from '../plugin'
@ -84,28 +86,30 @@
}
</script>
<form class="container">
<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
<div class="grow-separator" />
<div class="title"><Label label={login.string.SelectWorkspace} /></div>
<div class="status">
<StatusControl {status} />
</div>
{#await _getWorkspaces() then workspaces}
<div class="form">
{#each workspaces as workspace}
<div
class="workspace flex-center fs-title cursor-pointer focused-button form-row"
on:click={() => select(workspace.workspace)}
>
{workspace.workspace}
</div>
{/each}
{#if !workspaces.length}
<div class="form-row send">
<Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
</div>
{/if}
</div>
<Scroller padding={'.125rem 0'}>
<div class="form">
{#each workspaces as workspace}
<div
class="workspace flex-center fs-title cursor-pointer focused-button bordered form-row"
on:click={() => select(workspace.workspace)}
>
{workspace.workspace}
</div>
{/each}
{#if !workspaces.length}
<div class="form-row send">
<Button label={login.string.CreateWorkspace} kind={'primary'} width="100%" on:click={createWorkspace} />
</div>
{/if}
</div>
</Scroller>
<div class="grow-separator" />
<div class="footer">
{#if workspaces.length}
@ -127,9 +131,8 @@
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
overflow: hidden;
height: 100%;
padding: 5rem;
.title {
font-weight: 600;

View File

@ -155,12 +155,6 @@
font-size: 0.75rem;
}
.name {
font-weight: 500;
font-size: 1.25rem;
color: var(--theme-caption-color);
}
.separator {
margin: 1rem 0;
height: 1px;

View File

@ -8,9 +8,5 @@
white-space: nowrap;
overflow: hidden;
flex-shrink: 10;
&.with-margin {
margin-left: 0.5rem;
}
}
</style>

View File

@ -119,10 +119,6 @@
height: 1rem;
color: var(--content-color);
}
.label {
font-weight: 500;
color: var(--accent-color);
}
&:hover {
.icon {
color: var(--caption-color) !important;

View File

@ -29,35 +29,3 @@
{/if}
{/each}
</div>
<style lang="scss">
.tag-container {
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
padding-left: 0.5rem;
height: 1.5rem;
min-width: 0;
min-height: 0;
border-radius: 0.5rem;
width: fit-content;
&:hover {
border: 1px solid var(--divider-color);
}
.btn-close {
flex-shrink: 0;
margin-left: 0.125rem;
padding: 0 0.25rem 0 0.125rem;
height: 1.75rem;
color: var(--content-color);
border-left: 1px solid transparent;
&:hover {
color: var(--caption-color);
border-left-color: var(--divider-color);
}
}
}
</style>

View File

@ -89,14 +89,3 @@
</div>
{/if}
</div>
<style lang="scss">
.list {
border-top: 1px solid var(--divider-color);
&.collapsed {
padding-top: 1px;
border-top: none;
}
}
</style>

View File

@ -49,14 +49,3 @@
<Spinner />
</div>
{/if}
<style lang="scss">
.list {
border-top: 1px solid var(--divider-color);
&.collapsed {
padding-top: 1px;
border-top: none;
}
}
</style>

View File

@ -56,14 +56,3 @@
<Spinner />
</div>
{/if}
<style lang="scss">
.list {
border-top: 1px solid var(--divider-color);
&.collapsed {
padding-top: 1px;
border-top: none;
}
}
</style>

View File

@ -199,7 +199,7 @@
}
}
.filterButton {
color: var(--caption-color);
}
// .filterButton {
// color: var(--caption-color);
// }
</style>

View File

@ -92,9 +92,3 @@
</div>
</svelte:fragment>
</IssuesView>
<style lang="scss">
.showWarning {
color: var(--warning-color) !important;
}
</style>

View File

@ -212,7 +212,7 @@
}
}
.filterButton {
color: var(--caption-color);
}
// .filterButton {
// color: var(--caption-color);
// }
</style>

View File

@ -22,7 +22,7 @@
export let placeholder: IntlString
export let value: number | undefined
export let focus: boolean
export let maxWidth: string = '10rem'
// export let maxWidth: string = '10rem'
export let onChange: (value: number | undefined) => void
export let kind: 'no-border' | 'link' = 'no-border'
export let readonly = false

View File

@ -23,7 +23,7 @@
import { createEventDispatcher, onDestroy } from 'svelte'
import view from '../../plugin'
export let _class: Ref<Class<Doc>>
// export let _class: Ref<Class<Doc>>
export let filter: Filter
$: currentFilter = filter.nested ? filter.nested : filter