wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-05-30 20:28:20 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update cards and dialogs UI. (#627)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-15 12:08:02 +03:00 committed by GitHub
parent e958388e4c
commit 65268ecff6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/presentation/src/components/Card.svelte
View File

@ -124,7 +124,6 @@
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;
}

15
packages/presentation/src/components/MessageBox.svelte
View File

@ -25,11 +25,11 @@
</script>
<div class="msgbox-container">
<div class="overflow-label title"><Label {label} /></div>
<div class="overflow-label fs-title mb-4"><Label {label} /></div>
<div class="message"><Label label={message} /></div>
<div class="footer">
<Button label={'Ok'} size={'small'} primary on:click={() => dispatch('close', true)} />
<Button label={'Cancel'} size={'small'} on:click={() => dispatch('close', false)} />
<Button label={'Ok'} size={'small'} transparent primary on:click={() => dispatch('close', true)} />
<Button label={'Cancel'} size={'small'} transparent on:click={() => dispatch('close', false)} />
</div>
</div>
@ -43,15 +43,8 @@
background: var(--theme-msgbox-bg);
border-radius: 1.25rem;
user-select: none;
box-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
backdrop-filter: blur(10px);
box-shadow: var(--theme-msgbox-shadow);
.title {
margin-bottom: 1rem;
font-weight: 500;
font-size: 1rem;
color: var(--theme-caption-color);
}
.message {
margin-bottom: 1.75rem;
color: var(--theme-content-accent-color);

1
packages/presentation/src/components/SpaceCreateCard.svelte
View File

@ -107,7 +107,6 @@
right: 0;
background-color: var(--theme-card-bg);
border-radius: 1.25rem;
backdrop-filter: blur(24px);
box-shadow: var(--theme-card-shadow);
z-index: -1;
}

19
packages/theme/styles/_colors.scss
View File

@ -67,12 +67,13 @@
--theme-incoming-msg: rgba(67, 67, 72, .3);
--theme-outcoming-msg: rgba(67, 67, 72, .6);
--theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg: #282830;
--theme-card-bg-dark: rgba(222, 222, 240, .1);
--theme-card-divider: rgba(255, 255, 255, .1);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .8);
--theme-avatar-border: rgba(255, 255, 255, .1);
--theme-msgbox-bg: rgba(170, 170, 191, .25);
--theme-msgbox-bg: #26262B;
--theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
--theme-zone-bg: rgba(255, 255, 255, .05);
--theme-zone-border: rgba(255, 255, 255, .2);
--theme-zone-border-lite: rgba(255, 255, 255, .16);
@ -148,12 +149,13 @@
--theme-incoming-msg: rgba(67, 67, 72, .3);
--theme-outcoming-msg: rgba(67, 67, 72, .6);
--theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg: #282830;
--theme-card-bg-dark: rgba(222, 222, 240, .1);
--theme-card-divider: rgba(255, 255, 255, .1);
--theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .8);
--theme-avatar-border: rgba(255, 255, 255, .1);
--theme-msgbox-bg: rgba(170, 170, 191, .25);
--theme-msgbox-bg: #45444F;
--theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .4);
--theme-zone-bg: rgba(255, 255, 255, .05);
--theme-zone-border: rgba(255, 255, 255, .2);
--theme-zone-border-lite: rgba(255, 255, 255, .16);
@ -231,9 +233,10 @@
--theme-card-bg: #FFF;
--theme-card-bg-dark: rgba(255, 255, 255, .3);
--theme-card-divider: rgba(0, 0, 0, .1);
--theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);
--theme-card-shadow: 0px 15px 60px rgba(24, 25, 28, .2);
--theme-avatar-border: transparent;
--theme-msgbox-bg: rgba(170, 170, 191, .25);
--theme-msgbox-bg: #F2F2F2;
--theme-msgbox-shadow: 0px 20px 70px rgba(0, 0, 0, .2);
--theme-zone-bg: rgba(0, 0, 0, .05);
--theme-zone-border: rgba(0, 0, 0, .2);
--theme-zone-border-lite: rgba(0, 0, 0, .16);

1
packages/theme/styles/_layouts.scss
View File

