From c3d5f4cf57fdd1272994f0fabb6b576fc7c21839 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 16 Feb 2022 16:03:39 +0700
Subject: [PATCH] Breaking long words in comments. CSS optimize. (#1023)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/UsersPopup.svelte          |   6 +-
 packages/theme/styles/_layouts.scss           |   5 +-
 packages/theme/styles/components.scss         |  35 +++++
 packages/theme/styles/popups.scss             |   1 +
 .../src/components/EditVacancy.svelte         |  41 +----
 .../src/components/state/EditStatuses.svelte  |  62 ++------
 .../src/components/state/StatesEditor.svelte  |   2 +-
 .../components/navigator/SpacePanel.svelte    | 146 +++---------------
 8 files changed, 92 insertions(+), 206 deletions(-)

diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte
index 2a1f2bd7c2..5c18fa2721 100644
--- a/packages/presentation/src/components/UsersPopup.svelte
+++ b/packages/presentation/src/components/UsersPopup.svelte
@@ -52,10 +52,12 @@
   <div class="ap-scroll">
     <div class="ap-box">
       {#each objects as person}
-        <button class="ap-menuItem" on:click={() => { dispatch('close', person) }}>
+        <button class="ap-menuItem withCheck" on:click={() => { dispatch('close', person) }}>
           <UserInfo size={'medium'} value={person} />
           {#if allowDeselect && person._id === selected}
-            <ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'}/>
+            <div class="ap-check">
+              <ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'} />
+            </div>
           {/if}
         </button>
       {/each}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index d382af1994..14724fe939 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -90,7 +90,10 @@ table {
 p:first-child { margin-block-start: 0; } // First and last padding
 p:last-child { margin-block-end: 0; }
 
-.p-inline { line-height: 150%; }
+.p-inline {
+  word-break: break-all;
+  line-height: 150%;
+}
 
 /* Flex */
 .flex { display: flex; }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index af08ba63d4..b44c0a4cb0 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -151,6 +151,41 @@
     }
   }
 
+  .ac-tabs {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    margin: 0 2.5rem;
+    min-width: 0;
+    height: 4.5rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+
+    &__tab {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      height: 4.5rem;
+      font-weight: 500;
+      color: var(--theme-content-trans-color);
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        border-top: .125rem solid transparent;
+        border-bottom: .125rem solid var(--theme-caption-color);
+        color: var(--theme-caption-color);
+        cursor: default;
+      }
+    }
+    .ac-tabs__tab + .ac-tabs__tab { margin-left: 2.5rem; }
+
+    &__empty {
+      min-width: 2.5rem;
+      flex-grow: 1;
+    }
+  }
+
   .ac-body {
     display: flex;
     flex-direction: column;
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 556c226b70..0b355804ab 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -69,6 +69,7 @@
         background-color: transparent;
       }
     }
