summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webapp/components/invite_member_modal.jsx2
-rw-r--r--webapp/components/popover_list_members.jsx1
-rw-r--r--webapp/components/post_view/components/post_header.jsx7
-rw-r--r--webapp/components/sidebar.jsx10
-rw-r--r--webapp/components/sidebar_right_menu.jsx110
-rw-r--r--webapp/components/tutorial/tutorial_tip.jsx12
-rw-r--r--webapp/i18n/en.json1
-rw-r--r--webapp/sass/components/_dropdown.scss1
-rw-r--r--webapp/sass/components/_modal.scss30
-rw-r--r--webapp/sass/layout/_headers.scss165
-rw-r--r--webapp/sass/layout/_post.scss17
-rw-r--r--webapp/sass/layout/_sidebar-menu.scss9
-rw-r--r--webapp/sass/responsive/_mobile.scss11
-rw-r--r--webapp/sass/responsive/_tablet.scss16
14 files changed, 254 insertions, 138 deletions
diff --git a/webapp/components/invite_member_modal.jsx b/webapp/components/invite_member_modal.jsx
index 96a9eb75d..265a421b6 100644
--- a/webapp/components/invite_member_modal.jsx
+++ b/webapp/components/invite_member_modal.jsx
@@ -286,7 +286,7 @@ class InviteMemberModal extends React.Component {
lastNameClass += ' has-error';
}
nameFields = (
- <div className='row--invite'>
+ <div className='row row--invite'>
<div className='col-sm-6'>
<div className={firstNameClass}>
<input
diff --git a/webapp/components/popover_list_members.jsx b/webapp/components/popover_list_members.jsx
index 387c37ab5..d85b1114b 100644
--- a/webapp/components/popover_list_members.jsx
+++ b/webapp/components/popover_list_members.jsx
@@ -142,6 +142,7 @@ export default class PopoverListMembers extends React.Component {
<div>
<div
id='member_popover'
+ className='member-popover__trigger'
ref='member_popover_target'
onClick={(e) => this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})}
>
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index 6e54e57e7..cc6bab852 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -26,6 +26,7 @@ export default class PostHeader extends React.Component {
/>
);
let botIndicator;
+ let colon;
if (post.props && post.props.from_webhook) {
if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
@@ -50,9 +51,13 @@ export default class PostHeader extends React.Component {
);
}
+ if (this.props.compactDisplay) {
+ colon = (<strong>{':'}</strong>);
+ }
+
return (
<ul className='post__header'>
- <li className='col col__name'>{userProfile}</li>
+ <li className='col col__name'>{userProfile}{colon}</li>
{botIndicator}
<li className='col'>
<PostInfo
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index f6958e721..f0e17d986 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -370,6 +370,15 @@ export default class Sidebar extends React.Component {
this.setState({showDirectChannelsModal: false});
}
+ openLeftSidebar() {
+ if (Utils.isMobile()) {
+ setTimeout(() => {
+ document.querySelector('.app__body .inner-wrap').classList.add('move--right');
+ document.querySelector('.app__body .sidebar--left').classList.add('move--right');
+ });
+ }
+ }
+
createTutorialTip() {
const screens = [];
@@ -535,6 +544,7 @@ export default class Sidebar extends React.Component {
let tutorialTip = null;
if (this.state.showTutorialTip && channel.name === Constants.DEFAULT_CHANNEL) {
tutorialTip = this.createTutorialTip();
+ this.openLeftSidebar();
}
let link = '';
diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx
index b24b8e4fb..e3a7bee7c 100644
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/webapp/components/sidebar_right_menu.jsx
@@ -1,6 +1,7 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import TeamMembersModal from './team_members_modal.jsx';
import ToggleModalButton from './toggle_modal_button.jsx';
import UserSettingsModal from './user_settings/user_settings_modal.jsx';
@@ -14,6 +15,7 @@ import * as GlobalActions from 'actions/global_actions.jsx';
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
+const ActionTypes = Constants.ActionTypes;
const Preferences = Constants.Preferences;
const TutorialSteps = Constants.TutorialSteps;
@@ -30,6 +32,7 @@ export default class SidebarRightMenu extends React.Component {
this.onPreferenceChange = this.onPreferenceChange.bind(this);
this.handleAboutModal = this.handleAboutModal.bind(this);
+ this.searchMentions = this.searchMentions.bind(this);
this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
const state = this.getStateFromStores();
@@ -60,13 +63,82 @@ export default class SidebarRightMenu extends React.Component {
getStateFromStores() {
const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
- return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()};
+ return {
+ currentUser: UserStore.getCurrentUser(),
+ showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()
+ };
}
onPreferenceChange() {
this.setState(this.getStateFromStores());
}
+ searchMentions(e) {
+ e.preventDefault();
+
+ const user = this.state.currentUser;
+
+ let terms = '';
+ if (user.notify_props && user.notify_props.mention_keys) {
+ const termKeys = UserStore.getMentionKeys(user.id);
+
+ if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) {
+ termKeys.splice(termKeys.indexOf('@all'), 1);
+ }
+
+ if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) {
+ termKeys.splice(termKeys.indexOf('@channel'), 1);
+ }
+ terms = termKeys.join(' ');
+ }
+
+ this.hideSidebars();
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_SEARCH_TERM,
+ term: terms,
+ do_search: true,
+ is_mention_search: true
+ });
+ }
+
+ closeLeftSidebar() {
+ if (Utils.isMobile()) {
+ setTimeout(() => {
+ document.querySelector('.app__body .inner-wrap').classList.remove('move--right');
+ document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
+ });
+ }
+ }
+
+ openRightSidebar() {
+ if (Utils.isMobile()) {
+ setTimeout(() => {
+ document.querySelector('.app__body .inner-wrap').classList.add('move--left-small');
+ document.querySelector('.app__body .sidebar--menu').classList.add('move--left');
+ });
+ }
+ }
+
+ hideSidebars() {
+ if (Utils.isMobile()) {
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_SEARCH,
+ results: null
+ });
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_POST_SELECTED,
+ postId: null
+ });
+
+ document.querySelector('.app__body .inner-wrap').classList.remove('move--right', 'move--left', 'move--left-small');
+ document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
+ document.querySelector('.app__body .sidebar--right').classList.remove('move--left');
+ document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
+ }
+ }
+
render() {
var teamLink = '';
var inviteLink = '';
@@ -87,7 +159,7 @@ export default class SidebarRightMenu extends React.Component {
href='#'
onClick={GlobalActions.showInviteMemberModal}
>
- <i className='fa fa-user-plus'></i>
+ <i className='icon fa fa-user-plus'></i>
<FormattedMessage
id='sidebar_right_menu.inviteNew'
defaultMessage='Invite New Member'
@@ -103,7 +175,7 @@ export default class SidebarRightMenu extends React.Component {
href='#'
onClick={GlobalActions.showGetTeamInviteLinkModal}
>
- <i className='glyphicon glyphicon-link'></i>
+ <i className='icon glyphicon glyphicon-link'></i>
<FormattedMessage
id='sidebar_right_menu.teamLink'
defaultMessage='Get Team Invite Link'
@@ -122,7 +194,7 @@ export default class SidebarRightMenu extends React.Component {
data-toggle='modal'
data-target='#team_settings'
>
- <i className='fa fa-globe'></i>
+ <i className='icon fa fa-globe'></i>
<FormattedMessage
id='sidebar_right_menu.teamSettings'
defaultMessage='Team Settings'
@@ -133,7 +205,7 @@ export default class SidebarRightMenu extends React.Component {
manageLink = (
<li>
<ToggleModalButton dialogType={TeamMembersModal}>
- <i className='fa fa-users'></i>
+ <i className='icon fa fa-users'></i>
<FormattedMessage
id='sidebar_right_menu.manageMembers'
defaultMessage='Manage Members'
@@ -149,7 +221,7 @@ export default class SidebarRightMenu extends React.Component {
<Link
to={'/admin_console'}
>
- <i className='fa fa-wrench'></i>
+ <i className='icon fa fa-wrench'></i>
<FormattedMessage
id='sidebar_right_menu.console'
defaultMessage='System Console'
@@ -177,7 +249,7 @@ export default class SidebarRightMenu extends React.Component {
rel='noopener noreferrer'
to={global.window.mm_config.HelpLink}
>
- <i className='fa fa-question'></i>
+ <i className='icon fa fa-question'></i>
<FormattedMessage
id='sidebar_right_menu.help'
defaultMessage='Help'
@@ -196,7 +268,7 @@ export default class SidebarRightMenu extends React.Component {
rel='noopener noreferrer'
to={global.window.mm_config.ReportAProblemLink}
>
- <i className='fa fa-phone'></i>
+ <i className='icon fa fa-phone'></i>
<FormattedMessage
id='sidebar_right_menu.report'
defaultMessage='Report a Problem'
@@ -209,6 +281,8 @@ export default class SidebarRightMenu extends React.Component {
let tutorialTip = null;
if (this.state.showTutorialTip) {
tutorialTip = createMenuTip((e) => e.preventDefault(), true);
+ this.closeLeftSidebar();
+ this.openRightSidebar();
}
return (
@@ -231,9 +305,21 @@ export default class SidebarRightMenu extends React.Component {
<li>
<a
href='#'
+ onClick={this.searchMentions}
+ >
+ <i className='icon mentions'>{'@'}</i>
+ <FormattedMessage
+ id='sidebar_right_menu.recentMentions'
+ defaultMessage='Recent Mentions'
+ />
+ </a>
+ </li>
+ <li>
+ <a
+ href='#'
onClick={() => this.setState({showUserSettingsModal: true})}
>
- <i className='fa fa-cog'></i>
+ <i className='icon fa fa-cog'></i>
<FormattedMessage
id='sidebar_right_menu.accountSettings'
defaultMessage='Account Settings'
@@ -247,7 +333,7 @@ export default class SidebarRightMenu extends React.Component {
{consoleLink}
<li>
<Link to='/select_team'>
- <i className='fa fa-exchange'></i>
+ <i className='icon fa fa-exchange'></i>
<FormattedMessage
id='sidebar_right_menu.switch_team'
defaultMessage='Team Selection'
@@ -260,7 +346,7 @@ export default class SidebarRightMenu extends React.Component {
href='#'
onClick={GlobalActions.emitUserLoggedOutEvent}
>
- <i className='fa fa-sign-out'></i>
+ <i className='icon fa fa-sign-out'></i>
<FormattedMessage
id='sidebar_right_menu.logout'
defaultMessage='Logout'
@@ -275,7 +361,7 @@ export default class SidebarRightMenu extends React.Component {
href='#'
onClick={this.handleAboutModal}
>
- <i className='fa fa-info'></i>
+ <i className='icon fa fa-info'></i>
<FormattedMessage
id='navbar_dropdown.about'
defaultMessage='About Mattermost'
diff --git a/webapp/components/tutorial/tutorial_tip.jsx b/webapp/components/tutorial/tutorial_tip.jsx
index c9b7367d2..461d28386 100644
--- a/webapp/components/tutorial/tutorial_tip.jsx
+++ b/webapp/components/tutorial/tutorial_tip.jsx
@@ -10,6 +10,7 @@ import Constants from 'utils/constants.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
const Preferences = Constants.Preferences;
+import * as Utils from 'utils/utils.jsx';
import {Overlay} from 'react-bootstrap';
@@ -47,8 +48,17 @@ export default class TutorialTip extends React.Component {
return;
}
+ this.closeRightSidebar();
this.toggle();
}
+ closeRightSidebar() {
+ if (Utils.isMobile()) {
+ setTimeout(() => {
+ document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
+ document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
+ });
+ }
+ }
skipTutorial(e) {
e.preventDefault();
@@ -94,7 +104,7 @@ export default class TutorialTip extends React.Component {
}
var tutorialGifImage = tutorialGif;
- if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar') {
+ if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar' || this.props.overlayClass === 'tip-overlay--header--up') {
tutorialGifImage = tutorialGifWhite;
}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 51e702361..736193c0c 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1158,6 +1158,7 @@
"sidebar.unreadAbove": "Unread post(s) above",
"sidebar.unreadBelow": "Unread post(s) below",
"sidebar_header.tutorial": "<h4>Main Menu</h4><p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p><p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>",
+ "sidebar_right_menu.recentMentions": "Recent Mentions",
"sidebar_right_menu.accountSettings": "Account Settings",
"sidebar_right_menu.console": "System Console",
"sidebar_right_menu.help": "Help",
diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss
index 5ed0bca61..eaa5c463f 100644
--- a/webapp/sass/components/_dropdown.scss
+++ b/webapp/sass/components/_dropdown.scss
@@ -1,6 +1,7 @@
@charset 'UTF-8';
.dropdown-menu {
+ border-radius: $border-rad;
&.colorpicker {
z-index: 2500;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 30b5d29cd..8b078de86 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -29,6 +29,14 @@
}
}
+ .row--invite {
+ .col-sm-6 {
+ &:first-child {
+ padding-right: 0;
+ }
+ }
+ }
+
.modal__hint {
@include opacity(.8);
display: block;
@@ -194,8 +202,8 @@
}
.modal-content {
- border-radius: 0;
- box-shadow: none;
+ @include box-shadow(0 0 10px rgba($black, .5));
+ border-radius: $border-rad;
}
.modal-chevron-icon {
@@ -417,24 +425,6 @@
}
}
-
- .invite {
- margin-right: 40px;
- }
-
- .row--invite {
- @include clearfix;
- margin-right: 40px;
-
- .col-sm-6 {
- padding: 0 0 0 15px;
-
- &:first-child {
- padding-left: 0;
- }
- }
- }
-
.more-modal {
.user-list {
margin-top: 10px;
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index db2ba48bd..d0ccfbe23 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -2,6 +2,87 @@
.channel-header {
@include flex(0 0 56px);
+ border-left: none;
+ font-size: 14px;
+ line-height: 56px;
+ width: 100%;
+
+ .member-popover__trigger {
+ cursor: pointer;
+ padding-right: 10px;
+ text-align: right;
+ width: 60px;
+
+ .fa {
+ font-size: 16px;
+ margin-left: 4px;
+ }
+ }
+
+ &.alt {
+ margin: 0;
+
+ th {
+ font-weight: normal !important;
+ }
+
+ td {
+ border: none;
+ }
+ }
+
+ th {
+ text-align: center;
+
+ &:first-child {
+ border-left: none;
+ padding-left: 15px;
+ padding-right: 1em;
+ text-align: left !important;
+ width: 100%;
+ }
+
+ &:last-child {
+ width: 8.9%;
+ }
+ }
+
+ td {
+ font-size: 13px;
+ padding: 5px 25px 5px !important;
+ text-align: center !important;
+
+ &:first-child {
+ text-align: left !important;
+ }
+ }
+
+ .heading {
+ display: inline-block;
+ font-size: 1.3em;
+ font-weight: 600;
+ margin: 0 4px 0 0;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ }
+
+ .caret {
+ margin-top: 3px;
+ }
+
+ .more {
+ color: #81848b;
+ display: inline-block;
+ font-size: 13px;
+ text-transform: capitalize;
+ vertical-align: top;
+ }
+
+ .disabled {
+ color: #999999;
+ }
}
.row {
@@ -256,90 +337,6 @@
}
}
-.channel-header {
- border-left: none;
- font-size: 14px;
- line-height: 56px;
- width: 100%;
-
- #member_popover {
- color: #999999;
- cursor: pointer;
- width: 50px;
-
- .fa {
- font-size: 16px;
- margin-left: 4px;
- }
- }
-
- &.alt {
- margin: 0;
-
- th {
- font-weight: normal !important;
- }
-
- td {
- border: none;
- }
- }
-
- th {
- text-align: center;
-
- &:first-child {
- border-left: none;
- padding-left: 15px;
- padding-right: 1em;
- text-align: left !important;
- width: 100%;
- }
-
- &:last-child {
- width: 8.9%;
- }
- }
-
- td {
- font-size: 13px;
- padding: 5px 25px 5px !important;
- text-align: center !important;
-
- &:first-child {
- text-align: left !important;
- }
- }
-
- .heading {
- color: #555555;
- display: inline-block;
- font-size: 1.3em;
- font-weight: 600;
- margin: 0 4px 0 0;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: middle;
- }
-
- .caret {
- margin-top: 3px;
- }
-
- .more {
- color: #81848b;
- display: inline-block;
- font-size: 13px;
- text-transform: capitalize;
- vertical-align: top;
- }
-
- .disabled {
- color: #999999;
- }
-}
-
.channel-header__navbar {
font-size: 16px;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index db64d739e..228efe26f 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -486,7 +486,6 @@ body.ios {
&.post--compact {
&.post--thread {
.post__header {
- height: 22px;
padding-top: 3px;
}
}
@@ -510,6 +509,10 @@ body.ios {
margin: 0 0 7px;
}
+ .post__header {
+ height: 22px;
+ }
+
.post__body {
background: transparent !important;
line-height: 1.6;
@@ -537,10 +540,6 @@ body.ios {
}
}
- .post-image__columns {
- clear: both;
- }
-
.post-image__column {
@include border-radius(2px);
font-size: .9em;
@@ -765,8 +764,15 @@ body.ios {
@include clearfix;
max-width: 200px;
text-overflow: ellipsis;
+ vertical-align: top;
white-space: nowrap;
}
+
+ strong {
+ display: none;
+ font-weight: 900;
+ margin-left: 2px;
+ }
}
.col__reply {
@@ -1036,6 +1042,7 @@ body.ios {
display: inline-block;
margin-right: 6px;
visibility: hidden;
+
svg {
fill: inherit;
position: relative;
diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss
index 0cf60f328..97ab487c0 100644
--- a/webapp/sass/layout/_sidebar-menu.scss
+++ b/webapp/sass/layout/_sidebar-menu.scss
@@ -68,13 +68,18 @@
line-height: 40px;
padding: 0 15px;
- .fa,
- .glyphicon {
+ .icon {
+ display: inline-block;
left: -5px;
position: relative;
text-align: center;
width: 25px;
}
+
+ .mentions {
+ font-size: 17px;
+ font-weight: bold;
+ }
}
}
}
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index eec08b1e5..cb1191fe3 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -136,6 +136,13 @@
}
}
+ &.post--comment {
+ .post__body {
+ margin-top: 5px;
+ padding: 2px 0 0 7px;
+ }
+ }
+
&.other--root {
&.post--comment {
.post__header {
@@ -309,7 +316,9 @@
.row--invite {
.col-sm-6 {
- padding: 0;
+ &:first-child {
+ padding-right: 15px;
+ }
}
}
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 9e09c3f42..a461dd35a 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -117,20 +117,13 @@
.col__name {
font-weight: bold;
margin-right: 2px;
- padding-right: 10px;
+ padding-right: 5px;
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;
- }
+ strong {
+ display: inline;
}
.col__reply {
@@ -176,6 +169,7 @@
&.same--root {
&.same--user {
padding-left: 70px;
+ padding-top: 0;
.post__header {
.col__reply {
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-01 13:48:43 +0000