packages/welcome/lib/guide-view.js
/** @babel */
/** @jsx etch.dom **/
import etch from 'etch';
export default class GuideView {
constructor(props) {
this.props = props;
this.didClickProjectButton = this.didClickProjectButton.bind(this);
this.didClickGitButton = this.didClickGitButton.bind(this);
this.didClickGitHubButton = this.didClickGitHubButton.bind(this);
this.didClickTeletypeButton = this.didClickTeletypeButton.bind(this);
this.didClickPackagesButton = this.didClickPackagesButton.bind(this);
this.didClickThemesButton = this.didClickThemesButton.bind(this);
this.didClickStylingButton = this.didClickStylingButton.bind(this);
this.didClickInitScriptButton = this.didClickInitScriptButton.bind(this);
this.didClickSnippetsButton = this.didClickSnippetsButton.bind(this);
this.didExpandOrCollapseSection = this.didExpandOrCollapseSection.bind(
this
);
etch.initialize(this);
}
update() {}
render() {
return (
<div className="welcome is-guide">
<div className="welcome-container">
<section className="welcome-panel">
<h1 className="welcome-title">Get to know Atom!</h1>
<details
className="welcome-card"
{...this.getSectionProps('project')}
>
<summary className="welcome-summary icon icon-repo">
Open a <span className="welcome-highlight">Project</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/project.svg"
/>
</p>
<p>
In Atom you can open individual files or a whole folder as a
project. Opening a folder will add a tree view to the editor
where you can browse all the files.
</p>
<p>
<button
ref="projectButton"
onclick={this.didClickProjectButton}
className="btn btn-primary"
>
Open a Project
</button>
</p>
<p className="welcome-note">
<strong>Next time:</strong> You can also open projects from
the menu, keyboard shortcut or by dragging a folder onto the
Atom dock icon.
</p>
</div>
</details>
<details className="welcome-card" {...this.getSectionProps('git')}>
<summary className="welcome-summary icon icon-mark-github">
Version control with{' '}
<span class="welcome-highlight">Git and GitHub</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/package.svg"
/>
</p>
<p>
Track changes to your code as you work. Branch, commit, push,
and pull without leaving the comfort of your editor.
Collaborate with other developers on GitHub.
</p>
<p>
<button
onclick={this.didClickGitButton}
className="btn btn-primary inline-block"
>
Open the Git panel
</button>
<button
onclick={this.didClickGitHubButton}
className="btn btn-primary inline-block"
>
Open the GitHub panel
</button>
</p>
<p className="welcome-note">
<strong>Next time:</strong> You can toggle the Git tab by
clicking on the
<span className="icon icon-diff" /> button in your status bar.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('teletype')}
>
<summary className="welcome-summary icon icon-radio-tower">
Collaborate in real time with{' '}
<span class="welcome-highlight">Teletype</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/code.svg"
/>
</p>
<p>
Share your workspace with team members and collaborate on code
in real time.
</p>
<p>
<button
onclick={this.didClickTeletypeButton}
className="btn btn-primary inline-block"
>
Install Teletype for Atom
</button>
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('packages')}
>
<summary className="welcome-summary icon icon-package">
Install a <span className="welcome-highlight">Package</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/package.svg"
/>
</p>
<p>
One of the best things about Atom is the package ecosystem.
Installing packages adds new features and functionality you
can use to make the editor suit your needs. Let's install one.
</p>
<p>
<button
ref="packagesButton"
onclick={this.didClickPackagesButton}
className="btn btn-primary"
>
Open Installer
</button>
</p>
<p className="welcome-note">
<strong>Next time:</strong> You can install new packages from
the settings.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('themes')}
>
<summary className="welcome-summary icon icon-paintcan">
Choose a <span class="welcome-highlight">Theme</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/theme.svg"
/>
</p>
<p>Atom comes with preinstalled themes. Let's try a few.</p>
<p>
<button
ref="themesButton"
onclick={this.didClickThemesButton}
className="btn btn-primary"
>
Open the theme picker
</button>
</p>
<p>
You can also install themes created by the Atom community. To
install new themes, click on "+ Install" and switch the toggle
to "themes".
</p>
<p className="welcome-note">
<strong>Next time:</strong> You can switch themes from the
settings.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('styling')}
>
<summary className="welcome-summary icon icon-paintcan">
Customize the <span class="welcome-highlight">Styling</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/code.svg"
/>
</p>
<p>
You can customize almost anything by adding your own CSS/LESS.
</p>
<p>
<button
ref="stylingButton"
onclick={this.didClickStylingButton}
className="btn btn-primary"
>
Open your Stylesheet
</button>
</p>
<p>Now uncomment some of the examples or try your own</p>
<p className="welcome-note">
<strong>Next time:</strong> You can open your stylesheet from
Menu {this.getApplicationMenuName()}.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('init-script')}
>
<summary className="welcome-summary icon icon-code">
Hack on the <span class="welcome-highlight">Init Script</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/code.svg"
/>
</p>
<p>
The init script is a bit of JavaScript or CoffeeScript run at
startup. You can use it to quickly change the behaviour of
Atom.
</p>
<p>
<button
ref="initScriptButton"
onclick={this.didClickInitScriptButton}
className="btn btn-primary"
>
Open your Init Script
</button>
</p>
<p>Uncomment some of the examples or try out your own.</p>
<p className="welcome-note">
<strong>Next time:</strong> You can open your init script from
Menu > {this.getApplicationMenuName()}.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('snippets')}
>
<summary className="welcome-summary icon icon-code">
Add a <span class="welcome-highlight">Snippet</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/code.svg"
/>
</p>
<p>
Atom snippets allow you to enter a simple prefix in the editor
and hit tab to expand the prefix into a larger code block with
templated values.
</p>
<p>
<button
ref="snippetsButton"
onclick={this.didClickSnippetsButton}
className="btn btn-primary"
>
Open your Snippets
</button>
</p>
<p>
In your snippets file, type <code>snip</code> then hit{' '}
<code>tab</code>. The <code>snip</code> snippet will expand to
create a snippet!
</p>
<p className="welcome-note">
<strong>Next time:</strong> You can open your snippets in Menu
> {this.getApplicationMenuName()}.
</p>
</div>
</details>
<details
className="welcome-card"
{...this.getSectionProps('shortcuts')}
>
<summary className="welcome-summary icon icon-keyboard">
Learn <span class="welcome-highlight">Keyboard Shortcuts</span>
</summary>
<div className="welcome-detail">
<p>
<img
className="welcome-img"
src="atom://welcome/assets/shortcut.svg"
/>
</p>
<p>
If you only remember one keyboard shortcut make it{' '}
<kbd className="welcome-key">
{this.getCommandPaletteKeyBinding()}
</kbd>
. This keystroke toggles the command palette, which lists
every Atom command. It's a good way to learn more shortcuts.
Yes, you can try it now!
</p>
<p>
If you want to use these guides again use the command palette{' '}
<kbd className="welcome-key">
{this.getCommandPaletteKeyBinding()}
</kbd>{' '}
and search for <span className="text-highlight">Welcome</span>
.
</p>
</div>
</details>
</section>
</div>
</div>
);
}
getSectionProps(sectionName) {
const props = {
dataset: { section: sectionName },
onclick: this.didExpandOrCollapseSection
};
if (
this.props.openSections &&
this.props.openSections.indexOf(sectionName) !== -1
) {
props.open = true;
}
return props;
}
getCommandPaletteKeyBinding() {
if (process.platform === 'darwin') {
return 'cmd-shift-p';
} else {
return 'ctrl-shift-p';
}
}
getApplicationMenuName() {
if (process.platform === 'darwin') {
return 'Atom';
} else if (process.platform === 'linux') {
return 'Edit';
} else {
return 'File';
}
}
serialize() {
return {
deserializer: this.constructor.name,
openSections: this.getOpenSections(),
uri: this.getURI()
};
}
getURI() {
return this.props.uri;
}
getTitle() {
return 'Welcome Guide';
}
isEqual(other) {
return other instanceof GuideView;
}
getOpenSections() {
return Array.from(this.element.querySelectorAll('details[open]')).map(
sectionElement => sectionElement.dataset.section
);
}
didClickProjectButton() {
this.props.reporterProxy.sendEvent('clicked-project-cta');
atom.commands.dispatch(
atom.views.getView(atom.workspace),
'application:open'
);
}
didClickGitButton() {
this.props.reporterProxy.sendEvent('clicked-git-cta');
atom.commands.dispatch(
atom.views.getView(atom.workspace),
'github:toggle-git-tab'
);
}
didClickGitHubButton() {
this.props.reporterProxy.sendEvent('clicked-github-cta');
atom.commands.dispatch(
atom.views.getView(atom.workspace),
'github:toggle-github-tab'
);
}
didClickPackagesButton() {
this.props.reporterProxy.sendEvent('clicked-packages-cta');
atom.workspace.open('atom://config/install', { split: 'left' });
}
didClickThemesButton() {
this.props.reporterProxy.sendEvent('clicked-themes-cta');
atom.workspace.open('atom://config/themes', { split: 'left' });
}
didClickStylingButton() {
this.props.reporterProxy.sendEvent('clicked-styling-cta');
atom.workspace.open('atom://.atom/stylesheet', { split: 'left' });
}
didClickInitScriptButton() {
this.props.reporterProxy.sendEvent('clicked-init-script-cta');
atom.workspace.open('atom://.atom/init-script', { split: 'left' });
}
didClickSnippetsButton() {
this.props.reporterProxy.sendEvent('clicked-snippets-cta');
atom.workspace.open('atom://.atom/snippets', { split: 'left' });
}
didClickTeletypeButton() {
this.props.reporterProxy.sendEvent('clicked-teletype-cta');
atom.workspace.open('atom://config/packages/teletype', { split: 'left' });
}
didExpandOrCollapseSection(event) {
const sectionName = event.currentTarget.closest('details').dataset.section;
const action = event.currentTarget.hasAttribute('open')
? 'collapse'
: 'expand';
this.props.reporterProxy.sendEvent(`${action}-${sectionName}-section`);
}
}