From b24bfa05e7244e7a0e6a1892c701c5a1c469eeca Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 18 Aug 2023 12:24:57 +0300 Subject: [PATCH 1/6] Web: Files: Appearance: added mobile view --- .../common/Appearance/StyledApperance.js | 32 ++- .../common/Appearance/StyledPreview.js | 212 +++++++++++++++++- .../categories/common/Appearance/preview.js | 133 ++++++++++- .../categories/common/appearance.js | 15 +- .../sub-components/colorSchemeDialog.js | 35 ++- 5 files changed, 391 insertions(+), 36 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js index 50acf9959a..0075702074 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js @@ -1,5 +1,6 @@ -import PlusThemeSvgUrl from "PUBLIC_DIR/images/plus.theme.svg?url"; -import styled from "styled-components"; +import { smallTablet } from "@docspace/components/utils/device"; +import PlusThemeSvgUrl from "PUBLIC_DIR/images/plus.theme.svg?url"; +import styled, { css } from "styled-components"; const StyledComponent = styled.div` padding-top: 3px; @@ -53,11 +54,32 @@ const StyledComponent = styled.div` } .buttons-container { + display: flex; padding-top: 24px; - } - .button:not(:last-child) { - margin-right: 8px; + .button:not(:last-child) { + margin-right: 8px; + } + + @media ${smallTablet} { + .button { + width: 100%; + } + } + + ${({ isShowDeleteButton }) => + isShowDeleteButton && + css` + @media ${smallTablet} { + flex-direction: column; + gap: 8px; + margin: 0; + + .button:not(:last-child) { + margin-right: 0px; + } + } + `} } .check-img { diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js index 68351ce626..25d1b2814b 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js @@ -319,6 +319,216 @@ const IconBox = styled.div` } `; +const StyledMobilePreview = styled.div` + height: 293px; + border-radius: 16px; + padding: 0px 16px; + background: ${({ themePreview }) => + themePreview === "Light" ? "#FFFFFF" : "#333333"}; + + border: ${({ themePreview }) => + themePreview === "Light" ? "1px solid #d0d5da" : "1px solid transparent"}; + + .section-search { + height: 30px; + display: flex; + align-items: center; + border: 1px solid; + border-radius: 3px; + padding-left: 8px; + } + + .main-button-preview { + cursor: auto; + background-color: ${(props) => props.colorPreview}; + border-radius: 3px; + + &:active { + background-color: ${(props) => props.colorPreview} !important; + opacity: none !important; + filter: none !important; + } + } + + .color-badge rect { + fill: ${(props) => + props.themePreview === "Dark" && props.selectThemeId === 7 + ? "#FFFFFF" + : props.colorPreview} !important; + } + + .color-loaders rect { + fill: ${(props) => + props.themePreview === "Light" + ? `${props.colorPreview} !important` + : `#FFFFFF !important`}; + } + + .menu-section { + &:not(:last-child) { + padding-bottom: 26px; + } + } + + .loaders-theme { + background-color: ${(props) => + props.themePreview === "Light" ? "#FFF" : "#545454"}; + border-radius: 3px; + } + + .loaders-tile-theme { + background: ${(props) => + props.themePreview === "Light" ? "#F1F1F1" : "#333333"}; + + border-radius: 3px; + } + + .loaders-tile-text-theme { + background: ${(props) => + props.themePreview === "Light" ? "#D0D5DA" : "#858585"}; + + border-radius: 3px; + } + + .loaders-theme-avatar { + background-color: ${(props) => + props.themePreview === "Light" ? "#FFF" : "#545454"}; + border-radius: 50px; + } + + .border-color { + border-color: ${(props) => + props.themePreview === "Light" ? "#d0d5da" : "#474747"}; + } + + .tile { + border-width: 1px; + border-style: solid; + border-radius: 12px; + width: ${(props) => props.isViewTablet && "64%"}; + margin-top: 24px; + } + + .background { + background: ${(props) => + props.themePreview === "Light" ? "#FFF" : "#292929"}; + } + + .tile-name { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 16px 14px 16px; + height: 30px; + } + + .tablet-tile-name { + width: 44% !important; + margin-left: 16px; + border-right: none !important; + border-radius: 12px 0 16px 0 !important; + } + + .only-tile-name { + width: ${(props) => props.isViewTablet && "66%"}; + border-top-width: 1px; + border-right-width: 1px; + border-left-width: 1px; + border-style: solid; + border-bottom: none; + border-radius: 12px 12px 0px 0px; + } + + .action-button { + width: 72px; + display: flex; + justify-content: flex-end; + align-items: center; + } + + .tile-tag { + display: flex; + border-top-width: 1px; + border-top-style: solid; + padding: 16px 0px 16px 16px; + } + + .tile-container { + display: flex; + align-items: center; + } + + .pin { + padding-right: 14px; + + path { + fill: ${(props) => + props.themePreview === "Light" + ? `${props.colorPreview} !important` + : `#FFFFFF !important`}; + } + } + + .menu-button > div { + cursor: auto; + } + + .preview_mobile-header { + height: 48px; + display: grid; + align-items: center; + grid-template-columns: 34px 1fr 32px; + gap: 16px; + + margin: 0 -16px; + padding: 0 16px; + + background: ${({ themePreview }) => + themePreview === "Light" ? "#FFFFFF" : "#282828"}; + + border-radius: 16px 16px 0px 0px; + } + + .preview_mobile-navigation { + height: 53px; + display: flex; + align-items: center; + + .header { + width: 45%; + } + } + + .color-badge rect { + fill: ${({ themePreview, selectThemeId, colorPreview }) => + themePreview === "Dark" && selectThemeId === 7 + ? "#FFFFFF" + : colorPreview} !important; + } + .section-badge { + padding-right: 12px; + } + + .tile-icon { + padding-right: 12px; + } + + .floating-button { + position: relative; + margin-left: auto; + right: 0px; + bottom: 48px; + } + + .icon-button_svg { + svg { + path { + fill: #a3a9ae; + } + } + } +`; + StyledComponent.defaultProps = { theme: Base }; -export { StyledComponent, StyledFloatingButton, IconBox }; +export { StyledComponent, StyledFloatingButton, IconBox, StyledMobilePreview }; diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js index 4bfe76593b..af298ae2e4 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js @@ -7,10 +7,12 @@ import { StyledComponent, StyledFloatingButton, IconBox, + StyledMobilePreview, } from "./StyledPreview"; import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg"; import { saveToSessionStorage, getFromSessionStorage } from "../../../utils"; +import { isMobileOnly, isDesktop } from "react-device-detect"; const Preview = (props) => { const { @@ -25,11 +27,18 @@ const Preview = (props) => { } = props; const [colorPreview, setColorPreview] = useState(previewAccent); const [isViewTablet, setIsViewTablet] = useState(false); + const [isSmallWindow, setIsSmallWindow] = useState(false); const onCheckView = () => { const tablet = isTablet || (window.innerWidth > 600 && window.innerWidth <= 1024); setIsViewTablet(tablet); + + if (isDesktop && window.innerWidth < 600) { + setIsSmallWindow(true); + } else { + setIsSmallWindow(false); + } }; const getSettings = () => { @@ -60,7 +69,129 @@ const Preview = (props) => { }; }); - return ( + return isSmallWindow || isMobileOnly ? ( + +
+ + + +
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+ + +
+ + {withTileActions && ( +
+ + + + + {}} + directionX="right" + className="menu-button" + isDisabled + /> +
+ )} +
+
+ +
+
+ + + + + + + ) : ( { ); }; - if (isSmallWindow) - return ( - - ); - if (isMobileOnly) - return ; - return !tReady ? ( ) : ( @@ -641,7 +633,10 @@ const Appearance = (props) => { onClickDelete={onClickDeleteModal} /> - +
{t("Common:Color")}
@@ -724,7 +719,7 @@ const Appearance = (props) => { visible={showColorSchemeDialog} onClose={onCloseColorSchemeDialog} header={headerColorSchemeDialog} - viewMobile={isMobileOnly} + // viewMobile={isMobileOnly} openHexColorPickerButtons={openHexColorPickerButtons} openHexColorPickerAccent={openHexColorPickerAccent} showSaveButtonDialog={showSaveButtonDialog} diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js index 78c816015f..922560390e 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js +++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js @@ -120,25 +120,22 @@ const ColorSchemeDialog = (props) => { - {showSaveButtonDialog && ( - <> -