Web:Files:Components: fix embedding panel body styles when open it at share panel of modal view

products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js

@@ -8,6 +8,7 @@ import toastr from "@appserver/components/toast/toastr";
 import IconButton from "@appserver/components/icon-button";
 import i18n from "./i18n";
 import { withTranslation, I18nextProvider } from "react-i18next";
+import StyledBody from "./StyledEmbeddingPanel";
 
 const EmbeddingBody = ({ embeddingLink, t, theme }) => {
   const [size, setSize] = useState("auto");
@@ -61,74 +62,76 @@ const EmbeddingBody = ({ embeddingLink, t, theme }) => {
   };
 
   return (
-    <div className="embedding-panel_body">
-      <Text className="embedding-panel_text">{t("Common:Size")}:</Text>
-      <div className="embedding-panel_links-container">
-        <Link
-          isHovered
-          type="action"
-          className={`embedding-panel_link  ${
-            size === "600x800" ? "embedding-panel_active-link" : ""
-          }`}
-          onClick={onSelectSizeMiddle}
-        >
-          600 x 800 px
-        </Link>
-        <Link
-          isHovered
-          type="action"
-          className={`embedding-panel_link  ${
-            size === "400x600" ? "embedding-panel_active-link" : ""
-          }`}
-          onClick={onSelectSizeSmall}
-        >
-          400 x 600 px
-        </Link>
-        <Link
-          isHovered
-          type="action"
-          className={`embedding-panel_link  ${
-            size === "auto" ? "embedding-panel_active-link" : ""
-          }`}
-          onClick={onSelectSizeAuto}
-        >
-          {t("Auto")}
-        </Link>
-      </div>
-      <div className="embedding-panel_inputs-container">
-        <div>
-          <Text className="embedding-panel_text">{t("Width")}:</Text>
-          <TextInput
-            className="embedding-panel_input"
-            value={widthValue}
-            onChange={onChangeWidth}
-          />
+    <StyledBody>
+      <div className="embedding-panel_body">
+        <Text className="embedding-panel_text">{t("Common:Size")}:</Text>
+        <div className="embedding-panel_links-container">
+          <Link
+            isHovered
+            type="action"
+            className={`embedding-panel_link  ${
+              size === "600x800" ? "embedding-panel_active-link" : ""
+            }`}
+            onClick={onSelectSizeMiddle}
+          >
+            600 x 800 px
+          </Link>
+          <Link
+            isHovered
+            type="action"
+            className={`embedding-panel_link  ${
+              size === "400x600" ? "embedding-panel_active-link" : ""
+            }`}
+            onClick={onSelectSizeSmall}
+          >
+            400 x 600 px
+          </Link>
+          <Link
+            isHovered
+            type="action"
+            className={`embedding-panel_link  ${
+              size === "auto" ? "embedding-panel_active-link" : ""
+            }`}
+            onClick={onSelectSizeAuto}
+          >
+            {t("Auto")}
+          </Link>
         </div>
-        <div>
-          <Text className="embedding-panel_text">{t("Height")}:</Text>
-          <TextInput
-            className="embedding-panel_input"
-            value={heightValue}
-            onChange={onChangeHeight}
+        <div className="embedding-panel_inputs-container">
+          <div>
+            <Text className="embedding-panel_text">{t("Width")}:</Text>
+            <TextInput
+              className="embedding-panel_input"
+              value={widthValue}
+              onChange={onChangeWidth}
+            />
+          </div>
+          <div>
+            <Text className="embedding-panel_text">{t("Height")}:</Text>
+            <TextInput
+              className="embedding-panel_input"
+              value={heightValue}
+              onChange={onChangeHeight}
+            />
+          </div>
+        </div>
+        <div className="embedding-panel_code-container">
+          <Text className="embedding-panel_text">{t("EmbedCode")}:</Text>
+          <IconButton
+            className="embedding-panel_copy-icon"
+            size="16"
+            iconName="/static/images/copy.react.svg"
+            // color={theme.filesPanels.embedding.iconColor}
+            onClick={onCopyLink}
+          />
+          <Textarea
+            color={theme.filesPanels.embedding.textAreaColor}
+            isReadOnly
+            value={link}
           />
         </div>
       </div>
-      <div className="embedding-panel_code-container">
-        <Text className="embedding-panel_text">{t("EmbedCode")}:</Text>
-        <IconButton
-          className="embedding-panel_copy-icon"
-          size="16"
-          iconName="/static/images/copy.react.svg"
-          // color={theme.filesPanels.embedding.iconColor}
-          onClick={onCopyLink}
-        />
-        <Textarea
-          color={theme.filesPanels.embedding.textAreaColor}
-          isReadOnly
-          value={link}
-        />
-      </div>
-    </div>
+    </StyledBody>
   );
 };
 

