hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 11:31:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add dialog PDFViewer (#156)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-07 18:28:26 +03:00 committed by GitHub
parent adabc79e8c
commit b2771486f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 197 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/recruit-resources/src/components/DialogHeader.svelte
View File

@ -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">

122
plugins/recruit-resources/src/components/PDFViewer.svelte Normal file
View File

@ -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>

24
plugins/recruit-resources/src/components/icons/ArrowLeft.svelte Normal file
View File

@ -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>

24
plugins/recruit-resources/src/components/icons/ExpandDown.svelte Normal file
View File

@ -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>

24
plugins/recruit-resources/src/components/icons/ExpandUp.svelte Normal file
View File

@ -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>