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

Automated cherry pick of #3608 (#3620)

Browse source 
* MM-20326 - Updating markdown table css

* Updating UI

* MM-20326 - Updating markdown table css
This commit is contained in:
Mattermost Build 2019-11-27 20:23:33 +01:00 committed by Saturnino Abril
parent a43a4d1c80
commit 05f5b31815
2 changed files with 86 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
View file

@ -41,6 +41,7 @@ exports[`MarkdownTable should match snapshot 1`] = `
"borderColor": "rgba(61,60,64,0.2)",
"borderLeftWidth": 1,
"borderTopWidth": 1,
"width": "100%",
},
]
}
@ -147,31 +148,58 @@ exports[`MarkdownTable should match snapshot 1`] = `
onPress={[Function]}
style={
Object {
"backgroundColor": "#ffffff",
"borderColor": "rgba(61,60,64,0.2)",
"borderRadius": 15,
"borderWidth": 1,
"bottom": 20,
"height": 30,
"height": 34,
"left": -20,
"paddingLeft": 7,
"paddingTop": 6,
"width": 30,
"width": 34,
}
}
type="native"
>
<Icon
allowFontScaling={false}
name="expand"
size={12}
<View
style={
Object {
"color": "#2389d7",
"fontSize": 15,
}
Array [
Object {
"alignItems": "flex-end",
"maxWidth": "100%",
"paddingBottom": 4,
"paddingRight": 14,
"paddingTop": 8,
},
Object {
"width": 1000,
},
]
}
/>
>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderColor": "rgba(61,60,64,0.2)",
"borderRadius": 50,
"borderWidth": 1,
"height": 34,
"justifyContent": "center",
"marginRight": -6,
"marginTop": -32,
"width": 34,
}
}
>
<Icon
allowFontScaling={false}
name="expand"
size={12}
style={
Object {
"color": "#2389d7",
"fontSize": 13,
}
}
/>
</View>
</View>
</TouchableWithFeedbackIOS>
</TouchableWithFeedbackIOS>
`;

53
app/components/markdown/markdown_table/markdown_table.js
View file

@ -6,6 +6,7 @@ import React from 'react';
import {intlShape} from 'react-intl';
import {
ScrollView,
Platform,
View,
Dimensions,
} from 'react-native';
@ -179,10 +180,14 @@ export default class MarkdownTable extends React.PureComponent {
onPress={this.handlePress}
style={{...style.expandButton, left: this.state.containerWidth - 20}}
>
<Icon
name={'expand'}
style={style.icon}
/>
<View style={[style.iconContainer, {width: this.getTableWidth()}]}>
<View style={style.iconButton}>
<Icon
name={'expand'}
style={style.icon}
/>
</View>
</View>
</TouchableWithFeedback>
);
@ -219,21 +224,43 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
maxHeight: MAX_HEIGHT,
},
expandButton: {
height: 30,
width: 30,
borderWidth: 1,
paddingTop: 6,
paddingLeft: 7,
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
borderRadius: 15,
bottom: 20,
height: 34,
width: 34,
},
iconContainer: {
maxWidth: '100%',
alignItems: 'flex-end',
paddingTop: 8,
paddingBottom: 4,
...Platform.select({
ios: {
paddingRight: 14,
},
}),
},
iconButton: {
backgroundColor: theme.centerChannelBg,
marginTop: -32,
marginRight: -6,
borderWidth: 1,
borderRadius: 50,
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
width: 34,
height: 34,
alignItems: 'center',
justifyContent: 'center',
},
icon: {
fontSize: 15,
fontSize: 14,
color: theme.linkColor,
...Platform.select({
ios: {
fontSize: 13,
},
}),
},
table: {
width: '100%',
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
borderLeftWidth: 1,
borderTopWidth: 1,