Updated Clock widget (#3953)

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

packages/theme/styles/popups.scss

@@ -94,6 +94,7 @@
       }
     }
   }
+  .header + .header { padding: 0 1rem .5rem; }
 
   .scroll {
     flex-grow: 1;
@@ -120,8 +121,8 @@
     text-align: left;
     color: var(--theme-caption-color);
     border-radius: .25rem;
-    cursor: pointer;
-    
+
+    &:not(.default-cursor) { cursor: pointer; }
     &.high { height: 3rem; }
     
     .icon, .color, .tag {
@@ -159,13 +160,19 @@
       overflow: hidden;
       color: var(--theme-caption-color);
     }
+    .tool {
+      visibility: hidden;
+      flex-shrink: 0;
+    }
 
     &:not(.withList) {
       margin: 0 .5rem;
     }
     &:not(.withList, .no-focus):focus,
-    &:not(.withList):hover {
+    &:not(.withList, .no-hover):hover {
       background-color: var(--theme-popup-hover);
+
+      .tool { visibility: visible; }
     }
   }
   .sticky-wrapper {
@@ -189,22 +196,32 @@
       align-items: center;
       justify-content: space-between;
       padding: .25rem 1rem;
-      min-height: 2rem;
       font-weight: 500;
       font-size: .625rem;
       text-transform: uppercase;
       text-align: left;
       color: var(--theme-caption-color);
       background-color: var(--theme-popup-color);
-      cursor: pointer;
-
+      
+      &:not(.default-cursor) { cursor: pointer; }
       .icon {
         width: .25rem;
         transform-origin: 40% 50%;
         transform: rotate(0deg);
         transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
-      &.show .icon { transform: rotate(90deg); }
+      .chevron {
+        width: 1rem;
+        height: 1rem;
+        color: var(--theme-trans-color);
+        transform-origin: center;
+        transform: rotate(-90deg);
+        transition: transform .2s ease;
+      }
+      &.show {
+        .icon { transform: rotate(90deg); }
+        .chevron { transform: rotate(0deg); }
+      }
       &:hover { color: var(--theme-caption-color); }
       &.show + .menu-group { height: auto; }
     }

packages/ui/lang/en.json

@@ -66,6 +66,8 @@
     "Compact": "Compact",
     "ThemeLight": "Light",
     "ThemeDark": "Dark",
-    "ThemeSystem": "System"
+    "ThemeSystem": "System",
+    "NoTimeZonesFound": "No time zones found",
+    "Selected": "Selected:"
   }
 }

packages/ui/lang/ru.json

@@ -66,6 +66,8 @@
     "Compact": "Компактный",
     "ThemeLight": "Светлая",
     "ThemeDark": "Тёмная",
-    "ThemeSystem": "Системная"
+    "ThemeSystem": "Системная",
+    "NoTimeZonesFound": "Временные зоны не найдены",
+    "Selected": "Выбрано:"
   }
 }

packages/ui/src/components/EditWithIcon.svelte

@@ -54,9 +54,9 @@
   <div class="mr-2 content-dark-color"><Icon {icon} size={'small'} /></div>
   <input bind:this={textHTML} type="text" bind:value placeholder={phTraslate} on:change on:input on:keydown />
   <slot name="extra" />
