From 06a13ba1d0f4c2ea557fab20bf3d4e2ce60dbad8 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 27 Aug 2021 23:06:16 +0300
Subject: [PATCH] Added a new mapping to the button (#73)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
packages/theme/styles/_colors.scss | 9 +++++
packages/ui/src/components/Button.svelte | 38 ++++++++++++++++++-
packages/ui/src/components/Popup.svelte | 3 +-
.../src/components/DialogHeader.svelte | 10 ++++-
4 files changed, 56 insertions(+), 4 deletions(-)
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index a02872d16a..da83d3700b 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -25,6 +25,15 @@
--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);
+
--system-error-color: #EE7A7A;
--system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index b1f507fc4f..9994b4f14f 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -22,10 +22,11 @@
export let size: 'small' | 'medium' = 'medium'
export let disabled: boolean = false
export let loading: boolean = false
+ export let onImage: boolean = false
export let width: string | undefined = undefined
</script>
-<button class="button {size}" class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+<button class="button {size}" class:primary class:onImage disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
{#if loading}
<Spinner />
{:else}
@@ -90,4 +91,39 @@
cursor: not-allowed;
}
}
+
+ .onImage {
+ padding: 0 1.25rem;
+ color: var(--image-button-color);
+ background-color: var(--image-button-bg);
+ border-color: var(--image-button-border);
+ 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);
+ }
+
+ &:hover {
+ background-color: var(--image-button-bg-hover);
+ border-color: var(--image-button-border-hover);
+ 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);
+ box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+ }
+ &:active {
+ background-color: var(--image-button-bg);
+ border-color: var(--image-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);
+ }
+ }
</style>
diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte
index 27621910f8..295ad150c4 100644
--- a/packages/ui/src/components/Popup.svelte
+++ b/packages/ui/src/components/Popup.svelte
@@ -80,8 +80,7 @@
.popup {
position: fixed;
background-color: transparent;
- border-radius: 1.25rem;
- box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
+ filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
z-index: 1001;
}
.modal-overlay {
diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index eba3d64a77..f3ab45a150 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -18,7 +18,7 @@
import { getMetadata } from '@anticrm/platform'
import login from '@anticrm/login'
- import { EditBox, Label } from '@anticrm/ui'
+ import { EditBox, Button, Label } from '@anticrm/ui'
import ImageButton from './ImageButton.svelte'
import FileUpload from './icons/FileUpload.svelte'
@@ -58,6 +58,9 @@
<div class="resume-btn">
<ImageButton label={'Upload resume'} icon={FileUpload} />
</div>
+ <div class="save-btn">
+ <Button label={'Save'} size={'small'} onImage />
+ </div>
</div>
<style lang="scss">
@@ -105,6 +108,11 @@
left: 1rem;
bottom: 1rem;
}
+ .save-btn {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ }
}
</style>