wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-27 02:42:11 +00:00
Code Issues Actions2 Packages Projects Releases Wiki Activity

Update Button ()

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-08-28 00:33:09 +03:00 committed by GitHub
parent 06a13ba1d0
commit 84312ab09b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 108 additions and 58 deletions
packages
theme/styles
_colors.scss
ui/src/components
Button.svelte
plugins/recruit-resources/src/components
DialogHeader.svelte

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

@ -25,14 +25,17 @@
--primary-button-outline: rgba(87, 132, 255, .3);
--primary-button-border: rgba(255, 255, 255, .09);
--image-primary-button-color: #000;
--image-primary-button-bg: #fff;
--image-primary-button-border: rgba(255, 255, 255, .2);
--image-button-color: #fff;
--image-button-bg: rgba(255, 255, 255, .17);
--image-button-border: rgba(255, 255, 255, .14);
--image-button-bg-hover: rgba(255, 255, 255, .22);
--image-button-border-hover: rgba(255, 255, 255, .19);
--trans-primary-button-color: #fff;
--trans-primary-button-bg: rgba(255, 255, 255, .2);
--trans-primary-button-border: rgba(255, 255, 255, .2);
--trans-primary-button-bg-hovered: rgba(255, 255, 255, .25);
--trans-primary-button-border-hovered: rgba(255, 255, 255, .25);
--trans-button-color: #fff;
--trans-button-bg: transparent;
--trans-button-border: rgba(255, 255, 255, .2);
--trans-button-bg-hovered: rgba(255, 255, 255, .05);
--trans-button-border-hovered: rgba(255, 255, 255, .25);
--system-error-color: #EE7A7A;
--system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%

83
packages/ui/src/components/Button.svelte
View File

@ -13,20 +13,32 @@
// limitations under the License.
-->
<script lang="ts">
import type { IntlString } from '@anticrm/platform'
import type { IntlString, Asset } from '@anticrm/platform'
import type { AnySvelteComponent } from '@anticrm/ui'
import Spinner from './Spinner.svelte'
import Label from './Label.svelte'
import Icon from './Icon.svelte'
export let label: IntlString
export let primary: boolean = false
export let size: 'small' | 'medium' = 'medium'
export let icon: Asset | AnySvelteComponent | undefined
export let disabled: boolean = false
export let loading: boolean = false
export let onImage: boolean = false
export let transparent: boolean = false
export let width: string | undefined = undefined
</script>
<button class="button {size}" class:primary class:onImage disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
<button class="button {size}" class:primary class:transparent disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
{#if icon}
<div class="icon">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'}/>
{:else}
<svelte:component this={icon} size={'small'} />
{/if}
</div>
{/if}
{#if loading}
<Spinner />
{:else}
@ -45,6 +57,12 @@
border: 1px solid var(--theme-button-border-enabled);
border-radius: 0.75rem;
.icon {
margin-right: .375rem;
transform-origin: center center;
transform: scale(.75);
}
&:hover {
background-color: var(--theme-button-bg-hovered);
border-color: var(--theme-button-border-hovered);
@ -92,38 +110,59 @@
}
}
.onImage {
.transparent {
padding: 0 1.25rem;
color: var(--image-button-color);
background-color: var(--image-button-bg);
border-color: var(--image-button-border);
font-weight: 500;
border-radius: .5rem;
backdrop-filter: blur(3px);
.primary {
color: var(--image-primary-button-color);
background-color: var(--image-primary-button-bg);
border-color: var(--image-button-primary-border);
}
color: var(--trans-button-color);
background-color: var(--trans-button-bg);
border-color: var(--trans-button-border);
&:hover {
background-color: var(--image-button-bg-hover);
border-color: var(--image-button-border-hover);
background-color: var(--trans-button-bg-hovered);
border-color: var(--trans-button-border-hovered);
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
}
&:focus {
background-color: var(--image-button-bg-hover);
border-color: var(--image-button-border-hover);
background-color: var(--trans-button-bg-hovered);
border-color: var(--primary-button-focused-border);
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
}
&:active {
background-color: var(--image-button-bg);
border-color: var(--image-button-border);
background-color: var(--trans-button-bg);
border-color: var(--trans-button-border);
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}
&:disabled {
background-color: var(--image-button-bg);
border-color: var(--image-button-border);
background-color: var(--trans-button-bg);
border-color: var(--trans-button-border);
}
&.primary {
color: var(--trans-primary-button-color);
background-color: var(--trans-primary-button-bg);
border-color: var(--trans-primary-button-border);
backdrop-filter: blur(3px);
&:hover {
background-color: var(--trans-primary-button-bg-hovered);
border-color: var(--trans-primary-button-border-hovered);
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
}
&:focus {
background-color: var(--trans-primary-button-bg-hovered);
border-color: var(--primary-button-focused-border);
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
}
&:active {
background-color: var(--trans-primary-button-bg);
border-color: var(--trans-primary-button-border);
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}
&:disabled {
background-color: var(--trans-primary-button-bg);
border-color: var(--trans-primary-button-border);
}
}
}
</style>

64
plugins/recruit-resources/src/components/DialogHeader.svelte
View File

@ -19,7 +19,6 @@
import login from '@anticrm/login'
import { EditBox, Button, Label } from '@anticrm/ui'
import ImageButton from './ImageButton.svelte'
import FileUpload from './icons/FileUpload.svelte'
let dragover = false
@ -49,22 +48,21 @@
on:dragover|preventDefault={ ()=>{} }
on:dragleave={ () => { dragover = false } }
on:drop|preventDefault|stopPropagation={drop}>
<div class="flex-col-center">
<div class="main-content">
<div class="avatar"></div>
<div class="name"><EditBox placeholder="John"/>&nbsp;<EditBox placeholder="Appleseed"/></div>
<div class="title">Candidate title</div>
<!-- <input type="file" name="file" id="file"/> -->
</div>
<div class="resume-btn">
<ImageButton label={'Upload resume'} icon={FileUpload} />
<div class="lb-content">
<Button label={'Upload resume'} icon={FileUpload} size={'small'} transparent primary />
</div>
<div class="save-btn">
<Button label={'Save'} size={'small'} onImage />
<div class="rt-content">
<Button label={'Save'} size={'small'} transparent />
</div>
</div>
<style lang="scss">
.header {
position: relative;
display: flex;
@ -83,36 +81,46 @@
border: 1px solid red;
}
.avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: #C4C4C4;
}
.name {
margin-top: .625rem;
font-size: 1rem;
font-weight: 500;
line-height: 150%;
color: #fff;
}
.title {
margin-top: .25rem;
font-size: .75rem;
font-weight: 500;
color: rgba(255, 255, 255, .8);
.main-content {
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: #C4C4C4;
}
.name {
margin-top: .625rem;
font-size: 1rem;
font-weight: 500;
line-height: 150%;
color: #fff;
}
.title {
margin-top: .25rem;
font-size: .75rem;
font-weight: 500;
color: rgba(255, 255, 255, .8);
}
}
.resume-btn {
.lb-content {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.save-btn {
.rb-content {
position: absolute;
right: 1rem;
bottom: 1rem;
}
.rt-content {
position: absolute;
top: 1rem;
right: 1rem;
}
}
</style>