-  <div class="flex-row-center">
+  <div class="flex-row-center flex-no-shrink">
     {#if value}
-      <div class="ml-2">
+      <div class="ml-2 flex-no-shrink">
         <Button
           icon={IconClose}
           kind={'ghost'}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 10H24.1851L20.5977 6.4141L22 5L28 11L22 17L20.5977 15.5854L24.1821 12H12C10.4087 12 8.88258 12.6321 7.75736 13.7574C6.63214 14.8826 6 16.4087 6 18C6 19.5913 6.63214 21.1174 7.75736 22.2426C8.88258 23.3679 10.4087 24 12 24H19C19.5523 24 20 24.4477 20 25C20 25.5523 19.5523 26 19 26H12C9.87827 26 7.84344 25.1571 6.34315 23.6569C4.84285 22.1566 4 20.1217 4 18C4 15.8783 4.84285 13.8434 6.34315 12.3431C7.84344 10.8429 9.87827 10 12 10Z"
+  />
+</svg>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20 10H7.8149L11.4023 6.4141L10 5L4 11L10 17L11.4023 15.5854L7.8179 12H20C21.5913 12 23.1174 12.6321 24.2426 13.7574C25.3679 14.8826 26 16.4087 26 18C26 19.5913 25.3679 21.1174 24.2426 22.2426C23.1174 23.3679 21.5913 24 20 24H13C12.4477 24 12 24.4477 12 25C12 25.5523 12.4477 26 13 26H20C22.1217 26 24.1566 25.1571 25.6569 23.6569C27.1571 22.1566 28 20.1217 28 18C28 15.8783 27.1571 13.8434 25.6569 12.3431C24.1566 10.8429 22.1217 10 20 10Z"
+  />
+</svg>

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

@@ -15,6 +15,9 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
 
+  export let timeZone: string
+  export let size: string = '80px'
+
   const clock: Array<{ value: number; class: string }> = [
     { value: 0, class: 'hour-arrow' },
     { value: 0, class: 'minute-arrow' },
@@ -24,8 +27,11 @@
 
   const updateTime = (): void => {
     const now = new Date()
-    const startDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0).getTime()
-    const diff = now.getTime() - startDay
+    const offNow = timeZone === '' ? now : new Date(now.toLocaleString('en-US', { timeZone }))
+    const diffTZ = now.getTime() - offNow.getTime()
+    const realTime = new Date(now.getTime() - diffTZ)
+    const startDay = new Date(realTime.getFullYear(), realTime.getMonth(), realTime.getDate(), 0, 0, 0).getTime()
+    const diff = realTime.getTime() - startDay
     let h = diff / 3600000
     if (h > 12) h -= 12
     const m = (diff / 1000 / 60) % 60
@@ -40,7 +46,7 @@
   onDestroy(() => clearInterval(reqId))
 </script>
 
-<div class="clockFace-container">
+<div style:--clockface-size={size} class="clockFace-container">
   {#each [...Array(12).keys()] as hour}
     <div class="hour" data-hour={hour === 0 ? '12' : `${hour}`} />
   {/each}
@@ -55,9 +61,9 @@
     top: 1px;
     left: 50%;
     width: 1px;
-    height: 2px;
+    height: calc(var(--clockface-size, 64px) / 32);
     background: var(--theme-clockface-hours);
-    transform-origin: 50% 29px;
+    transform-origin: 50% calc(calc(var(--clockface-size, 64px) / 2) - 1px); // 29px;
     transform: rotate(0deg);
 
     @for $i from 2 through 12 {
@@ -66,16 +72,21 @@
       }
     }
     &:nth-child(3n + 1) {
-      height: 5px;
+      height: calc(var(--clockface-size, 64px) / 16);
       background: var(--theme-clockface-quarter);
     }
   }
 
   .clockFace-container {
+    --clockface-radius: calc(var(--clockface-size, 64px) / 2);
+    --clockface-arrow-end: calc(var(--clockface-size, 64px) / 16);
+    --clockface-sec-arrow: calc(calc(var(--clockface-radius) - 2px) + var(--clockface-arrow-end));
+    --clockface-min-arrow: calc(calc(var(--clockface-radius) * 0.75) + var(--clockface-arrow-end));
+    --clockface-hour-arrow: calc(calc(var(--clockface-radius) * 0.5) + var(--clockface-arrow-end));
     position: relative;
     flex-shrink: 0;
-    width: 60px;
-    height: 60px;
+    width: var(--clockface-size, 64px);
+    height: var(--clockface-size, 64px);
     background: var(--theme-clockface-back);
     border-radius: 50%;
     box-shadow: var(--theme-clockface-shadow);
@@ -88,17 +99,12 @@
       box-shadow: va(--theme-clockface-arrows-shadow);
       transform: rotate(0deg);
     }
-    .anim {
-      transition-property: transform;
-      transition-timing-function: var(--timing-clock);
-      transition-duration: 0.25s;
-    }
     .second-arrow {
       top: 2px;
       width: 2px;
-      height: 34px;
+      height: var(--clockface-sec-arrow);
       background: var(--theme-clockface-sec-arrow);
-      transform-origin: 50% 28px;
+      transform-origin: 50% calc(var(--clockface-radius) - 2px);
 
       &::before,
       &::after {
@@ -109,32 +115,32 @@
         transform: translateX(-50%);
       }
       &::before {
-        top: 25px;
+        top: calc(var(--clockface-radius) - 5px);
         width: 6px;
         height: 6px;
         background-color: var(--theme-clockface-sec-holder);
       }
       &::after {
-        top: 26px;
+        top: calc(var(--clockface-radius) - 4px);
         width: 4px;
         height: 4px;
         background: var(--theme-clockface-arrows-holder);
       }
     }
     .minute-arrow {
-      top: 4px;
+      top: calc(var(--clockface-radius) * 0.25);
       width: 2px;
-      height: 32px;
+      height: var(--clockface-min-arrow);
       background: var(--theme-clockface-min-arrow);
-      transform-origin: 50% 26px;
+      transform-origin: 50% calc(var(--clockface-min-arrow) - var(--clockface-arrow-end));
     }
     .hour-arrow {
-      top: 12px;
+      top: calc(var(--clockface-radius) * 0.5);
       left: calc(50% - 1px);
       width: 3px;
-      height: 24px;
+      height: var(--clockface-hour-arrow);
       background: var(--theme-clockface-min-arrow);
-      transform-origin: 50% 18px;
+      transform-origin: 50% calc(var(--clockface-hour-arrow) - var(--clockface-arrow-end));
     }
   }
 </style>

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

