From f1b3f254349fb12a7f8835df1601747cc136dd5e Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Wed, 24 May 2023 04:44:47 +0530 Subject: [PATCH 1/5] fix: offline deleted heading styles and link padding --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 1 + .../HTMLEngineProvider/defaultViewProps/index.web.js | 5 +---- src/components/PressableWithSecondaryInteraction/index.js | 4 +--- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 58935ee9d3a6..35fdb18b9fd6 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -48,6 +48,7 @@ const BaseAnchorForCommentsOnly = (props) => { return ( { ReportActionContextMenu.showContextMenu( Str.isValidEmailMarkdown(props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, diff --git a/src/components/HTMLEngineProvider/defaultViewProps/index.web.js b/src/components/HTMLEngineProvider/defaultViewProps/index.web.js index e7f5715f34cc..9321d7c2472d 100644 --- a/src/components/HTMLEngineProvider/defaultViewProps/index.web.js +++ b/src/components/HTMLEngineProvider/defaultViewProps/index.web.js @@ -1,8 +1,5 @@ import styles from '../../../styles/styles'; export default { - // For web platform default to block display. Using flex on root view will force all - // child elements to be block elements even when they have display inline added to them. - // This will affect elements like which are inline by default. - style: [styles.dBlock, styles.userSelectText], + style: [styles.userSelectText], }; diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index efb64fbb5397..36aef40248fd 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -2,9 +2,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import {Pressable} from 'react-native'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; -import styles from '../../styles/styles'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; -import * as StyleUtils from '../../styles/StyleUtils'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -77,7 +75,7 @@ class PressableWithSecondaryInteraction extends Component { // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( Date: Thu, 25 May 2023 02:34:21 +0530 Subject: [PATCH 2/5] fix issue with display inline being passed to native --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 2 +- src/components/PressableWithSecondaryInteraction/index.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 35fdb18b9fd6..72b9360e77ef 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -48,7 +48,7 @@ const BaseAnchorForCommentsOnly = (props) => { return ( { ReportActionContextMenu.showContextMenu( Str.isValidEmailMarkdown(props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 36aef40248fd..176c4037626e 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -2,7 +2,9 @@ import _ from 'underscore'; import React, {Component} from 'react'; import {Pressable} from 'react-native'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; +import styles from '../../styles/styles'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; +import * as StyleUtils from '../../styles/StyleUtils'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -75,7 +77,6 @@ class PressableWithSecondaryInteraction extends Component { // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( (this.pressableRef = el)} // eslint-disable-next-line react/jsx-props-no-spreading {...defaultPressableProps} + style={StyleUtils.combineStyles(this.props.style, this.props.inline && styles.dInline)} > {this.props.children} From 43ae95997c4287ec1348199a4d681589cd40667b Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Thu, 25 May 2023 20:55:17 +0530 Subject: [PATCH 3/5] Add support for parsing styles as function --- src/components/PressableWithSecondaryInteraction/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 176c4037626e..1353eb503d25 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -84,7 +84,7 @@ class PressableWithSecondaryInteraction extends Component { ref={(el) => (this.pressableRef = el)} // eslint-disable-next-line react/jsx-props-no-spreading {...defaultPressableProps} - style={StyleUtils.combineStyles(this.props.style, this.props.inline && styles.dInline)} + style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]} > {this.props.children} From 79a9cd5e2ff3aa9214b730e4623fe2013d883f6f Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Wed, 31 May 2023 01:30:24 +0530 Subject: [PATCH 4/5] Use StyleUtils for fontSize --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 72b9360e77ef..fe240d1e1718 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -11,6 +11,7 @@ import * as ContextMenuActions from '../../pages/home/report/ContextMenu/Context import Tooltip from '../Tooltip'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import styles from '../../styles/styles'; +import * as StyleUtils from '../../styles/StyleUtils'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes'; @@ -48,7 +49,7 @@ const BaseAnchorForCommentsOnly = (props) => { return ( { ReportActionContextMenu.showContextMenu( Str.isValidEmailMarkdown(props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, From 8df3eea4c624b679852e7ef9da92c1d0d91bd50c Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Thu, 8 Jun 2023 19:46:16 +0530 Subject: [PATCH 5/5] Fix issue in header links after merge conflicts --- src/components/AnchorForCommentsOnly/index.js | 16 ++++++---------- .../HTMLRenderers/ImageRenderer.js | 2 +- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js index 1de4ea56b3aa..1ea73d5a648d 100644 --- a/src/components/AnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/index.js @@ -1,20 +1,16 @@ import React from 'react'; -import {View} from 'react-native'; import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes'; import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import ControlSelection from '../../libs/ControlSelection'; -import styles from '../../styles/styles'; const AnchorForCommentsOnly = (props) => ( - - DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} - onPressOut={() => ControlSelection.unblock()} - /> - + DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} + onPressOut={() => ControlSelection.unblock()} + /> ); AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 4342b86ec6f2..27dba38e4c0f 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -60,7 +60,7 @@ const ImageRenderer = (props) => { > {({show}) => ( showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} >