products/ASC.Files/Client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js

@@ -0,0 +1,57 @@
+import styled, { css } from "styled-components";
+
+const StyledBody = styled.div`
+  .embedding-panel_body {
+    padding: 0 16px;
+  }
+
+  .embedding-panel_links-container {
+    display: flex;
+    .embedding-panel_link {
+      margin-right: 8px;
+
+      border: 1px solid #eceef1;
+      border-radius: 16px;
+      line-height: 20px;
+      padding: 3px 15px;
+
+      box-sizing: border-box;
+
+      text-decoration: none;
+    }
+
+    .embedding-panel_active-link {
+      background: #265a8f;
+
+      color: #ffffff;
+    }
+  }
+
+  .embedding-panel_inputs-container {
+    display: flex;
+    margin-top: 16px;
+
+    .embedding-panel_input {
+      margin-right: 8px;
+      width: 94px;
+    }
+  }
+
+  .embedding-panel_code-container {
+    margin-top: 16px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .embedding-panel_text {
+    padding: 0px 0 4px 0;
+  }
+
+  .embedding-panel_copy-icon {
+    position: absolute;
+    z-index: 1;
+    margin: 8px;
+    right: 16px;
+  }
+`;
+
+export default StyledBody;

products/ASC.Files/Client/src/components/panels/EmbeddingPanel/index.js

@@ -7,11 +7,7 @@ import Aside from "@appserver/components/aside";
 import IconButton from "@appserver/components/icon-button";
 import { withTranslation, I18nextProvider } from "react-i18next";
 import i18n from "./i18n";
-import {
-  StyledEmbeddingPanel,
-  StyledContent,
-  StyledBody,
-} from "../StyledPanels";
+import { StyledEmbeddingPanel, StyledContent } from "../StyledPanels";
 
 import { StyledHeaderContent } from "../SharingPanel/StyledSharingPanel";
 
@@ -57,9 +53,8 @@ class EmbeddingPanelComponent extends React.Component {
                 </Heading>
               </div>
             </StyledHeaderContent>
-            <StyledBody>
-              <EmbeddingBody theme={theme} />
-            </StyledBody>
+
+            <EmbeddingBody theme={theme} />
           </StyledContent>
         </Aside>
       </StyledEmbeddingPanel>

products/ASC.Files/Client/src/components/panels/SharingPanel/Header.js

@@ -43,8 +43,6 @@ const Header = ({
     onShowGroupsPanel && onShowGroupsPanel();
   }, [onShowGroupsPanel]);
 
-  console.log(uploadPanelVisible);
-
   return (
     <StyledHeaderContent
       isPersonal={isPersonal}

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -363,10 +363,6 @@ const StyledBody = styled.div`
     }
   }
 
-  .embedding-panel_body {
-    padding: 0 16px;
-  }
-
   .change-owner_body {
     padding: 0 16px;
     display: flex;
@@ -411,54 +407,6 @@ const StyledBody = styled.div`
     }
   }
 
-  .embedding-panel_links-container {
-    display: flex;
-    .embedding-panel_link {
-      margin-right: 8px;
-
-      border: 1px solid #eceef1;
-      border-radius: 16px;
-      line-height: 20px;
-      padding: 3px 15px;
-
-      box-sizing: border-box;
-
-      text-decoration: none;
-    }
-
-    .embedding-panel_active-link {
-      background: #265a8f;
-
-      color: #ffffff;
-    }
-  }
-
-  .embedding-panel_inputs-container {
-    display: flex;
-    margin-top: 16px;
-
-    .embedding-panel_input {
-      margin-right: 8px;
-      width: 94px;
-    }
-  }
-
-  .embedding-panel_code-container {
-    margin-top: 16px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  .embedding-panel_text {
-    padding: 0px 0 4px 0;
-  }
-
-  .embedding-panel_copy-icon {
-    position: absolute;
-    z-index: 1;
-    margin: 8px;
-    right: 16px;
-  }
-
   .sharing-access-combo-box-icon {
     path {
       fill: ${(props) => props.theme.filesPanels.body.fill};