From 45689aeb0f0b8a757664a0982a8f05c140d8dcb5 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 2 Sep 2021 20:41:42 +0300
Subject: [PATCH] Layout for SocialEditor (#128)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/SocialEditor.svelte        | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/plugins/recruit-resources/src/components/SocialEditor.svelte b/plugins/recruit-resources/src/components/SocialEditor.svelte
index a16cd5abbc..aa5643339a 100644
--- a/plugins/recruit-resources/src/components/SocialEditor.svelte
+++ b/plugins/recruit-resources/src/components/SocialEditor.svelte
@@ -17,7 +17,7 @@
 <script lang="ts">
   import type { Ref } from '@anticrm/core'
   import { createEventDispatcher } from 'svelte'
-  import { EditBox, Button } from '@anticrm/ui'
+  import { EditBox, Button, ScrollBox } from '@anticrm/ui'
   import { getClient } from '@anticrm/presentation'
 
   import contact, { ChannelProvider, Channel } from '@anticrm/contact'
@@ -56,27 +56,32 @@
 </script>
 
 <div class="popup">
-  <div class="popup-block">
-    <span>Contact Links</span>
-    {#each providers as provider, i}
-      <EditBox label={provider.label} placeholder={provider.placeholder} bind:value={newValues[i].value} maxWidth={'14.5rem'}/>
-    {/each}
+  <ScrollBox vertical stretch>
+    <div class="popup-block">
+      <span>Contact Links</span>
+      {#each providers as provider, i}
+        <EditBox label={provider.label} placeholder={provider.placeholder} bind:value={newValues[i].value} maxWidth={'14.5rem'}/>
+      {/each}
+    </div>
+    <!-- <div class="popup-block">
+      <span>SOCIAL LINKS</span>
+      <EditBox label={'Twitter'} placeholder={'@rosychen'} maxWidth={'12.5rem'} />
+      <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} maxWidth={'12.5rem'} />
+    </div> -->
+  </ScrollBox>
+  <div class="buttons">
+    <div class="btn"><Button label="Apply" width={'100%'} on:click={() => { dispatch('close', filterUndefined(newValues)) }}/></div>
   </div>
-  <!-- <div class="popup-block">
-    <span>SOCIAL LINKS</span>
-    <EditBox label={'Twitter'} placeholder={'@rosychen'} maxWidth={'12.5rem'} />
-    <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} maxWidth={'12.5rem'} />
-  </div> -->
-  <Button label="Apply" on:click={() => { dispatch('close', filterUndefined(newValues)) }}/>
 </div>
 
 <style lang="scss">
   .popup {
     display: flex;
     flex-direction: column;
-    padding: 1.5rem 1.25rem;
+    padding: 1.5rem 1.25rem 1.25rem;
     width: 17rem;
     max-width: 17rem;
+    height: 22rem;
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-hovered);
     border: 1px solid var(--theme-button-border-enabled);
@@ -96,7 +101,12 @@
       }
     }
   }
-  .popup-block + .popup-block {
-    margin-top: 2rem;
+  .popup-block + .popup-block { margin-top: 2rem; }
+  .buttons {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
+    .btn { flex-grow: 1; }
+    .btn + .btn { margin-left: .75rem; }
   }
 </style>