New panel update (#1559)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/panel/src/components/Panel.svelte

@@ -47,19 +47,22 @@
 </script>
 
 <Panel
-  {title} {subtitle} {icon}
+  {title}
+  {subtitle}
+  {icon}
   rightSection={isFullSize}
   {showHeader}
-  bind:panelWidth bind:innerWidth
+  bind:panelWidth
-  isProperties={innerWidth >= 900 || isProperties}
+  bind:innerWidth
+  isProperties={innerWidth >= 500 || isProperties}
   isSubtitle={innerWidth < 900 || isSubtitle}
   on:close
 >
   <svelte:fragment slot="subtitle">
-    {#if $$slots['subtitle']}<slot name="subtitle" />{/if}
+    {#if $$slots.subtitle}<slot name="subtitle" />{/if}
   </svelte:fragment>
   <svelte:fragment slot="properties">
-    {#if $$slots['properties']}<slot name="properties" />{/if}
+    {#if $$slots.properties}<slot name="properties" />{/if}
   </svelte:fragment>
   <svelte:fragment slot="navigate-actions">
     <slot name="navigate-actions" />
@@ -81,12 +84,7 @@
   </svelte:fragment>
   <svelte:fragment slot="actions">
     {#if allowFullSize}
-      <Button
+      <Button icon={IconExpand} size={'medium'} kind={'transparent'} on:click={resizePanel} />
-        icon={IconExpand}
-        size={'medium'}
-        kind={'transparent'}
-        on:click={resizePanel}
-      />
     {/if}
   </svelte:fragment>
   {#if isFullSize}

packages/ui/src/components/Panel.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <div class="antiPanel antiComponent" bind:clientWidth={panelWidth}>
-  <div class:panel-content={!rightSection} class:ad-section-50={rightSection} class:divide={rightSection}>    
+  <div class='panel-content-container'>
     {#if showHeader}
       <div class="ac-header short mirror divide highlight">
         <div class="buttons-group">
@@ -45,7 +45,8 @@
             kind={'transparent'}
             on:click={() => {
               dispatch('close')
-            }} />
+            }}
+          />
           {#if $$slots['navigate-actions']}
             <div class="buttons-group xsmall-gap">
               <slot name="navigate-actions" />
@@ -63,11 +64,10 @@
             {#if subtitle}<span class="ac-header__description">{subtitle}</span>{/if}
           </div>
         </div>
-        {#if rightSection}
+        <div class="buttons-group xsmall-gap mr-4">
-          <div class="buttons-group xsmall-gap mr-4">
+          <slot name="commands" />
-            <slot name="commands" />
+          <slot name="actions" />
-          </div>
+        </div>
-        {/if}
       </div>
     {:else}
       <div class="ac-header short mirror divide highlight">
@@ -110,6 +110,9 @@
           <slot />
         </div>
       {/if}
+      {#if rightSection}
+        <slot name="rightSection" />
+      {/if}
       {#if $$slots.properties && isProperties}
         <div class="properties-container">
           <slot name="properties" />
@@ -117,25 +120,13 @@
       {/if}
     </div>
   </div>
-
-  {#if rightSection}
-    <slot name="rightSection" />
-  {/if}
-
-  <div class="ad-tools buttons-group xsmall-gap h-4" class:grow-reverse={reverseCommands}>
-    {#if !rightSection && $$slots.commands}
-      <slot name="commands" />
-    {/if}
-    <slot name="actions" />
-  </div>
 </div>
 
 <style lang="scss"> 
-  .panel-content {
+  .panel-content-container {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
-    align-content: stretch;
   }
   .main-content {
     display: flex;
@@ -143,7 +134,8 @@
     flex-wrap: nowrap;
     min-width: 0;
     min-height: 0;
-    height: 100%;
+    flex-grow: 1;
+    // height: 100%;
 
     &.withProperties {
       flex-direction: row;
@@ -155,7 +147,7 @@
       flex-direction: column;
       flex-shrink: 0;
       min-width: 20rem;
-      width: 25%;
+      width: 20rem;
       // background-color: var(--board-card-bg-color);
 
       &::before {

plugins/activity-resources/src/components/Activity.svelte

@@ -64,7 +64,7 @@
       </div>
     </div>
   {/if}
-  <div class="flex-col h-full min-h-0" class:background-accent-bg-color={!transparent}>
+  <div class="flex-col flex-grow min-h-0" class:background-accent-bg-color={!transparent}>
     <Scroller>
       <div class="p-10 select-text">
         {#if txes}

plugins/task-resources/src/components/state/DoneStateEditor.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div
-  class="flex-row-center cursor-pointer"
+  class="flex-row-center cursor-pointer p-4"
   bind:this={container}
   on:click|preventDefault={() => {
     if (!opened) {

plugins/tracker-resources/src/components/issues/EditIssue.svelte

@@ -18,7 +18,17 @@
   import { createQuery, getClient, UserBox } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
   import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { AnyComponent, Button, EditBox, IconDownOutline, IconUpOutline, Label, Scroller, IconMoreH, IconEdit } from '@anticrm/ui'
+  import {
+    AnyComponent,
+    Button,
+    EditBox,
+    IconDownOutline,
+    IconUpOutline,
+    Label,
+    Scroller,
+    IconMoreH,
+    IconEdit
+  } from '@anticrm/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
   // import Card from '../Card.svelte'
@@ -38,7 +48,7 @@
   let issue: Issue | undefined
   let currentTeam: Team | undefined
   let issueStatuses: WithLookup<IssueStatus>[] | undefined
-  let fullSize: boolean = false
+  const fullSize: boolean = false
   let innerWidth: number
 
   $: _id &&
@@ -95,9 +105,7 @@
       dispatch('close')
     }}
   >
-    <svelte:fragment slot="custom-title">
+    <svelte:fragment slot="custom-title">Custom Title</svelte:fragment>
-      Custom Title
-    </svelte:fragment>
     <svelte:fragment slot="subtitle">
       <div class="flex-between flex-grow">
         {#if currentTeam}
@@ -227,22 +235,16 @@
 {/if}
 
 <style lang="scss">
-  // .main-panel {
+  .header {
-  //   flex-grow: 2;
+    max-width: 56.25rem;
-  //   flex-basis: 47.5rem;
+    width: calc(100% - 5rem);
+    justify-content: space-between;
+    padding: 0 1.25rem;
+  }
 
-    .header {
+  .content {
-      max-width: 56.25rem;
+    width: 100%;
-      width: calc(100% - 5rem);
+  }
-      justify-content: space-between;
-      padding: 0 1.25rem;
-    }
-
-    .content {
-      max-width: 53.75rem;
-      width: calc(100% - 7.5rem);
-    }
-  // }
 
   .right-panel {
     .header {