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