diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
new file mode 100644
index 0000000000..2cabf630d6
--- /dev/null
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -0,0 +1,61 @@
+<!--
+// 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 { IntlString, Asset } from '@anticrm/platform'
+ import type { AnySvelteComponent } from '@anticrm/ui'
+ import Icon from './Icon.svelte'
+
+ export let icon: Asset | AnySvelteComponent
+ export let label: IntlString | undefined
+</script>
+
+<div class="icon-button">
+ <div class="content">
+ {#if typeof (icon) === 'string'}
+ <Icon {icon} size={'small'}/>
+ {:else}
+ <svelte:component this={icon} size={'small'} />
+ {/if}
+ </div>
+</div>
+
+<style lang="scss">
+ .icon-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 2rem;
+ height: 2rem;
+ background-color: rgba(255, 255, 255, .2);
+ border-radius: 50%;
+ backdrop-filter: blur(3px);
+ cursor: pointer;
+
+ .content {
+ transform-origin: center center;
+ transform: scale(.75);
+ }
+
+ &:hover {
+ background-color: rgba(255, 255, 255, .25);
+ box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
+ }
+ &:active {
+ background-color: rgba(255, 255, 255, .15);
+ box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
+ }
+ }
+</style>
diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte
index 75bf18d697..cb65c70397 100644
--- a/packages/ui/src/components/Dialog.svelte
+++ b/packages/ui/src/components/Dialog.svelte
@@ -60,7 +60,7 @@
.dialog {
display: flex;
flex-direction: column;
- width: 45rem;
+ width: 42.5rem;
min-height: 100vh;
max-height: 100vh;
background-color: var(--theme-bg-color);
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index 9e35e8771a..84fd52d9e2 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -100,6 +100,7 @@
input {
margin: 0;
padding: 0;
+ color: inherit;
border: none;
border-radius: 2px;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 096c5859e2..d38dee6c94 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -50,6 +50,7 @@ export { default as CheckBoxList } from './components/CheckBoxList.svelte'
export { default as EditWithIcon } from './components/EditWithIcon.svelte'
export { default as Loading } from './components/Loading.svelte'
export { default as Popup } from './components/Popup.svelte'
+export { default as CircleButton } from './components/CircleButton.svelte'
export { default as IconAdd } from './components/icons/Add.svelte'
export { default as IconSearch } from './components/icons/Search.svelte'
diff --git a/plugins/recruit-resources/img/header-green.png b/plugins/recruit-resources/img/header-green.png
index 9ddef1b989..0cc5bd8c84 100755
Binary files a/plugins/recruit-resources/img/header-green.png and b/plugins/recruit-resources/img/header-green.png differ
diff --git a/plugins/recruit-resources/src/components/DialogHeader.svelte b/plugins/recruit-resources/src/components/DialogHeader.svelte
index 0dca7f4583..f990057526 100644
--- a/plugins/recruit-resources/src/components/DialogHeader.svelte
+++ b/plugins/recruit-resources/src/components/DialogHeader.svelte
@@ -18,8 +18,11 @@
import { getMetadata } from '@anticrm/platform'
import login from '@anticrm/login'
- import { EditBox, Button, Label } from '@anticrm/ui'
+ import { EditBox, Button, CircleButton, Grid, Label } from '@anticrm/ui'
import FileUpload from './icons/FileUpload.svelte'
+ import Edit from './icons/Edit.svelte'
+ import Twitter from './icons/Twitter.svelte'
+ import User from './icons/User.svelte'
let dragover = false
@@ -53,27 +56,40 @@
on:dragover|preventDefault={ ()=>{} }
on:dragleave={ () => { dragover = false } }
on:drop|preventDefault|stopPropagation={drop}>
- <div class="main-content">
- <div class="avatar"></div>
- <div class="name"><EditBox placeholder="John"/> <EditBox placeholder="Appleseed"/></div>
- <div class="title">Candidate title</div>
- <!-- <input type="file" name="file" id="file"/> -->
+ <div class="flex-row-center main-content">
+ <div class="avatar"><User /></div>
+ <div class="flex-col">
+ <div class="name">
+ <input type="text" placeholder="John" />
+ <input type="text" placeholder="Appleseed" />
+ </div>
+ <!-- <div class="name"><EditBox placeholder="John"/> <EditBox placeholder="Appleseed"/></div> -->
+ <div class="title"><EditBox placeholder="Los Angeles"/></div>
+ <!-- <input type="file" name="file" id="file"/> -->
+ </div>
</div>
<div class="lb-content">
<Button label={'Upload resume'} icon={FileUpload} size={'small'} transparent primary />
</div>
- <div class="rt-content">
+ <div class="rb-content">
<Button label={'Save'} size={'small'} transparent />
</div>
+ <div class="rt-content">
+ <Grid column={2} columnGap={.5}>
+ <CircleButton icon={Twitter} label={'Twitter'} />
+ <CircleButton icon={Edit} label={'Edit'} />
+ </Grid>
+ </div>
</div>
<style lang="scss">
.header {
position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 40rem;
+ // display: flex;
+ // justify-content: center;
+ // align-items: center;
+ padding: 1.5rem 1.5rem 0;
+ width: 37.5rem;
min-height: 15rem;
height: 15rem;
background-image: url(../../img/header-green.png);
@@ -87,45 +103,53 @@
}
.main-content {
- display: flex;
- flex-direction: column;
- align-items: center;
-
.avatar {
- width: 5rem;
- height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 1.25rem;
+ width: 6rem;
+ height: 6rem;
border-radius: 50%;
- background-color: #C4C4C4;
+ background-color: rgba(255, 255, 255, .2);
+ backdrop-filter: blur(3px);
+ box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3);
}
.name {
- margin-top: .625rem;
- font-size: 1rem;
+ display: flex;
+ flex-direction: column;
+ font-size: 1.25rem;
font-weight: 500;
- line-height: 150%;
color: #fff;
+ input {
+ margin: 0;
+ padding: 0;
+ border: none;
+ &::placeholder { color: var(--theme-content-dark-color); }
+ }
}
.title {
- margin-top: .25rem;
+ margin-top: .5rem;
font-size: .75rem;
font-weight: 500;
- color: rgba(255, 255, 255, .8);
+ color: rgba(255, 255, 255, .6);
}
}
.lb-content {
position: absolute;
- left: 1rem;
- bottom: 1rem;
+ left: 1.5rem;
+ bottom: 1.5rem;
}
.rb-content {
position: absolute;
- right: 1rem;
- bottom: 1rem;
+ right: 1.5rem;
+ bottom: 1.5rem;
}
.rt-content {
position: absolute;
- top: 1rem;
- right: 1rem;
+ top: 1.5rem;
+ right: 1.5rem;
}
}
</style>
diff --git a/plugins/recruit-resources/src/components/icons/Edit.svelte b/plugins/recruit-resources/src/components/icons/Edit.svelte
new file mode 100644
index 0000000000..1c4e3e0837
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Edit.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 = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="M13.3,6.5l1.9-1.9c1.1-1.1,1.1-2.8,0-3.8c-1.1-1.1-2.8-1.1-3.8,0L9.5,2.7C10.4,4.3,11.7,5.6,13.3,6.5z M12.3,7.6c-1.6-1-2.9-2.3-3.8-3.8l-6.3,6.3l0,0C1.5,10.7,1.2,11,1,11.4c-0.2,0.4-0.3,0.8-0.5,1.6l-0.4,2c-0.1,0.5-0.1,0.7,0,0.9 c0.1,0.1,0.4,0.1,0.9,0l2-0.4c0.8-0.2,1.3-0.3,1.6-0.5c0.4-0.2,0.7-0.5,1.3-1.1L12.3,7.6z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/Twitter.svelte b/plugins/recruit-resources/src/components/icons/Twitter.svelte
new file mode 100644
index 0000000000..61625b252b
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Twitter.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 = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="M5,14.8c-1.8,0-3.6-0.6-5-1.5c1.2,0.1,3.4-0.1,4.8-1.4c-2-0.1-3-1.7-3.1-2.4c0.2,0.1,1,0.2,1.5,0C0.8,8.8,0.5,6.7,0.5,6 C1,6.3,1.7,6.4,2,6.4c-2.2-1.6-1.4-4-1-4.5c1.6,2.2,3.9,3.5,6.8,3.6C7.7,5.2,7.7,4.9,7.7,4.7c0-1.9,1.5-3.4,3.3-3.4 c1,0,1.8,0.4,2.4,1.1c0.6-0.2,1.6-0.5,2.1-0.8c-0.2,0.9-1,1.6-1.4,1.9c0,0,0,0,0,0c0.4-0.1,1.5-0.3,1.9-0.6c-0.2,0.5-1,1.3-1.6,1.8 C14.5,10,10.4,14.8,5,14.8z"/>
+</svg>
diff --git a/plugins/recruit-resources/src/components/icons/User.svelte b/plugins/recruit-resources/src/components/icons/User.svelte
new file mode 100644
index 0000000000..ceddd05398
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/User.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.
+-->
+
+<script lang="ts">
+ // export let size: 'small' | 'medium' | 'large'
+ const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg width={40} height={40} {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+ <path d="M32.4,34.3c-0.3,0-0.6-0.2-0.7-0.5c-0.7-1.9-2.2-3.5-4.2-4.7c-2.1-1.2-4.7-1.9-7.4-1.9c-2.7,0-5.3,0.7-7.4,1.9 c-2.1,1.2-3.6,2.9-4.2,4.7c-0.1,0.4-0.6,0.6-1,0.5c-0.4-0.1-0.6-0.6-0.5-1c0.8-2.2,2.5-4.2,4.9-5.5c2.3-1.3,5.2-2.1,8.2-2.1 s5.8,0.7,8.2,2.1c2.4,1.4,4.1,3.3,4.9,5.5c0.1,0.4-0.1,0.8-0.5,1C32.5,34.3,32.4,34.3,32.4,34.3z"/>
+ <circle style="opacity: .25;" cx="20" cy="13.6" r="6.4"/>
+ <path d="M20,20.8c-3.9,0-7.1-3.2-7.1-7.1s3.2-7.1,7.1-7.1s7.2,3.2,7.2,7.1S23.9,20.8,20,20.8z M20,8 c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6s5.7-2.5,5.7-5.6S23.1,8,20,8z"/>
+</svg>