hcengineering · haiodo · Nov 8, 2023 · Nov 8, 2023
diff --git a/packages/theme/styles/popups.scss b/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; }
     }

diff --git a/packages/ui/lang/en.json b/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:"
   }
 }
diff --git a/packages/ui/lang/ru.json b/packages/ui/lang/ru.json
@@ -66,6 +66,8 @@
     "Compact": "Компактный",
     "ThemeLight": "Светлая",
     "ThemeDark": "Тёмная",
-    "ThemeSystem": "Системная"
+    "ThemeSystem": "Системная",
+    "NoTimeZonesFound": "Временные зоны не найдены",
+    "Selected": "Выбрано:"
   }
 }
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/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'}

diff --git a/packages/ui/src/components/icons/Redo.svelte b/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>
diff --git a/packages/ui/src/components/icons/Undo.svelte b/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>
diff --git a/packages/ui/src/components/internal/ClockFace.svelte b/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>
diff --git a/packages/ui/src/components/internal/ClockPopup.svelte b/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>