From 4fd981b3039f066d17a19c1ea2e561c503f2d558 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 4 Oct 2021 17:32:27 +0300
Subject: [PATCH] Add AttributesBar, YesNoPresenter (#230)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte    |  2 +-
 packages/theme/styles/_layouts.scss           |  3 +
 .../src/components/AttributesBar.svelte       | 71 +++++++++++++++++++
 .../src/components/EditCandidate.svelte       |  6 +-
 .../src/components/YesNoPresenter.svelte      | 56 +++++++++++++++
 .../src/components/icons/Location.svelte      | 27 +++++++
 6 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 plugins/recruit-resources/src/components/AttributesBar.svelte
 create mode 100644 plugins/recruit-resources/src/components/YesNoPresenter.svelte
 create mode 100644 plugins/recruit-resources/src/components/icons/Location.svelte

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index f1323dc1e1..4525bacf33 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -168,7 +168,7 @@
       flex-shrink: 0;
       padding: 0 2rem;
       height: 3.5rem;
-      border-bottom: 1px solid var(--theme-card-divider);
+      border-bottom: 1px solid var(--theme-bg-accent-hover);
     }
   }
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 0eb8898d21..f2ac4442f8 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -135,6 +135,7 @@ table {
   align-items: stretch;
 }
 
+.relative { position: relative; }
 .abs-lt-content {
   position: absolute;
   top: var(--modal-padding);
@@ -180,6 +181,7 @@ table {
   height: 1.715em;
 }
 
+/* Text */
 .hidden-text {
   position: absolute;
   visibility: hidden;
@@ -193,6 +195,7 @@ table {
   overflow: hidden;
   user-select: none;
 }
+.small-text { font-size: .75rem; }
 
 .focused-button {
   background-color: var(--theme-button-bg-focused);
diff --git a/plugins/recruit-resources/src/components/AttributesBar.svelte b/plugins/recruit-resources/src/components/AttributesBar.svelte
new file mode 100644
index 0000000000..87e6fb0ded
--- /dev/null
+++ b/plugins/recruit-resources/src/components/AttributesBar.svelte
@@ -0,0 +1,71 @@
+<!--
+// 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 { CircleButton, Label } from '@anticrm/ui'
+  import Location from './icons/Location.svelte'
+  import YesNoPresenter from './YesNoPresenter.svelte'
+
+  export let minimize: boolean = true
+</script>
+
+<div class="flex-row-center small-text">
+  <div class="icon-wrap column">
+    <CircleButton icon={Location} size={'large'} />
+    {#if !minimize}
+      <div class="noicon-column">
+        <Label label={'Location'} />
+        <div class="value">Moscow</div>
+      </div>
+    {/if}
+  </div>
+  <div class="noicon-column column">
+    <Label label={'Onsite'} />
+    <YesNoPresenter state={'yes'} />
+  </div>
+  <div class="noicon-column column">
+    <Label label={'Remote'} />
+    <YesNoPresenter state={'no'} />
+  </div>
+</div>
+
+<style lang="scss">
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+  }
+  .noicon-column {
+    display: flex;
+    flex-direction: column;
+  }
+  .icon-wrap .noicon-column { margin-left: .5rem; }
+  .value {
+    font-weight: 500;
+    color: var(--theme-caption-color);
+  }
+  .column + .column {
+    position: relative;
+    margin-left: 3rem;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -1.5rem;
+      width: 1px;
+      background-color: var(--theme-bg-accent-hover);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 7ebbb0bf52..03155dc36f 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/plugins/recruit-resources/src/components/EditCandidate.svelte
@@ -27,6 +27,7 @@
   import Attachments from './Attachments.svelte'
   import Edit from './icons/Edit.svelte'
   import SocialEditor from './SocialEditor.svelte'
+  import AttributesBar from './AttributesBar.svelte'
 
   import chunter from '@anticrm/chunter'
   
@@ -63,12 +64,13 @@
 
 {#if object !== undefined}
 <Panel icon={Contact} title={formatName(object.name)} {object} on:close={() => { dispatch('close') }}>
-  <svelte:fragment slot="subtitle">
+  <AttributesBar slot="subtitle" />
+  <!-- <svelte:fragment slot="subtitle">
     <div class="flex-between flex-reverse" style="width: 100%">
       <Channels value={object.channels}/>
       <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />      
     </div>
-  </svelte:fragment>
+  </svelte:fragment> -->
 
   <div class="flex-row-center">
     <div class="avatar">
diff --git a/plugins/recruit-resources/src/components/YesNoPresenter.svelte b/plugins/recruit-resources/src/components/YesNoPresenter.svelte
new file mode 100644
index 0000000000..dfe9ef3e3d
--- /dev/null
+++ b/plugins/recruit-resources/src/components/YesNoPresenter.svelte
@@ -0,0 +1,56 @@
+<!--
+// Copyright © 2020, 2021 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 { Label } from '@anticrm/ui'
+
+  export let state: 'yes' | 'no' | 'unknown'
+</script>
+
+<div class="flex-row-center yesno-container {state}" on:click={() => {
+  if (state === 'yes') state = 'no'
+  else if (state === 'no') state = 'unknown'
+  else state = 'yes'
+}}>
+  <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <circle class={state} cx="8" cy="8" r="6"/>
+    {#if state === 'yes'}
+      <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
+    {:else if state === 'no'}
+      <polygon fill="#fff" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "/>
+    {:else}
+      <path fill="#fff" d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"/>
+    {/if}
+  </svg>
+  <span><Label label={state} /></span>
+</div>
+
+<style lang="scss">
+  .yesno-container {
+    max-width: fit-content;
+    user-select: none;
+    cursor: pointer;
+
+    &.yes { fill: #77C07B; }
+    &.no { fill: #F96E50; }
+    &.unknown { fill: #77818E; }
+    span {
+      margin-left: .25rem;
+      text-transform: capitalize;
+      font-weight: 500;
+      color: var(--theme-caption-color);
+    }
+  }
+</style>
diff --git a/plugins/recruit-resources/src/components/icons/Location.svelte b/plugins/recruit-resources/src/components/icons/Location.svelte
new file mode 100644
index 0000000000..7653bfeca2
--- /dev/null
+++ b/plugins/recruit-resources/src/components/icons/Location.svelte
@@ -0,0 +1,27 @@
+<!--
+// 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">
+  <g>
+    <path d="M8,3.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4s3.4-1.5,3.4-3.4S9.9,3.7,8,3.7z M8,9.3c-1.2,0-2.1-1-2.1-2.1 C5.9,6,6.8,5,8,5s2.1,1,2.1,2.1C10.1,8.3,9.2,9.3,8,9.3z"/>
+    <path d="M8,0C4.1,0,0.9,3.2,0.9,7.1c0,2.5,1.2,4.4,2.6,5.9c1.4,1.4,2.9,2.4,3.7,2.8c0.5,0.3,1.1,0.3,1.6,0 c0.8-0.4,2.4-1.4,3.7-2.8c1.4-1.4,2.6-3.4,2.6-5.9C15.1,3.2,11.9,0,8,0z M11.6,12.1c-1.2,1.3-2.7,2.1-3.4,2.5 c-0.1,0.1-0.3,0.1-0.4,0c-0.7-0.4-2.2-1.3-3.4-2.5c-1.2-1.3-2.2-2.9-2.2-5c0-3.2,2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8 C13.8,9.2,12.8,10.8,11.6,12.1z"/>
+  </g>
+</svg>