Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Update binding highlight styles (#136)

Browse Source 
Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>
This commit is contained in:
Hetu Nandu 2020-07-31 15:47:18 +05:30 committed by GitHub
parent 43304ca146
commit f8c2bd5d42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
View File

@ -34,8 +34,8 @@ export type EditorConfig = {
};
export const EditorThemes: Record<EditorTheme, string> = {
[EditorTheme.LIGHT]: "neat",
[EditorTheme.DARK]: "monokai",
[EditorTheme.LIGHT]: "duotone-light",
[EditorTheme.DARK]: "duotone-dark",
};
export type HintHelper = (editor: CodeMirror.Editor, data: DataTree) => Hinter;

4
app/client/src/components/editorComponents/CodeEditor/index.tsx
View File

@ -3,8 +3,8 @@ import { connect } from "react-redux";
import { AppState } from "reducers";
import CodeMirror, { EditorConfiguration } from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/monokai.css";
import "codemirror/theme/neat.css";
import "codemirror/theme/duotone-dark.css";
import "codemirror/theme/duotone-light.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/display/placeholder";
import "codemirror/addon/edit/closebrackets";

28
app/client/src/components/editorComponents/CodeEditor/markHelpers.ts
View File

@ -7,11 +7,31 @@ export const bindingMarker: MarkHelper = (editor: CodeMirror.Editor) => {
const lineNo = editor.getLineNumber(line) || 0;
let match;
while ((match = AUTOCOMPLETE_MATCH_REGEX.exec(line.text)) != null) {
const start = match.index;
const end = AUTOCOMPLETE_MATCH_REGEX.lastIndex;
const opening = {
start: match.index,
end: match.index + 2,
};
const ending = {
start: AUTOCOMPLETE_MATCH_REGEX.lastIndex - 2,
end: AUTOCOMPLETE_MATCH_REGEX.lastIndex,
};
editor.markText(
{ ch: start, line: lineNo },
{ ch: end, line: lineNo },
{ ch: ending.start, line: lineNo },
{ ch: ending.end, line: lineNo },
{
className: "binding-brackets",
},
);
editor.markText(
{ ch: opening.start, line: lineNo },
{ ch: opening.end, line: lineNo },
{
className: "binding-brackets",
},
);
editor.markText(
{ ch: opening.start, line: lineNo },
{ ch: ending.end, line: lineNo },
{
className: "binding-highlight",
},

22
app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
View File

@ -133,7 +133,27 @@ export const EditorWrapper = styled.div<{
flex-direction: row;
text-transform: none;
&& {
.binding-highlight {
.CodeMirror-cursor {
border-right: none;
border-left-color: ${props =>
props.editorTheme === EditorTheme.DARK
? props.theme.colors.textOnDarkBG
: props.theme.colors.textDefault} !important
}
.cm-s-duotone-light.CodeMirror {
background: #ffffff;
color: #000000 !important;
& {
span.cm-operator {
color: ${props => props.theme.colors.textDefault};
}
}
}
.cm-s-duotone-dark.CodeMirror {
background: #182026;
color: #FFFFFF;
}
.binding-brackets {
color: ${props =>
props.editorTheme === EditorTheme.DARK
? props.theme.colors.bindingTextDark

2
app/client/src/constants/Colors.tsx
View File

@ -13,6 +13,8 @@ export const Colors: Record<string, string> = {
LIGHT_GREYISH_BLUE: "#B0BFCB",
SUNGLOW: "#FFCB33",
SOFT_ORANGE: "#f7c75b",
BINDING_COLOR: "#ffcc99",
BINDING_COLOR_LT: "#063289",
PURE_ORANGE: "#ffb100",
BLACK: "#000000",

4
app/client/src/constants/DefaultTheme.tsx
View File

@ -414,8 +414,8 @@ export const theme: Theme = {
messageBG: Colors.CONCRETE,
paneIcon: Colors.TROUT,
notification: Colors.JAFFA,
bindingTextDark: Colors.SOFT_ORANGE,
bindingText: Colors.PURE_ORANGE,
bindingTextDark: Colors.BINDING_COLOR,
bindingText: Colors.BINDING_COLOR_LT,
cmBacground: Colors.BLUE_CHARCOAL,
lightningborder: Colors.ALABASTER,
},