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

Update more unreads button to new design (#4101)

Browse source 
* update `more unreads` button to new design

* update More Unreads button with UI suggestions

* fix lint issues
This commit is contained in:
RAKESH PEELA 2020-04-03 03:12:49 +05:30 committed by GitHub
parent 754d794dae
commit f4d5f4dcaf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/components/sidebars/main/channels_list/channels_list.js
View file

@ -175,6 +175,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
above: {
backgroundColor: theme.mentionBg,
top: 40,
height: 40,
borderRadius: 4,
paddingTop: 12,
paddingRight: 16,
paddingBottom: 12,
paddingLeft: 16,
},
action: {
color: changeOpacity(theme.sidebarText, 0.4),

44
app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
View file

@ -4,11 +4,12 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Platform,
TouchableWithoutFeedback,
View,
ViewPropTypes,
} from 'react-native';
import IonIcon from 'react-native-vector-icons/Ionicons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
@ -35,17 +36,17 @@ export default class UnreadIndicatorBase extends PureComponent {
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
<MaterialIcon
size={15}
name='arrow-upward'
color={theme.mentionColor}
style={style.arrow}
/>
<FormattedText
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
<IonIcon
size={14}
name='md-arrow-round-up'
color={theme.mentionColor}
style={style.arrow}
/>
</View>
);
@ -64,8 +65,10 @@ export default class UnreadIndicatorBase extends PureComponent {
export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
arrow: {
fontSize: 16,
marginRight: 8,
position: 'relative',
bottom: -1,
textAlignVertical: 'center',
},
container: {
justifyContent: 'center',
@ -78,20 +81,35 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
indicatorText: {
backgroundColor: 'transparent',
color: theme.mentionColor,
fontSize: 14,
paddingVertical: 2,
paddingHorizontal: 4,
fontSize: 15,
textAlign: 'center',
textAlignVertical: 'center',
...Platform.select({
ios: {
fontWeight: '700',
},
android: {
fontFamily: 'Roboto-Medium',
},
}),
},
wrapper: {
borderRadius: 15,
height: 25,
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 12,
paddingLeft: 16,
paddingRight: 16,
paddingVertical: 13.5,
justifyContent: 'center',
alignItems: 'center',
elevation: 5,
shadowColor: theme.centerChannelColor,
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.12,
shadowRadius: 4,
},
};
});