Add strings in @anticrm/presentation. DoneState centered (#668)

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

packages/presentation/lang/en.json

@@ -0,0 +1,12 @@
+{
+  "string": {
+    "Create": "Create",
+    "Cancel": "Cancel",
+    "Ok": "Ok",
+    "Download": "Download",
+    "Delete": "Delete",
+    "Suggested": "Suggested",
+    "NotSelected": "Not selected",
+    "Deselect": "Deselect"
+  }
+}

packages/presentation/src/components/Card.svelte

@@ -24,6 +24,7 @@
   // import ScrollBox from './ScrollBox.svelte'
   import { Button, Label } from '@anticrm/ui'
   import SpaceSelect from './SpaceSelect.svelte'
+  import presentation from '..'
 
   export let spaceClass: Ref<Class<Space>>
   export let space: Ref<Space>
@@ -52,8 +53,8 @@
     <SpaceSelect _class={spaceClass} label={spaceLabel} placeholder={spacePlaceholder} bind:value={space} />
   </div>
   <div class="footer">
-    <Button disabled={!canSave} label={'Create'} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
-    <Button label={'Cancel'} size={'small'} transparent on:click={() => { dispatch('close') }} />
+    <Button disabled={!canSave} label={presentation.string.Create} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
+    <Button label={presentation.string.Cancel} size={'small'} transparent on:click={() => { dispatch('close') }} />
   </div>
 </form>
 

packages/presentation/src/components/MessageBox.svelte

@@ -17,6 +17,7 @@
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
   import { Label, Button } from '@anticrm/ui'
+  import presentation from '..'
 
   export let label: IntlString
   export let message: IntlString
@@ -28,8 +29,8 @@
   <div class="overflow-label fs-title mb-4"><Label {label} /></div>
   <div class="message"><Label label={message} /></div>
   <div class="footer">
-    <Button label={'Ok'} size={'small'} transparent primary on:click={() => dispatch('close', true)} />
-    <Button label={'Cancel'} size={'small'} transparent on:click={() => dispatch('close', false)} />
+    <Button label={presentation.string.Ok} size={'small'} transparent primary on:click={() => dispatch('close', true)} />
+    <Button label={presentation.string.Cancel} size={'small'} transparent on:click={() => dispatch('close', false)} />
   </div>
 </div>
 

packages/presentation/src/components/PDFViewer.svelte

@@ -22,6 +22,7 @@
 
   import { getFileUrl } from '../utils'
   import { createEventDispatcher } from 'svelte'
+  import presentation from '..'
 
   export let file: string
   export let name: string
@@ -48,12 +49,12 @@
     </div>
   </div>
 
-  <iframe class="flex-grow content" src={getFileUrl(file)}/>
+  <iframe class="flex-grow content" src={getFileUrl(file)} title=""/>
 
   <div class="flex-between footer">
     <div class="flex-row-reverse">
-      <Button label={'Download'} primary />
-      <Button label={'Delete'} />
+      <Button label={presentation.string.Download} primary />
+      <Button label={presentation.string.Delete} />
     </div>
     <div class="flex-row-center">
       <CircleButton icon={ExpandDown} />
@@ -64,7 +65,6 @@
 </div>
 
 <style lang="scss">
-
   .pdfviewer-container {
     display: flex;
     flex-direction: column;
@@ -96,11 +96,11 @@
         font-size: 1rem;
         color: black;
       }
-      .description {
-        font-size: .75rem;
-        color: #1F212B;
-        opacity: .6;
-      }
+      // .description {
+      //   font-size: .75rem;
+      //   color: #1F212B;
+      //   opacity: .6;
+      // }
       .tool {
         margin-left: 0.75rem;
         opacity: .4;

packages/presentation/src/components/SpaceCreateCard.svelte

@@ -19,6 +19,7 @@
 
   import { createEventDispatcher } from 'svelte'
   import { Button, Label } from '@anticrm/ui'
+  import presentation from '..'
 
   export let label: IntlString
   export let okAction: () => void
@@ -39,8 +40,8 @@
   </div>
   <div class="content"><slot /></div>
   <div class="footer">
-    <Button disabled={!canSave} label={'Create'} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
-    <Button label={'Cancel'} size={'small'} transparent on:click={() => { dispatch('close') }} />
+    <Button disabled={!canSave} label={presentation.string.Create} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
+    <Button label={presentation.string.Cancel} size={'small'} transparent on:click={() => { dispatch('close') }} />
   </div>
 </form>
 

packages/presentation/src/components/SpacesPopup.svelte

@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { IntlString } from '@anticrm/platform'
   import { afterUpdate, createEventDispatcher } from 'svelte'
 
   import { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
@@ -21,6 +20,7 @@
 
   import type { Ref, Class, Space } from '@anticrm/core'
   import { createQuery } from '../utils'
+  import presentation from '..'
 
   export let _class: Ref<Class<Space>>
 
@@ -36,7 +36,7 @@
 <div class="popup">
   <div class="flex-col">
     <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
-    <div class="label"><Label label={'SUGGESTED'} /></div>
+    <div class="label"><Label label={presentation.string.Suggested} /></div>
   </div>
   <div class="flex-grow scroll">
     <div class="flex-col h-full box">

packages/presentation/src/components/UserBox.svelte

@@ -26,6 +26,7 @@
   import type { Ref, Class } from '@anticrm/core'
   import contact, { Contact, formatName } from '@anticrm/contact'
   import { createEventDispatcher } from 'svelte'
+  import presentation from '..'
 
   export let _class: Ref<Class<Contact>>
   export let title: IntlString
@@ -96,7 +97,7 @@
   <div class="selectUser">
     <div class="title"><Label label={title} /></div>
     <div class:caption-color={selected} class:content-dark-color={!selected}>
-      {#if selected}{getName(selected)}{:else}<Label label={'Not selected'} />{/if}
+      {#if selected}{getName(selected)}{:else}<Label label={presentation.string.NotSelected} />{/if}
     </div>
   </div>
 </div>

packages/presentation/src/components/UsersPopup.svelte

@@ -22,6 +22,7 @@
   import type { Ref, Class } from '@anticrm/core'
   import type { Person } from '@anticrm/contact'
   import { createQuery } from '../utils'
+  import presentation from '..'
   import { ActionIcon } from '@anticrm/ui'
   import BlueCheck from './icons/BlueCheck.svelte'
 
@@ -56,7 +57,7 @@
             <UserInfo size={'medium'} value={person} />
           </div>
           {#if allowDeselect && person._id === selected}
-            <ActionIcon direction={'top'} label={titleDeselect ?? 'Deselect'} icon={BlueCheck} action={() => { dispatch('close', null) }} size={'small'}/>
+            <ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={BlueCheck} action={() => { dispatch('close', null) }} size={'small'}/>
           {/if}
         </button>
       {/each}

packages/presentation/src/components/message/Person.svelte

@@ -15,21 +15,17 @@
 -->
 
 <script lang="ts">
-
   import type { Ref } from '@anticrm/core'
   import type { Person } from '@anticrm/contact'
 
   export let objectId: Ref<Person>
   export let title: string
-
 </script>
 
 <span class="person">{title}</span>
 
 <style lang="scss">
-
   .person {
     border: 1px solid red;
   }
-
 </style>

packages/presentation/src/index.ts

@@ -14,6 +14,9 @@
 // limitations under the License.
 //
 
+import { addStringsLoader } from '@anticrm/platform'
+import { presentationId } from './plugin'
+
 export * from './utils'
 
 export { default as UserBox } from './components/UserBox.svelte'
@@ -29,3 +32,9 @@ export { default as PDFViewer } from './components/PDFViewer.svelte'
 export { default as MessageBox } from './components/MessageBox.svelte'
 export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
 export { default as SpaceSelect } from './components/SpaceSelect.svelte'
+
+addStringsLoader(presentationId, async (lang: string) => {
+  return await import(`../lang/${lang}.json`)
+})
+
+export { default } from './plugin'

packages/presentation/src/plugin.ts

@@ -0,0 +1,36 @@
+//
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// 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.
+//
+
+import type { IntlString, Plugin } from '@anticrm/platform'
+import { plugin } from '@anticrm/platform'
+
+/**
+ * @public
+ */
+export const presentationId = 'presentation' as Plugin
+
+export default plugin(presentationId, {
+  string: {
+    Create: '' as IntlString,
+    Cancel: '' as IntlString,
+    Ok: '' as IntlString,
+    Download: '' as IntlString,
+    Delete: '' as IntlString,
+    Suggested: '' as IntlString,
+    NotSelected: '' as IntlString,
+    Deselect: '' as IntlString
+  }
+})

plugins/task-resources/src/components/state/DoneStatePresenter.svelte

@@ -25,14 +25,15 @@
 </script>
 
 {#if value }
-  <div class="overflow-label state-container" style="background-color: {color};">    
+  <div class="flex-center">
+    <div class="state-container" style="background-color: {color};" />    
   </div>
 {/if}
 
 <style lang="scss">
   .state-container {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.5rem;
+    width: .5rem;
+    height: .5rem;
+    border-radius: .5rem;
   }
 </style>