From 1211a36cd46d6435278a97bbe00df80d782c28e8 Mon Sep 17 00:00:00 2001 From: Andrey Platov Date: Sat, 11 Sep 2021 15:18:54 +0200 Subject: [PATCH] TimeSince and `ui` strings Signed-off-by: Andrey Platov --- packages/ui/lang/en.json | 8 ++++ packages/ui/src/components/Dialog.svelte | 6 +-- packages/ui/src/components/TimeSince.svelte | 48 +++++++++++++++++++ packages/ui/src/index.ts | 15 +++++- packages/ui/src/plugin.ts | 32 +++++++++++++ .../src/components/Backlink.svelte | 3 +- 6 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 packages/ui/lang/en.json create mode 100644 packages/ui/src/components/TimeSince.svelte create mode 100644 packages/ui/src/plugin.ts diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json new file mode 100644 index 0000000000..ebee4fc11e --- /dev/null +++ b/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}" + } +} diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte index aaefb169b8..9bbbec4a5c 100644 --- a/packages/ui/src/components/Dialog.svelte +++ b/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
@@ -44,7 +44,7 @@
diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte new file mode 100644 index 0000000000..d3e79ca36e --- /dev/null +++ b/packages/ui/src/components/TimeSince.svelte @@ -0,0 +1,48 @@ + + + + +{time} \ No newline at end of file diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 3c965f9ef9..77a7e4a802 100644 --- a/packages/ui/src/index.ts +++ b/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`) +}) diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts new file mode 100644 index 0000000000..c9a2c9f82b --- /dev/null +++ b/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, + } + }) \ No newline at end of file diff --git a/plugins/chunter-resources/src/components/Backlink.svelte b/plugins/chunter-resources/src/components/Backlink.svelte index a27e81bcd5..ec04eca0b3 100644 --- a/plugins/chunter-resources/src/components/Backlink.svelte +++ b/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 @@
-
{#if employee}{employee.firstName} {employee.lastName}{/if}{comment.modifiedOn}
+
{#if employee}{employee.firstName} {employee.lastName}{/if}