From 7ebc44b8c0f92e0efaca95c6533fdc8238be0e17 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 6 Jan 2022 14:09:19 +0300
Subject: [PATCH] Add language selector (#769)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/src/Theme.svelte               |  8 +++
 .../src/components/internal/LangPopup.svelte  | 63 +++++++++++++++++++
 .../components/internal/LangSelector.svelte   | 46 ++++++++++++++
 .../ui/src/components/internal/Root.svelte    |  4 ++
 .../components/internal/flags/english.svelte  | 40 ++++++++++++
 .../components/internal/flags/russia.svelte   | 25 ++++++++
 6 files changed, 186 insertions(+)
 create mode 100644 packages/ui/src/components/internal/LangPopup.svelte
 create mode 100644 packages/ui/src/components/internal/LangSelector.svelte
 create mode 100644 packages/ui/src/components/internal/flags/english.svelte
 create mode 100644 packages/ui/src/components/internal/flags/russia.svelte

diff --git a/packages/theme/src/Theme.svelte b/packages/theme/src/Theme.svelte
index 936823c0a7..806b6380a0 100644
--- a/packages/theme/src/Theme.svelte
+++ b/packages/theme/src/Theme.svelte
@@ -18,8 +18,10 @@
 
   const getCurrentTheme = (): string => localStorage.getItem('theme') ?? 'theme-dark'
   const getCurrnetFontSize = (): string => localStorage.getItem('fontsize') ?? 'normal-font'
+  const getCurrnetLanguage = (): string => localStorage.getItem('lang') ?? 'en'
   const currentTheme = getCurrentTheme()
   const currentFontSize = getCurrnetFontSize()
+  const currentLanguage = getCurrnetLanguage()
 
   const setRootColors = (theme: string) => {
     document.documentElement.setAttribute('class', `${theme} ${getCurrnetFontSize()}`)
@@ -42,6 +44,12 @@
       localStorage.setItem('fontsize', fontsize)
     }
   })
