toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-19708 Adjusted display name width to 80% for landscape (#3721)

Browse source 
Adjusted landscape maxWidth for both the base display of the name and the adjusted width with bot/reply buttons.
This commit is contained in:
CJ 2019-12-18 13:11:03 -05:00 committed by Miguel Alatzar
parent f0e1931d32
commit e9a2ab37a4
4 changed files with 275 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

234
app/components/post_header/__snapshots__/post_header.test.js.snap
View file

@ -31,6 +31,80 @@ exports[`PostHeader should match snapshot when just a base post 1`] = `
"maxWidth": "60%",
},
null,
null,
]
}
type="opacity"
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#3d3c40",
"flexGrow": 1,
"fontSize": 15,
"fontWeight": "600",
"paddingVertical": 2,
}
}
>
John Smith
</Text>
</TouchableWithFeedbackIOS>
<FormattedTime
hour12={true}
style={
Object {
"color": "#3d3c40",
"flex": 1,
"fontSize": 12,
"marginTop": 5,
"opacity": 0.5,
}
}
timeZone=""
value={0}
/>
</View>
</View>
</React.Fragment>
`;
exports[`PostHeader should match snapshot when just a base post in landscape mode 1`] = `
<React.Fragment>
<View
style={
Array [
Object {
"flex": 1,
"marginTop": 10,
},
false,
]
}
>
<View
style={
Object {
"flex": 1,
"flexDirection": "row",
}
}
>
<TouchableWithFeedbackIOS
onPress={[Function]}
style={
Array [
Object {
"marginBottom": 3,
"marginRight": 5,
"maxWidth": "60%",
},
null,
Object {
"maxWidth": "80%",
},
]
}
type="opacity"
@ -100,6 +174,7 @@ exports[`PostHeader should match snapshot when post is autoresponder 1`] = `
"maxWidth": "60%",
},
null,
null,
]
}
>
@ -275,6 +350,7 @@ exports[`PostHeader should match snapshot when post is same thread, so dont disp
"maxWidth": "60%",
},
null,
null,
]
}
type="opacity"
@ -364,6 +440,162 @@ exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyB
Object {
"maxWidth": "50%",
},
null,
]
}
type="opacity"
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#3d3c40",
"flexGrow": 1,
"fontSize": 15,
"fontWeight": "600",
"paddingVertical": 2,
}
}
>
John Smith
</Text>
</TouchableWithFeedbackIOS>
<BotTag
style={
Object {
"marginBottom": 5,
"marginLeft": 0,
"marginRight": 5,
}
}
theme={
Object {
"awayIndicator": "#ffbc42",
"buttonBg": "#166de0",
"buttonColor": "#ffffff",
"centerChannelBg": "#ffffff",
"centerChannelColor": "#3d3c40",
"codeTheme": "github",
"dndIndicator": "#f74343",
"errorTextColor": "#fd5960",
"linkColor": "#2389d7",
"mentionBg": "#ffffff",
"mentionBj": "#ffffff",
"mentionColor": "#145dbf",
"mentionHighlightBg": "#ffe577",
"mentionHighlightLink": "#166de0",
"newMessageSeparator": "#ff8800",
"onlineIndicator": "#06d6a0",
"sidebarBg": "#145dbf",
"sidebarHeaderBg": "#1153ab",
"sidebarHeaderTextColor": "#ffffff",
"sidebarText": "#ffffff",
"sidebarTextActiveBorder": "#579eff",
"sidebarTextActiveColor": "#ffffff",
"sidebarTextHoverBg": "#4578bf",
"sidebarUnreadText": "#ffffff",
"type": "Mattermost",
}
}
/>
<FormattedTime
hour12={true}
style={
Object {
"color": "#3d3c40",
"flex": 1,
"fontSize": 12,
"marginTop": 5,
"opacity": 0.5,
}
}
timeZone=""
value={0}
/>
<View
style={
Object {
"flex": 1,
"justifyContent": "flex-end",
}
}
>
<TouchableWithFeedbackIOS
onPress={[MockFunction]}
style={
Object {
"alignItems": "flex-start",
"flex": 1,
"flexDirection": "row",
"justifyContent": "flex-end",
"minWidth": 40,
"paddingBottom": 10,
"paddingTop": 2,
}
}
type="opacity"
>
<ReplyIcon
color="#2389d7"
height={16}
width={16}
/>
<Text
style={
Object {
"color": "#2389d7",
"fontSize": 12,
"marginLeft": 2,
"marginTop": 2,
}
}
>
0
</Text>
</TouchableWithFeedbackIOS>
</View>
</View>
</View>
</React.Fragment>
`;
exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyButton in landscape mode 1`] = `
<React.Fragment>
<View
style={
Array [
Object {
"flex": 1,
"marginTop": 10,
},
false,
]
}
>
<View
style={
Object {
"flex": 1,
"flexDirection": "row",
}
}
>
<TouchableWithFeedbackIOS
onPress={[Function]}
style={
Array [
Object {
"marginBottom": 3,
"marginRight": 5,
"maxWidth": "60%",
},
Object {
"maxWidth": "50%",
},
Object {
"maxWidth": "70%",
},
]
}
type="opacity"
@ -514,6 +746,7 @@ exports[`PostHeader should match snapshot when post renders Commented On for new
"maxWidth": "60%",
},
null,
null,
]
}
type="opacity"
@ -601,6 +834,7 @@ exports[`PostHeader should match snapshot when post should display reply button
"maxWidth": "60%",
},
null,
null,
]
}
type="opacity"

