From 6dfab1d9a9b81565a408d8da48c40b2f6daa20c7 Mon Sep 17 00:00:00 2001
From: thecalcc <me@kmarkov.io>
Date: Wed, 1 Nov 2023 16:33:07 +0200
Subject: [PATCH] Fix v2. Remove absolute elements

---
 .../TargetedPublishing/MetaData.jsx           | 44 +++++----
 .../TargetedPublishing/MetaDataOverlay.jsx    | 21 +----
 .../RelatedArticlesStatus.jsx                 | 66 ++++++-------
 .../TargetedPublishing/TargetedPublishing.jsx | 94 ++++++++++---------
 client/extensions/Publishing.jsx              |  3 +
 5 files changed, 113 insertions(+), 115 deletions(-)

diff --git a/client/components/TargetedPublishing/MetaData.jsx b/client/components/TargetedPublishing/MetaData.jsx
index 2e709a42..649b3ec1 100644
--- a/client/components/TargetedPublishing/MetaData.jsx
+++ b/client/components/TargetedPublishing/MetaData.jsx
@@ -115,26 +115,30 @@ class MetaData extends Component {
   render() {
     return (
       <>
-        <ToggleBox
-          title="Meta data"
-          style="toggle-box--dark sp--dark-ui toggle-box--circle"
-          isOpen={true}
-        >
-          <div className="sd-list-item-group sd-shadow--z1">
-            <ButtonListItem
-              onClick={() => this.toggleOverlay("Facebook")}
-              label="Facebook"
-            />
-            <ButtonListItem
-              onClick={() => this.toggleOverlay("Twitter")}
-              label="Twitter"
-            />
-            <ButtonListItem
-              onClick={() => this.toggleOverlay("SEO")}
-              label="SEO"
-            />
-          </div>
-        </ToggleBox>
+        {
+          this.props.overlayOpen === false && (
+            <ToggleBox
+              title="Meta data"
+              style="toggle-box--dark sp--dark-ui toggle-box--circle"
+              isOpen={true}
+            >
+              <div className="sd-list-item-group sd-shadow--z1">
+                <ButtonListItem
+                  onClick={() => this.toggleOverlay("Facebook")}
+                  label="Facebook"
+                />
+                <ButtonListItem
+                  onClick={() => this.toggleOverlay("Twitter")}
+                  label="Twitter"
+                />
+                <ButtonListItem
+                  onClick={() => this.toggleOverlay("SEO")}
+                  label="SEO"
+                />
+              </div>
+            </ToggleBox>
+          )
+        }
         <MetaDataOverlay
           isOpen={this.props.overlayOpen}
           toggle={() => this.toggleOverlay("")}
diff --git a/client/components/TargetedPublishing/MetaDataOverlay.jsx b/client/components/TargetedPublishing/MetaDataOverlay.jsx
index f0a2c374..6c5e5d35 100644
--- a/client/components/TargetedPublishing/MetaDataOverlay.jsx
+++ b/client/components/TargetedPublishing/MetaDataOverlay.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import classNames from "classnames";
 import PropTypes from "prop-types";
 
 import { IconButton } from "superdesk-ui-framework/react";
@@ -44,20 +43,8 @@ class MetaDataOverlay extends Component {
           : "";
     }
 
-    const styles = this.props.isOpen ? {} : {zIndex: '-1'}
-    const widthHeightPersistentStyle = {width: '100%', height: '100%'};
-
-    return (
-      <div
-        style={{...styles, ...widthHeightPersistentStyle}}
-        className={classNames("side-panel__content-block-overlay", {
-          "side-panel__content-block-overlay--open": this.props.isOpen,
-        })}
-      >
-        <div
-          style={widthHeightPersistentStyle}
-          className="side-panel"
-        >
+    return this.props.isOpen && (
+        <div>
           <div className="side-panel__header">
             <div className="side-panel__header-wrapper sd-flex--items-center">
               <span className="sd-margin-l--1">
@@ -117,8 +104,7 @@ class MetaDataOverlay extends Component {
             </div>
           </div>
         </div>
-      </div>
-    );
+      );
   }
 }
 
@@ -130,6 +116,7 @@ MetaDataOverlay.propTypes = {
   setMetaData: PropTypes.func.isRequired,
   uploadImage: PropTypes.func.isRequired,
   isUploadingInProgress: PropTypes.bool,
+  isOpen: PropTypes.bool,
 };
 
 export default MetaDataOverlay;
diff --git a/client/components/TargetedPublishing/RelatedArticlesStatus.jsx b/client/components/TargetedPublishing/RelatedArticlesStatus.jsx
index fbf71c56..5026e741 100644
--- a/client/components/TargetedPublishing/RelatedArticlesStatus.jsx
+++ b/client/components/TargetedPublishing/RelatedArticlesStatus.jsx
@@ -42,39 +42,41 @@ class RelatedArticlesStatus extends React.Component {
     }
 
     return (
-      <ToggleBox
-        title="Related Articles"
-        style="toggle-box--dark sp--dark-ui"
-        isOpen={true}
-      >
-        {this.state.loading && <Loading />}
-        <ul className="simple-list simple-list--dotted simple-list--no-padding">
-          {this.state.relatedArticles.map(article => (
-            <li className="simple-list__item" key={article.title}>
-              <p>{article.title}</p>
-              {this.props.rules.map(rule => {
-                let index = article.tenants.findIndex(
-                  t => t && t.code === rule.tenant.code
-                );
-                let siteDomain = rule.tenant.subdomain
-                  ? rule.tenant.subdomain + "." + rule.tenant.domain_name
-                  : rule.tenant.domain_name;
+      <div hidden={this.props.hide}>
+        <ToggleBox
+          title="Related Articles"
+          style="toggle-box--dark sp--dark-ui"
+          isOpen={true}
+        >
+          {this.state.loading && <Loading />}
+          <ul className="simple-list simple-list--dotted simple-list--no-padding">
+            {this.state.relatedArticles.map(article => (
+              <li className="simple-list__item" key={article.title}>
+                <p>{article.title}</p>
+                {this.props.rules.map(rule => {
+                  let index = article.tenants.findIndex(
+                    t => t && t.code === rule.tenant.code
+                  );
+                  let siteDomain = rule.tenant.subdomain
+                    ? rule.tenant.subdomain + "." + rule.tenant.domain_name
+                    : rule.tenant.domain_name;
 
-                return (
-                  <span
-                    key={"site" + rule.tenant.code}
-                    className={classNames("label-icon", {
-                      "label-icon--success": index >= 0
-                    })}
-                  >
-                    <i className="icon-globe" /> {siteDomain}
-                  </span>
-                );
-              })}
-            </li>
-          ))}
-        </ul>
-      </ToggleBox>
+                  return (
+                    <span
+                      key={"site" + rule.tenant.code}
+                      className={classNames("label-icon", {
+                        "label-icon--success": index >= 0
+                      })}
+                    >
+                      <i className="icon-globe" /> {siteDomain}
+                    </span>
+                  );
+                })}
+              </li>
+            ))}
+          </ul>
+        </ToggleBox>
+      </div>
     );
   }
 }
