web client add rtl profile menu & file input
This commit is contained in:
parent
d19620e433
commit
48f7b23fee
@ -5,7 +5,7 @@ import { inject, observer } from "mobx-react";
|
|||||||
import Avatar from "@docspace/components/avatar";
|
import Avatar from "@docspace/components/avatar";
|
||||||
import DropDown from "@docspace/components/drop-down";
|
import DropDown from "@docspace/components/drop-down";
|
||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css, withTheme } from "styled-components";
|
||||||
import DropDownItem from "@docspace/components/drop-down-item";
|
import DropDownItem from "@docspace/components/drop-down-item";
|
||||||
import { isMobileOnly } from "react-device-detect";
|
import { isMobileOnly } from "react-device-detect";
|
||||||
import { Base } from "@docspace/components/themes";
|
import { Base } from "@docspace/components/themes";
|
||||||
@ -164,7 +164,6 @@ class ProfileMenu extends React.Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderDropDown = () => {
|
renderDropDown = () => {
|
||||||
const {
|
const {
|
||||||
avatarRole,
|
avatarRole,
|
||||||
@ -177,10 +176,12 @@ class ProfileMenu extends React.Component {
|
|||||||
forwardedRef,
|
forwardedRef,
|
||||||
isBannerVisible,
|
isBannerVisible,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
console.log('Current theme: ', this.props.theme)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledDropDown
|
<StyledDropDown
|
||||||
className={className}
|
className={className}
|
||||||
|
|
||||||
directionX="right"
|
directionX="right"
|
||||||
open={open}
|
open={open}
|
||||||
clickOutsideAction={clickOutsideAction}
|
clickOutsideAction={clickOutsideAction}
|
||||||
@ -248,4 +249,4 @@ export default inject(({ auth }) => {
|
|||||||
const { isBannerVisible } = auth.bannerStore;
|
const { isBannerVisible } = auth.bannerStore;
|
||||||
|
|
||||||
return { isBannerVisible };
|
return { isBannerVisible };
|
||||||
})(observer(ProfileMenu));
|
})(observer(withTheme(ProfileMenu)));
|
||||||
|
@ -1,12 +1,11 @@
|
|||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import Base from "@docspace/components/themes/base";
|
import Base from "@docspace/components/themes/base";
|
||||||
|
|
||||||
const paddingRightStyle = (props) =>
|
const paddingRightStyle = props =>
|
||||||
props.theme.fileInput.paddingRight[props.size];
|
props.theme.fileInput.paddingRight[props.size];
|
||||||
|
|
||||||
const widthIconStyle = (props) => props.theme.fileInput.icon.width[props.size];
|
const widthIconStyle = props => props.theme.fileInput.icon.width[props.size];
|
||||||
const heightIconStyle = (props) =>
|
const heightIconStyle = props => props.theme.fileInput.icon.height[props.size];
|
||||||
props.theme.fileInput.icon.height[props.size];
|
|
||||||
|
|
||||||
const StyledFileInput = styled.div`
|
const StyledFileInput = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -16,7 +15,7 @@ const StyledFileInput = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
width: ${(props) =>
|
width: ${props =>
|
||||||
(props.scale && "100%") ||
|
(props.scale && "100%") ||
|
||||||
(props.size === "base" && props.theme.input.width.base) ||
|
(props.size === "base" && props.theme.input.width.base) ||
|
||||||
(props.size === "middle" && props.theme.input.width.middle) ||
|
(props.size === "middle" && props.theme.input.width.middle) ||
|
||||||
@ -26,7 +25,7 @@ const StyledFileInput = styled.div`
|
|||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
.icon {
|
.icon {
|
||||||
border-color: ${(props) =>
|
border-color: ${props =>
|
||||||
(props.hasError && props.theme.input.hoverErrorBorderColor) ||
|
(props.hasError && props.theme.input.hoverErrorBorderColor) ||
|
||||||
(props.hasWarning && props.theme.input.hoverWarningBorderColor) ||
|
(props.hasWarning && props.theme.input.hoverWarningBorderColor) ||
|
||||||
(props.isDisabled && props.theme.input.hoverDisabledBorderColor) ||
|
(props.isDisabled && props.theme.input.hoverDisabledBorderColor) ||
|
||||||
@ -36,7 +35,7 @@ const StyledFileInput = styled.div`
|
|||||||
|
|
||||||
:active {
|
:active {
|
||||||
.icon {
|
.icon {
|
||||||
border-color: ${(props) =>
|
border-color: ${props =>
|
||||||
(props.hasError && props.theme.input.focusErrorBorderColor) ||
|
(props.hasError && props.theme.input.focusErrorBorderColor) ||
|
||||||
(props.hasWarning && props.theme.input.focusWarningBorderColor) ||
|
(props.hasWarning && props.theme.input.focusWarningBorderColor) ||
|
||||||
(props.isDisabled && props.theme.input.focusDisabledBorderColor) ||
|
(props.isDisabled && props.theme.input.focusDisabledBorderColor) ||
|
||||||
@ -50,26 +49,33 @@ const StyledFileInput = styled.div`
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
${props =>
|
||||||
background: ${(props) => props.theme.fileInput.icon.background};
|
props.theme.interfaceDirection === "rtl"
|
||||||
width: ${(props) => widthIconStyle(props)};
|
? css`
|
||||||
|
left: 0;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
right: 0;
|
||||||
|
`}
|
||||||
|
background: ${props => props.theme.fileInput.icon.background};
|
||||||
|
width: ${props => widthIconStyle(props)};
|
||||||
|
|
||||||
height: ${(props) => heightIconStyle(props)};
|
height: ${props => heightIconStyle(props)};
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: ${(props) => props.theme.fileInput.icon.border};
|
border: ${props => props.theme.fileInput.icon.border};
|
||||||
border-radius: ${(props) => props.theme.fileInput.icon.borderRadius};
|
border-radius: ${props => props.theme.fileInput.icon.borderRadius};
|
||||||
|
|
||||||
border-color: ${(props) =>
|
border-color: ${props =>
|
||||||
(props.hasError && props.theme.input.errorBorderColor) ||
|
(props.hasError && props.theme.input.errorBorderColor) ||
|
||||||
(props.hasWarning && props.theme.input.warningBorderColor) ||
|
(props.hasWarning && props.theme.input.warningBorderColor) ||
|
||||||
(props.isDisabled && props.theme.input.disabledBorderColor) ||
|
(props.isDisabled && props.theme.input.disabledBorderColor) ||
|
||||||
props.theme.input.borderColor};
|
props.theme.input.borderColor};
|
||||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
cursor: ${props => (props.isDisabled ? "default" : "pointer")};
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button {
|
.icon-button {
|
||||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
cursor: ${props => (props.isDisabled ? "default" : "pointer")};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
StyledFileInput.defaultProps = { theme: Base };
|
StyledFileInput.defaultProps = { theme: Base };
|
||||||
|
@ -41,7 +41,14 @@ const StyledContactComponent = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
p {
|
p {
|
||||||
|
${props =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-left: 4px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
`}
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
@ -17,7 +17,7 @@ import {
|
|||||||
} from "../styled-article";
|
} from "../styled-article";
|
||||||
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
|
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
|
||||||
import DefaultUserPhotoPngUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
|
import DefaultUserPhotoPngUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
|
||||||
|
import { useTheme } from 'styled-components'
|
||||||
const ArticleProfile = (props) => {
|
const ArticleProfile = (props) => {
|
||||||
const { user, showText, getUserRole, getActions, onProfileClick } = props;
|
const { user, showText, getUserRole, getActions, onProfileClick } = props;
|
||||||
const { t } = useTranslation("Common");
|
const { t } = useTranslation("Common");
|
||||||
@ -49,7 +49,8 @@ const ArticleProfile = (props) => {
|
|||||||
|
|
||||||
const model = getActions(t);
|
const model = getActions(t);
|
||||||
const username = user.displayName.split(" ");
|
const username = user.displayName.split(" ");
|
||||||
|
const { interfaceDirection } = useTheme()
|
||||||
|
const isRtl = interfaceDirection === 'rtl'
|
||||||
const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoPngUrl;
|
const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoPngUrl;
|
||||||
|
|
||||||
if (!isMobileOnly && isMobileUtils()) return <></>;
|
if (!isMobileOnly && isMobileUtils()) return <></>;
|
||||||
@ -73,7 +74,8 @@ const ArticleProfile = (props) => {
|
|||||||
ref={menuRef}
|
ref={menuRef}
|
||||||
onHide={onHide}
|
onHide={onHide}
|
||||||
scaled={false}
|
scaled={false}
|
||||||
leftOffset={-50}
|
leftOffset={!isRtl && -50}
|
||||||
|
rightOffset={isRtl && 54}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{(!isTabletView || showText) && (
|
{(!isTabletView || showText) && (
|
||||||
|
@ -125,7 +125,7 @@ class ContextMenu extends Component {
|
|||||||
position = (event) => {
|
position = (event) => {
|
||||||
if (event) {
|
if (event) {
|
||||||
const rects = this.props.containerRef?.current.getBoundingClientRect();
|
const rects = this.props.containerRef?.current.getBoundingClientRect();
|
||||||
let left = rects ? rects.left - this.props.leftOffset : event.pageX + 1;
|
let left = rects ? rects.left - this.props.leftOffset - this.props.rightOffset : event.pageX + 1;
|
||||||
let top = rects ? rects.top : event.pageY + 1;
|
let top = rects ? rects.top : event.pageY + 1;
|
||||||
let width = this.menuRef.current.offsetParent
|
let width = this.menuRef.current.offsetParent
|
||||||
? this.menuRef.current.offsetWidth
|
? this.menuRef.current.offsetWidth
|
||||||
|
Loading…
Reference in New Issue
Block a user