242 - fix and features (#254)

* Changed opacity and added to state * added opacity config options for CursorLine and CursorColumn * added some startup logic for cursorline settings
onivim · Feb 25, 2017 · b83a467 · b83a467
1 parent e7e1435
commit b83a467
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 2 deletions.
diff --git a/browser/src/Config.ts b/browser/src/Config.ts
@@ -61,7 +61,10 @@ const DefaultConfig: any = {
     "editor.fullScreenOnStart" : false,
 
     "editor.cursorLine": true,
+    "editor.cursorLineOpacity" : 0.1,
+
     "editor.cursorColumn": false,
+    "editor.cursorColumnOpacity": 0.1,
 }
 
 const MacConfig: any = {

diff --git a/browser/src/UI/ActionCreators.ts b/browser/src/UI/ActionCreators.ts
@@ -114,3 +114,17 @@ export const showCursorLine = () => ({ type: "SHOW_CURSOR_LINE" })
 export const showCursorColumn = () => ({ type: "SHOW_CURSOR_COLUMN" })
 
 export const hideCursorColumn = () => ({ type: "HIDE_CURSOR_COLUMN" })
+
+export const setCursorLineOpacity = (opacity: number) => ({
+    type: "SET_CURSOR_LINE_OPACITY",
+    payload: {
+        opacity,
+    },
+})
+
+export const setCursorColumnOpacity = (opacity: number) => ({
+    type: "SET_CURSOR_COLUMN_OPACITY",
+    payload: {
+        opacity,
+    },
+})
diff --git a/browser/src/UI/Actions.ts b/browser/src/UI/Actions.ts
@@ -133,6 +133,20 @@ export interface IHideCursorColumnAction {
     type: "HIDE_CURSOR_COLUMN"
 }
 
+export interface ISetCursorLineOpacityAction {
+    type: "SET_CURSOR_LINE_OPACITY"
+    payload: {
+        opacity: number,
+    }
+}
+
+export interface ISetCursorColumnOpacityAction {
+    type: "SET_CURSOR_COLUMN_OPACITY"
+    payload: {
+        opacity: number,
+    }
+}
+
 export type Action = ISetCursorPositionAction |
     IShowSignatureHelpAction |
     IHideSignatureHelpAction |
@@ -154,4 +168,6 @@ export type Action = ISetCursorPositionAction |
     IHideCurorLineAction |
     IHideCursorColumnAction |
     IShowCursorLineAction |
-    IShowCursorColumnAction
+    IShowCursorColumnAction |
+    ISetCursorColumnOpacityAction |
+    ISetCursorLineOpacityAction
diff --git a/browser/src/UI/Reducer.ts b/browser/src/UI/Reducer.ts
@@ -73,6 +73,14 @@ export const reducer = (s: State.IState, a: Actions.Action) => {
              return Object.assign({}, s, {
                  cursorColumnVisible: true,
             })
+        case "SET_CURSOR_LINE_OPACITY":
+            return Object.assign({}, s, {
+                cursorLineOpacity: a.payload.opacity,
+            })
+        case "SET_CURSOR_COLUMN_OPACITY":
+            return Object.assign({}, s, {
+                cursorLineOpacity: a.payload.opacity,
+            })
         default:
             return Object.assign({}, s, {
                 autoCompletion: autoCompletionReducer(s.autoCompletion, a), // FIXME: null

diff --git a/browser/src/UI/State.ts b/browser/src/UI/State.ts
@@ -15,7 +15,9 @@ export interface IState {
     popupMenu: null | IMenu
     signatureHelp: null | Oni.Plugin.SignatureHelpResult
     cursorLineVisible: boolean
+    cursorLineOpacity: number
     cursorColumnVisible: boolean
+    cursorColumnOpacity: number
 
     // Dimensions of active window, in pixels
     activeWindowDimensions: Rectangle
@@ -69,5 +71,8 @@ export const createDefaultState = () => (<IState>{
         height: 0,
     },
     cursorLineVisible: false,
+    cursorLineOpacity: 0,
     cursorColumnVisible: false,
+    cursorColumnOpacity: 0,
+
 })
diff --git a/browser/src/UI/components/CursorLine.tsx b/browser/src/UI/components/CursorLine.tsx
@@ -9,6 +9,7 @@ export interface ICursorLineRendererProps {
     height: number
     color: string
     visible: boolean
+    opacity: number
 }
 
 export interface ICursorLineProps {
@@ -34,7 +35,7 @@ class CursorLineRenderer extends React.Component<ICursorLineRendererProps, void>
 
             height: this.props.height.toString() + "px", // Same as cursor
             backgroundColor: this.props.color,
-            opacity: 0.2,
+            opacity: this.props.opacity,
         }
 
         return <div style={cursorStyle} className="cursorLine"></div>
@@ -49,6 +50,7 @@ const mapStateToProps = (state: State.IState, props: ICursorLineProps) => {
         height: props.lineType === "line" ? state.fontPixelHeight : state.activeWindowDimensions.height,
         color: state.foregroundColor,
         visible: props.lineType === "line" ? state.cursorLineVisible : state.cursorColumnVisible,
+        opacity: props.lineType === "line" ? state.cursorLineOpacity : state.cursorColumnOpacity,
     }
 }
 

diff --git a/browser/src/UI/index.tsx b/browser/src/UI/index.tsx
@@ -207,6 +207,14 @@ export function hideCursorColumn(): void {
     store.dispatch(ActionCreators.hideCursorColumn())
 }
 
+export function setCursorLineOpacity(opacity: number): void {
+    store.dispatch(ActionCreators.setCursorLineOpacity(opacity))
+}
+
+export function setCursorColumnOpacity(opacity: number): void {
+    store.dispatch(ActionCreators.setCursorColumnOpacity(opacity))
+}
+
 function render(_state: State.IState): void {
     const element = document.getElementById("overlay-ui")
     ReactDOM.render(

diff --git a/browser/src/index.tsx b/browser/src/index.tsx
@@ -35,6 +35,8 @@ const start = (args: string[]) => {
 
     const cursorLine = Config.getValue<boolean>("editor.cursorLine")
     const cursorColumn = Config.getValue<boolean>("editor.cursorColumn")
+    UI.setCursorLineOpacity(Config.getValue<number>("editor.cursorLineOpacity"))
+    UI.setCursorColumnOpacity(Config.getValue<number>("editor.cursorColumnOpacity"))
 
     if (cursorLine) {
         UI.showCursorLine()