wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 03:40:48 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

UBER-364: Adapt updated UI (#3348)

Browse Source 
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2023-06-06 02:17:57 +07:00 committed by GitHub
parent 5a9e9116fd
commit 4ec9d62bc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 211 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dev/prod/webpack.config.js
View File

@ -155,7 +155,7 @@ module.exports = {
}
},
{
test: /\.(jpg|png)$/,
test: /\.(jpg|png|webp)$/,
use: {
loader: 'file-loader',
options: {

3
packages/theme/styles/button.scss
View File

@ -94,6 +94,9 @@
&.sh-round {
border-radius: 0.5rem;
}
&.sh-round2 {
border-radius: 0.75rem;
}
&.sh-circle {
border-radius: 1rem;
&.link {

2
packages/ui/src/components/StylishEdit.svelte
View File

@ -99,7 +99,7 @@
left: 1.25rem;
font-size: 0.75rem;
color: var(--theme-caption-color);
opacity: 0.3;
opacity: 0.8;
transition: top 200ms;
pointer-events: none;
user-select: none;

10
packages/ui/src/types.ts
View File

@ -126,7 +126,15 @@ export type ButtonKind =
| 'list'
| 'list-header'
export type ButtonSize = 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | 'filter' | undefined
export type ButtonShape =
| 'rectangle'
| 'rectangle-left'
| 'rectangle-right'
| 'circle'
| 'round'
| 'round2'
| 'filter'
| undefined
export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' | 'underline'
export interface PopupPositionElement {
getBoundingClientRect: () => DOMRect

9
plugins/login-resources/img/back.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 MiB

BIN
plugins/login-resources/img/back_signin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 KiB

3
plugins/login-resources/package.json
View File

@ -38,6 +38,7 @@
"@hcengineering/workbench": "^0.6.6",
"@hcengineering/core": "^0.6.25",
"@hcengineering/presentation": "^0.6.2",
"@hcengineering/setting": "^0.6.7"
"@hcengineering/setting": "^0.6.7",
"@hcengineering/theme": "^0.6.3"
}
}

3
plugins/login-resources/src/components/Form.svelte
View File

@ -136,6 +136,7 @@
<Button
label={action.i18n}
kind={'primary'}
shape={'round2'}
size={'x-large'}
width="100%"
loading={inAction}
@ -216,7 +217,7 @@
font-size: 0.8rem;
color: var(--theme-caption-color);
span {
opacity: 0.3;
opacity: 0.8;
}
a {
text-decoration: none;

150
plugins/login-resources/src/components/LoginApp.svelte
View File

@ -14,21 +14,23 @@
// limitations under the License.
-->
<script lang="ts">
import { location, Popup, ticker, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
import { Popup, Scroller, deviceOptionsStore as deviceInfo, location, ticker } 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 presentation from '@hcengineering/presentation'
import { getMetadata } from '@hcengineering/platform'
import PasswordRequest from './PasswordRequest.svelte'
import PasswordRestore from './PasswordRestore.svelte'
import presentation from '@hcengineering/presentation'
import { themeStore } from '@hcengineering/theme'
import { onDestroy } from 'svelte'
import Confirmation from './Confirmation.svelte'
import ConfirmationSend from './ConfirmationSend.svelte'
import CreateWorkspaceForm from './CreateWorkspaceForm.svelte'
import Join from './Join.svelte'
import LoginForm from './LoginForm.svelte'
import PasswordRequest from './PasswordRequest.svelte'
import PasswordRestore from './PasswordRestore.svelte'
import SelectWorkspace from './SelectWorkspace.svelte'
import SignupForm from './SignupForm.svelte'
import LoginIcon from './icons/LoginIcon.svelte'
import workbench from '@hcengineering/workbench'
export let page: string = 'login'
@ -48,54 +50,81 @@
)
</script>
<Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
<div
class="panel"
class:minHeight={!$deviceInfo.isPortrait}
class:landscape={$deviceInfo.docWidth > 768}
style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
>
<div class="flex-grow" />
{#if page === 'login'}
<LoginForm {navigateUrl} />
{:else if page === 'signup'}
<SignupForm />
{:else if page === 'createWorkspace'}
<CreateWorkspaceForm />
{:else if page === 'password'}
<PasswordRequest />
{:else if page === 'recovery'}
<PasswordRestore />
{:else if page === 'selectWorkspace'}
<SelectWorkspace {navigateUrl} />
{:else if page === 'join'}
<Join />
{:else if page === 'confirm'}
<Confirmation />
{:else if page === 'confirmationSend'}
<ConfirmationSend />
{/if}
<div class="theme-dark w-full h-full backd" class:paneld={$deviceInfo.docWidth <= 768} class:white={!$themeStore.dark}>
<div class:back={$deviceInfo.docWidth > 768} class="w-full h-full">
<div style:position="fixed" style:left={'28px'} style:top={'48px'} class="flex-row-center">
<LoginIcon /><span class="fs-title">{getMetadata(workbench.metadata.PlatformTitle)}</span>
</div>
<Scroller padding={'1.25rem'} contentDirection={$deviceInfo.docWidth <= 768 ? 'vertical-reverse' : 'horizontal'}>
<div class="flex-grow" />
<div
class:mt-8={$deviceInfo.docWidth < 768}
class:panel={$deviceInfo.docWidth > 768}
class:white={!$themeStore.dark}
class:minHeight={!$deviceInfo.isPortrait}
class:landscape={$deviceInfo.docWidth > 768}
style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
>
<div class="flex-grow" />
{#if page === 'login'}
<LoginForm {navigateUrl} />
{:else if page === 'signup'}
<SignupForm />
{:else if page === 'createWorkspace'}
<CreateWorkspaceForm />
{:else if page === 'password'}
<PasswordRequest />
{:else if page === 'recovery'}
<PasswordRestore />
{:else if page === 'selectWorkspace'}
<SelectWorkspace {navigateUrl} />
{:else if page === 'join'}
<Join />
{:else if page === 'confirm'}
<Confirmation />
{:else if page === 'confirmationSend'}
<ConfirmationSend />
{/if}
</div>
</Scroller>
<Popup />
</div>
<Intro landscape={$deviceInfo.docWidth <= 768} mini={$deviceInfo.docWidth <= 480} />
</Scroller>
<Popup />
</div>
<style lang="scss">
.backd {
background: '#000';
&.paneld {
background: linear-gradient(180deg, #232324 0%, #171719 100%);
}
}
.back {
background: url('../../img/back_signin.png');
background-size: cover;
background-position-y: center;
background-repeat: no-repeat;
}
.panel {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--theme-list-row-color);
box-shadow: var(--popup-aside-shadow);
height: calc(100% - 5rem);
background: linear-gradient(180deg, #232324 0%, #171719 100%);
&.white {
background: radial-gradient(94.31% 94.31% at 6.36% 5.69%, #484a4f 0%, #505257 100%);
}
border-radius: 7.5658px !important;
box-shadow: 30px 11.52px 193.87px rgba(0, 0, 0, 0.7);
&.minHeight {
min-height: 40rem;
}
$circle-size: calc(1vh + 1vw);
$r1: 23;
$r2: 17;
&::before,
&::after {
content: '';
@ -103,36 +132,9 @@
border-radius: 50%;
z-index: -1;
}
&::before {
top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 5);
left: auto;
right: 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 * 5);
left: auto;
right: 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;
&::before {
left: calc(-1 * $circle-size * $r1 / 2);
right: auto;
}
&::after {
left: calc(-1 * $circle-size * $r2 / 2);
right: auto;
}
}
}
</style>

2
plugins/login-resources/src/components/SelectWorkspace.svelte
View File

@ -159,7 +159,7 @@
font-size: 0.8rem;
color: var(--theme-caption-color);
span {
opacity: 0.3;
opacity: 0.8;
}
a {
text-decoration: none;

107
plugins/login-resources/src/components/icons/LoginIcon.svelte Normal file
View File

@ -0,0 +1,107 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5074 25.7081C18.1851 25.8669 17.8149 25.8669 17.4926 25.7081L8.21963 21.1407C7.74273 20.9058 7.74273 20.1741 8.21963 19.9392L17.4926 15.3717C17.8149 15.213 18.1851 15.213 18.5074 15.3717L27.7804 19.9392C28.2573 20.1741 28.2573 20.9058 27.7804 21.1407L18.5074 25.7081Z"
fill="white"
/>
<g filter="url(#filter0_bd_1990_313055)">
<path
d="M18.5074 21.2511C18.1851 21.4099 17.8149 21.4099 17.4926 21.2511L8.21963 16.6836C7.74273 16.4487 7.74273 15.7171 8.21963 15.4822L17.4926 10.9147C17.8149 10.7559 18.1851 10.7559 18.5074 10.9147L27.7804 15.4822C28.2573 15.7171 28.2573 16.4487 27.7804 16.6836L18.5074 21.2511Z"
fill="#6FA0FF"
fill-opacity="0.4"
shape-rendering="crispEdges"
/>
</g>
<path
d="M18.4439 25.5013C18.162 25.6402 17.838 25.6402 17.5561 25.5013L8.28305 20.9338C7.92537 20.7577 7.92538 20.2089 8.28305 20.0327L17.5561 15.4652C17.838 15.3264 18.162 15.3264 18.4439 15.4652L27.717 20.0327C28.0746 20.2089 28.0746 20.7577 27.717 20.9338L18.4439 25.5013Z"
stroke="url(#paint0_linear_1990_313055)"
stroke-width="0.31814"
/>
<g filter="url(#filter1_bd_1990_313055)">
<path
d="M18.5074 21.2511C18.1851 21.4099 17.8149 21.4099 17.4926 21.2511L8.21963 16.6836C7.74273 16.4487 7.74273 15.7171 8.21963 15.4822L17.4926 10.9147C17.8149 10.7559 18.1851 10.7559 18.5074 10.9147L27.7804 15.4822C28.2573 15.7171 28.2573 16.4487 27.7804 16.6836L18.5074 21.2511Z"
fill="white"
fill-opacity="0.4"
shape-rendering="crispEdges"
/>
</g>
<path
d="M18.4057 21.017C18.1468 21.1446 17.8493 21.1446 17.5904 21.017L8.31735 16.4496C8.02783 16.3069 8.02783 15.8627 8.31735 15.7201L17.5904 11.1527C17.8493 11.0251 18.1468 11.0251 18.4057 11.1527L27.6787 15.7201C27.9683 15.8628 27.9683 16.3069 27.6787 16.4496L18.4057 21.017Z"
stroke="url(#paint1_linear_1990_313055)"
stroke-opacity="0.8"
stroke-width="0.5"
/>
<defs>
<filter
id="filter0_bd_1990_313055"
x="5.31669"
y="8.2498"
width="25.3666"
height="15.6664"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.27256" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1990_313055" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="-0.636281" />
<feGaussianBlur stdDeviation="0.954421" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.28 0 0 0 0 1 0 0 0 0.17 0" />
<feBlend mode="normal" in2="effect1_backgroundBlur_1990_313055" result="effect2_dropShadow_1990_313055" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1990_313055" result="shape" />
</filter>
<filter
id="filter1_bd_1990_313055"
x="5.31669"
y="8.2498"
width="25.3666"
height="15.6664"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.27256" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1990_313055" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="-0.636281" />
<feGaussianBlur stdDeviation="0.954421" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0" />
<feBlend mode="normal" in2="effect1_backgroundBlur_1990_313055" result="effect2_dropShadow_1990_313055" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1990_313055" result="shape" />
</filter>
<linearGradient
id="paint0_linear_1990_313055"
x1="18.44"
y1="20.7308"
x2="18.44"
y2="15.0108"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E4E7EC" stop-opacity="0" />
<stop offset="1" stop-color="white" />
</linearGradient>
<linearGradient
id="paint1_linear_1990_313055"
x1="18.438"
y1="16.3323"
x2="18.438"
y2="10.6123"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E4E7EC" stop-opacity="0" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB