This repository has been archived by the owner on Mar 13, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
[MM-26466] Close Next Steps Modal and functionality #5995
Merged
devinbinnie
merged 8 commits into
mattermost:feature/cloud-onboarding
from
devinbinnie:MM-26466
Jul 28, 2020
Merged
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
00655de
Hooked up the sidebar next steps bar and some fixes
devinbinnie b3949f3
Integration of state into app for next steps view, close next steps v…
devinbinnie b75bda7
Styling and help arrow for modal
devinbinnie 1f0cb85
Missed a translation
devinbinnie 29c0f9b
PR feedback
devinbinnie ccba981
Center the next steps modal
devinbinnie 69ece1b
PR feedback
devinbinnie ddc579f
Translation fix
devinbinnie File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
// See LICENSE.txt for license information. | ||
|
||
import {ActionTypes} from 'utils/constants'; | ||
|
||
export function setShowNextStepsView(show: boolean) { | ||
return { | ||
type: ActionTypes.SET_SHOW_NEXT_STEPS_VIEW, | ||
show, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
components/sidebar/sidebar_next_steps/close_next_steps_modal.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
.modal-backdrop.in { | ||
clip-path: polygon(0 0, 65px 0, 65px 63px, 305px 63px, 305px 0, 100% 0, 100% 100%, 0 100%); | ||
} | ||
|
||
.CloseNextStepsModal__helpBox { | ||
position: fixed; | ||
top: 16px; | ||
left: 266px; | ||
z-index: 1050; | ||
} | ||
|
||
.CloseNextStepsModal__helpText { | ||
font-weight: 600; | ||
font-size: 12px; | ||
line-height: 16px; | ||
text-align: center; | ||
color: var(--center-channel-bg); | ||
display: block; | ||
width: 188px; | ||
margin-left: -12px; | ||
margin-top: 4px; | ||
} | ||
|
||
.GenericModal__header { | ||
text-align: center; | ||
padding-bottom: 8px; | ||
|
||
h1 { | ||
font-size: 24px; | ||
line-height: 32px; | ||
} | ||
} | ||
|
||
.GenericModal__body { | ||
text-align: center; | ||
color: var(--center-channel-color); | ||
} | ||
|
||
.modal-footer { | ||
text-align: center; | ||
} | ||
|
||
.modal .GenericModal .modal-content { | ||
padding: 40px 36px 24px 36px; | ||
} | ||
|
||
.GenericModal__button { | ||
padding: 13px 20px; | ||
line-height: 14px; | ||
|
||
& +.GenericModal__button { | ||
margin-left: 10px; | ||
} | ||
} | ||
|
||
.modal .GenericModal { | ||
max-width: 514px; | ||
} |
63 changes: 63 additions & 0 deletions
63
components/sidebar/sidebar_next_steps/close_next_steps_modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
// See LICENSE.txt for license information. | ||
|
||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import {FormattedMessage} from 'react-intl'; | ||
|
||
import GenericModal from 'components/generic_modal'; | ||
import closeNextStepsArrow from 'images/close_next_steps_arrow.svg'; | ||
|
||
import './close_next_steps_modal.scss'; | ||
|
||
type Props = { | ||
onConfirm: () => void; | ||
onCancel: () => void; | ||
} | ||
|
||
export default function CloseNextStepsModal(props: Props) { | ||
const {onConfirm, onCancel} = props; | ||
|
||
return ( | ||
<> | ||
{ReactDOM.createPortal( | ||
<div className='CloseNextStepsModal__helpBox'> | ||
<img | ||
className='CloseNextStepsModal__arrow' | ||
src={closeNextStepsArrow} | ||
/> | ||
<span className='CloseNextStepsModal__helpText'> | ||
<FormattedMessage | ||
id='close_next_steps_modal.helpText' | ||
defaultMessage='Access Tips & Next Steps any time through the Help section in the Main Menu' | ||
/> | ||
</span> | ||
</div>, | ||
document.body as HTMLElement | ||
)} | ||
<GenericModal | ||
show={true} | ||
onHide={onCancel} | ||
handleConfirm={onConfirm} | ||
handleCancel={onCancel} | ||
modalHeaderText={( | ||
<FormattedMessage | ||
id={'close_next_steps_modal.header'} | ||
defaultMessage={'Remove Tip & Next Steps?'} | ||
/> | ||
)} | ||
confirmButtonText={( | ||
<FormattedMessage | ||
id={'close_next_steps_modal.confirm'} | ||
defaultMessage='Remove' | ||
/> | ||
)} | ||
> | ||
<FormattedMessage | ||
id={'close_next_steps_modal.mainText'} | ||
defaultMessage='This will remove this section from your sidebar, but you can access it later in the Help section of the Main Menu.' | ||
/> | ||
</GenericModal> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
// See LICENSE.txt for license information. | ||
|
||
import {connect} from 'react-redux'; | ||
import {Dispatch, bindActionCreators} from 'redux'; | ||
|
||
import {savePreferences} from 'mattermost-redux/actions/preferences'; | ||
import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences'; | ||
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users'; | ||
|
||
import {openModal, closeModal} from 'actions/views/modals'; | ||
import {setShowNextStepsView} from 'actions/views/next_steps'; | ||
import {showNextSteps} from 'components/next_steps_view/steps'; | ||
import {GlobalState} from 'types/store'; | ||
import {Preferences} from 'utils/constants'; | ||
|
||
import SidebarNextSteps from './sidebar_next_steps'; | ||
|
||
function makeMapStateToProps() { | ||
const getCategory = makeGetCategory(); | ||
|
||
return (state: GlobalState) => ({ | ||
active: state.views.nextSteps.show, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we rename this to 'shown' ? |
||
showNextSteps: showNextSteps(state), | ||
currentUserId: getCurrentUserId(state), | ||
preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS), | ||
}); | ||
} | ||
|
||
function mapDispatchToProps(dispatch: Dispatch) { | ||
return { | ||
actions: bindActionCreators({ | ||
savePreferences, | ||
openModal, | ||
closeModal, | ||
setShowNextStepsView, | ||
}, dispatch), | ||
}; | ||
} | ||
|
||
export default connect(makeMapStateToProps, mapDispatchToProps)(SidebarNextSteps); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we rename this to "RemoveNextStepsModal" ? Initially it was a bit confusing because it gave me the idea that it's a 'Close button' component.