Merge pull request #858 from ONLYOFFICE/feature/added-show-article-button
Feature/added show article button
This commit is contained in:
commit
56c4c35ca0
@ -2,7 +2,6 @@ import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import PropTypes from "prop-types";
|
||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||
import { Resizable } from "re-resizable";
|
||||
|
||||
import {
|
||||
isDesktop as isDesktopUtils,
|
||||
@ -17,13 +16,7 @@ import SubArticleBody from "./sub-components/article-body";
|
||||
import ArticleProfile from "./sub-components/article-profile";
|
||||
|
||||
import { StyledArticle } from "./styled-article";
|
||||
|
||||
const enable = {
|
||||
top: false,
|
||||
right: false,
|
||||
bottom: false,
|
||||
left: false,
|
||||
};
|
||||
import HideArticleMenuButton from "./sub-components/article-hide-menu-button";
|
||||
|
||||
const Article = ({
|
||||
showText,
|
||||
@ -117,7 +110,7 @@ const Article = ({
|
||||
isBannerVisible={isBannerVisible}
|
||||
{...rest}
|
||||
>
|
||||
<SubArticleHeader showText={showText} onClick={toggleShowText}>
|
||||
<SubArticleHeader showText={showText}>
|
||||
{articleHeaderContent ? articleHeaderContent.props.children : null}
|
||||
</SubArticleHeader>
|
||||
{articleMainButtonContent && !isMobileOnly && !isMobileUtils() ? (
|
||||
@ -127,6 +120,10 @@ const Article = ({
|
||||
) : null}
|
||||
<SubArticleBody showText={showText}>
|
||||
{articleBodyContent ? articleBodyContent.props.children : null}
|
||||
<HideArticleMenuButton
|
||||
showText={showText}
|
||||
toggleShowText={toggleShowText}
|
||||
/>
|
||||
{!hideProfileBlock && !isMobileOnly && (
|
||||
<ArticleProfile showText={showText} />
|
||||
)}
|
||||
|
@ -12,9 +12,7 @@ import {
|
||||
isMobile as isMobileUtils,
|
||||
} from "@docspace/components/utils/device";
|
||||
|
||||
import Heading from "@docspace/components/heading";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
import MenuIcon from "@docspace/components/public/static/images/menu.react.svg";
|
||||
import CrossIcon from "@docspace/components/public/static/images/cross.react.svg";
|
||||
|
||||
|
@ -23,11 +23,7 @@ const ArticleHeader = ({
|
||||
const history = useHistory();
|
||||
|
||||
const isTabletView = (isTabletUtils() || isTablet) && !isMobileOnly;
|
||||
|
||||
const onLogoClick = () => {
|
||||
if (showText && isTabletView) onClick();
|
||||
else history.push("/");
|
||||
};
|
||||
const onLogoClick = () => history.push("/");
|
||||
|
||||
if (isMobileOnly) return <></>;
|
||||
return (
|
||||
@ -36,7 +32,7 @@ const ArticleHeader = ({
|
||||
<Loaders.ArticleHeader height="28px" width="28px" />
|
||||
) : (
|
||||
<StyledIconBox name="article-burger" showText={showText}>
|
||||
<img src="/static/images/logo.icon.react.svg" onClick={onClick} />
|
||||
<img src="/static/images/logo.icon.react.svg" onClick={onLogoClick} />
|
||||
</StyledIconBox>
|
||||
)}
|
||||
|
||||
|
@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import Text from "@docspace/components/text";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { desktop, mobile, tablet } from "@docspace/components/utils/device";
|
||||
import { isTablet, isMobileOnly } from "react-device-detect";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledHideArticleMenuButton = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
height: 44px;
|
||||
z-index: 210;
|
||||
bottom: 89px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
min-width: ${({ showText }) => (showText ? "243px" : "60px")};
|
||||
max-width: ${({ showText }) => (showText ? "243px" : "60px")};
|
||||
|
||||
@media ${desktop} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
display: none;
|
||||
`}
|
||||
|
||||
.article-hide-menu-container {
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
|
||||
.article-hide-menu-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
display: ${({ showText }) => (showText ? "flex" : "none")};
|
||||
}
|
||||
|
||||
${isTablet &&
|
||||
css`
|
||||
display: ${({ showText }) => (showText ? "flex" : "none")};
|
||||
`}
|
||||
}
|
||||
|
||||
.article-show-menu-container {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
@media ${tablet} {
|
||||
display: ${({ showText }) => (showText ? "none" : "flex")};
|
||||
}
|
||||
|
||||
${isTablet &&
|
||||
css`
|
||||
display: ${({ showText }) => (showText ? "none" : "flex")};
|
||||
`}
|
||||
}
|
||||
|
||||
.article-hide-menu-icon_svg,
|
||||
.article-show-menu-icon_svg {
|
||||
height: 28px;
|
||||
}
|
||||
`;
|
||||
|
||||
const HideArticleMenuButton = ({ showText, toggleShowText }) => {
|
||||
const { t } = useTranslation("Common");
|
||||
|
||||
return (
|
||||
<StyledHideArticleMenuButton showText={showText} onClick={toggleShowText}>
|
||||
{showText ? (
|
||||
<div className="article-hide-menu-container">
|
||||
<ReactSVG
|
||||
className="article-hide-menu-icon_svg"
|
||||
src="/static/images/article-hide-menu.react.svg"
|
||||
/>
|
||||
<Text
|
||||
className="article-hide-menu-text"
|
||||
fontWeight={600}
|
||||
fontSize="12px"
|
||||
noSelect
|
||||
truncate
|
||||
color="#3B72A7"
|
||||
>
|
||||
{t("HideArticleMenu")}
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
<div className="article-show-menu-container">
|
||||
<ReactSVG
|
||||
className="article-show-menu-icon_svg"
|
||||
src="/static/images/article-show-menu.react.svg"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</StyledHideArticleMenuButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default HideArticleMenuButton;
|
4
public/images/article-hide-menu.react.svg
Normal file
4
public/images/article-hide-menu.react.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C5.44772 6 5 6.44772 5 7V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V7C7 6.44772 6.55228 6 6 6Z" fill="#3B72A7"/>
|
||||
<path d="M22 13L12.3653 13L15.707 9.48679L14.2928 8L9.29282 13.2566C8.90229 13.6672 8.90229 14.3328 9.29282 14.7434L14.2928 20L15.707 18.5132L12.3653 15L22 15C22.5523 15 23 14.5523 23 14C23 13.4477 22.5523 13 22 13Z" fill="#3B72A7"/>
|
||||
</svg>
|
After Width: | Height: | Size: 515 B |
3
public/images/article-show-menu.react.svg
Normal file
3
public/images/article-show-menu.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C5.44772 6 5 6.44772 5 7V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V7C7 6.44772 6.55228 6 6 6ZM10 15H19.6347L16.293 18.5132L17.7072 20L22.7072 14.7434C23.0977 14.3328 23.0977 13.6672 22.7072 13.2566L17.7072 8L16.293 9.48679L19.6347 13L10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z" fill="#657077"/>
|
||||
</svg>
|
After Width: | Height: | Size: 481 B |
@ -196,5 +196,6 @@
|
||||
"HelpCenter": "Help center",
|
||||
"FeedbackAndSupport": "Feedback & Support",
|
||||
"VideoGuides": "Video Guides",
|
||||
"SelectFile": "Select file"
|
||||
"SelectFile": "Select file",
|
||||
"HideArticleMenu": "Hide menu"
|
||||
}
|
||||
|
@ -179,5 +179,6 @@
|
||||
"AboutCompanyTitle": "О программе",
|
||||
"LogoutButton": "Выйти",
|
||||
"HelpCenter": "Справочный центр",
|
||||
"SelectFile": "Выбрать файл"
|
||||
"SelectFile": "Выбрать файл",
|
||||
"HideArticleMenu": "Скрыть меню"
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user