Do not limit header height

package.json

@@ -124,6 +124,7 @@
     "tslint": "5.11.0",
     "typescript": "3.9.7",
     "uuid": "8.3.1",
+    "web-animations-js": "^2.3.2",
     "webpack": "3.11.0",
     "webpack-dev-server": "2.11.1"
   },

scripts/apps/authoring/authoring/directives/AuthoringHeaderDirective.ts

@@ -8,6 +8,7 @@ import {getLabelForFieldId} from 'apps/workspace/helpers/getLabelForFieldId';
 import {getReadOnlyLabel} from './ArticleEditDirective';
 import {translateArticleType, gettext} from 'core/utils';
 import {IArticle} from 'superdesk-api';
+import {slideUpDown} from 'core/ui/slide-up-down';
 
 AuthoringHeaderDirective.$inject = [
     'api',
@@ -59,12 +60,22 @@ export function AuthoringHeaderDirective(
                 (extension) => extension.activationResult?.contributions?.authoringHeaderComponents ?? [],
             );
 
-            scope.isCollapsed = authoringWorkspace.displayAuthoringHeaderCollapedByDefault == null
-                ? false :
-                authoringWorkspace.displayAuthoringHeaderCollapedByDefault;
+            const initializeCollapsed = authoringWorkspace.displayAuthoringHeaderCollapedByDefault ?? false;
+
+            scope.headerElStyles = initializeCollapsed ? {display: 'none'} : {};
 
             scope.toggleCollapsed = () => {
                 scope.isCollapsed = !scope.isCollapsed;
+
+                const el = document.querySelector('.authoring-header') as HTMLElement;
+
+                slideUpDown(el, () => {
+                    // has to be reset after first animation
+                    if (Object.keys(scope.headerElStyles).length > 0) {
+                        scope.headerElStyles = {};
+                        scope.$applyAsync();
+                    }
+                });
             };
 
             scope.readOnlyLabel = getReadOnlyLabel();

scripts/apps/authoring/styles/authoring.scss

@@ -530,29 +530,7 @@ $authoring-toolbar-spacing: 10px;
     background-color: var(--authoringHeaderBG);
     z-index: 2;
     @include box-shadow(0px 1px 4px -1px rgba(0,0,0,0.25));
-    max-height: 0;
-    transition: max-height 0.12s ease-in;
-    //.transition(max-height 0.3s ease-in);
-    > .authoring-header__holder {
-        height: 0px;
-        opacity: 0;
-        overflow: hidden;
-        margin: 0 auto;
-        //.transition(opacity 0.3s 0.4s);
-        @include transition(opacity 0.4s 0.1s);
-    }
-    &.active {
-        max-height: 800px;
-        padding: 8px 12px 16px;
-        //.transition(max-height 0.3s ease-in);
-        > .authoring-header__holder {
-            height: auto;
-            opacity: 1;
-            overflow: visible;
-            //.transition(opacity 0.3s 0.4s);
-            @include transition(opacity 0.4s 0.1s);
-        }
-    }
+    padding: 8px 12px 16px;
     * {
         box-sizing: border-box;
     }
@@ -667,15 +645,18 @@ $authoring-toolbar-spacing: 10px;
     }
 }
 
+.authoring-header__toggle-container {
+    display: flex;
+    justify-content: center;
+    height: 0;
+}
+
+
 .authoring-header__toggle {
-    position: absolute;
     width: 37px;
     height: 25px;
     border: 0;
     padding: 0 0 4px;
-    left: 50%;
-    margin-left: -18.5px;
-    bottom: -25px;
     background-color: var(--authoringHeaderBG);
     z-index: 3;
     line-height: 0;

scripts/apps/authoring/views/authoring-header.html

@@ -14,7 +14,7 @@
 
 -->
 
-<div class="authoring-header" ng-class="{active: !isCollapsed}">
+<div class="authoring-header" ng-style="headerElStyles">
     <div class="authoring-header__holder" ng-controller="MetadataWidgetCtrl" ng-if="loaded">
         <div class="authoring-header__general-info">
             <div>
@@ -630,5 +630,8 @@
             </div>
         </div>
     </div>
-        <button class="authoring-header__toggle" ng-class="{active: isCollapsed}" ng-click="toggleCollapsed()" tabindex="-1"><i class="icon-chevron-up-thin"></i></button>
+</div>
+
+<div class="authoring-header__toggle-container">
+    <button class="authoring-header__toggle" ng-class="{active: isCollapsed}" ng-click="toggleCollapsed()" tabindex="-1"><i class="icon-chevron-up-thin"></i></button>    
 </div>

scripts/core/ui/slide-up-down.ts

@@ -0,0 +1,44 @@
+function getHiddenElementHeight(el: HTMLElement) {
+    el.style.setProperty('display', 'block');
+
+    const height = el.offsetHeight;
+
+    el.style.setProperty('display', 'none');
+
+    return height;
+}
+
+/**
+ * Toggles visibility of an element and animates height in the process.
+ */
+export function slideUpDown(el: HTMLElement, onAnimationFinish?: () => void) {
+    const hiddenBeforeAnimation = el.style.display === 'none';
+
+    let fromHeight;
+    let toHeight;
+
+    if (el.style.display === 'none') {
+        fromHeight = '0px';
+        toHeight = `${getHiddenElementHeight(el)}px`;
+
+        el.style.setProperty('display', 'block');
+        el.style.setProperty('height', fromHeight);
+    } else {
+        fromHeight = `${el.offsetHeight}px`;
+        toHeight = '0px';
+    }
+
+    el.style.setProperty('overflow', 'hidden');
+
+    const animation = el.animate({height: [`${el.offsetHeight}px`, toHeight]}, 150);
+
+    animation.onfinish = () => {
+        el.style.setProperty('display', hiddenBeforeAnimation ? '' : 'none');
+        el.style.setProperty('height', '');
+        el.style.setProperty('overflow', '');
+
+        onAnimationFinish?.();
+    };
+
+    el.style.setProperty('height', toHeight);
+}

scripts/vendor.ts

@@ -1,3 +1,4 @@
+import 'web-animations-js'; // polyfill for Element.animate()
 import 'jquery';
 import 'jquery-ui/jquery-ui';
 import 'jquery-jcrop';