From 9345de879e6731ac1fc0d5346eacf08e3650f054 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 18 Nov 2021 03:30:12 +0300
Subject: [PATCH] Add PluginCard

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/EditCandidate.svelte       | 24 ++++++-
 .../src/components/PluginCard.svelte          | 69 +++++++++++++++++++
 .../src/components/icons/Gmail.svelte         | 26 +++++++
 .../src/components/icons/Telegram.svelte      | 24 +++++++
 4 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 plugins/recruit-resources/src/components/PluginCard.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/Gmail.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/Telegram.svelte

diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 83a89e4c6a..6f16742269 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/plugins/recruit-resources/src/components/EditCandidate.svelte
@@ -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;
diff --git a/plugins/recruit-resources/src/components/PluginCard.svelte b/plugins/recruit-resources/src/components/PluginCard.svelte
new file mode 100644
index 0000000000..bf8b9dfc63
--- /dev/null
+++ b/plugins/recruit-resources/src/components/PluginCard.svelte
@@ -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>
diff --git a/plugins/recruit-resources/src/components/icons/Gmail.svelte b/plugins/recruit-resources/src/components/icons/Gmail.svelte
new file mode 100644
index 0000000000..7869631ae0
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Gmail.svelte
@@ -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>
diff --git a/plugins/recruit-resources/src/components/icons/Telegram.svelte b/plugins/recruit-resources/src/components/icons/Telegram.svelte
new file mode 100644
index 0000000000..e14de00eb0
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Telegram.svelte
@@ -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>