2
app/components/post_header/index.js
View file

@ -15,6 +15,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {fromAutoResponder} from 'app/utils/general';
import {isGuest} from 'app/utils/users';
import {isLandscape} from 'app/selectors/device';
import PostHeader from './post_header';
@ -47,6 +48,7 @@ function makeMapStateToProps() {
username: user.username,
isBot: user.is_bot || false,
isGuest: isGuest(user),
isLandscape: isLandscape(state),
userTimezone,
};
};

12
app/components/post_header/post_header.js
View file

@ -46,6 +46,7 @@ export default class PostHeader extends PureComponent {
previousPostExists: PropTypes.bool,
post: PropTypes.object,
beforePrevPostUserId: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -122,11 +123,14 @@ export default class PostHeader extends PureComponent {
commentedOnDisplayName,
commentCount,
isBot,
isLandscape,
} = this.props;
const style = getStyleSheet(theme);
const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies);
const displayNameStyle = [style.displayNameContainer, showReply && (isBot || fromAutoResponder || fromWebHook) ? style.displayNameContainerBotReplyWidth : null];
const reduceWidth = showReply && (isBot || fromAutoResponder || fromWebHook);
const isLandscapeStyle = isLandscape && reduceWidth ? style.displayNameContainerLandscapeBotReplyWidth : isLandscape ? style.displayNameContainerLandscape : null; //eslint-disable-line no-nested-ternary
const displayNameStyle = [style.displayNameContainer, reduceWidth ? style.displayNameContainerBotReplyWidth : null, isLandscapeStyle];
if (fromAutoResponder || fromWebHook) {
let name = displayName;
@ -367,5 +371,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
displayNameContainerBotReplyWidth: {
maxWidth: '50%',
},
displayNameContainerLandscape: {
maxWidth: '80%',
},
displayNameContainerLandscapeBotReplyWidth: {
maxWidth: '70%',
},
};
});

28
app/components/post_header/post_header.test.js
View file

@ -29,6 +29,7 @@ describe('PostHeader', () => {
username: 'JohnSmith',
isBot: false,
isGuest: false,
isLandscape: false,
userTimezone: '',
enableTimezone: false,
previousPostExists: false,
@ -126,4 +127,31 @@ describe('PostHeader', () => {
);
expect(wrapper.getElement()).toMatchSnapshot();
});
test('should match snapshot when just a base post in landscape mode', () => {
const props = {
...baseProps,
isLandscape: true,
};
const wrapper = shallow(
<PostHeader {...props}/>
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#ReplyIcon').exists()).toEqual(false);
});
test('should match snapshot when post isBot and shouldRenderReplyButton in landscape mode', () => {
const props = {
...baseProps,
shouldRenderReplyButton: true,
isBot: true,
isLandscape: true,
};
const wrapper = shallow(
<PostHeader {...props}/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});