Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for: Web - Triple clicking an edited message select’s the (edited) label along with the actual message #17704

Merged
merged 13 commits into from
May 2, 2023
Merged

Fix for: Web - Triple clicking an edited message select’s the (edited) label along with the actual message #17704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0951986
Mirror text layout from EditedRenderer
Ollyws Apr 20, 2023
861fc7c
Added dInlineFlex style
Ollyws Apr 20, 2023
18274bd
Add alignItemsBaseline,dInlineFlex to edited label
Ollyws Apr 20, 2023
93f3662
Moved MiniReportActionContextMenu to top of view
Ollyws Apr 20, 2023
45646d5
Removed userSelectNone from emoji text
Ollyws Apr 20, 2023
2619a9b
Merge branch 'main' into fix-15194
Ollyws Apr 21, 2023
db83d74
Added dInlineFlex index/index.native
Ollyws Apr 22, 2023
06b6454
Merge branch 'main' into fix-15194
Ollyws Apr 28, 2023
fcf4630
Added editedLabelStyles
Ollyws May 1, 2023
a994917
Revert remove userSelectNone
Ollyws May 2, 2023
133d4d5
Revert move MiniReportActionContextMenu
Ollyws May 2, 2023
7633f88
Move MiniReportActionContextMenu to top of view
Ollyws May 2, 2023
44bbe3c
Added userSelectNone to space Text
Ollyws May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Text from '../../Text';
import variables from '../../../styles/variables';
import themeColors from '../../../styles/themes/default';
import styles from '../../../styles/styles';
import editedLabelStyles from '../../../styles/editedLabelStyles';

const propTypes = {
...htmlRendererPropTypes,
Expand All @@ -20,9 +21,10 @@ const EditedRenderer = (props) => {
{...defaultRendererProps}
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
style={[styles.alignItemsBaseline, editedLabelStyles]}
>
{/* Native devices do not support margin between nested text */}
<Text style={styles.w1}>{' '}</Text>
<Text style={[styles.w1, styles.userSelectNone]}>{' '}</Text>
{props.translate('reportActionCompose.edited')}
</Text>
);
Expand Down
25 changes: 12 additions & 13 deletions src/pages/home/report/ReportActionItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,18 @@ class ReportActionItem extends Component {
<Hoverable>
{hovered => (
<View accessibilityLabel={this.props.translate('accessibilityHints.chatMessage')}>
<MiniReportActionContextMenu
reportID={this.props.report.reportID}
reportAction={this.props.action}
isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
displayAsGroup={this.props.displayAsGroup}
isVisible={
hovered
&& !this.props.draftMessage
}
draftMessage={this.props.draftMessage}
isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
/>
Comment on lines +278 to +289
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the refactor?

Copy link
Contributor Author

@Ollyws Ollyws Apr 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving this to the top of the view changes its position in the DOM to be first (which makes sense since visually it is at the top). This means it won't be selected on triple-click as it is no longer after the (edited) label. This resolves the MiniReportActionContextMenu part of #15810

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am fine with it as it does not logically change anything.

{this.props.shouldDisplayNewMarker && (
<UnreadActionIndicator reportActionID={this.props.action.reportActionID} />
)}
Expand Down Expand Up @@ -336,19 +348,6 @@ class ReportActionItem extends Component {
)}
</OfflineWithFeedback>
</View>
<MiniReportActionContextMenu
reportID={this.props.report.reportID}
reportAction={this.props.action}
isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
displayAsGroup={this.props.displayAsGroup}
isVisible={
hovered
&& !this.props.draftMessage
&& !hasErrors
}
draftMessage={this.props.draftMessage}
isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
/>
</View>
)}
</Hoverable>
Expand Down
5 changes: 4 additions & 1 deletion src/pages/home/report/ReportActionItemFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import * as StyleUtils from '../../../styles/StyleUtils';
import {withNetwork} from '../../../components/OnyxProvider';
import CONST from '../../../CONST';
import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';
import editedLabelStyles from '../../../styles/editedLabelStyles';

const propTypes = {
/** The message fragment needing to be displayed */
Expand Down Expand Up @@ -133,8 +134,10 @@ const ReportActionItemFragment = (props) => {
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
style={[styles.alignItemsBaseline, editedLabelStyles]}
>
{` ${props.translate('reportActionCompose.edited')}`}
<Text style={[styles.w1, styles.userSelectNone]}>{' '}</Text>
{props.translate('reportActionCompose.edited')}
</Text>
)}
</Text>
Expand Down
3 changes: 3 additions & 0 deletions src/styles/editedLabelStyles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import display from '../utilities/display';

export default {...display.dInlineFlex};
1 change: 1 addition & 0 deletions src/styles/editedLabelStyles/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default {};
5 changes: 5 additions & 0 deletions src/styles/utilities/display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ export default {
dInline: {
display: 'inline',
},

dInlineFlex: {
display: 'inline-flex',
},

dBlock: {
display: 'block',
},
Expand Down