From 848a8663ed7f856aee3f801a62b82e87b20de0ea Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 3 Jun 2016 00:34:47 +0500 Subject: Multiple UI improvements (#3220) * Multiple UI improvements * Pushing time fix * Fixing absolute time stamps on IOS --- .../post_view/components/post_attachment.jsx | 16 +-- .../components/post_view/components/post_body.jsx | 1 + .../components/post_body_additional_content.jsx | 23 +-- webapp/components/rhs_root_post.jsx | 12 +- webapp/components/sidebar.jsx | 4 +- webapp/components/time_since.jsx | 38 +---- .../user_settings/user_settings_display.jsx | 4 +- webapp/i18n/en.json | 6 +- webapp/sass/components/_mentions.scss | 4 +- webapp/sass/layout/_headers.scss | 1 - webapp/sass/layout/_post.scss | 158 ++++++++------------- webapp/sass/layout/_sidebar-left.scss | 4 - webapp/sass/layout/_webhooks.scss | 107 ++++++++++++++ webapp/sass/responsive/_tablet.scss | 22 +++ webapp/sass/routes/_settings.scss | 9 +- webapp/utils/utils.jsx | 8 +- 16 files changed, 244 insertions(+), 173 deletions(-) (limited to 'webapp') diff --git a/webapp/components/post_view/components/post_attachment.jsx b/webapp/components/post_view/components/post_attachment.jsx index 8b5ff91f2..4442b735a 100644 --- a/webapp/components/post_view/components/post_attachment.jsx +++ b/webapp/components/post_view/components/post_attachment.jsx @@ -9,11 +9,11 @@ import {intlShape, injectIntl, defineMessages} from 'react-intl'; const holders = defineMessages({ collapse: { id: 'post_attachment.collapse', - defaultMessage: '▲ collapse text' + defaultMessage: 'Show less...' }, more: { id: 'post_attachment.more', - defaultMessage: '▼ read more' + defaultMessage: 'Show more...' } }); @@ -44,7 +44,7 @@ class PostAttachment extends React.Component { getInitState() { const shouldCollapse = this.shouldCollapse(); const text = TextFormatting.formatText(this.props.attachment.text || ''); - const uncollapsedText = text + (shouldCollapse ? `${this.props.intl.formatMessage(holders.collapse)}` : ''); + const uncollapsedText = text + (shouldCollapse ? `
${this.props.intl.formatMessage(holders.collapse)}
` : ''); const collapsedText = shouldCollapse ? this.getCollapsedText() : text; return { @@ -78,7 +78,7 @@ class PostAttachment extends React.Component { text = text.substr(0, 700); } - return TextFormatting.formatText(text) + `${this.props.intl.formatMessage(holders.more)}`; + return TextFormatting.formatText(text) + `
${this.props.intl.formatMessage(holders.more)}
`; } getFieldsTable() { @@ -99,7 +99,7 @@ class PostAttachment extends React.Component { if (rowPos === 2 || !(field.short === true) || lastWasLong) { fieldTables.push( @@ -122,7 +122,7 @@ class PostAttachment extends React.Component { } headerCols.push(
@@ -131,7 +131,7 @@ class PostAttachment extends React.Component { ); bodyCols.push( @@ -143,7 +143,7 @@ class PostAttachment extends React.Component { if (headerCols.length > 0) { // Flush last fields fieldTables.push( diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 75ba30f23..eba62ad77 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -171,6 +171,7 @@ export default class PostBody extends React.Component { ); } diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx index 89941f5b2..ea6e1cb49 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -97,16 +97,18 @@ export default class PostBodyAdditionalContent extends React.Component { ); } - for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { - const imageType = Constants.IMAGE_TYPES[i]; - const suffix = link.substring(link.length - (imageType.length + 1)); - if (suffix === '.' + imageType || suffix === '=' + imageType) { - return ( - - ); + if (!this.props.compactDisplay) { + for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { + const imageType = Constants.IMAGE_TYPES[i]; + const suffix = link.substring(link.length - (imageType.length + 1)); + if (suffix === '.' + imageType || suffix === '=' + imageType) { + return ( + + ); + } } } @@ -158,5 +160,6 @@ export default class PostBodyAdditionalContent extends React.Component { PostBodyAdditionalContent.propTypes = { post: React.PropTypes.object.isRequired, + compactDisplay: React.PropTypes.bool, message: React.PropTypes.element.isRequired }; diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index e6edcb86a..f7c9c9141 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -41,6 +41,7 @@ export default class RhsRootPost extends React.Component { render() { const post = this.props.post; const user = this.props.user; + const mattermostLogo = Constants.MATTERMOST_ICON_SVG; var isOwner = this.props.currentUser.id === post.user_id; var isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser(); const isSystemMessage = post.type && post.type.startsWith(Constants.SYSTEM_MESSAGE_PREFIX); @@ -201,7 +202,7 @@ export default class RhsRootPost extends React.Component { ); } - const profilePic = ( + let profilePic = ( ); + if (PostUtils.isSystemMessage(post)) { + profilePic = ( + + ); + } + const messageWrapper = (
diff --git a/webapp/components/time_since.jsx b/webapp/components/time_since.jsx index 50a0f7d04..2fbf73e31 100644 --- a/webapp/components/time_since.jsx +++ b/webapp/components/time_since.jsx @@ -4,10 +4,6 @@ import Constants from 'utils/constants.jsx'; import * as Utils from 'utils/utils.jsx'; -import {FormattedRelative, FormattedDate} from 'react-intl'; - -import {Tooltip, OverlayTrigger} from 'react-bootstrap'; - import React from 'react'; import PureRenderMixin from 'react-addons-pure-render-mixin'; @@ -26,38 +22,10 @@ export default class TimeSince extends React.Component { clearInterval(this.intervalId); } render() { - if (this.props.sameUser || this.props.compactDisplay) { - return ( - - ); - } - - const tooltip = ( - - - - ); - return ( - - - + ); } } diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 16175d4de..a7015d403 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -386,7 +386,7 @@ export default class UserSettingsDisplay extends React.Component { />
@@ -439,7 +439,7 @@ export default class UserSettingsDisplay extends React.Component { describe = ( ); } else { diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 2457eb62b..e86b893c5 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1027,8 +1027,8 @@ "pending_post_actions.cancel": "Cancel", "pending_post_actions.retry": "Retry", "permalink.error.access": "Permalink belongs to a channel you do not have access to", - "post_attachment.collapse": "▲ collapse text", - "post_attachment.more": "▼ read more", + "post_attachment.collapse": "Show less...", + "post_attachment.more": "Show more...", "post_body.commentedOn": "Commented on {name}{apostrophe} message: ", "post_body.deleted": "(message deleted)", "post_body.plusMore": " plus {count} other files", @@ -1278,7 +1278,7 @@ "user.settings.display.fontTitle": "Display Font", "user.settings.display.fullScreen": "Full width", "user.settings.display.language": "Language", - "user.settings.display.messageDisplayClean": "Clean", + "user.settings.display.messageDisplayClean": "Standard", "user.settings.display.messageDisplayCompact": "Compact", "user.settings.display.messageDisplayDescription": "Select how messages in a channel should be displayed.", "user.settings.display.messageDisplayTitle": "Message Display", diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 4753b4e9a..9e47e2a71 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -10,17 +10,19 @@ } .mentions__name { + @include clearfix; cursor: pointer; font-size: 13px; height: 36px; line-height: 36px; + margin: 5px 0; padding: 2px; position: relative; white-space: nowrap; width: 100%; z-index: 101; - .mention-align { + .mention--align { @include clearfix; text-overflow: ellipsis; width: calc(100% - 50px); diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 7db561438..db2ba48bd 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -68,7 +68,6 @@ .channel-intro { border-bottom: 1px solid $light-gray; margin: 0 auto 15px; - max-width: 990px; padding: 0 15px; .intro-links { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 745439ed8..d20cff8ae 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -258,6 +258,10 @@ body.ios { position: absolute; width: 100%; + .modal-open & { + @include clearfix; + } + &.active { display: inline; } @@ -484,6 +488,26 @@ body.ios { } &.post--compact { + blockquote { + display: inline-block; + font-size: 1em; + margin-left: 0; + padding: 3px 0 0 25px; + vertical-align: top; + + &:before { + font-size: 15px; + left: 4px; + top: 2px; + } + } + + .post__embed-container { + img { + max-height: 150px; + max-width: 150px; + } + } .markdown__heading { font-size: 1em; @@ -492,8 +516,15 @@ body.ios { .post__body { background: transparent !important; + line-height: 1.2; margin-top: -1px; padding: 3px 0; + + ol, + ul { + display: inline-block; + padding-left: 30px; + } } .post-image__columns { @@ -547,7 +578,7 @@ body.ios { .post__img { padding-top: 3px; - width: 28px; + width: 27px; img, svg { @@ -586,8 +617,8 @@ body.ios { &.post--comment { .post__body { - padding-left: 7px; border-left: 4px solid $gray; + padding-left: 7px; } } @@ -595,6 +626,33 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; + &.post--system { + padding: 8px .5em 0 1em; + + .post__header { + height: auto; + margin-bottom: 2px; + + .col__name { + display: inline-block; + } + + .col__reply { + + } + } + + .post__time { + @include opacity(.6); + font-size: .9em; + left: inherit; + line-height: inherit; + position: inherit; + text-rendering: inherit; + top: inherit; + } + } + &:hover { .post__time { @include opacity(.5); @@ -1047,102 +1105,6 @@ body.ios { padding: 2px 4px; } -.attachment { - .attachment__content { - border-radius: 4px; - border-style: solid; - border-width: 1px; - margin: 0 0 5px 0; - padding: 2px 5px; - } - - .attachment__thumb-pretext { - background: transparent; - border: none; - margin-left: 5px; - } - - .attachment__container { - border-left-style: solid; - border-left-width: 4px; - padding: 2px 0 2px 10px; - - &.attachment__container--good { - border-left-color: #00c100; - } - - &.attachment__container--warning { - border-left-color: #dede01; - } - - &.attachment__container--danger { - border-left-color: #e40303; - } - } - - .attachment__body { - float: left; - overflow-x: auto; - overflow-y: hidden; - padding-right: 5px; - width: 80%; - - &.attachment__body--no_thumb { - width: 100%; - } - } - - .attachment__text p:last-of-type { - display: inline-block; - } - - .attachment__title { - font-size: 16px; - height: 22px; - line-height: 16px; - margin: 5px 0; - padding: 0; - - a { - font-size: 16px; - } - } - - .attachment__author-icon { - @include border-radius(50px); - height: 14px; - margin-right: 5px; - width: 14px; - } - - .attachment__image { - margin-bottom: 1em; - max-width: 100%; - } - - .attachment__thumb-container { - float: right; - width: 20%; - - img { - max-height: 75px; - max-width: 100%; - } - } - - .attachment___fields { - width: 100%; - - .attachment___field-caption { - font-weight: 700; - } - - .attachment___field p { - margin: 0; - } - } -} - .permalink-text { overflow: hidden; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index cc8f13730..6b8658d25 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -184,10 +184,6 @@ } } - &.nav-more { - text-decoration: underline; - } - &.unread-title { font-weight: 600; } diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index ffd8dd7dc..61658ea5e 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -35,3 +35,110 @@ padding-right: 20px; } } + + +.attachment { + .attachment__content { + border-radius: 4px; + border-style: solid; + border-width: 1px; + margin: 0 0 5px 0; + padding: 2px 5px; + } + + .attachment__thumb-pretext { + background: transparent; + border: none; + margin-left: 5px; + } + + .attachment__container { + border-left-style: solid; + border-left-width: 4px; + padding: 10px; + + &.attachment__container--good { + border-left-color: #00c100; + } + + &.attachment__container--warning { + border-left-color: #dede01; + } + + &.attachment__container--danger { + border-left-color: #e40303; + } + } + + .attachment__body { + float: left; + overflow-x: auto; + overflow-y: hidden; + padding-right: 5px; + width: 80%; + + &.attachment__body--no_thumb { + width: 100%; + } + } + + .attachment__text p:last-of-type { + display: inline-block; + } + + .attachment__author-name { + @include opacity(.6); + } + + .attachment__title { + font-size: 14px; + font-weight: 600; + height: 22px; + line-height: 18px; + margin: 5px 0; + padding: 0; + } + + .attachment-link-more { + display: inline-block; + font-size: .9em; + margin: 5px 0; + } + + .attachment__author-icon { + @include border-radius(50px); + height: 14px; + margin-right: 5px; + width: 14px; + } + + .attachment__image { + margin-bottom: 1em; + max-width: 100%; + } + + .attachment__thumb-container { + float: right; + width: 20%; + + img { + max-height: 75px; + max-width: 100%; + } + } + + .attachment-fields { + width: 100%; + + .attachment-field__caption { + font-weight: 600; + padding-top: .7em; + } + + .attachment-field { + p { + margin: 0; + } + } + } +} \ No newline at end of file diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index f5e341b25..0a62c0f79 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -113,6 +113,21 @@ .col__name { font-weight: bold; + margin-right: 2px; + padding-right: 10px; + position: relative; + z-index: 1; + + &:after { + content: ':'; + display: inline-block; + font-family: FontAwesome; + font-size: 19px; + position: absolute; + right: 3px; + text-rendering: auto; + top: -5px; + } } .col__reply { @@ -202,6 +217,13 @@ } &.post--compact { + &.post--system { + .post__time { + position: absolute; + top: 3px; + } + } + .post__time { font-size: .85em; left: -70px; diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 6986959b2..376cf611e 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -141,17 +141,12 @@ } .group--code { - select { @include appearance(none); appearance: none; padding-right: 25px; } - select::ms-expand { - display: none; - } - &:before { @include font-smoothing; content: '\f0d7'; @@ -163,6 +158,10 @@ text-rendering: auto; top: 11px; z-index: 5; + + .browser--ie & { + display: none; + } } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 7d904387d..84c2ed4ce 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -229,8 +229,8 @@ export function displayTimeFormatted(ticks) { return ( ); @@ -633,7 +633,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); @@ -654,6 +654,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.app__body .mentions--top, .app__body .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); @@ -706,6 +707,7 @@ export function applyTheme(theme) { changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); } -- cgit v1.2.3-1-g7c22