+  setContext('lang', {
+    currentLanguage: currentLanguage,
+    setLanguage: (lang: string) => {
+      localStorage.setItem('lang', lang)
+    }
+  })
 
   onMount(() => {
     setRootColors(currentTheme)
diff --git a/packages/ui/src/components/internal/LangPopup.svelte b/packages/ui/src/components/internal/LangPopup.svelte
new file mode 100644
index 0000000000..f1af14f8bc
--- /dev/null
+++ b/packages/ui/src/components/internal/LangPopup.svelte
@@ -0,0 +1,63 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 type { Asset, IntlString } from '@anticrm/platform'  
+  import { createEventDispatcher } from 'svelte'
+  import { AnySvelteComponent } from '../../types'
+  import Label from '../Label.svelte'
+  
+  export let langs: any
+
+  const dispatch = createEventDispatcher()  
+</script>
+
+<div class="flex-col popup">
+  {#each langs as lang}
+    <div class="flex-row-center menu-item" on:click={() => { 
+      dispatch('close', lang.id)
+    }}>
+      {#if lang.icon}
+        <svelte:component this={lang.icon} size={'medium'} />
+      {/if}
+      <div class="ml-3"><Label label={lang.label} /></div>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .popup {
+    padding: .5rem;
+    height: 100%;
+    background-color: var(--theme-button-bg-focused);
+    border: 1px solid var(--theme-button-border-enabled);
+    border-radius: .75rem;
+    box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    padding: .375rem 1rem .375rem .5rem;
+    color: var(--theme-content-color);
+    border-radius: .5rem;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--theme-button-bg-hovered);
+      color: var(--theme-caption-color);
+    }
+  }
+</style>
diff --git a/packages/ui/src/components/internal/LangSelector.svelte b/packages/ui/src/components/internal/LangSelector.svelte
new file mode 100644
index 0000000000..831b1a3834
--- /dev/null
+++ b/packages/ui/src/components/internal/LangSelector.svelte
@@ -0,0 +1,46 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 { getContext } from 'svelte'
+  import { showPopup } from '../..'
+  import LangPopup from './LangPopup.svelte'
+
+  import enFlag from './flags/english.svelte'
+  import ruFlag from './flags/russia.svelte'
+
+  const { currentLanguage, setLanguage } = getContext('lang')
+  const langs
+          = [{ id: 'en', label: 'English', icon: enFlag },
+             { id: 'ru', label: 'Russian', icon: ruFlag }]
+
+  $: selected = langs.find(item => item.id === currentLanguage)
+  let trigger: HTMLElement
+
+  const selectLanguage = (): void => {
+    showPopup(LangPopup, { langs }, trigger, (result) => {
+      if (result) {
+        selected = langs.find(item => item.id === result)
+        setLanguage(result)
+      }
+    })
+  }
+</script>
+
+{#if selected}
+  <div bind:this={trigger} class="flex-center cursor-pointer" on:click={selectLanguage}>
+    <svelte:component this={selected.icon} size={'medium'} />
+  </div>
+{/if}
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 17561a5037..b403f8c519 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -15,6 +15,7 @@
   import WiFi from './icons/WiFi.svelte'
   import ThemeSelector from './ThemeSelector.svelte'
   import FontSizeSelector from './FontSizeSelector.svelte'
+  import LangSelector from './LangSelector.svelte'
   
   let application: AnyComponent | undefined
 
@@ -42,6 +43,9 @@
           <div class="clock">
             <Clock />
           </div>
+          <div class="widget">
+            <LangSelector />
+          </div>
           <div class="widget">
             <ThemeSelector />
           </div>
diff --git a/packages/ui/src/components/internal/flags/english.svelte b/packages/ui/src/components/internal/flags/english.svelte
new file mode 100644
index 0000000000..f4c0134d4a
--- /dev/null
+++ b/packages/ui/src/components/internal/flags/english.svelte
@@ -0,0 +1,40 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  // const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <circle fill={'#fff'} cx="8" cy="8" r="8"/>
+  <g fill={'#1A237B'}>
+    <path d="M10.2,0.3v5.2l4.1-2.4C13.3,1.8,11.9,0.8,10.2,0.3z"/>
+    <path d="M1.7,3.1l4.2,2.5V0.3C4.2,0.7,2.8,1.7,1.7,3.1z"/>
+    <path d="M15.6,5.6l-0.4,0.2h0.5C15.7,5.8,15.7,5.7,15.6,5.6z"/>
+    <path d="M15.5,10.8c0,0,0-0.1,0.1-0.1h-0.3L15.5,10.8z"/>
+    <path d="M5.9,15.7V11L2,13.3C3,14.4,4.4,15.3,5.9,15.7z"/>
+    <path d="M10.2,15.7c1.5-0.4,2.8-1.3,3.8-2.5L10.2,11V15.7z"/>
+    <path d="M0.5,10.9l0.4-0.2H0.5C0.5,10.7,0.5,10.8,0.5,10.9z"/>
+    <path d="M0.3,5.8h0.6L0.4,5.5C0.4,5.6,0.3,5.7,0.3,5.8z"/>
+  </g>
+  <g fill={'#BD0034'}>
+    <path d="M15.2,4.4c-0.1-0.3-0.3-0.6-0.5-0.8l-3.9,2.2h1.9L15.2,4.4z"/>
+    <path d="M12.3,10.7l2.6,1.4c0.2-0.3,0.3-0.5,0.4-0.8l-1.1-0.6H12.3z"/>
+    <path d="M4.2,5.8L1,4C0.9,4.3,0.8,4.6,0.6,4.9l1.7,1H4.2z"/>
+    <path d="M1.2,12.2c0.2,0.3,0.3,0.5,0.5,0.8l4-2.3H3.9L1.2,12.2z"/>
+    <path d="M15.9,6.9H9.4V0.1C8.9,0,8.5,0,8,0C7.6,0,7.2,0,6.8,0.1v6.8H0.1C0,7.2,0,7.6,0,8c0,0.6,0.1,1.1,0.2,1.6h6.6 v6.3C7.2,16,7.6,16,8,16c0.5,0,0.9,0,1.4-0.1V9.6h6.5C15.9,9.1,16,8.6,16,8C16,7.6,16,7.2,15.9,6.9z"/>
+  </g>
+</svg>
diff --git a/packages/ui/src/components/internal/flags/russia.svelte b/packages/ui/src/components/internal/flags/russia.svelte
new file mode 100644
index 0000000000..47df98a06b
--- /dev/null
+++ b/packages/ui/src/components/internal/flags/russia.svelte
@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  // const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill={'#F4F4F4'} d="M0.5,5.3h15.1C14.4,2.2,11.5,0,8,0S1.6,2.2,0.5,5.3z"/>
+  <path fill={'#323E95'} d="M0.5,5.3C0.2,6.2,0,7.1,0,8s0.2,1.8,0.5,2.7h15.1C15.8,9.8,16,8.9,16,8s-0.2-1.8-0.5-2.7H0.5z"/>
+  <path fill={'#D8001E'} d="M15.5,10.7H0.5C1.6,13.8,4.5,16,8,16S14.4,13.8,15.5,10.7z"/>
+</svg>