TimeSince and ui strings

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

packages/ui/lang/en.json

@@ -0,0 +1,8 @@
+{
+  "string": {
+    "Cancel": "Cancel",
+    "Minutes": "{minutes, plural, =0 {less than a minute ago} =1 {a minute ago} other {# minutes ago}}",
+    "Hours": "{hours, plural, =0 {less than an hour ago} =1 {an hour ago} other {# hours ago}}",
+    "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}"
+  }
+}

packages/ui/src/components/Dialog.svelte

@@ -24,13 +24,13 @@
   import Button from './Button.svelte'
   import Label from './Label.svelte'
 
+  import ui from '../plugin'
+
   export let label: IntlString
   export let okLabel: IntlString
   export let okAction: () => void
 
   const dispatch = createEventDispatcher()
-
-  const cancel = 'Cancel' as IntlString
 </script>
 
 <div class="dialog-container">
@@ -44,7 +44,7 @@
     </div>
     <div class="footer">
       <Button label={okLabel} primary />
-      <Button label={cancel} on:click={() => { dispatch('close') }} />
+      <Button label={ui.string.Cancel} on:click={() => { dispatch('close') }} />
     </div>
   </form>
 </div>

packages/ui/src/components/TimeSince.svelte

@@ -0,0 +1,48 @@
+<!--
+// 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.
+-->
+
+<script lang="ts">
+
+  import { translate } from '@anticrm/platform'
+  import { ticker } from '..'
+  import ui from '../plugin'
+
+  export let value: number
+
+  const SECOND = 1000
+  const MINUTE = SECOND * 60
+  const HOUR = MINUTE * 60
+  const DAY = HOUR * 24
+
+  let time: string = ''
+
+  async function formatTime(now: number) {
+    let passed = now - value
+    if (passed < 0) passed = 0
+    if (passed < HOUR) {
+      time = await translate(ui.string.Minutes, { minutes: Math.floor(passed / MINUTE) })
+    } else if (passed < DAY) {
+      time = await translate(ui.string.Hours, { hours: Math.floor(passed / HOUR) })
+    } else {
+      time = await translate(ui.string.Days, { days: Math.floor(passed / DAY) })
+    }
+  }
+
+  $: formatTime($ticker)
+
+</script>
+
+{time}

packages/ui/src/index.ts

@@ -16,6 +16,8 @@
 import { SvelteComponent } from 'svelte'
 import type { AnySvelteComponent, AnyComponent, PopupAlignment, LabelAndProps, TooltipAligment } from './types'
 import type { IntlString } from '@anticrm/platform'
+import { addStringsLoader } from '@anticrm/platform'
+import { uiId } from './plugin' 
 
 import Root from './components/internal/Root.svelte'
 
@@ -54,6 +56,7 @@ export { default as Loading } from './components/Loading.svelte'
 export { default as Popup } from './components/Popup.svelte'
 export { default as CircleButton } from './components/CircleButton.svelte'
 export { default as Link } from './components/Link.svelte'
+export { default as TimeSince } from './components/TimeSince.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'
@@ -68,7 +71,7 @@ export { default as IconThread } from './components/icons/Thread.svelte'
 
 export * from './utils'
 
-import { writable } from 'svelte/store'
+import { writable, readable } from 'svelte/store'
 
 export function createApp (target: HTMLElement): SvelteComponent {
   return new Root({ target })
@@ -115,3 +118,13 @@ export function showTooltip (label: IntlString, element: HTMLElement, direction?
 export function closeTooltip (): void {
   tooltipstore.set({ label: undefined, element: undefined, direction: undefined })
 }
+
+export const ticker = readable(Date.now(), set => {
+	const interval = setInterval(() => {
+		set(Date.now())
+	}, 10000)
+})
+
+addStringsLoader(uiId, async (lang: string) => {
+  return await import(`../lang/${lang}.json`)
+})

packages/ui/src/plugin.ts

@@ -0,0 +1,32 @@
+//
+// 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 uiId = 'ui' as Plugin
+
+ export default plugin(uiId, {
+   string: {
+     Cancel: '' as IntlString,
+     Minutes: '' as IntlString,
+     Hours: '' as IntlString,
+     Days: '' as IntlString,
+   }
+ })

plugins/chunter-resources/src/components/Backlink.svelte

@@ -20,6 +20,7 @@
 
   import MessageViewer from '@anticrm/presentation/src/components/MessageViewer.svelte'
   import Avatar from '@anticrm/presentation/src/components/Avatar.svelte'
+  import { TimeSince } from '@anticrm/ui'
 
   import contact, { Employee, EmployeeAccount } from '@anticrm/contact'
 
@@ -37,7 +38,7 @@
 <div class="flex-nowrap">
   <div class="avatar"><Avatar size={'medium'} /></div>
   <div class="flex-col-stretch message">
-    <div class="header">{#if employee}{employee.firstName} {employee.lastName}{/if}<span>{comment.modifiedOn}</span></div>
+    <div class="header">{#if employee}{employee.firstName} {employee.lastName}{/if}<span><TimeSince value={comment.modifiedOn}/></span></div>
     <div class="text"><MessageViewer message={comment.message} /></div>
   </div>
 </div>