Update LoginApp UI for mobile (#2298)

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

packages/theme/styles/_colors.scss

@@ -241,6 +241,7 @@
   --popup-divider: #eff1f4;
   --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;  // Dark
   --popup-panel-shadow: rgb(0 0 0 / 10%) 0px 4px 18px;
+  --popup-aside-shadow: rgb(0 0 0 / 25%) 0px 8px 16px;
   --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
   --card-overlay-color: rgba(144, 149, 157, .4);
   --avatar-bg-color: #e0e0e0;  // HZ

packages/ui/src/components/Scroller.svelte

@@ -26,7 +26,7 @@
   export let fade: FadeOptions = defaultSP
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
-  export let contentDirection: 'vertical' | 'horizontal' = 'vertical'
+  export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
 
   let mask: 'top' | 'bottom' | 'both' | 'none' = 'none'
   let maskH: 'left' | 'right' | 'both' | 'none' = 'none'
@@ -245,7 +245,12 @@
         bind:this={divBox}
         class="box"
         style:padding
-        style:flex-direction={contentDirection === 'vertical' ? 'column' : 'row'}
+        style:flex-direction={contentDirection === 'vertical'
+          ? 'column'
+          : contentDirection === 'vertical-reverse'
+          ? 'column-reverse'
+          : 'row'}
+        style:height={contentDirection === 'vertical-reverse' ? 'max-content' : '100%'}
         use:resizeObserver={(element) => {
           boxHeight = element.clientHeight
           boxWidth = element.clientWidth
@@ -368,7 +373,6 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    height: 100%;
   }
   .scroller-container.bottomStart {
     justify-content: flex-end;

packages/ui/src/components/internal/ThemeSelector.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import Mute from './icons/Mute.svelte'
+  import { deviceOptionsStore as deviceInfo } from '../../'
 
   const { currentTheme, setTheme } = getContext('theme')
 
   const themes = ['theme-light', 'theme-dark']
 
   let current = themes.indexOf(currentTheme)
+  $deviceInfo.theme = currentTheme
 
   function changeTheme () {
     current++
     setTheme(themes[current % themes.length])
+    $deviceInfo.theme = themes[current % themes.length]
   }
 </script>
 

packages/ui/src/types.ts

@@ -229,4 +229,5 @@ export interface DeviceOptions {
   docHeight: number
   isPortrait: boolean
   isMobile: boolean
+  theme?: any
 }

plugins/login-resources/img/logo-dark.svg

@@ -0,0 +1,3 @@
+<svg width="63" height="79" viewBox="0 0 63 79" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8089 0.679932H0.378906V78.9999H15.2289V51.6099H34.8089C52.8489 51.6099 62.5289 41.2699 62.5289 26.1999C62.5289 11.0199 52.8489 0.679932 34.8089 0.679932ZM34.1489 38.8499H15.2289V13.4399H34.1489C42.8389 13.4399 47.5689 18.0599 47.5689 26.1999C47.5689 34.3399 42.8389 38.8499 34.1489 38.8499Z" fill="black"/>
+</svg>

plugins/login-resources/src/components/Form.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { StylishEdit, Label, Button } from '@hcengineering/ui'
+  import { StylishEdit, Label, Button, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import StatusControl from './StatusControl.svelte'
   import { OK, Status, Severity } from '@hcengineering/platform'
   import type { IntlString } from '@hcengineering/platform'
@@ -101,7 +101,7 @@
   }
 </script>
 
-<form class="container">
+<form class="container" style:padding={$deviceInfo.docWidth <= 480 ? '1.25rem' : '5rem'}>
   <div class="grow-separator" />
   <div class="title"><Label label={caption} /></div>
   <div class="status">
@@ -109,7 +109,7 @@
   </div>
   <div class="form">
     {#each fields as field (field.name)}
-      <div class={field.short ? 'form-col' : 'form-row'}>
+      <div class={field.short && !($deviceInfo.docWidth <= 600) ? 'form-col' : 'form-row'}>
         <StylishEdit
           label={field.i18n}
           name={field.id}
@@ -168,9 +168,10 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    flex-grow: 1;
     overflow: hidden;
-    height: 100%;
+    // height: 100%;
-    padding: 5rem;
+    // padding: 5rem;
 
     .title {
       font-weight: 600;

plugins/login-resources/src/components/Intro.svelte

@@ -0,0 +1,86 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021, 2022 Hardcore Engineering Inc.
+//
+// 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 { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+
+  export let size: 'small' | 'medium' = 'medium'
+</script>
+
+<div class="intro">
+  <div class="content">
+    <div class="logo {$deviceInfo.theme === 'theme-light' ? 'dark' : 'light'}" />
+  </div>
+  <div class="slogan">
+    <p>A unique place to manage all of your work</p>
+    <p>Welcome to the Platform</p>
+  </div>
+</div>
+
+<style lang="scss">
+  .intro {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+    min-width: 20rem;
+    min-height: 26rem;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+      .logo {
+        position: relative;
+        &::after {
+          position: absolute;
+          content: '';
+          transform: translate(-50%, -50%);
+          width: 63px;
+          height: 79px;
+        }
+        &.light::after {
+          background: center url('../../img/logo-light.svg');
+        }
+        &.dark::after {
+          background: center url('../../img/logo-dark.svg');
+        }
+        &::before {
+          position: absolute;
+          content: '';
+          transform: translate(-50%, -50%);
+          width: 16rem;
+          height: 16rem;
+          border: 1.8px solid var(--caption-color);
+          border-radius: 50%;
+          opacity: 0.08;
+        }
+      }
+    }
+    .slogan {
+      margin-bottom: 60px;
+      p {
+        margin: 0;
+        font-weight: 400;
+        font-size: 0.8rem;
+        text-align: center;
+        color: var(--theme-caption-color);
+        opacity: 0.8;
+      }
+    }
+  }
+</style>

plugins/login-resources/src/components/LoginApp.svelte

@@ -14,13 +14,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { location, Popup, ticker } from '@hcengineering/ui'
+  import { location, Popup, ticker, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   import LoginForm from './LoginForm.svelte'
   import SignupForm from './SignupForm.svelte'
   import CreateWorkspaceForm from './CreateWorkspaceForm.svelte'
   import SelectWorkspace from './SelectWorkspace.svelte'
   import Join from './Join.svelte'
+  import Intro from './Intro.svelte'
   import { onDestroy } from 'svelte'
   import login from '../plugin'
   import { getMetadata } from '@hcengineering/platform'
@@ -43,8 +44,12 @@
   )
 </script>
 
-<div class="container">
+<Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
-  <div class="panel">
+  <div
+    class="panel"
+    class:landscape={$deviceInfo.docWidth > 768}
+    style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
+  >
     {#if page === 'login'}
       <LoginForm {navigateUrl} />
     {:else if page === 'signup'}
@@ -57,79 +62,50 @@
       <Join />
     {/if}
   </div>
-  <div class="intro">
+  <Intro />
-    <div class="content">
+</Scroller>
-      <div class="logo" />
-    </div>
-    <div class="slogan">
-      <p>A unique place to manage all of your work</p>
-      <p>Welcome to the Platform</p>
-    </div>
-  </div>
 <Popup />
-</div>
 
 <style lang="scss">
-  .container {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    padding: 0px 1.25rem 1.25rem 1.25rem;
-
   .panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    height: max-content;
+    background: var(--popup-bg-color);
+    box-shadow: var(--popup-aside-shadow);
+
+    $circle-size: calc(1vh + 1vw);
+    $r1: 23;
+    $r2: 17;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      z-index: -1;
+    }
+    &::before {
+      top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 4);
+      left: calc(-1 * $circle-size * $r1 / 2);
+      width: calc($circle-size * $r1);
+      height: calc($circle-size * $r1);
+      border: 1px solid var(--content-color);
+      opacity: 0.05;
+    }
+    &::after {
+      top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 4);
+      left: calc(-1 * $circle-size * $r2 / 2);
+      width: calc($circle-size * $r2);
+      height: calc($circle-size * $r2);
+      background: var(--dark-color);
+      border: 1px solid var(--caption-color);
+      opacity: 0.05;
+    }
+    &.landscape {
       margin-right: 1.25rem;
       width: 41.75rem;
-      height: 100%;
-      border-radius: 1.25rem;
-      background-color: var(--theme-menu-selection);
-    }
-
-    .intro {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      overflow: hidden;
-      min-width: 20rem;
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        flex-grow: 1;
-        .logo {
-          position: relative;
-          &:after {
-            position: absolute;
-            content: '';
-            background: center url('../../img/logo.svg');
-            transform: translate(-50%, -50%);
-            width: 63px;
-            height: 79px;
-          }
-          &:before {
-            position: absolute;
-            content: '';
-            transform: translate(-50%, -50%);
-            width: 16rem;
-            height: 16rem;
-            border: 1.8px solid var(--theme-caption-color);
-            border-radius: 50%;
-            opacity: 0.08;
-          }
-        }
-      }
-      .slogan {
-        margin-bottom: 60px;
-        p {
-          margin: 0;
-          font-weight: 400;
-          font-size: 0.8rem;
-          text-align: center;
-          color: var(--theme-caption-color);
-          opacity: 0.8;
-        }
-      }
     }
   }
 </style>