@ -201,6 +201,7 @@ p:last-child { margin-block-end: 0; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-4 { margin-bottom: 1rem; }
/* --------- */
.relative { position: relative; }

5
plugins/view-assets/assets/icons.svg
View File

@ -23,7 +23,10 @@
<path d="M14.2,2.8h-2.4c-0.3,0-0.5-0.2-0.6-0.6l-0.2-1C10.9,0.5,10.3,0,9.6,0H6.4C5.7,0,5.1,0.5,4.9,1.3l-0.2,1 C4.7,2.6,4.4,2.8,4.2,2.8H1.8c-0.3,0-0.6,0.3-0.6,0.6S1.4,4,1.8,4h0.4c0.1,1.4,0.4,7.6,0.6,9.7c0.1,1.4,1,2.3,2.3,2.3 C6,16,7,16,8,16c0.9,0,1.9,0,2.9,0c1.3,0,2.2-0.9,2.3-2.3c0.2-2,0.5-8.3,0.6-9.7h0.4c0.3,0,0.6-0.3,0.6-0.6S14.6,2.8,14.2,2.8z M6,2.5l0.2-0.9c0-0.2,0.2-0.3,0.3-0.3h3.1c0.1,0,0.3,0.1,0.3,0.3l0.2,1c0,0.1,0.1,0.2,0.1,0.3H5.8C5.9,2.7,5.9,2.6,6,2.5z M12,13.6 c-0.1,1.2-0.9,1.2-1.1,1.2c-2,0-3.9,0-5.7,0c-0.6,0-1-0.4-1.1-1.2c-0.2-2-0.5-8-0.6-9.5h9.2C12.5,5.5,12.2,11.6,12,13.6z"/>
</symbol>
<symbol id="move" viewBox="0 0 16 16">
<path d="M9.5,1.3C9.3,1,8.9,1,8.6,1.3c-0.2,0.2-0.2,0.6,0,0.9l5.2,5.2H0.6C0.3,7.4,0,7.7,0,8c0,0.3,0.3,0.6,0.6,0.6 h13.2l-5.2,5.2c-0.2,0.2-0.2,0.6,0,0.9c0.2,0.2,0.6,0.2,0.9,0l6.3-6.3c0.2-0.2,0.2-0.6,0-0.9L9.5,1.3z"/>
<path d="M7.4,2.4v3.3C7.4,6,7.7,6.2,8,6.2c0.3,0,0.6-0.3,0.6-0.6V2.4l1.3,1.4L10.8,3L8.4,0.5L8,0L7.6,0.5L5.2,3 l0.9,0.8L7.4,2.4z"/>
<path d="M15.5,7.6L13,5.2l-0.8,0.9l1.4,1.3h-3.3C10,7.4,9.8,7.7,9.8,8c0,0.3,0.3,0.6,0.6,0.6h3.3l-1.4,1.3l0.8,0.9 l2.5-2.4L16,8L15.5,7.6z"/>
<path d="M8.6,13.6v-3.3C8.6,10,8.3,9.8,8,9.8c-0.3,0-0.6,0.3-0.6,0.6v3.3l-1.3-1.4L5.2,13l2.4,2.5L8,16l0.4-0.5 l2.4-2.5l-0.9-0.8L8.6,13.6z"/>
<path d="M5.6,8.6C6,8.6,6.2,8.3,6.2,8c0-0.3-0.3-0.6-0.6-0.6H2.4l1.4-1.3L3,5.2L0.5,7.6L0,8l0.5,0.4L3,10.8l0.8-0.9 L2.4,8.6H5.6z"/>
</symbol>
<symbol id='more-h' viewBox="0 0 16 16">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

4
plugins/view-assets/lang/en.json
View File

@ -2,6 +2,8 @@
"string": {
"MoveClass": "Move {class}",
"SelectToMove": "Select the {classLabel} you want to move {class} to.",
"Delete": "Delete"
"Delete": "Delete",
"Move": "Move",
"Cancel": "Cancel"
}
}

38
plugins/view-resources/src/components/Move.svelte
View File

@ -67,10 +67,10 @@
</script>
<div class="container">
<div class="header fs-title">
<div class="overflow-label fs-title mb-4">
<Label label={view.string.MoveClass} params={{ class: label }} />
</div>
<div class="description">
<div class="content-accent-color mb-4">
<Label label={view.string.SelectToMove} params={{ class: label, classLabel: classLabel }} />
</div>
<div class="spaceSelect">
@ -80,19 +80,19 @@
</div>
<div class="footer">
<Button
label="Move"
size="small"
width="100px"
label={view.string.Move}
size={'small'}
disabled={space === object?.space}
transparent
primary
on:click={() => {
move(object)
}}
/>
<Button
size="small"
width="100px"
label={ui.string.Cancel}
size={'small'}
label={view.string.Cancel}
transparent
on:click={() => {
dispatch('close')
}}
@ -104,19 +104,19 @@
.container {
display: flex;
flex-direction: column;
background-color: var(--theme-button-bg-hovered);
padding: 2rem 1.75rem 1.75rem;
width: 25rem;
max-width: 40rem;
background: var(--theme-msgbox-bg);
border-radius: 1.25rem;
padding: 2rem 1.75rem 1.75rem 1.75rem;
.description {
margin: 1rem 0;
}
user-select: none;
box-shadow: var(--theme-msgbox-shadow);
.spaceSelect {
padding: 1rem 1.25rem;
background-color: var(--theme-button-bg-enabled);
border-radius: 0.75rem;
padding: 1.25rem 1rem;
border: 0.5px solid var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: .75rem;
}
.footer {
@ -127,9 +127,7 @@
justify-content: start;
align-items: center;
margin-top: 1rem;
column-gap: 0.75rem;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
overflow: hidden;
column-gap: .5rem;
}
}
</style>

4
plugins/view-resources/src/plugin.ts
View File

@ -21,6 +21,8 @@ import view, { viewId } from '@anticrm/view'
export default mergeIds(viewId, view, {
string: {
MoveClass: '' as IntlString,
SelectToMove: '' as IntlString
SelectToMove: '' as IntlString,
Move: '' as IntlString,
Cancel: '' as IntlString
}
})