From 98cc58e1388cbd9cee7728e4e4b9c5837d7a211d Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 16 Sep 2021 14:11:32 +0300
Subject: [PATCH] Fix scroll in Panel. Add sizes in Spinner. (#195)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte    | 18 +++++------
 packages/ui/src/components/Spinner.svelte     | 31 +++++++++++++++++--
 .../src/components/FileGroup.svelte           |  5 +--
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 253e9702fd..f1323dc1e1 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -65,12 +65,10 @@
       <div class="title">{title}</div>
     </div>
     {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
-    <div class="flex-col h-full scroll-container">
-      <ScrollBox vertical stretch>
-        <div class="flex-col content">
-          <slot />
-        </div>
-      </ScrollBox>
+    <div class="flex-col scroll-container">
+      <div class="flex-col content">
+        <slot />
+      </div>
     </div>
   </div>
   <div class="rightSection">
@@ -212,11 +210,11 @@
   .leftSection {
     border-right: 1px solid var(--theme-bg-accent-hover);
     .scroll-container {
-      flex-grow: 1;
-      padding: 2rem 2rem 1rem;
+      overflow: auto;
+      margin: 2rem 2rem 1.5rem;
       .content {
-        flex-grow: 1;
-        padding: .5rem .5rem .5rem;
+        flex-shrink: 0;
+        margin: .5rem .5rem 0;
       }
     }
   }
diff --git a/packages/ui/src/components/Spinner.svelte b/packages/ui/src/components/Spinner.svelte
index d0ccdad454..b91a34e297 100644
--- a/packages/ui/src/components/Spinner.svelte
+++ b/packages/ui/src/components/Spinner.svelte
@@ -1,5 +1,23 @@
+<!--
+// 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.
+-->
 
-<div class="spinner">
+<script lang="ts">
+  export let size: 'small' | 'medium' = 'medium'
+</script>
+
+<div class="spinner spinner-{size}">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path d="M12 0v1c6.1 0 11 4.9 11 11s-4.9 11-11 11v1c6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#fff"/>
     <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
@@ -12,10 +30,17 @@
 
 <style lang="scss">
   .spinner {
-    width: 1.5rem;
-    height: 1.5rem;
     -webkit-animation: spinCircle 1s infinite linear;
     animation: spinCircle 1s infinite linear;
+
+    &-small {
+      width: 1rem;
+      height: 1rem;
+    }
+    &-medium {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
   }
   @-webkit-keyframes spinCircle {
     from { -webkit-transform: rotate(0deg); }
diff --git a/plugins/chunter-resources/src/components/FileGroup.svelte b/plugins/chunter-resources/src/components/FileGroup.svelte
index 8ba14352ee..d28ddf2de4 100644
--- a/plugins/chunter-resources/src/components/FileGroup.svelte
+++ b/plugins/chunter-resources/src/components/FileGroup.svelte
@@ -25,7 +25,7 @@
 
 <div class="files-container">
   <span class="icon"><IconFile size={'small'}/></span>
-  {Object.values(files).length} file(s)
+  {Object.values(files).length} files
   <div class="window">
     {#each Object.values(files) as file}
       <div class="flex-row-center file">
@@ -41,7 +41,7 @@
     display: flex;
     align-items: center;
     font-weight: 500;
-    color: var(--theme-caption-color);
+    color: var(--theme-content-color);
     cursor: pointer;
 
     .icon {
@@ -51,6 +51,7 @@
       opacity: .6;
     }
     &:hover {
+      color: var(--theme-caption-color);
       .icon { opacity: 1; }
       .window { visibility: visible; }
       &::after { content: ''; }