Breaking long words in comments. CSS optimize. (#1023)

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

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}
+            <div class="ap-check">
               <ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'} />
+            </div>
           {/if}
         </button>
       {/each}

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; }

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;

packages/theme/styles/popups.scss

@@ -69,6 +69,7 @@
         background-color: transparent;
       }
     }
+    &.withCheck { justify-content: space-between; }
 
     &:hover {
       color: var(--theme-caption-color);

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} />
         </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>

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="antiOverlay" on:click={() => { dispatch('close') }}/>
-<div class="flex-col floatdialog-container">
+<div class="antiDialogs antiComponent">
-  <div class="flex-between header">
+  <div class="ac-header short mirror divide">
-    <div class="flex-grow flex-col">
+    <div class="ac-header__wrap-description">
-      <div class="flex-row-center">
+      <div class="ac-header__wrap-title">
-        <div class="mr-2"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
+        <div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'small'} /></div>
-        <span class="fs-title overflow-label">
+        <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">
+  <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>

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, () => {})

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,27 +53,25 @@
 
 </script>
 
-<div class="overlay" on:click={() => { dispatch('close') }}/>
+<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
-<div class="dialog-container">
+<div class="antiDialogs antiComponent">
-  <div class="flex-row-center header">
+  <div class="ac-header short mirror divide">
-    <Icon icon={clazz.icon} size={'medium'} />
+    <div class="ac-header__wrap-title">
-    <div class="flex-grow fs-title ml-2"><Label label={clazz.label} /></div>
+      <div class="ac-header__icon"><Icon icon={clazz.icon} size={'medium'} /></div>
-    <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
+      <div class="ac-header__title"><Label label={clazz.label} /></div>
     </div>
-  <!-- <div class="flex-row-center subtitle">
+    <div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
-    Subtitle
+  </div>
-  </div> -->
+  <div class="ac-tabs">
-  <div class="flex-stretch tab-container">
     {#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} />
       </div>
     {/each}
-    <div class="grow"/>
+    <div class="ac-tabs__empty" />
   </div>
-  <div class="scroll">
+  <Scroller padding>
-    <div class="flex-col box">
     {#if selected === 0}
       {#if space}
         <Grid column={1} rowGap={1.5}>
@@ -85,99 +83,5 @@
     {:else}
       Members and other
     {/if}
+  </Scroller>
 </div>
-  </div>
-</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>