From b2771486f12d8e460b9c59d25cc5ddbd777e3b2b Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 7 Sep 2021 18:28:26 +0300
Subject: [PATCH] Add dialog PDFViewer (#156)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/DialogHeader.svelte        |   4 +-
 .../src/components/PDFViewer.svelte           | 122 ++++++++++++++++++
 .../src/components/icons/ArrowLeft.svelte     |  24 ++++
 .../src/components/icons/ExpandDown.svelte    |  24 ++++
 .../src/components/icons/ExpandUp.svelte      |  24 ++++
 5 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 plugins/recruit-resources/src/components/PDFViewer.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/ArrowLeft.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/ExpandDown.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/ExpandUp.svelte

diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index 0dd5311855..bb6197657e 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -29,6 +29,7 @@
   import Twitter from './icons/Twitter.svelte'
   import User from './icons/User.svelte'
   import SocialEditor from './SocialEditor.svelte'
+  import PDFViewer from './PDFViewer.svelte'
 
   import { uploadFile } from '../utils'
   import { Candidate } from '@anticrm/recruit'
@@ -129,12 +130,13 @@
       <div class="title"><EditBox placeholder="Location" bind:value={newValue.city} on:input={isChanged}/></div>
     </div>
   </div>
-  <div class="abs-lb-content">
+  <div class="abs-lb-content flex-row-center">
     {#if resume.id}
       <Link label={resume.name} href={'#'} icon={FileIcon} />
     {:else}
       <Button label={'Upload resume'} {loading} icon={FileUpload} size={'small'} transparent primary on:click={() => { inputFile.click() }}/>
       <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
+      <Button label={'PDF'} size={'small'} transparent primary on:click={() => { showPopup(PDFViewer, {}, 'right') }}/>
     {/if}
   </div>
   <div class="abs-rb-content">
diff --git a/plugins/recruit-resources/src/components/PDFViewer.svelte b/plugins/recruit-resources/src/components/PDFViewer.svelte
new file mode 100644
index 0000000000..0649c6898b
--- /dev/null
+++ b/plugins/recruit-resources/src/components/PDFViewer.svelte
@@ -0,0 +1,122 @@
+<!--
+// 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 { Button, CircleButton, IconClose } from '@anticrm/ui'
+  import { Avatar } from '@anticrm/presentation'
+  import ArrowLeft from './icons/ArrowLeft.svelte'
+  import ExpandUp from './icons/ExpandUp.svelte'
+  import ExpandDown from './icons/ExpandDown.svelte'
+</script>
+
+<div class="pdfviewer-container">
+
+  <div class="flex-between header">
+    <div class="flex-center arrow-back">
+      <div class="icon"><ArrowLeft size={'small'} /></div>
+    </div>
+    <div class="flex-row-center flex-grow">
+      <Avatar size={'medium'} />
+      <div class="flex-col user">
+        <div class="overflow-label name">Grace Osaka</div>
+        <div class="overflow-label description">Candidate</div>
+      </div>
+    </div>
+    <div class="flex-row-center">
+      <div class="tool"><IconClose size={'small'} /></div>
+    </div>
+  </div>
+
+  <div class="flex-grow content">
+
+  </div>
+
+  <div class="flex-between footer">
+    <div class="flex-row-reverse">
+      <Button label={'Download'} primary />
+      <Button label={'Delete'} />
+    </div>
+    <div class="flex-row-center">
+      <CircleButton icon={ExpandDown} />
+      <CircleButton icon={ExpandUp} />
+    </div>
+  </div>
+
+</div>
+
+<style lang="scss">
+  .pdfviewer-container {
+    display: flex;
+    flex-direction: column;
+    width: 45rem;
+    height: 100%;
+    background-color: #F2F2F2;
+    border-radius: 1.25rem 1.875rem 1.875rem 1.25rem;
+
+    .header {
+      margin: 0 2rem 0 2.25rem;
+      height: 4.5rem;
+      min-height: 4.5rem;
+
+      .arrow-back {
+        margin-right: 1rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        cursor: pointer;
+        .icon {
+          color: #1F212B;
+          opacity: .4;
+        }
+        &:hover .icon { opacity: 1; }
+      }
+
+      .user { margin-left: .75rem; }
+      .name {
+        font-weight: 500;
+        font-size: 1rem;
+        color: black;
+      }
+      .description {
+        font-size: .75rem;
+        color: #1F212B;
+        opacity: .6;
+      }
+      .tool {
+        margin-left: 0.75rem;
+        opacity: .4;
+        cursor: pointer;
+        &:hover { opacity: 1; }
+      }
+    }
+
+    .content {
+      margin: 0 .75rem;
+      background-color: #fff;
+      border: 1px solid var(--theme-bg-accent-color);
+      border-radius: .72rem;
+    }
+
+    .footer {
+      flex-direction: row-reverse;
+      margin: 0 2.5rem 0 1.75rem;
+      height: 6rem;
+      min-height: 6rem;
+      color: #1F212B;
+
+      :global(button + button) { margin-right: 1rem; }
+      :global(.icon-button + .icon-button) { margin-left: .5rem; }
+    }
+  }
+</style>
diff --git a/plugins/recruit-resources/src/components/icons/ArrowLeft.svelte b/plugins/recruit-resources/src/components/icons/ArrowLeft.svelte
new file mode 100644
index 0000000000..399fc2a252
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/ArrowLeft.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.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.5,7.5H1.9l5-5L6.2,1.7L0.3,7.6L0,8l0.4,0.4l5.9,5.9L7,13.6l-5-5h13.5c0.3,0,0.5-0.2,0.5-0.5C16,7.8,15.8,7.5,15.5,7.5z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/ExpandDown.svelte b/plugins/recruit-resources/src/components/icons/ExpandDown.svelte
new file mode 100644
index 0000000000..1dbc865b37
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/ExpandDown.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.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="11.6,5.6 8,9.3 4.4,5.6 3.6,6.4 7.6,10.4 8,10.7 8.4,10.4 12.4,6.4 "/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/ExpandUp.svelte b/plugins/recruit-resources/src/components/icons/ExpandUp.svelte
new file mode 100644
index 0000000000..f6f25f8dbf
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/ExpandUp.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.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="12.4,9.6 8.4,5.6 8,5.3 7.6,5.6 3.6,9.6 4.4,10.4 8,6.7 11.6,10.4 "/>
+</svg>