Update EditStatuses, PDFViewer. Add full size for Panel. (#1797)

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

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

@@ -20,7 +20,7 @@
   import type { DoneState, Kanban, SpaceWithStates, State } from '@anticrm/task'
   import task from '../../plugin'
   import KanbanEditor from '../kanban/KanbanEditor.svelte'
-  import { Icon, IconClose, Label, showPopup, ActionIcon, ScrollBox } from '@anticrm/ui'
+  import { Icon, Label, showPopup, Panel, Scroller } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import workbench from '@anticrm/workbench'
 
@@ -91,39 +91,35 @@
   }
 </script>
 
-<div
-  class="antiOverlay"
-  on:click={() => {
+<Panel
+  isHeader={false}
+  isAside={false}
+  isFullSize
+  on:fullsize
+  on:close={() => {
     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">
+>
+  <svelte:fragment slot="title">
+    <div class="antiTitle icon-wrapper">
+      <div class="wrapped-icon">
+        <Icon icon={task.icon.ManageStatuses} size={'small'} />
+      </div>
+      <div class="title-wrapper">
+        <span class="wrapped-title">
           <Label label={task.string.ManageStatusesWithin} />
           {#if spaceClassInstance}<Label label={spaceClassInstance?.label} />{:else}...{/if}
         </span>
+        {#if spaceInstance?.name}<span class="wrapped-subtitle">{spaceInstance?.name}</span>{/if}
       </div>
-      {#if spaceInstance?.name}<span class="ac-header__description">{spaceInstance?.name}</span>{/if}
     </div>
-    <div class="tool">
-      <ActionIcon
-        icon={IconClose}
-        size={'small'}
-        action={() => {
-          dispatch('close')
-        }}
-      />
-    </div>
-  </div>
-  <div class="p-10 flex-grow">
-    <ScrollBox vertical stretch>
+  </svelte:fragment>
+
+  <Scroller>
+    <div class="popupPanel-body__main-content py-10 clear-mins">
       {#if kanban !== undefined}
         <KanbanEditor {kanban} on:delete={(e) => deleteState(e.detail)} />
       {/if}
-    </ScrollBox>
-  </div>
-</div>
+    </div>
+  </Scroller>
+</Panel>

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

@@ -75,68 +75,66 @@
   }
 </script>
 
-<div>
-  <div class="flex-no-shrink flex-between trans-title uppercase">
-    <Label label={task.string.ActiveStates} />
-    <CircleButton
-      icon={IconAdd}
-      size={'medium'}
-      on:click={() => {
-        onAdd(task.class.State)
-      }}
-    />
-  </div>
-  <div class="mt-3">
-    {#each states as state, i}
-      {#if state}
+<div class="flex-no-shrink flex-between trans-title uppercase">
+  <Label label={task.string.ActiveStates} />
+  <CircleButton
+    icon={IconAdd}
+    size={'medium'}
+    on:click={() => {
+      onAdd(task.class.State)
+    }}
+  />
+</div>
+<div class="mt-3">
+  {#each states as state, i}
+    {#if state}
+      <div
+        bind:this={elements[i]}
+        class="flex-between states"
+        draggable={true}
+        on:dragover|preventDefault={(ev) => {
+          dragover(ev, i)
+        }}
+        on:drop|preventDefault={() => {
+          onMove(i)
+        }}
+        on:dragstart={() => {
+          selected = i
+          dragState = states[i]._id
+        }}
+        on:dragend={() => {
+          selected = undefined
+        }}
+      >
+        <div class="bar"><Circles /></div>
         <div
-          bind:this={elements[i]}
-          class="flex-between states"
-          draggable={true}
-          on:dragover|preventDefault={(ev) => {
-            dragover(ev, i)
+          class="color"
+          style="background-color: {getPlatformColor(state.color)}"
+          on:click={() => {
+            showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
           }}
-          on:drop|preventDefault={() => {
-            onMove(i)
-          }}
-          on:dragstart={() => {
-            selected = i
-            dragState = states[i]._id
-          }}
-          on:dragend={() => {
-            selected = undefined
-          }}
-        >
-          <div class="bar"><Circles /></div>
-          <div
-            class="color"
-            style="background-color: {getPlatformColor(state.color)}"
-            on:click={() => {
-              showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
-            }}
-          />
-          <div class="flex-grow caption-color">
-            <AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title" />
-          </div>
-          {#if states.length > 1}
-            <div
-              class="tool hover-trans"
-              on:click={(ev) => {
-                showPopup(
-                  StatusesPopup,
-                  { onDelete: () => dispatch('delete', { state }) },
-                  eventToHTMLElement(ev),
-                  () => {}
-                )
-              }}
-            >
-              <IconMoreH size={'medium'} />
-            </div>
-          {/if}
+        />
+        <div class="flex-grow caption-color">
+          <AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title" />
         </div>
-      {/if}
-    {/each}
-  </div>
+        {#if states.length > 1}
+          <div
+            class="tool hover-trans"
+            on:click={(ev) => {
+              showPopup(
+                StatusesPopup,
+                { onDelete: () => dispatch('delete', { state }) },
+                eventToHTMLElement(ev),
+                () => {}
+              )
+            }}
+          >
+            <IconMoreH size={'medium'} />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {/each}
 </div>
 <div class="mt-9">
   <div class="flex-no-shrink flex-between trans-title uppercase">
@@ -189,7 +187,7 @@
       }}
     />
   </div>
-  <div class="mt-4">
+  <div class="mt-4 mb-10">
     {#each lostStates as state}
       {#if state}
         <div class="states flex-row-center">
@@ -222,10 +220,10 @@
 <style lang="scss">
   .states {
     padding: 0.5rem 1rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-enabled);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 0.75rem;
+    color: var(--caption-color);
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.5rem;
     user-select: none;
 
     .bar {