Animate Popup (#91)

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

packages/ui/src/components/Dialog.svelte

@@ -35,22 +35,19 @@
   <div class="content">
     <ScrollBox vertical stretch><slot /></ScrollBox>
   </div>
-  <div class="footer">
+  <!-- <div class="footer">
     <Button label={okLabel} primary />
     <Button label={'Cancel'} on:click={() => { dispatch('close') }} />
-  </div>
+  </div> -->
 </form>
 
 <style lang="scss">
   .dialog {
-    flex-grow: 1;
-
     display: flex;
     flex-direction: column;
-    margin: 0 1rem;
+    height: 100%;
     background-color: var(--theme-bg-color);
-    border-radius: 0 0 1rem 1rem;
-    box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
+    border-radius: 1.25rem;
 
     .header {
       flex-shrink: 0;
@@ -76,7 +73,7 @@
     .content {
       flex-shrink: 0;
       flex-grow: 1;
-      padding: 0 2.5rem;
+      padding: 0 2.5rem 2.5rem;
       height: fit-content;
     }
 

packages/ui/src/components/Popup.svelte

@@ -47,7 +47,7 @@
         modalHTML.style.top = '4rem'
         modalHTML.style.bottom = '4rem'
         modalHTML.style.right = '4rem'
-        modalHTML.style.height = 'calc(100vh - 8rem)'
+        // modalHTML.style.height = 'calc(100vh - 8rem)'
         // modalHTML.style.transform = 'translateY(-50%)'
       }
     }
@@ -71,7 +71,7 @@
   .popup {
     position: fixed;
     background-color: transparent;
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
     z-index: 501;
   }
   .modal-overlay {
@@ -82,5 +82,6 @@
     height: 100%;
     background: transparent;
     z-index: 500;
+    // backdrop-filter: blur(1px);
   }
 </style>

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -77,12 +77,34 @@
 
 </script>
 
-<div class="flex-col h-full">
+<div class="flex-col container">
   <DialogHeader {space} {object} {newValue} {resumeId} {resumeName} {resumeUuid} {resumeSize} {resumeType}/>
-  <Dialog label={recruit.string.CreateCandidate} 
-          okLabel={recruit.string.CreateCandidate} 
-          okAction={save}
-          on:close={() => { dispatch('close') }}>
-    <Tabs model={tabModel}/>
-  </Dialog>
+  <div class="dialog-container">
+    <Dialog label={recruit.string.CreateCandidate} 
+            okLabel={recruit.string.CreateCandidate} 
+            okAction={save}
+            on:close={() => { dispatch('close') }}>
+      <Tabs model={tabModel}/>
+    </Dialog>
+  </div>
 </div>
+
+<style lang="scss">
+  @keyframes maxHeight {
+    from { max-height: 12.5rem; }
+    to { max-height: 100%; }
+  }
+
+  .container {
+    height: 100%;
+    max-height: 0;
+    background-color: var(--theme-bg-color);
+    border-radius: 1.25rem;
+    animation: maxHeight .5s forwards;
+
+    .dialog-container {
+      flex-shrink: 1;
+      flex-grow: 1;
+    }
+  }
+</style>