Commit 0e4fc96e authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Harrison Healey
Browse files

Improving about modal and colon issue with webhooks (#3343)

Updating word break

Updating improvements for about modal
parent f4b91d71
......@@ -20,8 +20,11 @@ export default class ChannelInfoModal extends React.Component {
return false;
}
render() {
let channel = this.props.channel;
let channelIcon;
if (!channel) {
const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found');
......@@ -33,68 +36,58 @@ export default class ChannelInfoModal extends React.Component {
};
}
if (channel.type === 'O') {
channelIcon = (<span className='fa fa-globe'/>);
} else if (channel.type === 'P') {
channelIcon = (<span className='fa fa-lock'/>);
}
const channelURL = Utils.getTeamURLFromAddressBar() + '/channels/' + channel.name;
return (
<Modal
dialogClassName='about-modal'
show={this.props.show}
onHide={this.props.onHide}
>
<Modal.Header closeButtton={true}>
<Modal.Header closeButton={true}>
<Modal.Title>
{channel.display_name}
<FormattedMessage
id='channel_info.about'
defaultMessage='About'
/>
<strong>{channelIcon}{channel.display_name}</strong>
</Modal.Title>
</Modal.Header>
<Modal.Body ref='modalBody'>
<div className='row form-group'>
<div className='col-sm-3 info__label'>
<div className='form-group'>
<div className='info__label'>
<FormattedMessage
id='channel_info.name'
defaultMessage='Channel Name:'
id='channel_info.purpose'
defaultMessage='Purpose:'
/>
</div>
<div className='col-sm-9'>{channel.display_name}</div>
<div className='info__value'>{channel.purpose}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>
<div className='form-group'>
<div className='info__label'>
<FormattedMessage
id='channel_info.url'
defaultMessage='Channel URL:'
defaultMessage='URL:'
/>
</div>
<div className='col-sm-9'>{channelURL}</div>
<div className='info__value'>{channelURL}</div>
</div>
<div className='row form-group'>
<div className='col-sm-3 info__label'>
<div className='about-modal__hash form-group padding-top x2'>
<p>
<FormattedMessage
id='channel_info.id'
defaultMessage='Channel ID:'
defaultMessage='ID: '
/>
</div>
<div className='col-sm-9'>{channel.id}</div>
</div>
<div className='row'>
<div className='col-sm-3 info__label'>
<FormattedMessage
id='channel_info.purpose'
defaultMessage='Channel Purpose:'
/>
</div>
<div className='col-sm-9'>{channel.purpose}</div>
{channel.id}
</p>
</div>
</Modal.Body>
<Modal.Footer>
<button
type='button'
className='btn btn-default'
onClick={this.props.onHide}
>
<FormattedMessage
id='channel_info.close'
defaultMessage='Close'
/>
</button>
</Modal.Footer>
</Modal>
);
}
......
......@@ -52,7 +52,7 @@ export default class PostHeader extends React.Component {
}
if (this.props.compactDisplay) {
colon = (<strong>{':'}</strong>);
colon = (<strong className='colon'>{':'}</strong>);
}
return (
......
......@@ -64,7 +64,7 @@ export default class UserProfile extends React.Component {
}
if (this.props.disablePopover) {
return <div>{name}</div>;
return <div className='user-popover'>{name}</div>;
}
var dataContent = [];
......
......@@ -684,11 +684,12 @@
"channel_header.setPurpose": "Set {term} Purpose...",
"channel_header.viewInfo": "View Info",
"channel_info.close": "Close",
"channel_info.id": "Channel ID:",
"channel_info.name": "Channel Name:",
"channel_info.about": "About",
"channel_info.id": "ID: ",
"channel_info.name": "Name:",
"channel_info.notFound": "No Channel Found",
"channel_info.purpose": "Channel Purpose:",
"channel_info.url": "Channel URL:",
"channel_info.purpose": "Purpose:",
"channel_info.url": "URL:",
"channel_invite.add": " Add",
"channel_invite.addNewMembers": "Add New Members to ",
"channel_invite.close": "Close",
......
......@@ -89,9 +89,15 @@
}
.info__label {
@include opacity(.5);
font-size: .9em;
font-weight: 600;
padding-right: 0;
text-align: right;
margin-bottom: 3px;
}
.info__value {
padding-left: 10px;
word-break: break-word;
}
.team-member-list {
......
......@@ -768,7 +768,7 @@ body.ios {
white-space: nowrap;
}
strong {
.colon {
display: none;
font-weight: 900;
margin-left: 2px;
......@@ -1118,7 +1118,7 @@ body.ios {
font-family: inherit;
font-size: 11px;
font-weight: 600;
margin: 0 0 0 -4px;
margin: 0 10px 0 -4px;
padding: 2px 4px;
}
......
......@@ -122,7 +122,7 @@
z-index: 1;
}
strong {
.colon {
display: inline;
}
......
......@@ -20,12 +20,22 @@
color: inherit;
font-size: 16px;
}
.fa {
margin: 0 4px 0 8px;
}
}
.modal-body {
padding: 20px 25px 5px;
}
&.large {
.modal-body {
padding-bottom: 20px;
}
}
.about-modal__content {
@include clearfix;
@include display-flex;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment