Skip to content

Updated :play intro with new screenshots and text. #1283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shkirando merged 5 commits into from
Feb 28, 2021
Merged

Updated :play intro with new screenshots and text. #1283

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1369303
Updated :play intro with new screenshots and text.
shkirando Feb 22, 2021
4880e68
Comments fixed
shkirando Feb 23, 2021
e628d60
removed old heavy gif, changed play-command.spec.ts
shkirando Feb 24, 2021
3830b09
added info about F1, fixed e2e test issue
shkirando Feb 25, 2021
c62aac3
Update play-command.spec.ts
shkirando Feb 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 31 additions & 20 deletions src/browser/documentation/guides/intro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@
import React from 'react'
import Carousel from '../../modules/Carousel/Carousel'
import Slide from '../../modules/Carousel/Slide'
import {
FULLSCREEN_SHORTCUT,
FOCUS_SHORTCUT,
printShortcut,
isMac
} from 'browser/modules/App/keyboardShortcuts'

const title = 'Intro'
const slides = [
Expand Down Expand Up @@ -59,35 +65,40 @@ const slides = [
commands. Browser commands begin with <code>:</code>, for example{' '}
<code>:help</code>
</p>
<table>
<tbody>
<tr>
<td className="padding5">Execute current command</td>
<td>
{' '}
<b>Cmd-Return</b>
<td>Execute current command</td>
<td className="padding5">
<div className="key code">
{isMac ? '<Cmd-Return>' : '<Ctrl-Return>'}
</div>
</td>
</tr>
<tr>
<td className="padding5">Previous command in history</td>
<td>
<b>Cmd-Up-Arrow</b>
<td>Previous command in history</td>
<td className="padding5">
<div className="key code">
{isMac ? '<Cmd-Up-Arrow>' : '<Ctrl-Up-Arrow>'}
</div>
</td>
</tr>
<tr>
<td className="padding5">Next command in history</td>
<td>
<b>Cmd-Down-Arrow</b>
<td>Next command in history</td>
<td className="padding5">
<div className="key code">
{isMac ? '<Cmd-Down-Arrow>' : '<Ctrl-Down-Arrow>'}
</div>
</td>
</tr>
</table>
</tbody>
<p></p>
<p>
You can view the complete list of keybinding anytime by running{' '}
<code>:help keys</code>
</p>
</div>
<div className="col-sm-4">
<img src="./assets/images/Keystrokes.gif" className="img-responsive" />
<img src="./assets/images/Keystrokes2.gif" className="img-responsive" />
</div>
</Slide>,
<Slide key="s3">
Expand Down Expand Up @@ -115,9 +126,6 @@ const slides = [
You can bring up the history of the executed commands and queries by
running <code className="nobreak">:history</code> command.
</li>
<li>
Clear the stream with the <code>:clear</code> command.
</li>
</ul>
</div>
<div className="col-sm-4">
Expand All @@ -137,13 +145,16 @@ const slides = [
<p>Adjust your preferences in the Settings sidebar tab.</p>
</div>
<div className="col-sm-4">
<img src="./assets/images/ReusableFrame.gif" className="img-responsive" />
<img
src="./assets/images/ReusableFrame2.gif"
className="img-responsive"
/>
</div>
</Slide>,
<Slide key="s5">
<div className="col-sm-3">
<h3>Sidebar: Database information</h3>
<p className="lead">Databasse metadata</p>
<p className="lead">Database metadata</p>
</div>
<div className="col-sm-5">
When Neo4j is installed, it is initiated with two databases - a{' '}
Expand Down Expand Up @@ -177,7 +188,7 @@ const slides = [
</p>
</div>
<div className="col-sm-4">
<img src="./assets/images/Favorites.gif" className="img-responsive" />
<img src="./assets/images/Favorites2.gif" className="img-responsive" />
</div>
</Slide>,

Expand All @@ -191,7 +202,7 @@ const slides = [
folder can be reached through Neo4j Desktop and your hard disk.
</div>
<div className="col-sm-4">
<img src="./assets/images/ProjectFiles.gif" className="img-responsive" />
<img src="./assets/images/ProjectFiles2.gif" className="img-responsive" />
</div>
</Slide>,

Expand Down
213 changes: 167 additions & 46 deletions src/browser/documentation/help/keys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,80 +31,201 @@ const category = 'browserUiCommands'
const content = (
<>
<table className="table-condensed table-help table-help--keys">
<thead>
<tbody>
<tr>
<th>Editor action</th>
<th>Any mode</th>
<th>Single-line mode</th>
<th>Global actions</th>
<th />
<th />
</tr>
</thead>
<tbody>
<tr>
<td>Execute current command</td>
<td>Change focus to editor</td>
<td>
<div className="key code">
{isMac ? '<Cmd-Return>' : '<Ctrl-Return>'}
</div>
<div className="key code">{printShortcut(FOCUS_SHORTCUT)}</div>
</td>
</tr>
<tr>
<td>Toggle fullscreen editor</td>
<td>
<div className="key code">{'<Return>'}</div>
<div className="key code">{printShortcut(FULLSCREEN_SHORTCUT)}</div>
</td>
</tr>
<tr>
<td />
</tr>
</tbody>
</table>

<table className="table-condensed table-help table-help--keys">
<thead>
<tr>
<th title="Field #1" className="padding30">
Editor action
</th>
<th title="Field #2" className="padding30">
Windows / Linux
</th>
<th title="Field #3" className="padding30">
Mac
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Execute current command</td>
<td>Ctrl + Enter</td>
<td>Cmd + Return</td>
</tr>

<tr>
<td>Previous command in history</td>
<td>
<div className="key code">
{isMac ? '<Cmd-Up-Arrow>' : '<Ctrl-Up-Arrow>'}
</div>
</td>
<td>
<div className="key code">{'<Up-Arrow>'}</div>
</td>
<td>Ctrl + Up Arrow</td>
<td>Cmd + Up Arrow</td>
</tr>

<tr>
<td>Next command in history</td>
<td>
<div className="key code">
{isMac ? '<Cmd-Down-Arrow>' : '<Ctrl-Down-Arrow>'}
</div>
</td>
<td>
<div className="key code">{'<Down-Arrow>'}</div>
</td>
<td>Ctrl + Up Down</td>
<td>Cmd + Up Down</td>
</tr>

<tr>
<td>Switch to multi-line editing</td>
<td />
<td>
<div className="key code">{'<Shift-Return>'}</div>
</td>
<td>Search</td>
<td>Ctrl + F</td>
<td>Command + F</td>
</tr>
<tr>
<td />
<td>Increase Indent</td>
<td>Tab</td>
<td>Tab</td>
</tr>
<tr>
<th>Global actions</th>
<th />
<th />
<td>Decrease Indent</td>
<td>Shift + Tab</td>
<td>Shift + Tab</td>
</tr>
<tr>
<td>Change focus to editor</td>
<td>
<div className="key code">{printShortcut(FOCUS_SHORTCUT)}</div>
</td>
<td>Comment Out</td>
<td>Ctrl + /</td>
<td>Command + /</td>
</tr>
<tr>
<td>Toggle fullscreen editor</td>
<td>
<div className="key code">{printShortcut(FULLSCREEN_SHORTCUT)}</div>
</td>
<td>Comment In</td>
<td>Ctrl + /</td>
<td>Command + /</td>
</tr>
<tr>
<td />
<td>Undo</td>
<td>Ctrl + Z</td>
<td>Command + Z</td>
</tr>
<tr>
<td>Redo</td>
<td>Ctrl + Y</td>
<td>Shift + Command + Z or Command + Y</td>
</tr>
<tr>
<td>Increase font size</td>
<td>Ctrl + .</td>
<td>Command + .</td>
</tr>
<tr>
<td>Decrease font size</td>
<td>Ctrl + ,</td>
<td>Command + ,</td>
</tr>
<tr>
<td>Decrease Indent</td>
<td>Ctrl + [</td>
<td>Command + [</td>
</tr>
<tr>
<td>Increase Indent</td>
<td>Ctrl + ]</td>
<td>Command + ]</td>
</tr>
<tr>
<td>Move the line down</td>
<td>Alt + Down</td>
<td>Option + Down</td>
</tr>
<tr>
<td>Move the line up</td>
<td>Alt + Up</td>
<td>Option + Up</td>
</tr>
<tr>
<td>Replace</td>
<td>Ctrl + F</td>
<td>Command + Alt + F</td>
</tr>
<tr>
<td>Select all</td>
<td>Ctrl + A</td>
<td>Command + A</td>
</tr>
<tr>
<td>Select downward</td>
<td>Shift + Down</td>
<td>Shift + Down</td>
</tr>
<tr>
<td>Select right</td>
<td>Shift + Right</td>
<td>Shift + Right</td>
</tr>
<tr>
<td>Select left</td>
<td>Shift + Left</td>
<td>Shift + Left</td>
</tr>
<tr>
<td>Select upward</td>
<td>Shift + Up</td>
<td>Shift + Up</td>
</tr>
<tr>
<td>Select to the end</td>
<td>Alt + Shift + Right</td>
<td>Command + Shift + Right</td>
</tr>
<tr>
<td>Select to the start</td>
<td>Alt + Shift + Left</td>
<td>Command + Shift + Left</td>
</tr>
<tr>
<td>Align text right</td>
<td>Ctrl + Shift + Right</td>
<td>Option + Right</td>
</tr>
<tr>
<td>Align text left</td>
<td>Ctrl + Shift + Left</td>
<td>Option + Left</td>
</tr>
<tr>
<td>Add multi-cursor above</td>
<td>Ctrl + Alt + Up</td>
<td>Command + Alt + Up</td>
</tr>
<tr>
<td>Add multi-cursor below</td>
<td>Ctrl + Alt + Down</td>
<td>Command + Alt + Down</td>
</tr>
<tr>
<td>Add multi-cursor above</td>
<td>Ctrl + Alt + Shift + Up</td>
<td>Command + Alt + Shift + Up</td>
</tr>
<tr>
<td>Move multi-cursor from current line to the line below</td>
<td>Ctrl + Alt + Shift + Down</td>
<td>Command + Alt + Shift + Down</td>
</tr>
</tbody>
</table>
<div>
<div className="padding30">
<h3>Next steps </h3>
<ul>
<li>
Expand Down
Binary file added src/browser/images/Favorites2.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/browser/images/Keystrokes2.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/browser/images/ProjectFiles2.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/browser/images/ReusableFrame2.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/browser/modules/Carousel/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,5 +425,7 @@
}

}
.padding5 {padding: 5px; color:'red'}
.padding5 {padding: 5px;}
.padding30 {padding-top: 30px;}
.table-padding {padding-top: 10px;}
}