mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
Add language selector (#769)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
c9328da94d
commit
7ebc44b8c0
@ -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)
|
||||
|
||||
63
packages/ui/src/components/internal/LangPopup.svelte
Normal file
63
packages/ui/src/components/internal/LangPopup.svelte
Normal file
@ -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>
|
||||
46
packages/ui/src/components/internal/LangSelector.svelte
Normal file
46
packages/ui/src/components/internal/LangSelector.svelte
Normal file
@ -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}
|
||||
@ -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>
|
||||
|
||||
40
packages/ui/src/components/internal/flags/english.svelte
Normal file
40
packages/ui/src/components/internal/flags/english.svelte
Normal file
@ -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>
|
||||
25
packages/ui/src/components/internal/flags/russia.svelte
Normal file
25
packages/ui/src/components/internal/flags/russia.svelte
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user