diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/channel_info_modal.jsx | 67 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_header.jsx | 2 | ||||
-rw-r--r-- | webapp/components/user_profile.jsx | 2 | ||||
-rw-r--r-- | webapp/i18n/en.json | 9 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 10 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 4 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 2 | ||||
-rw-r--r-- | webapp/sass/routes/_about-modal.scss | 10 |
8 files changed, 58 insertions, 48 deletions
diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx index d44df4056..7bd004411 100644 --- a/webapp/components/channel_info_modal.jsx +++ b/webapp/components/channel_info_modal.jsx @@ -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> ); } diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 3c94f0bcb..727b005e7 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -52,7 +52,7 @@ export default class PostHeader extends React.Component { } if (this.props.compactDisplay) { - colon = (<strong>{':'}</strong>); + colon = (<strong className='colon'>{':'}</strong>); } return ( diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx index ee876347b..6f5365ac1 100644 --- a/webapp/components/user_profile.jsx +++ b/webapp/components/user_profile.jsx @@ -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 = []; diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 61d857da3..6fdc3c063 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -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", diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 8b078de86..6e41dff39 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -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 { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 228efe26f..a3c354f89 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -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; } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index a461dd35a..44a7be2ac 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -122,7 +122,7 @@ z-index: 1; } - strong { + .colon { display: inline; } diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss index 4bfd04e57..4506eac4e 100644 --- a/webapp/sass/routes/_about-modal.scss +++ b/webapp/sass/routes/_about-modal.scss @@ -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; |