@@ -13,15 +13,81 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { getTimeZoneName } from '../..'
+  import { showPopup, TimeZone } from '../..'
   import ClockFace from './ClockFace.svelte'
+  import TimeZonesPopup from './TimeZonesPopup.svelte'
+
+  const clockSize: string = '80px'
+  const tzs: string[] = []
+  const timeZones: TimeZone[] = []
+
+  const localTZ: string = Intl.DateTimeFormat().resolvedOptions().timeZone
+  let selectedTZ: string[] = [localTZ]
+  const savedTZ = localStorage.getItem('TimeZones')
+  if (savedTZ === null && selectedTZ[0] !== '') localStorage.setItem('TimeZones', JSON.stringify(selectedTZ))
+  else if (savedTZ !== null) selectedTZ = JSON.parse(savedTZ)
+
+  if (!Intl.supportedValuesOf) console.log('Your browser does not support Intl.supportedValuesOf().')
+  else for (const timeZone of Intl.supportedValuesOf('timeZone')) tzs.push(timeZone)
+
+  const convertTimeZone = (tz: string): TimeZone => {
+    const tzSpace = tz.replaceAll('_', ' ')
+    const parts = tzSpace.split('/')
+    if (tz === '' || parts.length === 1) return { id: tz, continent: tzSpace, city: tzSpace, short: tzSpace }
+    return {
+      id: tz,
+      continent: parts[0],
+      city: parts.length > 2 ? `${parts[1]} - ${parts[2]}` : parts[1],
+      short: parts.length > 2 ? parts[2] : parts[1]
+    }
+  }
+  if (tzs.length > 0) tzs.forEach((tz) => timeZones.push(convertTimeZone(tz)))
+
+  const saveTZ = (): void => {
+    selectedTZ = selectedTZ
+    localStorage.setItem('TimeZones', JSON.stringify(selectedTZ))
+  }
+
+  const changeTimeZone = (
+    event: MouseEvent & { currentTarget: EventTarget & HTMLSpanElement },
+    index: number
+  ): void => {
+    showPopup(
+      TimeZonesPopup,
+      {
+        timeZones,
+        selected: selectedTZ[index],
+        count: selectedTZ.length,
+        reset: selectedTZ.filter((tz) => tz === localTZ).length > 0 ? null : localTZ
+      },
+      event.currentTarget,
+      (result) => {
+        if (result !== undefined) {
+          if (result === 'delete') selectedTZ.splice(index, 1)
+          else selectedTZ[index] = result
+          saveTZ()
+        }
+      },
+      (result) => {
+        if (result !== undefined) {
+          if (result === 'reset') {
+            selectedTZ[index] = localTZ
+          } else selectedTZ = [result, ...selectedTZ]
+          saveTZ()
+        }
+      }
+    )
+  }
 </script>
 
 <div class="antiPopup" style:flex-direction={'row'} style:padding={'12px'}>
