Add language selector (#769)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-01-06 14:09:19 +03:00 committed by GitHub
parent c9328da94d
commit 7ebc44b8c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 186 additions and 0 deletions

View File

@ -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)

View 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>

View 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}

View File

@ -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>

View 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>

View 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>