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

Multiple UI improvements (#512)

Browse source 
* Multiple UI improvements

* RN-107 - Adding margin in more channels modal

* RN-108 - Updating center channel overlay
This commit is contained in:
Asaad Mahmood 2017-04-30 21:32:26 +05:00 committed by enahum
parent aff1648d07
commit 9e90884fce
15 changed files with 77 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/channel_drawer_list/channel_drawer_list.js
View file

@ -421,7 +421,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
color: theme.sidebarText,
opacity: 1,
fontSize: 15,
fontWeight: '500',
fontWeight: '400',
letterSpacing: 0.8,
lineHeight: 18
},
@ -437,7 +437,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
action: {
color: theme.sidebarText,
fontSize: 16,
fontSize: 20,
fontWeight: '500',
lineHeight: 18
},

1
app/components/custom_list/channel_list_row.js
View file

@ -111,6 +111,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
marginLeft: 5
},
purpose: {
marginTop: 7,
fontSize: 13,
color: changeOpacity(theme.centerChannelColor, 0.5)
},

6
app/components/custom_list/member_list_row.js
View file

@ -44,7 +44,7 @@ function MemberListRow(props) {
}
<ProfilePicture
user={user}
size={40}
size={32}
/>
<View style={style.textContainer}>
<View style={{flexDirection: 'column'}}>
@ -97,7 +97,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
backgroundColor: theme.centerChannelBg
},
displayName: {
fontSize: 16,
fontSize: 15,
color: theme.centerChannelColor
},
icon: {
@ -110,7 +110,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
},
username: {
marginLeft: 5,
fontSize: 16,
fontSize: 15,
color: changeOpacity(theme.centerChannelColor, 0.5)
},
selector: {

8
app/components/markdown/index.js
View file

@ -110,9 +110,7 @@ export default class Markdown extends PureComponent {
renderParagraph = ({children}) => {
return (
<View style={style.block}>
<Text>
{children}
</Text>
{children}
</View>
);
}
@ -120,9 +118,7 @@ export default class Markdown extends PureComponent {
renderHeading = ({children, level}) => {
return (
<View style={[style.block, this.props.blockStyles[`heading${level}`]]}>
<Text>
{children}
</Text>
{children}
</View>
);
}

43
app/components/post/post.js
View file

@ -683,29 +683,46 @@ const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
color: theme.linkColor
},
heading1: {
fontSize: 30,
lineHeight: 45
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading2: {
fontSize: 24,
lineHeight: 36
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading3: {
fontSize: 20,
lineHeight: 30
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading4: {
fontSize: 16,
lineHeight: 24
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading5: {
fontSize: 14,
lineHeight: 21
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading6: {
fontSize: 14,
lineHeight: 21,
opacity: 0.8
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
code: {
alignSelf: 'center',

14
app/components/post_textbox/post_textbox.js
View file

@ -321,7 +321,7 @@ class PostTextbox extends PureComponent {
>
<Icon
size={30}
style={{marginTop: 2}}
style={style.attachIcon}
color={changeOpacity(theme.centerChannelColor, 0.9)}
name='md-add'
/>
@ -392,6 +392,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
borderTopWidth: 1,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.20)
},
attachIcon: {
...Platform.select({
ios: {
marginTop: 2
},
android: {
marginTop: 0
}
})
},
sendButton: {
backgroundColor: theme.buttonBg,
borderRadius: 18,
@ -403,7 +413,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
marginBottom: 5
},
android: {
marginBottom: 3.5
marginBottom: 6.5
}
}),
alignItems: 'center',

2
app/navigation/router.js
View file

@ -216,7 +216,7 @@ class Router extends Component {
return {
mainOverlay: {
backgroundColor: '#000',
backgroundColor: this.props.theme.centerChannelBg,
opacity
},
drawerOverlay: {

4
app/scenes/channel_add_members/channel_add_members.js
View file

@ -253,9 +253,9 @@ class ChannelAddMembers extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})}
height={27}
fontSize={14}
textColor={theme.centerChannelColor}
textColor={changeOpacity('#000', 0.5)}
hideBackground={true}
textFieldBackgroundColor={changeOpacity(theme.centerChannelColor, 0.07)}
textFieldBackgroundColor={'#fff'}
onChange={this.searchProfiles}
onSearchButtonPress={this.onSearchButtonPress}
onCancelButtonPress={this.cancelSearch}

4
app/scenes/channel_info/channel_info_header.js
View file

@ -112,7 +112,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
createdBy: {
flexDirection: 'row',
fontSize: 11,
fontSize: 12,
marginTop: 5,
color: changeOpacity(theme.centerChannelColor, 0.5),
backgroundColor: 'transparent'
@ -122,7 +122,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
color: theme.centerChannelColor
},
header: {
fontSize: 12,
fontSize: 13,
marginBottom: 10,
color: theme.centerChannelColor,
backgroundColor: 'transparent'

2
app/scenes/channel_info/channel_info_row.js
View file

@ -52,7 +52,7 @@ function channelInfoRow(props) {
/> :
<Icon
name='angle-right'
size={15}
size={20}
style={style.rightIcon}
/>
}

4
app/scenes/channel_members/channel_members.js
View file

@ -300,9 +300,9 @@ class ChannelMembers extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})}
height={27}
fontSize={14}
textColor={theme.centerChannelColor}
textColor={changeOpacity('#000', 0.5)}
hideBackground={true}
textFieldBackgroundColor={changeOpacity(theme.centerChannelColor, 0.07)}
textFieldBackgroundColor={'#fff'}
onChange={this.searchProfiles}
onSearchButtonPress={this.onSearchButtonPress}
onCancelButtonPress={this.cancelSearch}

14
app/scenes/create_channel/create_channel.js
View file

@ -232,7 +232,7 @@ class CreateChannel extends PureComponent {
autoCapitalize='none'
autoCorrect={false}
placeholder={{id: 'channel_modal.nameEx', defaultMessage: 'E.g.: "Bugs", "Marketing", "客户支持"'}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
placeholderTextColor={changeOpacity('#000', 0.5)}
underlineColorAndroid='transparent'
/>
</View>
@ -255,7 +255,7 @@ class CreateChannel extends PureComponent {
onChangeText={this.onPurposeChangeText}
style={[style.input, {height: 110}]}
placeholder={{id: 'channel_modal.purposeEx', defaultMessage: 'E.g.: "A channel to file bugs and improvements"'}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
placeholderTextColor={changeOpacity('#000', 0.5)}
multiline={true}
underlineColorAndroid='transparent'
/>
@ -289,7 +289,7 @@ class CreateChannel extends PureComponent {
onChangeText={this.onHeaderChangeText}
style={[style.input, {height: 110}]}
placeholder={{id: 'channel_modal.headerEx', defaultMessage: 'E.g.: "[Link Title](http://example.com)"'}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
placeholderTextColor={changeOpacity('#000', 0.5)}
multiline={true}
onFocus={this.scrollToEnd}
underlineColorAndroid='transparent'
@ -333,14 +333,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
inputContainer: {
marginTop: 10,
borderTopWidth: 1,
borderBottomWidth: 1,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1),
backgroundColor: theme.centerChannelBg
backgroundColor: '#fff'
},
input: {
color: theme.centerChannelColor,
color: '#333',
fontSize: 14,
height: 40,
paddingHorizontal: 15

4
app/scenes/more_channels/more_channels.js
View file

@ -254,9 +254,9 @@ class MoreChannels extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})}
height={27}
fontSize={14}
textColor={this.props.theme.centerChannelColor}
textColor={changeOpacity('#000', 0.5)}
hideBackground={true}
textFieldBackgroundColor={changeOpacity(this.props.theme.centerChannelColor, 0.07)}
textFieldBackgroundColor={'#fff'}
onChange={this.searchProfiles}
onSearchButtonPress={this.onSearchButtonPress}
onCancelButtonPress={this.cancelSearch}

4
app/scenes/more_dms/more_dms.js
View file

@ -202,9 +202,9 @@ class MoreDirectMessages extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})}
height={27}
fontSize={14}
textColor={this.props.theme.centerChannelColor}
textColor={changeOpacity('#000', 0.5)}
hideBackground={true}
textFieldBackgroundColor={changeOpacity(this.props.theme.centerChannelColor, 0.07)}
textFieldBackgroundColor={'#fff'}
onChange={this.searchProfiles}
onSearchButtonPress={this.onSearchButtonPress}
onCancelButtonPress={this.cancelSearch}

12
app/scenes/settings/settings_item.js
View file

@ -86,7 +86,9 @@ export default class SettingsItem extends PureComponent {
style={{flex: 1}}
>
<View style={style.wrapper}>
{icon}
<View style={style.iconContainer}>
{icon}
</View>
<FormattedText
id={i18nId}
defaultMessage={defaultMessage}
@ -115,8 +117,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
height: 50,
paddingLeft: 16
},
iconContainer: {
width: 18,
marginRight: 15,
alignItems: 'center',
justifyContent: 'center'
},
icon: {
color: theme.linkColor,
color: changeOpacity(theme.centerChannelColor, 0.5),
fontSize: 20
},
label: {