From 6666f80422feacf042f67993ec95e53157d9b3ad Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:24:42 +0000
Subject: [PATCH 01/29] Rework styling to match quickopen menu
also add icon - file icon atm ?alternatives
---
browser/src/UI/components/WildMenu.tsx | 55 +++++++++++++++-----------
1 file changed, 32 insertions(+), 23 deletions(-)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 91cd2abc9c..cc1a56f975 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,58 +1,66 @@
import * as React from "react"
import { connect } from "react-redux"
import styled, { css } from "styled-components"
+import { Icon } from "./../../UI/Icon"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
import { fadeInAndDown } from "./animations"
import { boxShadow, withProps } from "./common"
const WildMenuContainer = styled.div`
- width: 50%;
position: absolute;
- left: 25%;
- top: 10%;
- overflow: hidden;
box-sizing: border-box;
- max-height: 500px;
display: flex;
+ flex-direction: column;
align-items: center;
+ padding: 8px;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ right: 0px;
+ background-color: rgba(0, 0, 0, 0.25);
`
const WildMenuList = styled.ul`
- height: 90%;
- width: 100%;
- background-color: ${p => p.theme.background};
- ${boxShadow} animation: ${fadeInAndDown} 0.05s ease-in-out;
- color: ${p => p.theme.foreground};
+ position: relative;
+ width: 75%;
+ margin-top: 16px;
+ max-height: 500px;
+ max-width: 900px;
+ ${boxShadow};
+ animation: ${fadeInAndDown} 0.05s ease-in-out;
display: flex;
padding: 1em;
flex-direction: column;
box-sizing: border-box;
- overflow-y: scroll;
- overflow-x: hidden;
+ overflow: hidden;
+ background-color: ${p => p.theme["menu.background"]};
+ color: ${p => p.theme["menu.foreground"]};
`
-const normBg = "highlight.mode.normal.background"
-const normFg = "highlight.mode.normal.foreground"
-
const colors = css`
- background-color: ${p => p.theme[normBg]};
- color: ${p => p.theme[normFg]};
+ background-color: rgba(0, 0, 0, 0.2);
+ color: ${p => p.theme["menu.foreground"]};
`
const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
- font-size: 1.1em;
- display: inline;
+ font-size: 1.1rem;
margin: 0.2em;
- padding: 0.2em 0 0.5em 0.2em;
+ padding: 0.5em;
${p => p.selected && boxShadow};
- width: 100%;
- min-height: 1em;
+ min-height: 1rem;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
${p => p.selected && colors};
`
+const WildMenuText = styled.span`
+ margin-left: 1rem;
+`
+
interface Props {
visible: boolean
options: string[]
@@ -97,7 +105,8 @@ class WildMenu extends React.Component<Props, State> {
selected={i === current}
key={option + i}
>
- {option}
+ <span><Icon name="file-text" /></span>
+ <WildMenuText>{option}</WildMenuText>
</WildMenuItem>
))}
</WildMenuList>
From 8e5624b36716beee4f7da790a2cc888e1d7d83f6 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:43:42 +0000
Subject: [PATCH 02/29] Render wild menu into the stack layer
---
browser/src/UI/components/WildMenu.tsx | 32 ++++++++++++++++++--------
1 file changed, 22 insertions(+), 10 deletions(-)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index cc1a56f975..3738e3347d 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,7 +1,8 @@
import * as React from "react"
+import * as ReactDOM from "react-dom"
import { connect } from "react-redux"
import styled, { css } from "styled-components"
-import { Icon } from "./../../UI/Icon"
+import { Icon } from "./../../UI/Icon"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
import { fadeInAndDown } from "./animations"
@@ -25,7 +26,7 @@ const WildMenuList = styled.ul`
position: relative;
width: 75%;
margin-top: 16px;
- max-height: 500px;
+ max-height: 30em;
max-width: 900px;
${boxShadow};
animation: ${fadeInAndDown} 0.05s ease-in-out;
@@ -58,7 +59,7 @@ const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
`
const WildMenuText = styled.span`
- margin-left: 1rem;
+ margin-left: 1rem;
`
interface Props {
@@ -73,12 +74,19 @@ interface State {
}
class WildMenu extends React.Component<Props, State> {
- public state = {
- currentPage: 1,
- itemsPerPage: 10,
- }
private selectedElement: HTMLUListElement
private containerElement: HTMLUListElement
+ private stackLayer: HTMLDivElement
+
+ public constructor(props: Props) {
+ super(props)
+ this.stackLayer = document.querySelector(".stack .layer")
+
+ this.state = {
+ currentPage: 1,
+ itemsPerPage: 10,
+ }
+ }
public componentWillReceiveProps(next: Props) {
if (next.selected !== this.props.selected) {
@@ -93,7 +101,8 @@ class WildMenu extends React.Component<Props, State> {
const { currentItems, current } = this.calculateCurrentItems()
return (
- visible && (
+ visible &&
+ ReactDOM.createPortal(
<WildMenuContainer>
<WildMenuList innerRef={e => (this.containerElement = e)}>
{currentItems &&
@@ -105,12 +114,15 @@ class WildMenu extends React.Component<Props, State> {
selected={i === current}
key={option + i}
>
- <span><Icon name="file-text" /></span>
+ <span>
+ <Icon name="file-text" />
+ </span>
<WildMenuText>{option}</WildMenuText>
</WildMenuItem>
))}
</WildMenuList>
- </WildMenuContainer>
+ </WildMenuContainer>,
+ this.stackLayer,
)
)
}
From 5279e25ae74953f1cbc12f6c021fb90b958049ca Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 14:46:58 +0000
Subject: [PATCH 03/29] Reduce padding
---
browser/src/UI/components/WildMenu.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 3738e3347d..6ced3407f3 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -45,7 +45,7 @@ const colors = css`
const WildMenuItem = withProps<{ selected: boolean }>(styled.li)`
font-size: 1.1rem;
margin: 0.2em;
- padding: 0.5em;
+ padding: 0.4em;
${p => p.selected && boxShadow};
min-height: 1rem;
text-align: left;
From ebea06d86fff720ab062f049b1c17d4d28dae9a7 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 16:47:30 +0000
Subject: [PATCH 04/29] Compose wild menu with commandline
---
.../NeovimEditor/NeovimEditorReducer.ts | 11 ++-
.../Editor/NeovimEditor/NeovimEditorStore.ts | 11 ++-
.../src/Editor/NeovimEditor/NeovimSurface.tsx | 6 +-
browser/src/UI/components/CommandLine.tsx | 25 +-----
browser/src/UI/components/ExternalMenus.tsx | 50 ++++++++++++
browser/src/UI/components/WildMenu.tsx | 78 ++++++-------------
6 files changed, 98 insertions(+), 83 deletions(-)
create mode 100644 browser/src/UI/components/ExternalMenus.tsx
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index dc0ed8b51a..7658e2b45e 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -99,6 +99,7 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
return {
...s,
commandLine: {
+ visible: true,
content: a.payload.content,
position: a.payload.position,
firstchar: a.payload.firstchar,
@@ -110,7 +111,15 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
case "HIDE_COMMAND_LINE":
return {
...s,
- commandLine: null,
+ commandLine: {
+ visible: false,
+ content: null,
+ firstchar: "",
+ position: null,
+ prompt: "",
+ indent: null,
+ level: null,
+ },
}
case "SET_COMMAND_LINE_POSITION":
return {
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
index 91880f1880..cfa8a349f1 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
@@ -87,6 +87,7 @@ export interface IWildMenu {
}
export interface ICommandLine {
+ visible: boolean,
content: Array<[any, string]>,
firstchar: string,
position: number,
@@ -205,7 +206,15 @@ export const createDefaultState = (): IState => ({
errors: {},
toolTips: {},
- commandLine: null,
+ commandLine: {
+ content: null,
+ prompt: null,
+ indent: null,
+ level: null,
+ visible: false,
+ firstchar: "",
+ position: 0,
+ },
wildmenu: {
selected: null,
visible: false,
diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index bb2fedba76..7bcf9d5d20 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -11,14 +11,13 @@ import { IEvent } from "oni-types"
import { NeovimInstance, NeovimScreen } from "./../../neovim"
import { INeovimRenderer } from "./../../Renderer"
-import { CommandLine } from "./../../UI/components/CommandLine"
import { Cursor } from "./../../UI/components/Cursor"
import { CursorLine } from "./../../UI/components/CursorLine"
+import ExternalMenus from "./../../UI/components/ExternalMenus"
import { InstallHelp } from "./../../UI/components/InstallHelp"
import { TabsContainer } from "./../../UI/components/Tabs"
import { ToolTips } from "./../../UI/components/ToolTip"
import { TypingPrediction } from "./../../UI/components/TypingPredictions"
-import WildMenu from "./../../UI/components/WildMenu"
import { BufferScrollBarContainer } from "./containers/BufferScrollBarContainer"
import { DefinitionContainer } from "./containers/DefinitionContainer"
@@ -68,8 +67,7 @@ export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}>
<div className="stack layer">
<TypingPrediction typingPrediction={this.props.typingPrediction}/>
<Cursor typingPrediction={this.props.typingPrediction}/>
- <CommandLine />
- <WildMenu />
+ <ExternalMenus />
<CursorLine lineType={"line"} />
<CursorLine lineType={"column"} />
<NeovimActiveWindowContainer>
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 634650f692..40dcff3941 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -1,5 +1,4 @@
import * as React from "react"
-import { connect } from "react-redux"
import styled from "styled-components"
import { fadeInAndDown } from "./animations"
@@ -43,14 +42,14 @@ export interface ICommandLineRendererProps {
content: Array<[any, string]> | null
position: number,
firstchar: string
- // level: number
+ level?: number
}
interface State {
focused: boolean,
}
-class CommandLineRenderer extends React.PureComponent<ICommandLineRendererProps, State> {
+class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
public state = {
focused: false,
}
@@ -85,22 +84,4 @@ class CommandLineRenderer extends React.PureComponent<ICommandLineRendererProps,
}
}
-const mapStateToProps = ({ commandLine }: State.IState, props: ICommandLineRendererProps) => {
- const commandLineProps: ICommandLineRendererProps = {
- content: null,
- visible: false,
- firstchar: "",
- position: 0,
- }
-
- if (commandLine) {
- commandLineProps.visible = commandLine !== null
- commandLineProps.content = commandLine.content
- commandLineProps.firstchar = commandLine.firstchar
- commandLineProps.position = commandLine !== null ? commandLine.position : 0
- }
-
- return commandLineProps
-}
-
-export const CommandLine = connect<ICommandLineRendererProps>(mapStateToProps)(CommandLineRenderer)
+export default CommandLine
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
new file mode 100644
index 0000000000..41ab8392e2
--- /dev/null
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { connect } from "react-redux"
+import styled from "styled-components"
+import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+
+import CommandLine from "./CommandLine"
+import WildMenu from "./WildMenu"
+
+const MenuContainer = styled.div`
+ position: absolute;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ right: 0px;
+ background-color: rgba(0, 0, 0, 0.25);
+`
+
+interface Props {
+ commandLine: State.ICommandLine
+ wildmenu: State.IWildMenu
+}
+
+class ExternalMenus extends React.Component<Props> {
+ public render() {
+ const { wildmenu, commandLine } = this.props
+ const visible = commandLine.visible || wildmenu.visible
+ return (
+ visible && (
+ <MenuContainer>
+ <CommandLine {...commandLine} />
+ <WildMenu {...wildmenu} />
+ </MenuContainer>
+ )
+ )
+ }
+}
+
+const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => {
+ return {
+ commandLine,
+ wildmenu,
+ }
+}
+
+export default connect(mapStateToProps)(ExternalMenus)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 6ced3407f3..e456bfb22d 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,27 +1,10 @@
import * as React from "react"
-import * as ReactDOM from "react-dom"
-import { connect } from "react-redux"
import styled, { css } from "styled-components"
import { Icon } from "./../../UI/Icon"
-import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
import { fadeInAndDown } from "./animations"
import { boxShadow, withProps } from "./common"
-const WildMenuContainer = styled.div`
- position: absolute;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 8px;
- top: 0px;
- left: 0px;
- bottom: 0px;
- right: 0px;
- background-color: rgba(0, 0, 0, 0.25);
-`
-
const WildMenuList = styled.ul`
position: relative;
width: 75%;
@@ -74,19 +57,12 @@ interface State {
}
class WildMenu extends React.Component<Props, State> {
+ public state = {
+ currentPage: 1,
+ itemsPerPage: 10,
+ }
private selectedElement: HTMLUListElement
private containerElement: HTMLUListElement
- private stackLayer: HTMLDivElement
-
- public constructor(props: Props) {
- super(props)
- this.stackLayer = document.querySelector(".stack .layer")
-
- this.state = {
- currentPage: 1,
- itemsPerPage: 10,
- }
- }
public componentWillReceiveProps(next: Props) {
if (next.selected !== this.props.selected) {
@@ -101,28 +77,24 @@ class WildMenu extends React.Component<Props, State> {
const { currentItems, current } = this.calculateCurrentItems()
return (
- visible &&
- ReactDOM.createPortal(
- <WildMenuContainer>
- <WildMenuList innerRef={e => (this.containerElement = e)}>
- {currentItems &&
- currentItems.map((option, i) => (
- <WildMenuItem
- innerRef={e =>
- i === current - 1 ? (this.selectedElement = e) : null
- }
- selected={i === current}
- key={option + i}
- >
- <span>
- <Icon name="file-text" />
- </span>
- <WildMenuText>{option}</WildMenuText>
- </WildMenuItem>
- ))}
- </WildMenuList>
- </WildMenuContainer>,
- this.stackLayer,
+ visible && (
+ <WildMenuList innerRef={e => (this.containerElement = e)}>
+ {currentItems &&
+ currentItems.map((option, i) => (
+ <WildMenuItem
+ innerRef={e =>
+ i === current - 1 ? (this.selectedElement = e) : null
+ }
+ selected={i === current}
+ key={option + i}
+ >
+ <span>
+ <Icon name="file-text" />
+ </span>
+ <WildMenuText>{option}</WildMenuText>
+ </WildMenuItem>
+ ))}
+ </WildMenuList>
)
)
}
@@ -138,8 +110,4 @@ class WildMenu extends React.Component<Props, State> {
}
}
-const mapStateToProps = ({ wildmenu: { options, visible, selected } }: State.IState) => {
- return { options, visible, selected }
-}
-
-export default connect(mapStateToProps)(WildMenu)
+export default WildMenu
From 686f823541ab20f2468e342dffe05ac6b2706049 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 16:58:59 +0000
Subject: [PATCH 05/29] Configure wild menu and commandline
Components now render in the same layer and
can be positioned similarly if both present
or interchangeably if one options is disabled
---
browser/src/UI/components/CommandLine.tsx | 28 ++++++---------------
browser/src/UI/components/ExternalMenus.tsx | 21 ++++++++++------
2 files changed, 21 insertions(+), 28 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 40dcff3941..07c1f1ec9c 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -4,18 +4,6 @@ import { fadeInAndDown } from "./animations"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
-const CommandLineBackground = styled.div`
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0px;
- right: 0px;
- background-color: rgba(0, 0, 0, 0.25);
- display: flex;
- flex-direction: column;
- align-items: center;
-`
-
const CommandLineBox = styled.div`
position: relative;
margin-top: 16px;
@@ -38,15 +26,15 @@ const CommandLineInput = styled.input`
`
export interface ICommandLineRendererProps {
- visible: boolean,
+ visible: boolean
content: Array<[any, string]> | null
- position: number,
+ position: number
firstchar: string
level?: number
}
interface State {
- focused: boolean,
+ focused: boolean
}
class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
@@ -65,13 +53,13 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
}
- public render(): null | JSX.Element {
+ public render(): null | JSX.Element {
if (!this.state.focused && this.props.visible && this._inputElement) {
- this._inputElement.focus()
+ this._inputElement.focus()
}
- return this.props.visible && (
- <CommandLineBackground>
+ return (
+ this.props.visible && (
<CommandLineBox>
<CommandLineInput
onChange={this.handleChange}
@@ -79,7 +67,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
value={this.props.firstchar + this.props.content[0][1]}
/>
</CommandLineBox>
- </CommandLineBackground>
+ )
)
}
}
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 41ab8392e2..9f7d8c89d2 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -1,4 +1,5 @@
import * as React from "react"
+import * as ReactDOM from "react-dom"
import { connect } from "react-redux"
import styled from "styled-components"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
@@ -26,25 +27,29 @@ interface Props {
}
class ExternalMenus extends React.Component<Props> {
+ constructor(props: Props, private stackLayer: HTMLDivElement) {
+ super(props)
+ this.stackLayer = document.querySelector(".stack .layer")
+ }
+
public render() {
const { wildmenu, commandLine } = this.props
const visible = commandLine.visible || wildmenu.visible
return (
- visible && (
+ visible && ReactDOM.createPortal(
<MenuContainer>
<CommandLine {...commandLine} />
<WildMenu {...wildmenu} />
- </MenuContainer>
+ </MenuContainer>,
+ this.stackLayer,
)
)
}
}
-const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => {
- return {
- commandLine,
- wildmenu,
- }
-}
+const mapStateToProps = ({ wildmenu, commandLine }: State.IState) => ({
+ commandLine,
+ wildmenu,
+})
export default connect(mapStateToProps)(ExternalMenus)
From a20d048dc55a0a4f423a7d9842c27cd2f60a6642 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 17:23:26 +0000
Subject: [PATCH 06/29] Render components separately inside of common
container
---
.../src/Editor/NeovimEditor/NeovimSurface.tsx | 7 ++++++-
browser/src/UI/components/CommandLine.tsx | 20 ++++++++++++++++---
browser/src/UI/components/ExternalMenus.tsx | 6 +-----
browser/src/UI/components/WildMenu.tsx | 9 ++++++++-
4 files changed, 32 insertions(+), 10 deletions(-)
diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index 7bcf9d5d20..c2165b4b00 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -11,6 +11,7 @@ import { IEvent } from "oni-types"
import { NeovimInstance, NeovimScreen } from "./../../neovim"
import { INeovimRenderer } from "./../../Renderer"
+import CommandLine from "./../../UI/components/CommandLine"
import { Cursor } from "./../../UI/components/Cursor"
import { CursorLine } from "./../../UI/components/CursorLine"
import ExternalMenus from "./../../UI/components/ExternalMenus"
@@ -18,6 +19,7 @@ import { InstallHelp } from "./../../UI/components/InstallHelp"
import { TabsContainer } from "./../../UI/components/Tabs"
import { ToolTips } from "./../../UI/components/ToolTip"
import { TypingPrediction } from "./../../UI/components/TypingPredictions"
+import WildMenu from "./../../UI/components/WildMenu"
import { BufferScrollBarContainer } from "./containers/BufferScrollBarContainer"
import { DefinitionContainer } from "./containers/DefinitionContainer"
@@ -67,7 +69,10 @@ export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}>
<div className="stack layer">
<TypingPrediction typingPrediction={this.props.typingPrediction}/>
<Cursor typingPrediction={this.props.typingPrediction}/>
- <ExternalMenus />
+ <ExternalMenus>
+ <CommandLine />
+ <WildMenu />
+ </ExternalMenus>
<CursorLine lineType={"line"} />
<CursorLine lineType={"column"} />
<NeovimActiveWindowContainer>
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 07c1f1ec9c..32e64fbb0b 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -1,6 +1,9 @@
import * as React from "react"
+import { connect } from "react-redux"
import styled from "styled-components"
+
import { fadeInAndDown } from "./animations"
+import { boxShadow } from "./common"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
@@ -10,9 +13,10 @@ const CommandLineBox = styled.div`
padding: 8px;
width: 75%;
max-width: 900px;
- background-color: ${p => p.theme.background};
- box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ background-color: ${p => p.theme["menu.background"]};
+ ${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
+ box-sizing: border-box;
`
const CommandLineInput = styled.input`
border: 0px;
@@ -72,4 +76,14 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
}
-export default CommandLine
+const mapStateToProps = ({
+ commandLine: { visible, position, content, firstchar, level } }: State.IState,
+) => ({
+ visible,
+ content,
+ firstchar,
+ position,
+ level,
+})
+
+export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 9f7d8c89d2..b44ccf652f 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -4,9 +4,6 @@ import { connect } from "react-redux"
import styled from "styled-components"
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
-import CommandLine from "./CommandLine"
-import WildMenu from "./WildMenu"
-
const MenuContainer = styled.div`
position: absolute;
box-sizing: border-box;
@@ -38,8 +35,7 @@ class ExternalMenus extends React.Component<Props> {
return (
visible && ReactDOM.createPortal(
<MenuContainer>
- <CommandLine {...commandLine} />
- <WildMenu {...wildmenu} />
+ {this.props.children}
</MenuContainer>,
this.stackLayer,
)
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index e456bfb22d..57f780b780 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -1,10 +1,13 @@
import * as React from "react"
+import { connect } from "react-redux"
import styled, { css } from "styled-components"
import { Icon } from "./../../UI/Icon"
import { fadeInAndDown } from "./animations"
import { boxShadow, withProps } from "./common"
+import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+
const WildMenuList = styled.ul`
position: relative;
width: 75%;
@@ -110,4 +113,8 @@ class WildMenu extends React.Component<Props, State> {
}
}
-export default WildMenu
+const mapStateToProps = ({ wildmenu: { options, visible, selected } }: State.IState) => {
+ return { options, visible, selected }
+}
+
+export default connect(mapStateToProps)(WildMenu)
From 132e7f49141e2449436e17e800a7dc8060938e9e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 17:29:52 +0000
Subject: [PATCH 07/29] Attempt to manually place external menus not working
---
.../src/Editor/NeovimEditor/NeovimSurface.tsx | 90 ++++++++++---------
browser/src/UI/components/WildMenu.tsx | 3 +-
2 files changed, 49 insertions(+), 44 deletions(-)
diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index c2165b4b00..5ac9a62c52 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -52,50 +52,56 @@ export interface INeovimSurfaceProps {
export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}> {
public render(): JSX.Element {
- return <div className="container vertical full">
- <div className="container fixed">
- <TabsContainer
- onBufferSelect={this.props.onBufferSelect}
- onBufferClose={this.props.onBufferClose}
- onTabClose={this.props.onTabClose}
- onTabSelect={this.props.onTabSelect}/>
- </div>
- <div className="container full">
- <div className="stack">
- <NeovimRenderer renderer={this.props.renderer}
- neovimInstance={this.props.neovimInstance}
- screen={this.props.screen} />
+ return (
+ <div className="container vertical full">
+ <div className="container fixed">
+ <TabsContainer
+ onBufferSelect={this.props.onBufferSelect}
+ onBufferClose={this.props.onBufferClose}
+ onTabClose={this.props.onTabClose}
+ onTabSelect={this.props.onTabSelect}
+ />
</div>
- <div className="stack layer">
- <TypingPrediction typingPrediction={this.props.typingPrediction}/>
- <Cursor typingPrediction={this.props.typingPrediction}/>
- <ExternalMenus>
- <CommandLine />
- <WildMenu />
- </ExternalMenus>
- <CursorLine lineType={"line"} />
- <CursorLine lineType={"column"} />
- <NeovimActiveWindowContainer>
- <DefinitionContainer />
- <ErrorsContainer />
- <BufferScrollBarContainer />
- </NeovimActiveWindowContainer>
- </div>
- <NeovimInput
- onActivate={this.props.onActivate}
- typingPrediction={this.props.typingPrediction}
- neovimInstance={this.props.neovimInstance}
- screen={this.props.screen}
- onBounceStart={this.props.onBounceStart}
- onBounceEnd={this.props.onBounceEnd}
- onImeStart={this.props.onImeStart}
- onImeEnd={this.props.onImeEnd}
- onKeyDown={this.props.onKeyDown}/>
- <div className="stack layer">
- <ToolTips />
+ <div className="container full">
+ <div className="stack">
+ <NeovimRenderer
+ renderer={this.props.renderer}
+ neovimInstance={this.props.neovimInstance}
+ screen={this.props.screen}
+ />
+ </div>
+ <div className="stack layer">
+ <ExternalMenus>
+ <CommandLine />
+ <WildMenu />
+ </ExternalMenus>
+ <TypingPrediction typingPrediction={this.props.typingPrediction} />
+ <Cursor typingPrediction={this.props.typingPrediction} />
+ <CursorLine lineType={"line"} />
+ <CursorLine lineType={"column"} />
+ <NeovimActiveWindowContainer>
+ <DefinitionContainer />
+ <ErrorsContainer />
+ <BufferScrollBarContainer />
+ </NeovimActiveWindowContainer>
+ </div>
+ <NeovimInput
+ onActivate={this.props.onActivate}
+ typingPrediction={this.props.typingPrediction}
+ neovimInstance={this.props.neovimInstance}
+ screen={this.props.screen}
+ onBounceStart={this.props.onBounceStart}
+ onBounceEnd={this.props.onBounceEnd}
+ onImeStart={this.props.onImeStart}
+ onImeEnd={this.props.onImeEnd}
+ onKeyDown={this.props.onKeyDown}
+ />
+ <div className="stack layer">
+ <ToolTips />
+ </div>
+ <InstallHelp />
</div>
- <InstallHelp />
</div>
- </div>
+ )
}
}
diff --git a/browser/src/UI/components/WildMenu.tsx b/browser/src/UI/components/WildMenu.tsx
index 57f780b780..20abe98039 100644
--- a/browser/src/UI/components/WildMenu.tsx
+++ b/browser/src/UI/components/WildMenu.tsx
@@ -11,10 +11,8 @@ import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
const WildMenuList = styled.ul`
position: relative;
width: 75%;
- margin-top: 16px;
max-height: 30em;
max-width: 900px;
- ${boxShadow};
animation: ${fadeInAndDown} 0.05s ease-in-out;
display: flex;
padding: 1em;
@@ -23,6 +21,7 @@ const WildMenuList = styled.ul`
overflow: hidden;
background-color: ${p => p.theme["menu.background"]};
color: ${p => p.theme["menu.foreground"]};
+ ${boxShadow};
`
const colors = css`
background-color: rgba(0, 0, 0, 0.2);
From 343ad5b1b7fae747adc238f79ae0fd5c37086bee Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 18:10:12 +0000
Subject: [PATCH 08/29] add space to constructor
---
browser/src/UI/components/ExternalMenus.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index b44ccf652f..2ae9d0d866 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -26,6 +26,7 @@ interface Props {
class ExternalMenus extends React.Component<Props> {
constructor(props: Props, private stackLayer: HTMLDivElement) {
super(props)
+
this.stackLayer = document.querySelector(".stack .layer")
}
From 8f00c2a94a32777bf76b50cda5d1f209325cdf5e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sat, 23 Dec 2017 21:40:19 +0000
Subject: [PATCH 09/29] Add timeout to prevent flickering of cmdline
Also only render overlay if both elements present
---
.../NeovimEditor/NeovimEditorReducer.ts | 41 +++++++++++--------
.../Editor/NeovimEditor/NeovimEditorStore.ts | 2 +-
browser/src/UI/components/CommandLine.tsx | 31 ++++++++++----
browser/src/UI/components/ExternalMenus.tsx | 12 ++++--
4 files changed, 57 insertions(+), 29 deletions(-)
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index 7658e2b45e..8e14c2a275 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -29,7 +29,7 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
return {
...s,
colors: a.payload.colors,
- }
+ }
case "SET_NEOVIM_ERROR":
return { ...s,
neovimError: a.payload.neovimError }
@@ -55,20 +55,25 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
cursorCharacter: a.payload.cursorCharacter,
cursorPixelWidth: a.payload.cursorPixelWidth }
case "SET_IME_ACTIVE":
- return { ...s,
- imeActive: a.payload.imeActive }
+ return {
+ ...s,
+ imeActive: a.payload.imeActive,
+ }
case "SET_FONT":
- return { ...s,
- fontFamily: a.payload.fontFamily,
- fontSize: a.payload.fontSize }
+ return {
+ ...s,
+ fontFamily: a.payload.fontFamily,
+ fontSize: a.payload.fontSize,
+ }
case "SET_MODE":
return { ...s, ...{ mode: a.payload.mode } }
case "SET_CONFIGURATION_VALUE":
const obj: Partial<IConfigurationValues> = {}
obj[a.payload.key] = a.payload.value
const newConfig = {...s.configuration, ...obj}
- return {...s,
- configuration: newConfig,
+ return {
+ ...s,
+ configuration: newConfig,
}
case "SHOW_WILDMENU":
return {
@@ -96,11 +101,13 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
},
}
case "SHOW_COMMAND_LINE":
+ // Array<[any, string]>
+ const [[, content]] = a.payload.content
return {
...s,
commandLine: {
+ content,
visible: true,
- content: a.payload.content,
position: a.payload.position,
firstchar: a.payload.firstchar,
prompt: a.payload.prompt,
@@ -127,13 +134,15 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
commandLine : {...s.commandLine, position: a.payload.position},
}
default:
- return {...s,
- buffers: buffersReducer(s.buffers, a),
- definition: definitionReducer(s.definition, a),
- tabState: tabStateReducer(s.tabState, a),
- errors: errorsReducer(s.errors, a),
- toolTips: toolTipsReducer(s.toolTips, a),
- windowState: windowStateReducer(s.windowState, a)}
+ return {
+ ...s,
+ buffers: buffersReducer(s.buffers, a),
+ definition: definitionReducer(s.definition, a),
+ tabState: tabStateReducer(s.tabState, a),
+ errors: errorsReducer(s.errors, a),
+ toolTips: toolTipsReducer(s.toolTips, a),
+ windowState: windowStateReducer(s.windowState, a),
+ }
}
}
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
index cfa8a349f1..fd9109eb88 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorStore.ts
@@ -88,7 +88,7 @@ export interface IWildMenu {
export interface ICommandLine {
visible: boolean,
- content: Array<[any, string]>,
+ content: string,
firstchar: string,
position: number,
prompt: string,
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 32e64fbb0b..0c629a2d95 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -31,7 +31,7 @@ const CommandLineInput = styled.input`
export interface ICommandLineRendererProps {
visible: boolean
- content: Array<[any, string]> | null
+ content: string
position: number
firstchar: string
level?: number
@@ -39,16 +39,21 @@ export interface ICommandLineRendererProps {
interface State {
focused: boolean
+ waiting: boolean
}
class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
public state = {
focused: false,
+ waiting: true,
}
+ private timer: any
private _inputElement: HTMLInputElement
- public handleChange(e: React.ChangeEvent<HTMLInputElement>) {
- // UI.Actions.setCommandLinePosition(1, 1)
+ public componentDidMount() {
+ this.timer = setTimeout(() => {
+ this.setState({ waiting: false })
+ }, 200)
}
public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
@@ -57,28 +62,38 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
}
+ public componentWillUnmount() {
+ clearTimeout(this.timer)
+ }
+
public render(): null | JSX.Element {
- if (!this.state.focused && this.props.visible && this._inputElement) {
+ const { visible } = this.props
+ const { focused, waiting } = this.state
+ if (!focused && visible && this._inputElement) {
this._inputElement.focus()
}
return (
- this.props.visible && (
+ !waiting &&
+ visible && (
<CommandLineBox>
<CommandLineInput
onChange={this.handleChange}
innerRef={e => (this._inputElement = e)}
- value={this.props.firstchar + this.props.content[0][1]}
+ value={this.props.firstchar + this.props.content}
/>
</CommandLineBox>
)
)
}
+ private handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+ // UI.Actions.setCommandLinePosition(1, 1)
+ }
}
const mapStateToProps = ({
- commandLine: { visible, position, content, firstchar, level } }: State.IState,
-) => ({
+ commandLine: { visible, position, content, firstchar, level },
+}: State.IState) => ({
visible,
content,
firstchar,
diff --git a/browser/src/UI/components/ExternalMenus.tsx b/browser/src/UI/components/ExternalMenus.tsx
index 2ae9d0d866..35bdc25c9d 100644
--- a/browser/src/UI/components/ExternalMenus.tsx
+++ b/browser/src/UI/components/ExternalMenus.tsx
@@ -2,9 +2,11 @@ import * as React from "react"
import * as ReactDOM from "react-dom"
import { connect } from "react-redux"
import styled from "styled-components"
+
import * as State from "./../../Editor/NeovimEditor/NeovimEditorStore"
+import { withProps } from "./common"
-const MenuContainer = styled.div`
+const MenuContainer = withProps<{ loaded: boolean }>(styled.div)`
position: absolute;
box-sizing: border-box;
display: flex;
@@ -15,7 +17,8 @@ const MenuContainer = styled.div`
left: 0px;
bottom: 0px;
right: 0px;
- background-color: rgba(0, 0, 0, 0.25);
+ ${p => p.loaded && `background-color: rgba(0, 0, 0, 0.25)`};
+ transition: background-color 0.2s ease-in;
`
interface Props {
@@ -24,7 +27,8 @@ interface Props {
}
class ExternalMenus extends React.Component<Props> {
- constructor(props: Props, private stackLayer: HTMLDivElement) {
+
+ public constructor(props: Props, private stackLayer: HTMLDivElement) {
super(props)
this.stackLayer = document.querySelector(".stack .layer")
@@ -35,7 +39,7 @@ class ExternalMenus extends React.Component<Props> {
const visible = commandLine.visible || wildmenu.visible
return (
visible && ReactDOM.createPortal(
- <MenuContainer>
+ <MenuContainer loaded={commandLine.visible && wildmenu.visible}>
{this.props.children}
</MenuContainer>,
this.stackLayer,
From d22090f061b636ce6215b058c1392e99a6c841bb Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 21:01:58 +0000
Subject: [PATCH 10/29] revert changes to neovim surface
---
.../src/Editor/NeovimEditor/NeovimSurface.tsx | 90 +++++++++----------
1 file changed, 42 insertions(+), 48 deletions(-)
diff --git a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
index 5ac9a62c52..5e29d406f8 100644
--- a/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimSurface.tsx
@@ -52,56 +52,50 @@ export interface INeovimSurfaceProps {
export class NeovimSurface extends React.PureComponent<INeovimSurfaceProps, {}> {
public render(): JSX.Element {
- return (
- <div className="container vertical full">
- <div className="container fixed">
- <TabsContainer
- onBufferSelect={this.props.onBufferSelect}
- onBufferClose={this.props.onBufferClose}
- onTabClose={this.props.onTabClose}
- onTabSelect={this.props.onTabSelect}
- />
- </div>
- <div className="container full">
- <div className="stack">
- <NeovimRenderer
- renderer={this.props.renderer}
- neovimInstance={this.props.neovimInstance}
- screen={this.props.screen}
- />
- </div>
- <div className="stack layer">
- <ExternalMenus>
- <CommandLine />
- <WildMenu />
- </ExternalMenus>
- <TypingPrediction typingPrediction={this.props.typingPrediction} />
- <Cursor typingPrediction={this.props.typingPrediction} />
- <CursorLine lineType={"line"} />
- <CursorLine lineType={"column"} />
- <NeovimActiveWindowContainer>
- <DefinitionContainer />
- <ErrorsContainer />
- <BufferScrollBarContainer />
- </NeovimActiveWindowContainer>
- </div>
- <NeovimInput
- onActivate={this.props.onActivate}
- typingPrediction={this.props.typingPrediction}
+ return <div className="container vertical full">
+ <div className="container fixed">
+ <TabsContainer
+ onBufferSelect={this.props.onBufferSelect}
+ onBufferClose={this.props.onBufferClose}
+ onTabClose={this.props.onTabClose}
+ onTabSelect={this.props.onTabSelect}/>
+ </div>
+ <div className="container full">
+ <ExternalMenus>
+ <CommandLine />
+ <WildMenu />
+ </ExternalMenus>
+ <div className="stack">
+ <NeovimRenderer renderer={this.props.renderer}
neovimInstance={this.props.neovimInstance}
- screen={this.props.screen}
- onBounceStart={this.props.onBounceStart}
- onBounceEnd={this.props.onBounceEnd}
- onImeStart={this.props.onImeStart}
- onImeEnd={this.props.onImeEnd}
- onKeyDown={this.props.onKeyDown}
- />
- <div className="stack layer">
- <ToolTips />
- </div>
- <InstallHelp />
+ screen={this.props.screen} />
+ </div>
+ <div className="stack layer">
+ <TypingPrediction typingPrediction={this.props.typingPrediction}/>
+ <Cursor typingPrediction={this.props.typingPrediction}/>
+ <CursorLine lineType={"line"} />
+ <CursorLine lineType={"column"} />
+ <NeovimActiveWindowContainer>
+ <DefinitionContainer />
+ <ErrorsContainer />
+ <BufferScrollBarContainer />
+ </NeovimActiveWindowContainer>
+ </div>
+ <NeovimInput
+ onActivate={this.props.onActivate}
+ typingPrediction={this.props.typingPrediction}
+ neovimInstance={this.props.neovimInstance}
+ screen={this.props.screen}
+ onBounceStart={this.props.onBounceStart}
+ onBounceEnd={this.props.onBounceEnd}
+ onImeStart={this.props.onImeStart}
+ onImeEnd={this.props.onImeEnd}
+ onKeyDown={this.props.onKeyDown}/>
+ <div className="stack layer">
+ <ToolTips />
</div>
+ <InstallHelp />
</div>
- )
+ </div>
}
}
From 21c3c0a2e9185f0998c26d46054fb3a20d65aa41 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 21:37:14 +0000
Subject: [PATCH 11/29] wire up setcursor actions
---
browser/src/Editor/NeovimEditor/NeovimEditor.tsx | 4 ++++
browser/src/Editor/NeovimEditor/NeovimEditorActions.ts | 10 ++++++++--
browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts | 6 +++++-
3 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditor.tsx b/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
index 86d1094e3b..2551034266 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
+++ b/browser/src/Editor/NeovimEditor/NeovimEditor.tsx
@@ -220,6 +220,10 @@ export class NeovimEditor extends Editor implements IEditor {
this._actions.hideCommandLine()
})
+ this._neovimInstance.onCommandLineSetCursorPosition.subscribe(commandLinePos => {
+ this._actions.setCommandLinePosition(commandLinePos)
+ })
+
this._windowManager.onWindowStateChanged.subscribe((tabPageState) => {
const inactiveIds = tabPageState.inactiveWindows.map((w) => w.windowNumber)
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts b/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
index 519b79531a..7d2ce04376 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorActions.ts
@@ -332,7 +332,13 @@ export const setColors = (colors: IThemeColors) => ({
},
})
-export const setCommandLinePosition = (position: number, level: number) => ({
+export const setCommandLinePosition = ({
+ pos: position,
+ level,
+ }: {
+ pos: number,
+ level: number,
+ }) => ({
type: "SET_COMMAND_LINE_POSITION",
payload: {
position,
@@ -355,7 +361,7 @@ export const showCommandLine = (
type: "SHOW_COMMAND_LINE",
payload: {
content,
- pos,
+ position: pos,
firstchar,
prompt,
indent,
diff --git a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
index 8e14c2a275..ddf862fff0 100644
--- a/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
+++ b/browser/src/Editor/NeovimEditor/NeovimEditorReducer.ts
@@ -131,7 +131,11 @@ export function reducer<K extends keyof IConfigurationValues>(s: State.IState, a
case "SET_COMMAND_LINE_POSITION":
return {
...s,
- commandLine : {...s.commandLine, position: a.payload.position},
+ commandLine : {
+ ...s.commandLine,
+ position: a.payload.position,
+ level: a.payload.level,
+ },
}
default:
return {
From 8f59329ccb5a3e7d3d140ee695c6ca3908d49918 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:53:29 +0000
Subject: [PATCH 12/29] Add a cursor to commandline
---
browser/src/UI/components/CommandLine.tsx | 44 +++++++++++------------
1 file changed, 22 insertions(+), 22 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 0c629a2d95..e5ad814d22 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -18,7 +18,8 @@ const CommandLineBox = styled.div`
animation: ${fadeInAndDown} 0.08s ease-in;
box-sizing: border-box;
`
-const CommandLineInput = styled.input`
+const CommandLineOutput = styled.div`
+ position: relative;
border: 0px;
background-color: rgba(0, 0, 0, 0.2);
font-size: 1.1em;
@@ -29,6 +30,14 @@ const CommandLineInput = styled.input`
color: white;
`
+const Cursor = styled.span`
+ background-color: white;
+ width: 2px;
+ position: absolute;
+ top: 8px;
+ height: 60%;
+`
+
export interface ICommandLineRendererProps {
visible: boolean
content: string
@@ -38,13 +47,11 @@ export interface ICommandLineRendererProps {
}
interface State {
- focused: boolean
waiting: boolean
}
class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
public state = {
- focused: false,
waiting: true,
}
private timer: any
@@ -56,39 +63,32 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}, 200)
}
- public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
- if (!this.state.focused && nextProps.visible) {
- this.setState({ focused: true })
- }
- }
-
public componentWillUnmount() {
clearTimeout(this.timer)
}
public render(): null | JSX.Element {
- const { visible } = this.props
- const { focused, waiting } = this.state
- if (!focused && visible && this._inputElement) {
- this._inputElement.focus()
- }
+ const { visible, content, position } = this.props
+ const { waiting } = this.state
+
+ const stringArray = content.split("")
+ const beginning = stringArray.slice(0, position)
+ const end = stringArray.slice(position)
return (
!waiting &&
visible && (
<CommandLineBox>
- <CommandLineInput
- onChange={this.handleChange}
- innerRef={e => (this._inputElement = e)}
- value={this.props.firstchar + this.props.content}
- />
+ <CommandLineOutput innerRef={e => (this._inputElement = e)}>
+ {this.props.firstchar}
+ {beginning}
+ <Cursor />
+ {end}
+ </CommandLineOutput>
</CommandLineBox>
)
)
}
- private handleChange(e: React.ChangeEvent<HTMLInputElement>) {
- // UI.Actions.setCommandLinePosition(1, 1)
- }
}
const mapStateToProps = ({
From 627bae0062cf54573afb84a1e9c4d5b9de3f5935 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:54:14 +0000
Subject: [PATCH 13/29] Remove excess space
---
browser/src/UI/components/CommandLine.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index e5ad814d22..6c2edf6a00 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -69,7 +69,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
public render(): null | JSX.Element {
const { visible, content, position } = this.props
- const { waiting } = this.state
+ const { waiting } = this.state
const stringArray = content.split("")
const beginning = stringArray.slice(0, position)
From 4c7b9028e26274c9bfdd29fc7428770994a96832 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 22:55:12 +0000
Subject: [PATCH 14/29] Remove refs from commandline components
---
browser/src/UI/components/CommandLine.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 6c2edf6a00..6e4e2a8fa9 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -55,7 +55,6 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
waiting: true,
}
private timer: any
- private _inputElement: HTMLInputElement
public componentDidMount() {
this.timer = setTimeout(() => {
@@ -79,7 +78,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
!waiting &&
visible && (
<CommandLineBox>
- <CommandLineOutput innerRef={e => (this._inputElement = e)}>
+ <CommandLineOutput>
{this.props.firstchar}
{beginning}
<Cursor />
From 909c72bc531f57d3671e6419d2912b28bd2574cc Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 23:00:08 +0000
Subject: [PATCH 15/29] re-add focus as this is essential for functionality
---
browser/src/UI/components/CommandLine.tsx | 16 ++++++++++++++--
1 file changed, 14 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 6e4e2a8fa9..c3af453764 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -47,14 +47,17 @@ export interface ICommandLineRendererProps {
}
interface State {
+ focused: boolean
waiting: boolean
}
class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
public state = {
+ focused: false,
waiting: true,
}
private timer: any
+ private _inputElement: HTMLInputElement
public componentDidMount() {
this.timer = setTimeout(() => {
@@ -62,13 +65,22 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}, 200)
}
+ public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
+ if (!this.state.focused && nextProps.visible) {
+ this.setState({ focused: true })
+ }
+ }
+
public componentWillUnmount() {
clearTimeout(this.timer)
}
public render(): null | JSX.Element {
const { visible, content, position } = this.props
- const { waiting } = this.state
+ const { focused, waiting } = this.state
+ if (!focused && visible && this._inputElement) {
+ this._inputElement.focus()
+ }
const stringArray = content.split("")
const beginning = stringArray.slice(0, position)
@@ -78,7 +90,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
!waiting &&
visible && (
<CommandLineBox>
- <CommandLineOutput>
+ <CommandLineOutput innerRef={e => (this._inputElement = e)}>
{this.props.firstchar}
{beginning}
<Cursor />
From 02533bee36b05a2756e391392f46b494206757b0 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Sun, 24 Dec 2017 23:50:16 +0000
Subject: [PATCH 16/29] important: fix html trimming whitespace bug
using whitespace: pre-wrap from one of see
facebook/react#4134
html auto removes trailing white space breaking
the cursor's position functionality
---
browser/src/UI/components/CommandLine.tsx | 18 ++++++++++--------
1 file changed, 10 insertions(+), 8 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c3af453764..673cc6beae 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -19,6 +19,8 @@ const CommandLineBox = styled.div`
box-sizing: border-box;
`
const CommandLineOutput = styled.div`
+ /* The next line is CRUCIAL to render white-space correctly */
+ white-space: pre-wrap;
position: relative;
border: 0px;
background-color: rgba(0, 0, 0, 0.2);
@@ -31,11 +33,11 @@ const CommandLineOutput = styled.div`
`
const Cursor = styled.span`
- background-color: white;
- width: 2px;
- position: absolute;
- top: 8px;
- height: 60%;
+ background-color: white;
+ width: 2px;
+ position: absolute;
+ top: 8px;
+ height: 60%;
`
export interface ICommandLineRendererProps {
@@ -82,9 +84,9 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
this._inputElement.focus()
}
- const stringArray = content.split("")
- const beginning = stringArray.slice(0, position)
- const end = stringArray.slice(position)
+ const segments = content.split("")
+ const beginning = segments.slice(0, position)
+ const end = segments.slice(position)
return (
!waiting &&
From 38a4f39b785e177e65e0f4c24b735703c4e641ce Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 00:09:43 +0000
Subject: [PATCH 17/29] add in the prompt segment
---
browser/src/UI/components/CommandLine.tsx | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 673cc6beae..2c437e72dc 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -45,7 +45,8 @@ export interface ICommandLineRendererProps {
content: string
position: number
firstchar: string
- level?: number
+ level: number
+ prompt: string
}
interface State {
@@ -94,6 +95,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
<CommandLineBox>
<CommandLineOutput innerRef={e => (this._inputElement = e)}>
{this.props.firstchar}
+ {this.props.prompt}
{beginning}
<Cursor />
{end}
@@ -105,13 +107,14 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
const mapStateToProps = ({
- commandLine: { visible, position, content, firstchar, level },
+ commandLine: { visible, position, content, firstchar, level, prompt },
}: State.IState) => ({
visible,
content,
firstchar,
position,
level,
+ prompt,
})
export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)
From 207e3eb1eb28bdfb3afe21cf04c7bf0c5d656765 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 00:54:57 +0000
Subject: [PATCH 18/29] fix overflow styling
---
browser/src/UI/components/CommandLine.tsx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 2c437e72dc..52cef6b158 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -12,7 +12,6 @@ const CommandLineBox = styled.div`
margin-top: 16px;
padding: 8px;
width: 75%;
- max-width: 900px;
background-color: ${p => p.theme["menu.background"]};
${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
@@ -20,9 +19,10 @@ const CommandLineBox = styled.div`
`
const CommandLineOutput = styled.div`
/* The next line is CRUCIAL to render white-space correctly */
- white-space: pre-wrap;
+ white-space: pre;
position: relative;
border: 0px;
+ overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.2);
font-size: 1.1em;
box-sizing: border-box;
@@ -30,6 +30,14 @@ const CommandLineOutput = styled.div`
padding: 8px;
outline: none;
color: white;
+
+ &:hover {
+ overflow-x: auto;
+ }
+
+ &::-webkit-scrollbar {
+ height: 3px;
+ }
`
const Cursor = styled.span`
From 1de13c0bdb945f93de3e988e9a0088fb31b32bde Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 01:05:18 +0000
Subject: [PATCH 19/29] add pointer events but not selection
---
browser/src/UI/components/CommandLine.tsx | 2 ++
1 file changed, 2 insertions(+)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 52cef6b158..80798abf66 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -30,6 +30,8 @@ const CommandLineOutput = styled.div`
padding: 8px;
outline: none;
color: white;
+ user-select: none;
+ pointer-events: all;
&:hover {
overflow-x: auto;
From 66deb2ffc26e58451522bd1c54dc58bed19fb637 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 13:34:10 +0000
Subject: [PATCH 20/29] Add overflow handling for command line
---
browser/src/UI/components/CommandLine.tsx | 19 +++++--------------
1 file changed, 5 insertions(+), 14 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 80798abf66..9136872ddc 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -16,38 +16,29 @@ const CommandLineBox = styled.div`
${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
box-sizing: border-box;
+ overflow-wrap: break-word;
`
const CommandLineOutput = styled.div`
/* The next line is CRUCIAL to render white-space correctly */
- white-space: pre;
+ white-space: pre-wrap;
position: relative;
border: 0px;
- overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.2);
font-size: 1.1em;
box-sizing: border-box;
width: 100%;
+ height: auto;
padding: 8px;
outline: none;
color: white;
- user-select: none;
- pointer-events: all;
-
- &:hover {
- overflow-x: auto;
- }
-
- &::-webkit-scrollbar {
- height: 3px;
- }
`
const Cursor = styled.span`
background-color: white;
width: 2px;
position: absolute;
- top: 8px;
- height: 60%;
+ bottom: 4px;
+ height: 1.3em;
`
export interface ICommandLineRendererProps {
From 07889c73f6872c5dd761c6abf9f96ad7ca913e5e Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Mon, 25 Dec 2017 16:47:15 +0000
Subject: [PATCH 21/29] minor change to comment position
---
browser/src/UI/components/CommandLine.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 9136872ddc..eecc142389 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -19,8 +19,7 @@ const CommandLineBox = styled.div`
overflow-wrap: break-word;
`
const CommandLineOutput = styled.div`
- /* The next line is CRUCIAL to render white-space correctly */
- white-space: pre-wrap;
+ white-space: pre-wrap; /* CRUCIAL to render white-space correctly */
position: relative;
border: 0px;
background-color: rgba(0, 0, 0, 0.2);
From 252a0877e2339ab00737c54fc7e37eeb702a8406 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 03:33:11 +0000
Subject: [PATCH 22/29] adjust cursor position
---
browser/src/UI/components/CommandLine.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index eecc142389..11414462d8 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -36,7 +36,7 @@ const Cursor = styled.span`
background-color: white;
width: 2px;
position: absolute;
- bottom: 4px;
+ bottom: 6px;
height: 1.3em;
`
From e8d1a1d1d8870008b9cbc1ed277de36cd0bf8ff0 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 14:16:45 +0000
Subject: [PATCH 23/29] re-add missing max width to ensure commandline and wild
menu have same width
---
browser/src/UI/components/CommandLine.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 11414462d8..c8e1b1ef77 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -12,6 +12,7 @@ const CommandLineBox = styled.div`
margin-top: 16px;
padding: 8px;
width: 75%;
+ max-width: 900px;
background-color: ${p => p.theme["menu.background"]};
${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
From d2104c4b4164a42de52d557c099c4e8ce256eb88 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 14:53:51 +0000
Subject: [PATCH 24/29] re-arrange css to rerun tests
---
browser/src/UI/components/CommandLine.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c8e1b1ef77..fd0e858412 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -11,13 +11,13 @@ const CommandLineBox = styled.div`
position: relative;
margin-top: 16px;
padding: 8px;
- width: 75%;
- max-width: 900px;
background-color: ${p => p.theme["menu.background"]};
${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
box-sizing: border-box;
overflow-wrap: break-word;
+ width: 75%;
+ max-width: 900px;
`
const CommandLineOutput = styled.div`
white-space: pre-wrap; /* CRUCIAL to render white-space correctly */
From 953064089547987bfb4a991e239cd101b808b29a Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Tue, 26 Dec 2017 15:51:51 +0000
Subject: [PATCH 25/29] re-arrange css again..
---
browser/src/UI/components/CommandLine.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index fd0e858412..c8e1b1ef77 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -11,13 +11,13 @@ const CommandLineBox = styled.div`
position: relative;
margin-top: 16px;
padding: 8px;
+ width: 75%;
+ max-width: 900px;
background-color: ${p => p.theme["menu.background"]};
${boxShadow};
animation: ${fadeInAndDown} 0.08s ease-in;
box-sizing: border-box;
overflow-wrap: break-word;
- width: 75%;
- max-width: 900px;
`
const CommandLineOutput = styled.div`
white-space: pre-wrap; /* CRUCIAL to render white-space correctly */
From 059ec25cab9bf010f6e78989670d2e7b83061ab4 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Jan 2018 22:22:08 +0000
Subject: [PATCH 26/29] reduce timeout to 80ms
---
browser/src/UI/components/CommandLine.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index c8e1b1ef77..23e6bad3d8 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -66,7 +66,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
public componentDidMount() {
this.timer = setTimeout(() => {
this.setState({ waiting: false })
- }, 200)
+ }, 80)
}
public componentWillReceiveProps(nextProps: ICommandLineRendererProps) {
From 189ee2b9b2923e8bfff65980d3b6e06033897b1a Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Jan 2018 23:54:39 +0000
Subject: [PATCH 27/29] Add spurious CR to rerun test
---
browser/src/UI/components/CommandLine.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 23e6bad3d8..22ad28caf2 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -60,6 +60,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
focused: false,
waiting: true,
}
+
private timer: any
private _inputElement: HTMLInputElement
From 95552003dc8ffcc21305a9d6baf203251589c6a4 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Jan 2018 21:06:57 +0000
Subject: [PATCH 28/29] Add icons to replace the first character
---
browser/src/UI/components/CommandLine.tsx | 49 ++++++++++++++++++++++-
1 file changed, 47 insertions(+), 2 deletions(-)
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 22ad28caf2..7abf380a9d 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
import { connect } from "react-redux"
import styled from "styled-components"
+import { Icon } from "./../../UI/Icon"
import { fadeInAndDown } from "./animations"
import { boxShadow } from "./common"
@@ -41,6 +42,15 @@ const Cursor = styled.span`
height: 1.3em;
`
+const IconContainer = styled.span`
+ margin-right: 0.5em;
+`
+
+const ArrowContainer = styled.span`
+ font-size: 0.7em;
+ margin-right: 0.6em;
+`
+
export interface ICommandLineRendererProps {
visible: boolean
content: string
@@ -55,6 +65,18 @@ interface State {
waiting: boolean
}
+const CommandLineIcon = (props: { iconName: string; arrow?: boolean }) => (
+ <span>
+ {!props.arrow ? (
+ <Icon name={props.iconName} />
+ ) : (
+ <ArrowContainer>
+ <Icon name={props.iconName} />
+ </ArrowContainer>
+ )}
+ </span>
+)
+
class CommandLine extends React.PureComponent<ICommandLineRendererProps, State> {
public state = {
focused: false,
@@ -76,12 +98,35 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
}
+ public renderIconOrChar(character: string) {
+ switch (character) {
+ case "/":
+ return [
+ <CommandLineIcon iconName="search" />,
+ <CommandLineIcon arrow iconName="arrow-right" />,
+ ]
+ case ":":
+ return (
+ <IconContainer>
+ <CommandLineIcon iconName="file-code-o" />
+ </IconContainer>
+ )
+ case "?":
+ return [
+ <CommandLineIcon iconName="search" />,
+ <CommandLineIcon arrow iconName="arrow-left" />,
+ ]
+ default:
+ return character
+ }
+ }
+
public componentWillUnmount() {
clearTimeout(this.timer)
}
public render(): null | JSX.Element {
- const { visible, content, position } = this.props
+ const { visible, content, position, firstchar } = this.props
const { focused, waiting } = this.state
if (!focused && visible && this._inputElement) {
this._inputElement.focus()
@@ -96,7 +141,7 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
visible && (
<CommandLineBox>
<CommandLineOutput innerRef={e => (this._inputElement = e)}>
- {this.props.firstchar}
+ {this.renderIconOrChar(firstchar)}
{this.props.prompt}
{beginning}
<Cursor />
From 0cec01a7a8c48c3070588b302702ced914611eb1 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Jan 2018 21:15:25 +0000
Subject: [PATCH 29/29] Add configuration to show and hide icons
---
.../Configuration/DefaultConfiguration.ts | 1 +
.../Configuration/IConfigurationValues.ts | 2 ++
browser/src/UI/components/CommandLine.tsx | 26 ++++++++++++-------
3 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/browser/src/Services/Configuration/DefaultConfiguration.ts b/browser/src/Services/Configuration/DefaultConfiguration.ts
index 87066c882f..249edf647a 100644
--- a/browser/src/Services/Configuration/DefaultConfiguration.ts
+++ b/browser/src/Services/Configuration/DefaultConfiguration.ts
@@ -34,6 +34,7 @@ const BaseConfiguration: IConfigurationValues = {
"experimental.editor.textMateHighlighting.enabled": false,
"experimental.commandline.mode": false,
+ "experimental.commandline.icons": false,
"experimental.wildmenu.mode": false,
"experimental.neovim.transport": "stdio",
diff --git a/browser/src/Services/Configuration/IConfigurationValues.ts b/browser/src/Services/Configuration/IConfigurationValues.ts
index 260d7e5700..19b7e3a2a5 100644
--- a/browser/src/Services/Configuration/IConfigurationValues.ts
+++ b/browser/src/Services/Configuration/IConfigurationValues.ts
@@ -47,6 +47,8 @@ export interface IConfigurationValues {
// The transport to use for Neovim
// Valid values are "stdio" and "pipe"
"experimental.neovim.transport": string
+ "experimental.commandline.mode": boolean,
+ "experimental.commandline.icons": boolean,
"autoClosingPairs.enabled": boolean
"autoClosingPairs.default": any
diff --git a/browser/src/UI/components/CommandLine.tsx b/browser/src/UI/components/CommandLine.tsx
index 7abf380a9d..b198f2a29f 100644
--- a/browser/src/UI/components/CommandLine.tsx
+++ b/browser/src/UI/components/CommandLine.tsx
@@ -52,6 +52,7 @@ const ArrowContainer = styled.span`
`
export interface ICommandLineRendererProps {
+ showIcons: boolean
visible: boolean
content: string
position: number
@@ -99,6 +100,9 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
public renderIconOrChar(character: string) {
+ if (!this.props.showIcons) {
+ return character
+ }
switch (character) {
case "/":
return [
@@ -153,15 +157,17 @@ class CommandLine extends React.PureComponent<ICommandLineRendererProps, State>
}
}
-const mapStateToProps = ({
- commandLine: { visible, position, content, firstchar, level, prompt },
-}: State.IState) => ({
- visible,
- content,
- firstchar,
- position,
- level,
- prompt,
-})
+const mapStateToProps = ({ commandLine, configuration }: State.IState) => {
+ const { visible, position, content, firstchar, level, prompt } = commandLine
+ return {
+ showIcons: configuration["experimental.commandline.icons"],
+ visible,
+ content,
+ firstchar,
+ position,
+ level,
+ prompt,
+ }
+}
export default connect<ICommandLineRendererProps>(mapStateToProps)(CommandLine)