From 62ee998714bbb2bcd5759ff71ed4818c62b43806 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 4 Dec 2015 13:21:40 +0500 Subject: Multiple UI Improvements --- web/react/components/access_history_modal.jsx | 2 +- web/react/components/activity_log_modal.jsx | 2 +- web/react/components/center_panel.jsx | 3 ++- web/react/components/invite_member_modal.jsx | 2 +- web/react/components/more_direct_channels.jsx | 2 +- web/react/components/search_results_item.jsx | 2 +- web/react/components/team_members_modal.jsx | 2 +- .../user_settings/user_settings_display.jsx | 22 +++++++++------------ .../user_settings/user_settings_modal.jsx | 2 +- web/react/utils/utils.jsx | 6 +++++- web/sass-files/sass/partials/_base.scss | 2 +- web/sass-files/sass/partials/_content.scss | 23 +++++++++++----------- web/sass-files/sass/partials/_post.scss | 4 ++++ web/sass-files/sass/partials/_responsive.scss | 3 +++ web/sass-files/sass/partials/_search.scss | 8 +++++--- web/sass-files/sass/partials/_sidebar--right.scss | 8 ++++++++ web/templates/channel.html | 2 +- 17 files changed, 56 insertions(+), 39 deletions(-) diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index 165d32339..deef92a54 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -32,7 +32,7 @@ export default class AccessHistoryModal extends React.Component { onShow() { AsyncClient.getAudits(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 869d648d2..200f4d724 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -51,7 +51,7 @@ export default class ActivityLogModal extends React.Component { onShow() { AsyncClient.getSessions(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx index 848e8952e..a1043431d 100644 --- a/web/react/components/center_panel.jsx +++ b/web/react/components/center_panel.jsx @@ -71,7 +71,8 @@ export default class CenterPanel extends React.Component { href='' onClick={handleClick} > - {'You are viewing the Archives. Click here to jump to recent messages.'} + {'You are viewing the Archives. Click here to jump to recent messages. '} + {} ); diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 76f52faa9..25a915e22 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component { componentDidUpdate(prevProps, prevState) { if (!prevState.show && this.state.show) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 9116dc8f1..cf40af6ae 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -166,7 +166,7 @@ export default class MoreDirectChannels extends React.Component { componentDidUpdate(prevProps) { if (!prevProps.show && this.props.show) { - $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); } diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 6e17cfe32..1d4983026 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -65,7 +65,7 @@ export default class SearchResultsItem extends React.Component { className='search-item__jump' onClick={this.handleClick} > - {'[Jump]'} + {} diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index 0a30a2202..eed4a1f19 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -26,7 +26,7 @@ export default class TeamMembersModal extends React.Component { } onShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index c464258de..fd1e28033 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -240,18 +240,14 @@ export default class UserSettingsDisplay extends React.Component { const inputs = [
-
this.handleFont(e.target.value)} > - -
+ {options} +

{'Select the font displayed in the Mattermost user interface.'}
]; @@ -309,12 +305,12 @@ export default class UserSettingsDisplay extends React.Component {

{'Display Settings'}

- {fontSection} -
{clockSection}
{nameFormatSection}
+ {fontSection} +
); diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index f9d03f56d..97c601b5e 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -47,7 +47,7 @@ export default class UserSettingsModal extends React.Component { } handleShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 0a52f5b37..ac0640f6e 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -681,7 +681,11 @@ export function applyTheme(theme) { } if (theme.mentionHighlightBg) { - changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); + changeCss('.mention-highlight, .search-highlight, #archive-link-home', 'background:' + theme.mentionHighlightBg, 1); + } + + if (theme.mentionHighlightBg) { + changeCss('.post.post--highlight, #archive-link-home', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1); } if (theme.mentionHighlightLink) { diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 7efe70cb4..0f8cd56f7 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -123,7 +123,7 @@ a:focus, a:hover { } select { - -webkit-appearance: none; + -moz-appearance:none; } .form-control { diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss index 817817854..471ba63af 100644 --- a/web/sass-files/sass/partials/_content.scss +++ b/web/sass-files/sass/partials/_content.scss @@ -18,30 +18,29 @@ margin-left: 220px; position: relative; background: #fff; - @include display-flex; - @include flex-direction(column); + @include display-flex; + @include flex-direction(column); .channel__wrap & { padding-top: 0; } } #post-create { - @include flex(0 0 auto); + @include flex(0 0 auto); background: #fff; width: 100%; z-index: 3; } #archive-link-home { - @include flex(0 0 auto); - background: #fff; - width: 100%; - min-height: 50px; - z-index: 3; - background-color: beige; - text-align: center; - vertical-align: middle; - padding-top: 10px; + @include flex(0 0 auto); cursor: pointer; + padding: 10px; + font-size: 13px; + + a { + color: inherit; + } + } .post-list { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index ed1632681..adb1e0fff 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -599,6 +599,10 @@ body.ios { @include legacy-pie-clearfix; width: calc(100% - 70px); + img { + max-height: 400px; + } + ul { padding: 5px 0 0 20px; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 9b316d48e..2011a25f2 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -296,6 +296,9 @@ } } } + .section-min:hover { + background: none; + } .no-padding--left { padding-left: 15px; } diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 0debb7e54..3af0f3f2c 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -1,9 +1,9 @@ #channel-header .search-bar__container { - padding: 0 8px 0 3px; + padding: 0 8px 0 3px; } .search-bar__container { padding: 12px 8px 0 0; - @include flex(0 0 56px); + @include flex(0 0 56px); } .search__clear { display: none; @@ -107,7 +107,9 @@ } .search-item__jump { - margin-left: 10px; + position: absolute; + right: 0; + top: 0; } .search-item-time { diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index 735b2a99e..ada43fb99 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -12,6 +12,14 @@ right: 0; } + .post-body { + + img { + max-height: 200px; + } + + } + .sidebar--right__content { height: 100%; @include display-flex; diff --git a/web/templates/channel.html b/web/templates/channel.html index 8abbe36df..a5c0354a3 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -30,7 +30,7 @@ window.setup_channel_page({{ .Props }}, {{ .Team }}, {{ .Channel }}, {{ .User }} if($(window).height() > 1200){ modals.css('max-height', 1000); } else { - modals.css('max-height', $(window).height() - 200); + modals.css('max-height', $(window).height() - 50); } modals.perfectScrollbar(); -- cgit v1.2.3-1-g7c22 From 38a0c5dd761fed5d82b26614447d238628bee6e1 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 4 Dec 2015 19:23:13 +0500 Subject: Updating UI for suggestions list --- .../user_settings/user_settings_display.jsx | 22 +++++++++++++--------- web/sass-files/sass/partials/_suggestion_list.scss | 14 ++++++++------ 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index fd1e28033..c464258de 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -240,14 +240,18 @@ export default class UserSettingsDisplay extends React.Component { const inputs = [
- + +

{'Select the font displayed in the Mattermost user interface.'}
]; @@ -305,12 +309,12 @@ export default class UserSettingsDisplay extends React.Component {

{'Display Settings'}

+ {fontSection} +
{clockSection}
{nameFormatSection}
- {fontSection} -
); diff --git a/web/sass-files/sass/partials/_suggestion_list.scss b/web/sass-files/sass/partials/_suggestion_list.scss index 0cf3fff5f..5e91a126d 100644 --- a/web/sass-files/sass/partials/_suggestion_list.scss +++ b/web/sass-files/sass/partials/_suggestion_list.scss @@ -47,17 +47,19 @@ } .emoticon-suggestion { + @include clearfix; width: 100%; - height: 36px; + height: 30px; cursor: pointer; font-size: 13px; - line-height: 36px; + line-height: 30px; } .emoticon-suggestion__image { - width: 32px; - height: 32px; - margin-right: 6px; - padding: 2px; + width: 20px; + height: 20px; + margin: 6px 6px 0 5px; + padding: 0; text-align: center; + vertical-align: top; } -- cgit v1.2.3-1-g7c22