+    &.withCheck { justify-content: space-between; }
 
     &:hover {
       color: var(--theme-caption-color);
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index ca46be421c..4c9af09b35 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -71,14 +71,14 @@
         <AttributesBar {object} keys={['dueTo', 'location', 'company']} />
       </div>
     </div>
-    <div class="flex-stretch tab-container">
+    <div class="ac-tabs">
       {#each tabs as tab, i}
-        <div class="flex-row-center tab" class:selected={i === selected}
+        <div class="ac-tabs__tab" class:selected={i === selected}
             on:click={() => { selected = i }}>
-          <Label label={tab}/>
+          <Label label={tab} />
         </div>
       {/each}
-      <div class="grow"/>
+      <div class="ac-tabs__empty" />
     </div>
     {#if selected === 0}
       <Scroller padding>
@@ -114,42 +114,13 @@
 </div>
 
 <style lang="scss">
-  .tab-container {
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    margin: 0 2.5rem;
-    height: 4.5rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-
-    .tab {
-      height: 4.5rem;
-      font-weight: 500;
-      color: var(--theme-content-trans-color);
-      cursor: pointer;
-      user-select: none;
-
-      &.selected {
-        border-top: .125rem solid transparent;
-        border-bottom: .125rem solid var(--theme-caption-color);
-        color: var(--theme-caption-color);
-        cursor: default;
-      }
-    }
-    .tab + .tab {
-      margin-left: 2.5rem;
-    }
-    .grow {
-      min-width: 2.5rem;
-      flex-grow: 1;
-    }
-  }
   .description-container {
-    margin-top: 0.5rem;
     display: flex;
+    margin-top: .5rem;
     padding: 1rem;
     height: 12rem;
-    border-radius: .25rem;
     background-color: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .25rem;
   }
 </style>
diff --git a/plugins/task-resources/src/components/state/EditStatuses.svelte b/plugins/task-resources/src/components/state/EditStatuses.svelte
index 764d4832cc..567b604594 100644
--- a/plugins/task-resources/src/components/state/EditStatuses.svelte
+++ b/plugins/task-resources/src/components/state/EditStatuses.svelte
@@ -21,7 +21,7 @@
   import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
   import task from '@anticrm/task'
   import KanbanEditor from '../kanban/KanbanEditor.svelte'
-  import { Icon, IconClose, Label, showPopup } from '@anticrm/ui'
+  import { Icon, IconClose, Label, showPopup, ActionIcon, ScrollBox } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import workbench from '@anticrm/workbench'
 
@@ -74,56 +74,26 @@
   }
 </script>
 
-<div class="overlay" on:click={() => { dispatch('close') }}/>
-<div class="flex-col floatdialog-container">
-  <div class="flex-between header">
-    <div class="flex-grow flex-col">
-      <div class="flex-row-center">
-        <div class="mr-2"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
-        <span class="fs-title overflow-label">
+<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
+<div class="antiDialogs antiComponent">
+  <div class="ac-header short mirror divide">
+    <div class="ac-header__wrap-description">
+      <div class="ac-header__wrap-title">
+        <div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
+        <span class="ac-header__title">
           Manage application statuses within 
           {#if spaceClassInstance}<Label label={spaceClassInstance?.label}/>{:else}...{/if}
         </span>
       </div>
-      <div class="text-sm content-dark-color overflow-label">{spaceInstance?.name}</div>
+      {#if spaceInstance?.name }<span class="ac-header__description">{spaceInstance?.name}</span>{/if}
     </div>
-    <div class="ml-4 content-accent-color cursor-pointer" on:click={() => dispatch('close')}><IconClose size={'small'} /></div>
+    <div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
   </div>
-  <div class="flex-grow flex-col content">
-    {#if kanban !== undefined}
-      <KanbanEditor {kanban} on:delete={(e) => deleteState(e.detail)} />
-    {/if}
+  <div class="p-10 flex-grow">
+    <ScrollBox vertical stretch>
+      {#if kanban !== undefined}
+        <KanbanEditor {kanban} on:delete={(e) => deleteState(e.detail)} />
+      {/if}
+    </ScrollBox>
   </div>
 </div>
-
-<style lang="scss">
-  .floatdialog-container {
-    position: fixed;
-    top: 32px;
-    bottom: 1.25rem;
-    right: 1rem;
-    height: calc(100% - 32px - 1.25rem);
-    background-color: var(--theme-bg-color);
-    border-radius: 1.25rem;
-
-    .header {
-      padding: 0 2rem 0 2.5rem;
-      height: 4.5rem;
-      min-height: 4.5rem;
-    }
-    .content {
-      overflow: auto;
-      margin: 1rem 2.5rem 1rem 2.5rem;
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    opacity: .5;
-  }
-</style>
diff --git a/plugins/task-resources/src/components/state/StatesEditor.svelte b/plugins/task-resources/src/components/state/StatesEditor.svelte
index 9c8cac0480..99713a1a12 100644
--- a/plugins/task-resources/src/components/state/StatesEditor.svelte
+++ b/plugins/task-resources/src/components/state/StatesEditor.svelte
@@ -103,7 +103,7 @@
               showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
             }}
           />
-          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title"/></div>
+          <div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
           <div class="tool hover-trans"
             on:click={(ev) => {
               showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
diff --git a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
index 0c458adad7..ac941ca664 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
@@ -19,7 +19,7 @@
   import core from '@anticrm/core'
   import type { IntlString } from '@anticrm/platform'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { EditBox, Grid, Icon, IconClose, Label } from '@anticrm/ui'
+  import { EditBox, Grid, Icon, IconClose, Label, ActionIcon, Scroller } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
   export let _id: Ref<Space>
@@ -53,131 +53,35 @@
 
 </script>
 
-<div class="overlay" on:click={() => { dispatch('close') }}/>
-<div class="dialog-container">
-  <div class="flex-row-center header">
-    <Icon icon={clazz.icon} size={'medium'} />
-    <div class="flex-grow fs-title ml-2"><Label label={clazz.label} /></div>
-    <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
+<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
+<div class="antiDialogs antiComponent">
+  <div class="ac-header short mirror divide">
+    <div class="ac-header__wrap-title">
+      <div class="ac-header__icon"><Icon icon={clazz.icon} size={'medium'} /></div>
+      <div class="ac-header__title"><Label label={clazz.label} /></div>
+    </div>
+    <div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
   </div>
-  <!-- <div class="flex-row-center subtitle">
-    Subtitle
-  </div> -->
-  <div class="flex-stretch tab-container">
+  <div class="ac-tabs">
     {#each tabs as tab, i}
-      <div class="flex-row-center tab" class:selected={i === selected}
+      <div class="ac-tabs__tab" class:selected={i === selected}
            on:click={() => { selected = i }}>
-        <Label label={tab}/>
+        <Label label={tab} />
       </div>
     {/each}
-    <div class="grow"/>
+    <div class="ac-tabs__empty" />
   </div>
-  <div class="scroll">
-    <div class="flex-col box">
-      {#if selected === 0}
-        {#if space}
-          <Grid column={1} rowGap={1.5}>
-            <EditBox label={clazz.label} icon={clazz.icon} bind:value={space.name} placeholder={clazz.label} maxWidth="39rem" focus on:change={onNameChange}/>
-            <!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->
-            <!-- <ToggleWithLabel label={workbench.string.MakePrivate} description={workbench.string.MakePrivateDescription}/> -->
-          </Grid>
-        {/if}
-      {:else}
-        Members and other
+  <Scroller padding>
+    {#if selected === 0}
+      {#if space}
+        <Grid column={1} rowGap={1.5}>
+          <EditBox label={clazz.label} icon={clazz.icon} bind:value={space.name} placeholder={clazz.label} maxWidth="39rem" focus on:change={onNameChange}/>
+          <!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->
+          <!-- <ToggleWithLabel label={workbench.string.MakePrivate} description={workbench.string.MakePrivateDescription}/> -->
+        </Grid>
       {/if}
-    </div>
-  </div>
+    {:else}
+      Members and other
+    {/if}
+  </Scroller>
 </div>
-
-<style lang="scss">
-  .dialog-container {
-    overflow: hidden;
-    position: fixed;
-    top: 32px;
-    bottom: 1.25rem;
-    left: 50%;
-    right: 1rem;
-
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 32px - 1.25rem);
-    background: var(--theme-dialog-bg-spec);
-    border-radius: 1.25rem;
-    box-shadow: var(--theme-dialog-shadow);
-    backdrop-filter: blur(15px);
-
-    .header {
-      flex-shrink: 0;
-      padding: 0 2rem 0 2.5rem;
-      height: 4.5rem;
-      border-bottom: 1px solid var(--theme-dialog-divider);
-
-      .tool {
-        margin-left: .75rem;
-        color: var(--theme-content-accent-color);
-        cursor: pointer;
-        &:hover { color: var(--theme-caption-color); }
-      }
-    }
-
-    // .subtitle {
-    //   flex-shrink: 0;
-    //   padding: 0 2.5rem;
-    //   height: 3.5rem;
-    //   border-bottom: 1px solid var(--theme-dialog-divider);
-    // }
-  }
-
-  .tab-container {
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    margin: 0 2.5rem;
-    height: 4.5rem;
-    border-bottom: 1px solid var(--theme-menu-divider);
-
-    .tab {
-      height: 4.5rem;
-      font-weight: 500;
-      color: var(--theme-content-trans-color);
-      cursor: pointer;
-      user-select: none;
-
-      &.selected {
-        border-top: .125rem solid transparent;
-        border-bottom: .125rem solid var(--theme-caption-color);
-        color: var(--theme-caption-color);
-        cursor: default;
-      }
-    }
-    .tab + .tab {
-      margin-left: 2.5rem;
-    }
-    .grow {
-      min-width: 2.5rem;
-      flex-grow: 1;
-    }
-  }
-
-  .scroll {
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 1rem 0;
-    padding: 1.5rem 2.5rem;
-
-    .box {
-      margin-right: 1px;
-      height: 100%;
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--theme-menu-color);
-    opacity: .6;
-  }
-</style>
\ No newline at end of file