diff --git a/client/components/TargetedPublishing/TargetedPublishing.jsx b/client/components/TargetedPublishing/TargetedPublishing.jsx
index 9bf4d84a..449d0b26 100644
--- a/client/components/TargetedPublishing/TargetedPublishing.jsx
+++ b/client/components/TargetedPublishing/TargetedPublishing.jsx
@@ -23,55 +23,57 @@ class TargetedPublishing extends React.Component {
 
   render() {
     return (
-      <ToggleBox
-        title="Web publishing"
-        style="toggle-box--dark sp--dark-ui toggle-box--circle"
-        isOpen={true}
-      >
-        {!this.props.rules.length && (
-          <div className="tp-alert">
-            No websites have been set, this article won't show up on any
-            website. It will go to: <br />
-            <span style={{ fontWeight: "500" }}>
-              Publisher &gt; Output Control &gt; Incoming list
-            </span>
-          </div>
-        )}
-        {this.props.rules.map((rule, index) => (
-          <Destination
-            key={rule.tenant.code}
-            isOpen={false}
-            rule={rule}
-            apiHeader={this.props.apiHeader}
-            config={this.props.config}
-            item={this.props.item}
-            cancel={() => this.setNewDestination({})}
-            reload={this.props.reload}
-          />
-        ))}
+      <div hidden={this.props.hide}>
+        <ToggleBox
+          title="Web publishing"
+          style="toggle-box--dark sp--dark-ui toggle-box--circle"
+          isOpen={true}
+        >
+          {!this.props.rules.length && (
+            <div className="tp-alert">
+              No websites have been set, this article won't show up on any
+              website. It will go to: <br />
+              <span style={{ fontWeight: "500" }}>
+                Publisher &gt; Output Control &gt; Incoming list
+              </span>
+            </div>
+          )}
+          {this.props.rules.map((rule, index) => (
+            <Destination
+              key={rule.tenant.code}
+              isOpen={false}
+              rule={rule}
+              apiHeader={this.props.apiHeader}
+              config={this.props.config}
+              item={this.props.item}
+              cancel={() => this.setNewDestination({})}
+              reload={this.props.reload}
+            />
+          ))}
 
-        {this.state.newDestination && this.state.newDestination.id && (
-          <Destination
-            key={this.state.newDestination.id}
-            isOpen={true}
-            site={this.state.newDestination}
+          {this.state.newDestination && this.state.newDestination.id && (
+            <Destination
+              key={this.state.newDestination.id}
+              isOpen={true}
+              site={this.state.newDestination}
+              apiHeader={this.props.apiHeader}
+              config={this.props.config}
+              item={this.props.item}
+              cancel={() => this.setNewDestination({})}
+              reload={this.props.reload}
+            />
+          )}
+          <AddWebsite
+            setNewDestination={(newDestination) => {
+              this.props.reload();
+              this.setNewDestination(newDestination);
+            }}
             apiHeader={this.props.apiHeader}
-            config={this.props.config}
-            item={this.props.item}
-            cancel={() => this.setNewDestination({})}
-            reload={this.props.reload}
+            apiUrl={this.props.apiUrl}
+            rules={[...this.props.rules, this.state.newDestination]}
           />
-        )}
-        <AddWebsite
-          setNewDestination={(newDestination) => {
-            this.props.reload();
-            this.setNewDestination(newDestination);
-          }}
-          apiHeader={this.props.apiHeader}
-          apiUrl={this.props.apiUrl}
-          rules={[...this.props.rules, this.state.newDestination]}
-        />
-      </ToggleBox>
+        </ToggleBox>
+      </div>
     );
   }
 }
diff --git a/client/extensions/Publishing.jsx b/client/extensions/Publishing.jsx
index fc637ff7..bc616682 100644
--- a/client/extensions/Publishing.jsx
+++ b/client/extensions/Publishing.jsx
@@ -101,6 +101,7 @@ class Publishing extends React.Component {
   };
 
   render() {
+    console.log(this.state.item)
     return (
       <React.Fragment>
         {this.state.ninjsError && (
@@ -124,6 +125,7 @@ class Publishing extends React.Component {
           !this.state.ninjsError &&
           !this.state.evaluateError && (
             <TargetedPublishing
+              hide={this.state.overlayOpen}
               config={this.props.config}
               rules={this.state.rules}
               apiUrl={this.state.apiUrl}
@@ -136,6 +138,7 @@ class Publishing extends React.Component {
           !this.state.ninjsError &&
           !this.state.evaluateError && (
             <RelatedArticlesStatus
+              hide={this.state.overlayOpen}
               rules={this.state.rules}
               apiUrl={this.state.apiUrl}
               apiHeader={this.state.apiHeader}