mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
Updating tutorial screens
This commit is contained in:
Asaad Mahmood
committed by
JoramWilander
JoramWilander
parent
97449a102e
commit
393d253021
@@ -383,10 +383,9 @@ export default class CreatePost extends React.Component {
|
||||
|
||||
screens.push(
|
||||
<div>
|
||||
<h4><strong>{'Sending Messages'}</strong></h4>
|
||||
{'Type here to write a message.'}
|
||||
<br/><br/>
|
||||
{'Click the attachment button to upload an image or a file.'}
|
||||
<h4>{'Sending Messages'}</h4>
|
||||
<p>{'Type here to write a message.'}</p>
|
||||
<p>{'Click the attachment button to upload an image or a file.'}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -323,28 +323,34 @@ export default class Sidebar extends React.Component {
|
||||
|
||||
screens.push(
|
||||
<div>
|
||||
<h4><strong>{'Channels'}</strong></h4>
|
||||
<strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'}
|
||||
<h4>{'Channels'}</h4>
|
||||
<p><strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
screens.push(
|
||||
<div>
|
||||
<h4><strong>{'"Town Square" and "Off-Topic" channels'}</strong></h4>
|
||||
{'Here are two public channels to start:'}
|
||||
<br/><br/>
|
||||
<strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
|
||||
<br/><br/>
|
||||
<strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'}
|
||||
<h4>{'"Town Square" and "Off-Topic" channels'}</h4>
|
||||
<p>{'Here are two public channels to start:'}</p>
|
||||
<p>
|
||||
<strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
screens.push(
|
||||
<div>
|
||||
<h4><strong>{'Creating and Joining Channels'}</strong></h4>
|
||||
{'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
|
||||
<br/><br/>
|
||||
{'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'}
|
||||
<h4>{'Creating and Joining Channels'}</h4>
|
||||
<p>
|
||||
{'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
|
||||
</p>
|
||||
<p>
|
||||
{'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -20,6 +20,10 @@ export default class TutorialIntroScreens extends React.Component {
|
||||
|
||||
this.state = {currentScreen: 0};
|
||||
}
|
||||
componentDidMount() {
|
||||
const height = $(window).outerHeight() - 120;
|
||||
$('.tutorial-steps__container').css('height', `${height}px`);
|
||||
}
|
||||
handleNext() {
|
||||
if (this.state.currentScreen < 2) {
|
||||
this.setState({currentScreen: this.state.currentScreen + 1});
|
||||
@@ -48,35 +52,29 @@ export default class TutorialIntroScreens extends React.Component {
|
||||
createScreenOne() {
|
||||
return (
|
||||
<div>
|
||||
<h4><strong>{'Welcome to:'}</strong></h4>
|
||||
<h2><strong>{'Mattermost'}</strong></h2>
|
||||
<br/>
|
||||
{'Your team communications all in one place,'}
|
||||
<br/>
|
||||
{'instantly searchable and available anywhere.'}
|
||||
<br/><br/>
|
||||
{'Keep your team connected to help them'}
|
||||
<br/>
|
||||
{'achieve what matters most.'}
|
||||
<br/><br/>
|
||||
<span>{'[ x ][ ][ ]'}</span>
|
||||
<h3>{'Welcome to:'}</h3>
|
||||
<h1>{'Mattermost'}</h1>
|
||||
<p>{'Your team communications all in one place, instantly searchable and available anywhere.'}</p>
|
||||
<p>{'Keep your team connected to help them achieve what matters most.'}</p>
|
||||
<div className='tutorial__circles'>
|
||||
<div className='circle active'/>
|
||||
<div className='circle'/>
|
||||
<div className='circle'/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
createScreenTwo() {
|
||||
return (
|
||||
<div>
|
||||
<h4><strong>{'How Mattermost works:'}</strong></h4>
|
||||
<br/>
|
||||
{'Communication happens in public discussion channels,'}
|
||||
<br/>
|
||||
{'private groups and direct messages.'}
|
||||
<br/><br/>
|
||||
{'Everything is archived and searchable from'}
|
||||
<br/>
|
||||
{'any web-enabled laptop, tablet or phone.'}
|
||||
<br/><br/>
|
||||
<span>{'[ ][ x ][ ]'}</span>
|
||||
<h3>{'How Mattermost works:'}</h3>
|
||||
<p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
|
||||
<p>{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}</p>
|
||||
<div className='tutorial__circles'>
|
||||
<div className='circle'/>
|
||||
<div className='circle active'/>
|
||||
<div className='circle'/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -111,26 +109,26 @@ export default class TutorialIntroScreens extends React.Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4><strong>{'You’re all set'}</strong></h4>
|
||||
<br/>
|
||||
{inviteModalLink}
|
||||
{' when you’re ready.'}
|
||||
<br/><br/>
|
||||
{'Need anything, just email us at '}
|
||||
<a
|
||||
href='mailto:feedback@mattermost.com'
|
||||
target='_blank'
|
||||
>
|
||||
{'feedback@mattermost.com.'}
|
||||
</a>
|
||||
<br/><br/>
|
||||
{'Click “Next” to enter Town Square. This is the first channel'}
|
||||
<br/>
|
||||
{'teammates see when they sign up - use it for posting updates'}
|
||||
<br/>
|
||||
{'everyone needs to know.'}
|
||||
<br/><br/>
|
||||
<span>{'[ ][ ][ x ]'}</span>
|
||||
<h3>{'You’re all set'}</h3>
|
||||
<p>
|
||||
{inviteModalLink}
|
||||
{' when you’re ready.'}
|
||||
</p>
|
||||
<p>
|
||||
{'Need anything, just email us at '}
|
||||
<a
|
||||
href='mailto:feedback@mattermost.com'
|
||||
target='_blank'
|
||||
>
|
||||
{'feedback@mattermost.com.'}
|
||||
</a>
|
||||
</p>
|
||||
{'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
|
||||
<div className='tutorial__circles'>
|
||||
<div className='circle'/>
|
||||
<div className='circle'/>
|
||||
<div className='circle active'/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -138,16 +136,19 @@ export default class TutorialIntroScreens extends React.Component {
|
||||
const screen = this.createScreen();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{screen}
|
||||
<br/><br/>
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
tabIndex='1'
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
{'Next'}
|
||||
</button>
|
||||
<div className='tutorial-steps__container'>
|
||||
<div className='tutorial__content'>
|
||||
<div className='tutorial__steps'>
|
||||
{screen}
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
tabIndex='1'
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
{'Next'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -52,9 +52,19 @@ export default class TutorialTip extends React.Component {
|
||||
if (this.props.screens.length > 1) {
|
||||
for (let i = 0; i < this.props.screens.length; i++) {
|
||||
if (i === this.state.currentScreen) {
|
||||
dots.push(<span key={'dotactive' + i}>{'[ x ]'}</span>);
|
||||
dots.push(
|
||||
<div
|
||||
className='circle active'
|
||||
key={'dotactive' + i}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
dots.push(<span key={'dotinactive' + i}>{'[ ]'}</span>);
|
||||
dots.push(
|
||||
<div
|
||||
className='circle'
|
||||
key={'dotinactive' + i}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -63,7 +73,8 @@ export default class TutorialTip extends React.Component {
|
||||
<div className='tip-div'>
|
||||
<img
|
||||
className='tip-button'
|
||||
src='/static/images/next.png'
|
||||
src='/static/images/tutorialTip.gif'
|
||||
width='35'
|
||||
onClick={this.toggle}
|
||||
ref='target'
|
||||
/>
|
||||
@@ -77,24 +88,24 @@ export default class TutorialTip extends React.Component {
|
||||
>
|
||||
<div className='tip-overlay'>
|
||||
{this.props.screens[this.state.currentScreen]}
|
||||
<br/>
|
||||
{dots}
|
||||
<button
|
||||
className='btn btn-default'
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
<br/>
|
||||
<span>
|
||||
{'Seen this before? '}
|
||||
<a
|
||||
href='#'
|
||||
onClick={this.skipTutorial}
|
||||
<div className='tutorial__circles'>{dots}</div>
|
||||
<div className='text-right'>
|
||||
<button
|
||||
className='btn btn-default'
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
{'Opt out of these tips.'}
|
||||
</a>
|
||||
</span>
|
||||
{buttonText}
|
||||
</button>
|
||||
<div className='tip-opt'>
|
||||
{'Seen this before? '}
|
||||
<a
|
||||
href='#'
|
||||
onClick={this.skipTutorial}
|
||||
>
|
||||
{'Opt out of these tips.'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,71 @@
|
||||
.tip-backdrop {
|
||||
background: rgba(black, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tip-overlay {
|
||||
width: 350px;
|
||||
max-width: 90%;
|
||||
position:absolute;
|
||||
background-color:#EEE;
|
||||
box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
border:1px solid #CCC;
|
||||
border-radius:3px;
|
||||
padding:10px;
|
||||
z-index:999;
|
||||
background-color: #fff;
|
||||
@include border-radius(3px);
|
||||
padding: 20px;
|
||||
z-index: 1000;
|
||||
h4 {
|
||||
font-size: em(16px);
|
||||
font-weight: 600;
|
||||
margin: 5px 0 15px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
background: #cccccc;
|
||||
color: #fff;
|
||||
@include border-radius(3px);
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
&:hover, &:active, &:focus {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: #bbb;
|
||||
}
|
||||
}
|
||||
.tip-opt {
|
||||
font-size: 12px;
|
||||
span {
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
.tutorial__circles {
|
||||
margin: 1.5em 0px -1.7em -4px;
|
||||
.circle {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: 0 4px;
|
||||
&.active {
|
||||
background: #000;
|
||||
@include opacity(0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-button {
|
||||
height:20px;
|
||||
width:20px;
|
||||
z-index:998;
|
||||
z-index: 998;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tip-div {
|
||||
@@ -19,3 +73,48 @@
|
||||
top:0px;
|
||||
right:0px;
|
||||
}
|
||||
|
||||
.tutorial-steps__container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table;
|
||||
.tutorial__content {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 100px;
|
||||
padding: 0 40px;
|
||||
.tutorial__steps {
|
||||
max-width: 310px;
|
||||
min-height: 420px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: em(40px);
|
||||
margin: -20px 0 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: em(24px);
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tutorial__circles {
|
||||
margin: 2em 0;
|
||||
.circle {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
@include border-radius(9px);
|
||||
@include opacity(0.1);
|
||||
background: #000;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -39,6 +39,7 @@
|
||||
@import "partials/get-link";
|
||||
@import "partials/markdown";
|
||||
@import "partials/tutorial";
|
||||
@import "partials/statistics";
|
||||
|
||||
// Responsive Css
|
||||
@import "partials/responsive";
|
||||
|
||||
BIN
web/static/images/tutorialTip.gif
Normal file
BIN
web/static/images/tutorialTip.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Reference in New Issue
Block a user