Add TelegramPopup and PinPad

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

packages/theme/styles/_colors.scss

@@ -74,6 +74,7 @@
   --theme-chat-divider: rgb(36, 36, 41);
 
   --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg-dark: rgba(222, 222, 240, .1);
   --theme-card-bg-accent: rgba(255, 255, 255, .04);
   --theme-card-divider: rgba(255, 255, 255, .1);
   --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
@@ -148,6 +149,7 @@
   --theme-chat-divider: rgb(66, 65, 76);
 
   --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg-dark: rgba(222, 222, 240, .1);
   --theme-card-bg-accent: rgba(255, 255, 255, .04);
   --theme-card-divider: rgba(255, 255, 255, .1);
   --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
@@ -221,6 +223,7 @@
   --theme-chat-divider: rgb(233, 233, 233);
 
   --theme-card-bg: rgba(255, 255, 255, .6);
+  --theme-card-bg-dark: rgba(255, 255, 255, .3);
   --theme-card-bg-accent: rgba(0, 0, 0, .04);
   --theme-card-divider: rgba(0, 0, 0, .1);
   --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);

packages/ui/src/components/TooltipInstance.svelte

@@ -152,7 +152,7 @@
     border-radius: .75rem;
     user-select: none;
     filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
-    z-index: 1000;
+    z-index: 10000;
   }
 
   .tooltip {
@@ -164,7 +164,7 @@
     border-radius: .5rem;
     user-select: none;
     text-align: center;
-    z-index: 1000;
+    z-index: 10000;
 
     &::after {
       content: '';

plugins/workbench-resources/src/components/AccountPopup.svelte

@@ -15,8 +15,9 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Label } from '@anticrm/ui'
+  import { Label, showPopup } from '@anticrm/ui'
   import { Avatar } from '@anticrm/presentation'
+  import TelegramPopup from './TelegramPopup.svelte'
 
   let items: string[] = ['Settings', 'Integrations', 'Support', 'Privacy', 'Terms & policy', 'Sign out']
 </script>
@@ -32,7 +33,10 @@
   </div>
   <div class="content">
     {#each items as item }
-      <div class="item">{item}</div>
+      <div class="item" on:click={() => {
+        if (item === 'Integrations')
+          showPopup(TelegramPopup, {})
+      }}>{item}</div>
     {/each}
   </div>
 </div>

plugins/workbench-resources/src/components/PinPad.svelte

@@ -0,0 +1,108 @@
+<!--
+// 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 { onMount } from "svelte"
+  import { createEventDispatcher } from 'svelte'
+
+  export let length: number = 6
+  export let value: string = ''
+
+  const dispatch = createEventDispatcher()
+
+  let digits: string[] = []
+  let areas: HTMLInputElement[] = []
+  let selected: number = 0
+  let filled: number
+
+  for (let i = 0; i < length; i++) digits[i] = ''
+
+  const onInput = (ev?: Event, n?: number): void => {
+    selected = -1
+    filled = 0
+    for (let i = 0; i < length; i++) {
+      if (digits[i] && digits[i].length > 1) {
+        if (i < length - 1) digits[i+1] = digits[i].substring(1)
+        digits[i] = digits[i][0]
+      }
+      if (digits[i]) filled++
+      if (selected < 0 && selected < length && digits[i] === '') selected = i
+    }
+    digits = digits
+    if (filled === length) {
+      if ((ev as InputEvent).inputType === 'insertFromPaste' && n && n < length) selected = n
+      if ((ev as InputEvent).inputType === 'insertText' && selected < 0 && (n || n === 0)) selected = n + 1
+      if (selected === length) selected--
+      value = ''
+      for (let i = 0; i < length; i++) value += digits[i]
+      dispatch('filled', value)
+    }
+    if (selected !== -1 && selected < length) {
+      areas[selected].focus()
+      areas[selected].select()
+    }
+  }
+
+  const selectInput = (n: number): void => {
+    if (areas[n]) {
+      areas[n].focus()
+      areas[n].select()
+    }
+  }
+
+  const keyPressed = (ev: Event, n: number): void => {
+    if ((ev as KeyboardEvent).key === 'Backspace' && n > 0 && digits[n] === '') {
+      digits[n-1] = ''
+      digits = digits
+      onInput(undefined, n-1)
+    }
+  }
+
+  onMount(() => {
+    if (areas[0]) onInput()
+    console.log('AREAS', areas)
+  })
+</script>
+
+<div class="flex-between">
+  {#each digits as digit, i}
+    <input
+      class="fs-title digit"
+      type="text"
+      bind:this={areas[i]}
+      bind:value={digit}
+      on:input={(ev) => { onInput(ev, i) }}
+      on:keydown={async (ev) => keyPressed(ev, i)}
+      on:click={async () => selectInput(i)}
+    />
+  {/each}
+</div>
+
+<style lang="scss">
+  .digit {
+    width: 2.5rem;
+    height: 3rem;
+    text-align: center;
+    background-color: var(--theme-card-bg-dark);
+    border: 1px solid transparent;
+    border-style: none;
+    border-radius: .5rem;
+
+    &:focus {
+      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+    }
+  }
+</style>

plugins/workbench-resources/src/components/TelegramPopup.svelte

@@ -0,0 +1,121 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { Label, IconClose, Button, EditBox } from '@anticrm/ui'
+  import PinPad from './PinPad.svelte'
+
+  export let checkState: boolean = false
+
+  const dispatch = createEventDispatcher()
+  const digitsCount: number = 6
+
+  const changeState = (): void => {
+    if (checkState) {
+
+    } else {
+
+    }
+    checkState = !checkState
+  }
+
+  const checkInput = (result: CustomEvent) => {
+    if (result) console.log('Telegram pin code filled', result.detail)
+  }
+</script>
+
+<div class="plugin-popup">
+  <div class="popup-bg" />
+  <div class="flex-between header">
+    <div class="overflow-label fs-title"><Label label={'Connect your Telegram account'} /></div>
+    <div class="tool" on:click={() => { dispatch('close') }}>
+      <IconClose size={'small'}/>
+    </div>
+  </div>
+  <div class="content" class:more={!checkState}>
+    {#if checkState}
+      <p>Enter the {digitsCount}-digit code you received on your Telegram account.</p>
+      <PinPad length={digitsCount} on:filled={checkInput} />
+    {:else}
+      <p>Enter your Telegram username or phone number to connect your account.</p>
+      <EditBox label={'Username or phone number'} placeholder={'@johnappleseed'} />
+    {/if}
+  </div>
+  <div class="footer">
+    <Button label={checkState ? 'Connect' : 'Next'} primary on:click={changeState} />
+    {#if checkState}
+      <a class="link" href={'#'} on:click={changeState}>Back</a>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .plugin-popup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 20rem;
+    min-width: 20rem;
+    max-width: 20rem;
+    border-radius: 1.25rem;
+
+    .header {
+      flex-shrink: 0;
+      margin: 1.75rem 1.75rem 1.25rem;
+      .tool {
+        cursor: pointer;
+        &:hover { color: var(--theme-caption-color); }
+        &:active { color: var(--theme-content-accent-color); }
+      }
+    }
+
+    .content {
+      flex-shrink: 0;
+      flex-grow: 1;
+      margin: 0 1.75rem .5rem;
+      height: fit-content;
+      p { margin: 0 0 1rem; }
+      &.more { margin-bottom: 1rem; }
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 1.75rem 1.75rem;
+
+      .link {
+        color: var(--theme-content-dark-color);
+        &:hover { color: var(--theme-caption-color); }
+        &:active { color: var(--theme-content-accent-color); }
+      }
+    }
+
+    .popup-bg {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--theme-card-bg);
+      border-radius: 1.25rem;
+      backdrop-filter: blur(15px);
+      box-shadow: var(--theme-card-shadow);
+      z-index: -1;
+    }
+  }
+</style>