mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
Add ImageButton for upload resume (#66)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
753e5e4690
commit
c8cad17e2e
@ -15,6 +15,7 @@
|
||||
|
||||
/* Common Colors */
|
||||
* {
|
||||
--primary-button-color: #fff;
|
||||
--primary-button-enabled: #4474F6;
|
||||
--primary-button-hovered: #2A5FF6;
|
||||
--primary-button-pressed: #194CD7;
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
border-color: var(--primary-button-border);
|
||||
|
||||
|
||||
@ -18,7 +18,10 @@
|
||||
import { getMetadata } from '@anticrm/platform'
|
||||
import login from '@anticrm/login'
|
||||
|
||||
import Label from '@anticrm/ui/src/components/Label.svelte'
|
||||
import { Label } from '@anticrm/ui'
|
||||
import ImageButton from './ImageButton.svelte'
|
||||
import File from './icons/File.svelte'
|
||||
import FileUpload from './icons/FileUpload.svelte'
|
||||
|
||||
let dragover = false
|
||||
|
||||
@ -53,16 +56,21 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40rem;
|
||||
min-height: 15rem;
|
||||
height: 15rem;
|
||||
background-image: url(../../img/header-green.png);
|
||||
background-repeat: no-repeat;
|
||||
background-clip: border-box;
|
||||
@ -84,12 +92,18 @@
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: var(--theme-caption-color);
|
||||
color: #fff;
|
||||
}
|
||||
.title {
|
||||
font-size: .75rem;
|
||||
font-weight: 500;
|
||||
color: var(--theme-content-color);
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.resume-btn {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
67
plugins/recruit-resources/src/components/ImageButton.svelte
Normal file
67
plugins/recruit-resources/src/components/ImageButton.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 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 type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '@anticrm/ui'
|
||||
import { Label, Icon } from '@anticrm/ui'
|
||||
|
||||
export let label: IntlString
|
||||
export let icon: Asset | AnySvelteComponent
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center container">
|
||||
<div class="icon">
|
||||
{#if typeof (icon) === 'string'}
|
||||
<Icon {icon} size='small'/>
|
||||
{:else}
|
||||
<svelte:component this={icon} size='small' />
|
||||
{/if}
|
||||
</div>
|
||||
<span><Label {label} /></span>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: .5rem .75rem;
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, .17);
|
||||
border: 1px solid rgba(255, 255, 255, .14);
|
||||
border-radius: .5rem;
|
||||
backdrop-filter: blur(3px);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0.376rem;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .22);
|
||||
border-color: rgba(255, 255, 255, .19);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -19,6 +19,6 @@
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.1,8.2c-0.3-0.6-0.8-1-1.6-1.8l-0.8-0.7c-1.6-1.4-2.5-2.1-3.6-2.1c-1.1,0-1.9,0.7-3.6,2.1L5.6,6.5 C4.7,7.2,4.2,7.6,3.9,8.2c-0.3,0.6-0.3,1.2-0.3,2.4v3.5c0,1.7,0,2.6,0.6,3.2C4.9,18,5.8,18,7.5,18h0.4c0,0,0,0,0,0s0,0,0,0h4.2 c0,0,0,0,0,0s0,0,0,0h0.4c1.7,0,2.6,0,3.2-0.6c0.6-0.6,0.6-1.5,0.6-3.2v-3.5C16.3,9.5,16.3,8.8,16.1,8.2z M11.6,17H8.4v-3.5 c0-0.3,0.2-0.5,0.5-0.5h2.2c0.3,0,0.5,0.2,0.5,0.5V17z M15.3,14.2c0,1.5,0,2.2-0.3,2.5C14.7,17,14,17,12.6,17v-3.5 c0-0.8-0.7-1.5-1.5-1.5H8.9c-0.8,0-1.5,0.7-1.5,1.5V17C6,17,5.3,17,5,16.7c-0.3-0.3-0.3-1-0.3-2.5v-3.5c0-1.1,0-1.6,0.2-2 s0.6-0.7,1.4-1.4l0.8-0.7C8.5,5.3,9.3,4.6,10,4.6s1.5,0.6,2.9,1.9l0.8,0.7c0.8,0.7,1.2,1,1.4,1.4s0.2,0.9,0.2,2V14.2z"/>
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.8,5.1c-0.3-0.7-0.9-1.1-1.8-2l-0.9-0.8C10.4,0.8,9.4,0,8.2,0s-2.1,0.8-4,2.3l-1,0.9C2.2,4,1.6,4.4,1.3,5.1 S0.9,6.4,0.9,7.8v3.9c0,1.9,0,2.9,0.7,3.6C2.4,16,3.4,16,5.3,16h0.4l0,0l0,0h4.7l0,0l0,0h0.4c1.9,0,2.9,0,3.6-0.7s0.7-1.7,0.7-3.6 V7.9C15.1,6.6,15.1,5.8,14.8,5.1z M9.8,14.9H6.3V11c0-0.3,0.2-0.6,0.6-0.6h2.4c0.3,0,0.6,0.2,0.6,0.6C9.8,11,9.8,14.9,9.8,14.9z M13.9,11.8c0,1.7,0,2.4-0.3,2.8c-0.3,0.3-1.1,0.3-2.7,0.3V11c0-0.9-0.8-1.7-1.7-1.7H6.8c-0.9,0-1.7,0.8-1.7,1.7v3.9 c-1.6,0-2.3,0-2.7-0.3c-0.3-0.3-0.3-1.1-0.3-2.8V7.9c0-1.2,0-1.8,0.2-2.2c0.2-0.4,0.7-0.8,1.6-1.6l0.9-0.8c1.6-1.4,2.4-2.2,3.2-2.2 c0.8,0,1.7,0.7,3.2,2.1L12.2,4c0.9,0.8,1.3,1.1,1.6,1.6c0.2,0.4,0.2,1,0.2,2.2C13.9,7.8,13.9,11.8,13.9,11.8z"/>
|
||||
</svg>
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
|
||||
</svg>
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 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">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
|
||||
<path d="M8.3,5.8L8.3,5.8c0,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1 c0,0,0,0,0,0L5.6,7.9c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l1.3-1.3v4.2C7.5,11.8,7.7,12,8,12c0.3,0,0.5-0.2,0.5-0.5V7.3 l1.3,1.3c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1c0.2-0.2,0.2-0.5,0-0.7L8.3,5.8z"/>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user