mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-27 11:06:50 +03:00
Add PluginCard
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
parent
8f739d4844
commit
9345de879e
@ -36,6 +36,12 @@
|
||||
import recruit from '../plugin'
|
||||
import { combineName, formatName, getFirstName, getLastName } from '@anticrm/contact'
|
||||
|
||||
// Start Demo
|
||||
import PluginCard from './PluginCard.svelte'
|
||||
import Telegram from './icons/Telegram.svelte'
|
||||
import Gmail from './icons/Gmail.svelte'
|
||||
// End Demo
|
||||
|
||||
export let _id: Ref<Candidate>
|
||||
let object: Candidate
|
||||
|
||||
@ -88,7 +94,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<!-- Start Demo -->
|
||||
<div class="group cards-container">
|
||||
<PluginCard icon={Telegram} />
|
||||
<PluginCard icon={Gmail} />
|
||||
</div>
|
||||
<!-- End Demo -->
|
||||
|
||||
<div class="flex-col group">
|
||||
<div class="flex-row-center">
|
||||
<div class="caption">Applications</div>
|
||||
<CircleButton icon={IconAdd} size={'small'} on:click={ (ev) => { showPopup(CreateApplication, { candidate: object._id, preserveCandidate: true }, ev.target) } } />
|
||||
@ -116,6 +129,15 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
// Start Demo
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
|
||||
grid-auto-rows: minmax(12.5rem, auto);
|
||||
grid-gap: 1.5rem;
|
||||
}
|
||||
// End Demo
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
|
||||
69
plugins/recruit-resources/src/components/PluginCard.svelte
Normal file
69
plugins/recruit-resources/src/components/PluginCard.svelte
Normal file
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// 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 { AnySvelteComponent } from '@anticrm/ui'
|
||||
import { Button, Link } from '@anticrm/ui'
|
||||
|
||||
export let icon: AnySvelteComponent
|
||||
</script>
|
||||
|
||||
<div class="flex-col plugin-container">
|
||||
<div class="flex-row-center header">
|
||||
<div class="icon mr-4"><svelte:component this={icon} /></div>
|
||||
<div class="flex-grow flex-col">
|
||||
<div class="fs-title max-label overflow-label">Telegram</div>
|
||||
<div class="small-text content-dark-color max-label overflow-label">Lorem ipsum something</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp</div>
|
||||
<div class="footer">
|
||||
<Button label={'Add'} primary on:click={() => { }} />
|
||||
<Link label={'Learn more'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.plugin-container {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
.header { margin: 1.5rem 1.5rem 1rem; }
|
||||
.max-label { max-width: calc(100% - 6.25rem); }
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
.content {
|
||||
margin: 0 1.5rem .25rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
direction: rtl;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
padding: 1.5rem 1.75rem 1.25rem;
|
||||
height: 5.25rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 1.25rem 1.25rem;
|
||||
}
|
||||
</style>
|
||||
26
plugins/recruit-resources/src/components/icons/Gmail.svelte
Normal file
26
plugins/recruit-resources/src/components/icons/Gmail.svelte
Normal file
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<path fill={'#FFFFFF'} d="M0,12.8c0-4.5,0-6.7,0.9-8.4c0.8-1.5,2-2.7,3.5-3.5C6.1,0,8.3,0,12.8,0h10.4c4.5,0,6.7,0,8.4,0.9 c1.5,0.8,2.7,2,3.5,3.5c0.9,1.7,0.9,4,0.9,8.4v10.4c0,4.5,0,6.7-0.9,8.4c-0.8,1.5-2,2.7-3.5,3.5c-1.7,0.9-4,0.9-8.4,0.9H12.8 c-4.5,0-6.7,0-8.4-0.9c-1.5-0.8-2.7-2-3.5-3.5C0,29.9,0,27.7,0,23.2V12.8z"/>
|
||||
<path fill={'#EA4335'} d="M25.8,8.4l-7.7,6l-7.9-6v0l0,0v8.4l7.8,6.1l7.8-5.9V8.4z"/>
|
||||
<path fill={'#FBBC05'} d="M27.8,6.9l-2,1.5V17l6.4-4.9V9.2C32.1,9.2,31.4,5,27.8,6.9z"/>
|
||||
<path fill={'#34A853'} d="M25.8,17v11.2h4.9c0,0,1.4-0.1,1.5-1.7V12.2L25.8,17z"/>
|
||||
<path fill={'#C5221F'} d="M10.2,28.3V16.8l0,0L10.2,28.3z"/>
|
||||
<path fill={'#C5221F'} d="M10.2,8.4l-2-1.5C4.6,5,3.9,9.2,3.9,9.2v2.9l6.4,4.6V8.4z"/>
|
||||
<path fill={'#C5221F'} d="M10.2,8.4v8.4l0,0L10.2,8.4L10.2,8.4z"/>
|
||||
<path fill={'#4285F4'} d="M3.9,12.2v14.4c0.1,1.6,1.5,1.7,1.5,1.7h4.9l0-11.5L3.9,12.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_TELEGRAM_" gradientUnits="userSpaceOnUse" x1="18" y1="-36" x2="18" y2="-72" gradientTransform="matrix(1 0 0 -1 0 -36)">
|
||||
<stop offset="0" style="stop-color:#37BBFE"/>
|
||||
<stop offset="1" style="stop-color:#007DBB"/>
|
||||
</linearGradient>
|
||||
<path fill={'url(#SVGID_TELEGRAM_)'} d="M0,12.8c0-4.5,0-6.7,0.9-8.4c0.8-1.5,2-2.7,3.5-3.5C6.1,0,8.3,0,12.8,0h10.4c4.5,0,6.7,0,8.4,0.9 c1.5,0.8,2.7,2,3.5,3.5c0.9,1.7,0.9,4,0.9,8.4v10.4c0,4.5,0,6.7-0.9,8.4c-0.8,1.5-2,2.7-3.5,3.5c-1.7,0.9-4,0.9-8.4,0.9H12.8 c-4.5,0-6.7,0-8.4-0.9c-1.5-0.8-2.7-2-3.5-3.5C0,29.9,0,27.7,0,23.2V12.8z"/>
|
||||
<path fill={'#FFFFFF'} d="M27,10.6c0.2-1-0.8-1.9-1.7-1.4L7.5,17.2c-0.6,0.3-0.6,1.3,0.1,1.5l3.7,1.2c0.7,0.2,1.5,0.1,2.1-0.3l8.3-5.9 c0.2-0.2,0.5,0.2,0.3,0.4l-6,6.3c-0.6,0.6-0.5,1.7,0.2,2.1l6.7,4.3c0.7,0.5,1.7,0,1.9-0.9L27,10.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue
Block a user