Move StatusControl for Login, add error in Card (#206)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/Card.svelte

@@ -43,6 +43,11 @@
     <div class="overflow-label label"><Label {label} /></div>
     <div class="tool"><Button disabled={!canSave} label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
   </div>
+  {#if $$slots.error}
+    <div class="flex-center error">
+      <slot name="error" />
+    </div>
+  {/if}
   <div class="content"><slot /></div>
   <div class="flex-col pool" class:shrink={$$slots.contacts}>
     <div class="separator" />
@@ -76,6 +81,18 @@
       .tool { margin-left: .75rem; }
     }
 
+    .error {
+      margin-bottom: 1rem;
+      padding: .75rem 0;
+      color: var(--system-error-color);
+      background-color: var(--theme-card-bg-accent);
+      &:empty {
+        visibility: hidden;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
     .content {
       flex-shrink: 0;
       flex-grow: 1;

packages/ui/src/components/Status.svelte

@@ -3,12 +3,12 @@
   import { Severity } from '@anticrm/platform'
 
   import Info from './icons/Info.svelte'
-  import Label from '../Label.svelte'
+  import Label from './Label.svelte'
 
   export let status: Status
 </script>
 
-<div class="flex-center container">
+<div class="flex-center container {status.severity}">
   {#if status.severity !== Severity.OK}
     <Info size={'small'}/>
     <span><Label label={status.code} params={status.params}/></span>
@@ -18,9 +18,9 @@
 <style lang="scss">
   .container {
     user-select: none;
-    span {
-      margin-left: 0.75em;
-      color: var(--theme-content-color);
-    }
+    color: var(--theme-content-color);
+    span { margin-left: .75em; }
+    &.WARNING { color: yellow; }
+    &.ERROR { color: var(--system-error-color); }
   }
 </style>

packages/ui/src/components/icons/Info.svelte

@@ -15,7 +15,7 @@
 
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-content-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

packages/ui/src/components/internal/Root.svelte

@@ -9,7 +9,7 @@
   import { Theme } from '@anticrm/theme'
   import Component from '../Component.svelte'
 
-  import StatusComponent from './Status.svelte'
+  import StatusComponent from '../Status.svelte'
   import Clock from './Clock.svelte'
   // import Mute from './icons/Mute.svelte'
   import WiFi from './icons/WiFi.svelte'

packages/ui/src/index.ts

@@ -28,7 +28,7 @@ export { getCurrentLocation, navigate, location } from './location'
 export { default as EditBox } from './components/EditBox.svelte'
 export { default as Label } from './components/Label.svelte'
 export { default as Button } from './components/Button.svelte'
-export { default as StatusControl } from './components/StatusControl.svelte'
+export { default as Status } from './components/Status.svelte'
 export { default as Component } from './components/Component.svelte'
 export { default as Icon } from './components/Icon.svelte'
 export { default as ActionIcon } from './components/ActionIcon.svelte'

plugins/login-resources/src/components/Form.svelte

@@ -14,7 +14,8 @@
 -->
 
 <script lang="ts">
-  import { StylishEdit, Label, Button, StatusControl } from '@anticrm/ui'
+  import { StylishEdit, Label, Button } from '@anticrm/ui'
+  import StatusControl from './StatusControl.svelte'
   import { OK, Status, Severity } from '@anticrm/platform'
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
@@ -69,7 +70,7 @@
   <div class="grow-separator"/>
   <div class="title"><Label label={caption}/></div>
   <div class="status">
-    <StatusControl {status} width="100%"/>
+    <StatusControl {status} />
   </div>
   <div class="form">
 

plugins/login-resources/src/components/StatusControl.svelte

@@ -17,7 +17,7 @@
   import type { Status } from '@anticrm/platform'
   import { Severity } from '@anticrm/platform'
 
-  import StatusControl from './internal/Status.svelte'
+  import { Status as StatusControl } from '@anticrm/ui'
 
   export let status: Status
 </script>

plugins/recruit-resources/src/components/CreateApplication.svelte

@@ -17,7 +17,7 @@
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
   import { Status, OK, Severity } from '@anticrm/platform'
-  import { DatePicker, EditBox, Tabs, Section, Grid, StatusControl } from '@anticrm/ui'
+  import { DatePicker, EditBox, Tabs, Section, Grid, Status as StatusControl } from '@anticrm/ui'
   import { UserBox, Card, UserInfo, Avatar } from '@anticrm/presentation'
   import type { Employee, Person } from '@anticrm/contact'
   import type { Candidate } from '@anticrm/recruit'
@@ -84,7 +84,11 @@
       spacePlaceholder={'Select vacancy'}
       bind:space={_space}
       on:close={() => { dispatch('close') }}>
-  <StatusControl {status}/>
+  <svelte:fragment slot="error">
+    {#if status !== OK}
+      <StatusControl {status} />
+    {/if}
+  </svelte:fragment>
   <Grid column={1} rowGap={1.75}>
     {#if !preserveCandidate}
       <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} />