-  <div class="statusPopup-option">
-    <ClockFace />
-    <span class="label overflow-label">
-      {getTimeZoneName()}
-    </span>
-  </div>
+  {#each selectedTZ as selected, i}
+    <div class="statusPopup-option">
+      <ClockFace bind:timeZone={selected} size={clockSize} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <span class="label overflow-label" style:max-width={clockSize} on:click={(ev) => changeTimeZone(ev, i)}>
+        {selected === '' ? '--' : convertTimeZone(selected).short}
+      </span>
+    </div>
+  {/each}
 </div>

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

@@ -0,0 +1,182 @@
+<!--
+// Copyright © 2023 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 { createEventDispatcher } from 'svelte'
+  import ui, {
+    deviceOptionsStore,
+    IconSearch,
+    IconAdd,
+    Button,
+    Label,
+    resizeObserver,
+    EditWithIcon,
+    IconClose,
+    TimeZone,
+    IconChevronDown,
+    ActionIcon,
+    IconUndo
+  } from '../..'
+
+  interface TimeZoneGroup {
+    continent: string
+    collapsed: boolean
+  }
+
+  export let selected: string
+  export let timeZones: TimeZone[] = []
+  export let count: number
+  export let reset: string | null
+
+  const dispatch = createEventDispatcher()
+
+  let search: string = ''
+  let selectedTZ: TimeZone | null
+  $: selectedTZ = selected === undefined ? null : timeZones.filter((tz) => tz.id === selected)[0]
+  const tzGroups = new Map<string, TimeZone[]>()
+  let groups: TimeZoneGroup[] = []
+
+  const updateTimeZones = (s: string, id: string): void => {
+    tzGroups.clear()
+    const newGroups: TimeZoneGroup[] = []
+    const searchedTZ: TimeZone[] =
+      s === '' ? timeZones : timeZones.filter((tz) => tz.city.toLowerCase().includes(s.toLowerCase()))
+    if (searchedTZ.length > 0) {
+      searchedTZ.forEach((tz) => {
+        const temp = tzGroups.get(tz.continent)
+        if (tz.id === id) selectedTZ = tz
+        else if (temp === undefined) {
+          tzGroups.set(tz.continent, [tz])
+          newGroups.push({
+            continent: tz.continent,
+            collapsed: s === ''
+          })
+        } else tzGroups.set(tz.continent, [...temp, tz])
+      })
+    }
+    groups = newGroups
+  }
+  $: updateTimeZones(search, selected)
+</script>
+
+<div
+  class="selectPopup"
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
+  <div class="header">
+    <EditWithIcon
+      icon={IconSearch}
+      size={'large'}
+      autoFocus={!$deviceOptionsStore.isMobile}
+      bind:value={search}
+      placeholder={ui.string.SearchDots}
+    />
+  </div>
+  {#if selectedTZ}
+    <div class="header flex-col">
+      <div class="flex-between min-h-4" style:margin-right={'-.5rem'}>
+        <span class="text-xs font-medium uppercase content-darker-color flex-grow"
+          ><Label label={ui.string.Selected} /></span
+        >
+        {#if reset !== null}
+          <ActionIcon
+            icon={IconUndo}
+            size={'x-small'}
+            action={async () => {
+              if (reset !== null) selected = reset
+              reset = null
+              dispatch('update', 'reset')
+            }}
+          />
+        {/if}
+        {#if count > 1}
+          <ActionIcon
+            icon={IconClose}
+            size={'x-small'}
+            action={async () => {
+              dispatch('close', 'delete')
+            }}
+          />
+        {/if}
+      </div>
+      <div class="flex-row-center mt-1 overflow-label">
+        <span class="label font-medium caption-color">{selectedTZ.short}</span>
+        &nbsp;({selectedTZ.continent})
+      </div>
+    </div>
+  {/if}
+  <div class="scroll">
+    <div class="box">
+      {#if groups.length > 0}
+        {#each groups as cont, i}
+          {@const items = tzGroups.get(cont.continent)}
+          {#if items}
+            {#if i > 0}<div class="menu-separator" />{/if}
+            <div class="sticky-wrapper">
+              <button
+                class="menu-group__header"
+                class:show={!cont.collapsed}
+                on:click={() => (cont.collapsed = !cont.collapsed)}
+              >
+                <div class="flex-row-center">
+                  <div class="chevron">
+                    <IconChevronDown size={'small'} filled />
+                  </div>
+                  <span class="ml-2">{cont.continent}</span>
+                </div>
+              </button>
+              <div class="menu-group">
+                {#each items as item}
+                  <button class="menu-item no-focus items-center" on:click={() => dispatch('close', item.id)}>
+                    <span class="overflow-label label flex-grow">{item.city}</span>
+                    <div class="tool ml-2">
+                      <Button
+                        icon={IconAdd}
+                        size={'small'}
+                        kind={'ghost'}
+                        disabled={count > 4}
+                        on:click={() => {
+                          count++
+                          dispatch('update', item.id)
+                        }}
+                      />
+                    </div>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        <div class="empty">
+          <Label label={ui.string.NoTimeZonesFound} />
+        </div>
+      {/if}
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>
+
+<style lang="scss">
+  .empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 5rem;
+    font-size: 0.75rem;
+    color: var(--theme-dark-color);
+  }
+</style>

packages/ui/src/index.ts

@@ -39,7 +39,8 @@ export type {
   TSeparatedItem,
   SeparatedItem,
   DefSeparators,
-  SeparatedElement
+  SeparatedElement,
+  TimeZone
 } from './types'
 
 export { themeStore } from '@hcengineering/theme'
@@ -175,6 +176,8 @@ export { default as IconLike } from './components/icons/Like.svelte'
 export { default as IconCollapseArrow } from './components/icons/CollapseArrow.svelte'
 export { default as IconEmoji } from './components/icons/Emoji.svelte'
 export { default as IconObjects } from './components/icons/Objects.svelte'
+export { default as IconUndo } from './components/icons/Undo.svelte'
+export { default as IconRedo } from './components/icons/Redo.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'

packages/ui/src/plugin.ts

@@ -92,7 +92,9 @@ export const uis = plugin(uiId, {
     Compact: '' as IntlString,
     ThemeLight: '' as IntlString,
     ThemeDark: '' as IntlString,
-    ThemeSystem: '' as IntlString
+    ThemeSystem: '' as IntlString,
+    NoTimeZonesFound: '' as IntlString,
+    Selected: '' as IntlString
   },
   metadata: {
     DefaultApplication: '' as Metadata<AnyComponent>,

packages/ui/src/types.ts

@@ -473,3 +473,14 @@ export interface SelectPopupValueType {
     label: IntlString
   }
 }
+
+/**
+ * @public
+ */
+export interface TimeZone {
+  id: string
+  continent: string
+  city: string
+  short: string
+  offset?: number
+}