Panel: remove full size. Fix popup. (#2007)

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

packages/panel/src/components/Panel.svelte

@@ -32,18 +32,9 @@
   export let isSub: boolean = true
   export let isAside: boolean = true
   export let isCustomAttr: boolean = true
-  export let isFullSize: boolean = false
 </script>
 
-<Panel
-  bind:isAside
-  bind:isFullSize
-  isHeader={$$slots.header || isHeader}
-  bind:panelWidth
-  bind:innerWidth
-  on:close
-  on:fullsize
->
+<Panel bind:isAside isHeader={$$slots.header || isHeader} bind:panelWidth bind:innerWidth on:close>
   <svelte:fragment slot="title">
     <div class="popupPanel-title__content-container antiTitle">
       {#if $$slots.navigator}

packages/theme/styles/panel.scss

@@ -212,10 +212,6 @@
 }
 
 // Full size state
-.panel-instance.fullsize .panel-container {
-  padding: 0 !important;
-}
-.panel-instance.fullsize .panel-container .popupPanel,
 .popup.fullsize .popupPanel {
   border-radius: 0;
   box-shadow: none !important;
@@ -227,7 +223,6 @@
   }
   .popupPanel-title { border-bottom: 1px solid var(--divider-color); }
 }
-.panel-instance.fullsize,
 .popup.fullsize {
   transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
 }

packages/ui/src/components/Panel.svelte

@@ -52,7 +52,7 @@
     <div class="popupPanel-title__content"><slot name="title" /></div>
     <div class="buttons-group xsmall-gap">
       <slot name="utils" />
-      {#if $$slots.utils}<div class="buttons-divider" />{/if}
+      {#if isFullSize || (asideFloat && $$slots.aside && isAside)}<div class="buttons-divider" />{/if}
       {#if asideFloat && $$slots.aside && isAside}
         <Button
           icon={IconDetails}

packages/ui/src/components/PanelInstance.svelte

@@ -25,9 +25,6 @@
 
   let modalHTML: HTMLElement
   let componentInstance: any
-  let docWidth: number
-  let docSize: boolean = false
-  let fullSize: boolean = false
 
   let options: PopupOptions = {
     props: {
@@ -77,17 +74,7 @@
 
   const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
     if (modalHTML) {
-      if ((fullSize || docSize) && (props.element === 'float' || props.element === 'content')) {
-        options = fitPopupElement(modalHTML, 'full')
-        options.props.width = '100vw'
-        options.props.maxHeight = '100vh'
-        options.showOverlay = false
-        modalHTML.classList.add('fullsize')
-      } else {
-        options = fitPopupElement(modalHTML, props.element, contentPanel)
-        modalHTML.classList.remove('fullsize')
-      }
-      options.fullSize = fullSize
+      options = fitPopupElement(modalHTML, props.element, contentPanel)
     }
   }
 
@@ -111,12 +98,9 @@
   onMount(() => {
     if (props) fitPopup(props, contentPanel)
   })
-  $: if (docWidth <= 900 && !docSize) docSize = true
-  $: if (docWidth > 900 && docSize) docSize = false
 </script>
 
 <svelte:window
-  bind:innerWidth={docWidth}
   on:resize={() => {
     if (props) fitPopup(props, contentPanel)
   }}
@@ -131,7 +115,6 @@
     <slot name="panel-header" />
     <div
       class="panel-instance"
-      class:anim={props.element === 'float' || props.element === 'content'}
       class:bg={props.element === 'content'}
       bind:this={modalHTML}
       style:top={options.props.top}
@@ -156,9 +139,6 @@
           bind:options
           on:close={_close}
           on:update={_update}
-          on:fullsize={() => {
-            fullSize = !fullSize
-          }}
         />
       </div>
     </div>
@@ -180,11 +160,6 @@
     position: fixed;
     background-color: transparent;
 
-    &.anim {
-      transition-property: top, bottom, left, right, width, height;
-      transition-duration: 0.15s;
-      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
     &.bg {
       background-color: var(--body-color);
     }
@@ -211,7 +186,4 @@
       background: rgba(0, 0, 0, 0.5);
     }
   }
-  :global(.panel-instance.fullsize) {
-    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important;
-  }
 </style>

packages/ui/src/components/PopupInstance.svelte

@@ -68,7 +68,7 @@
 
   const fitPopup = (): void => {
     if (modalHTML) {
-      if ((fullSize || docSize) && (element === 'float' || element === 'content')) {
+      if ((fullSize || docSize) && element === 'float') {
         options = fitPopupElement(modalHTML, 'full')
         options.props.maxHeight = '100vh'
         if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
@@ -97,7 +97,7 @@
 
 <div
   class="popup"
-  class:anim={element === 'float' || element === 'content'}
+  class:anim={element === 'float'}
   bind:this={modalHTML}
   style={`z-index: ${zIndex + 1};`}
   style:top={options.props.top}

plugins/board-resources/src/components/EditCard.svelte

@@ -122,8 +122,6 @@
     isHeader
     isAside={true}
     isSub={false}
-    isFullSize
-    on:fullsize
     on:close={() => dispatch('close')}
   >
     <svelte:fragment slot="navigator">

plugins/chunter-resources/src/components/EditChannel.svelte

@@ -64,8 +64,6 @@
 <Panel
   isHeader={false}
   isAside={_class === chunter.class.Channel}
-  isFullSize
-  on:fullsize
   on:close={() => {
     dispatch('close')
   }}

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -58,8 +58,6 @@
     isHeader={false}
     isAside={true}
     {object}
-    isFullSize
-    on:fullsize
     on:close={() => {
       dispatch('close')
     }}

plugins/recruit-resources/src/components/review/EditReviewCategory.svelte

@@ -54,8 +54,6 @@
     isHeader={false}
     isAside={true}
     {object}
-    isFullSize
-    on:fullsize
     on:close={() => {
       dispatch('close')
     }}

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

@@ -157,8 +157,6 @@
     isSub={false}
     withoutActivity={isEditing}
     bind:innerWidth
-    isFullSize
-    on:fullsize
     on:close={() => dispatch('close')}
   >
     {@const { attachedTo: parentIssue } = issue?.$lookup ?? {}}

plugins/view-resources/src/components/EditDoc.svelte

@@ -223,8 +223,6 @@
     isAside={true}
     bind:panelWidth
     bind:innerWidth
-    isFullSize
-    on:fullsize
     on:update={(ev) => _update(ev.detail)}
     on:close={() => {
       dispatch('close')

plugins/workbench-resources/src/components/navigator/SpacePanel.svelte

@@ -55,8 +55,6 @@
 <Panel
   isHeader={false}
   isAside={false}
-  isFullSize
-  on:fullsize
   on:close={() => {
     dispatch('close')
   }}