Add CircleButton. New layout for DialogHeader. (#77)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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>

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);

packages/ui/src/components/EditBox.svelte

@@ -100,6 +100,7 @@
   input {
     margin: 0;
     padding: 0;
+    color: inherit;
     border: none;
     border-radius: 2px;
 

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'

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="flex-row-center main-content">
-    <div class="avatar"></div>
+    <div class="avatar"><User /></div>
-    <div class="name"><EditBox placeholder="John"/>&nbsp;<EditBox placeholder="Appleseed"/></div>
+    <div class="flex-col">
-    <div class="title">Candidate title</div>
+      <div class="name">
-    <!-- <input type="file" name="file" id="file"/> -->
+        <input type="text" placeholder="John" />
+        <input type="text" placeholder="Appleseed" />
+      </div>
+      <!-- <div class="name"><EditBox placeholder="John"/>&nbsp;<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;
+    // display: flex;
-    justify-content: center;
+    // justify-content: center;
-    align-items: center;
+    // align-items: center;
-    width: 40rem;
+    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;
+        display: flex;
-        height: 5rem;
+        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;
+        display: flex;
-        font-size: 1rem;
+        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;
+      left: 1.5rem;
-      bottom: 1rem;
+      bottom: 1.5rem;
     }
     .rb-content {
       position: absolute;
-      right: 1rem;
+      right: 1.5rem;
-      bottom: 1rem;
+      bottom: 1.5rem;
     }
     .rt-content {
       position: absolute;
-      top: 1rem;
+      top: 1.5rem;
-      right: 1rem;
+      right: 1.5rem;
     }
   }
 </style>

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>

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>

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>