From c56374ddcea82c53a46feb141a90aad46fcd344f Mon Sep 17 00:00:00 2001 From: Markus Michalsky Date: Wed, 22 May 2019 15:24:51 +0200 Subject: [PATCH] fix: highlight and overflow issues --- .../views/pages/sign-in/sign-in-page.js | 6 ++++-- package.json | 2 +- src/public/js/App.scss | 6 +++++- .../js/components/sideBar/component/Code/index.js | 10 +++------- .../js/components/sideBar/component/SideBar.js | 7 ++++++- .../js/components/sideBar/component/SideBar.scss | 5 +++-- .../treeDiagram/TreeDiagramsContainer.js | 8 +++++--- .../component/Tree/CodeCrumbs/index.js | 2 +- .../treeDiagram/component/Tree/Source/Tree.js | 15 +++++++-------- 9 files changed, 35 insertions(+), 26 deletions(-) diff --git a/example-project/src-client/views/pages/sign-in/sign-in-page.js b/example-project/src-client/views/pages/sign-in/sign-in-page.js index 3eebea55..97e307fe 100644 --- a/example-project/src-client/views/pages/sign-in/sign-in-page.js +++ b/example-project/src-client/views/pages/sign-in/sign-in-page.js @@ -7,17 +7,19 @@ import Button from '../../../views/components/button'; import './sign-in-page.css'; +// test for bug in react syntax highlighting +const WrapperComponent = ({children}) =>
{children}
const SignInPage = ({signInWithGithub, signInWithGoogle, signInWithTwitter}) => { return ( -
+

Sign in

-
+ ); }; diff --git a/package.json b/package.json index a9cbfba1..1249078b 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "react": "^16.7.0", "react-dom": "^16.7.0", "react-redux": "^5.0.7", - "react-syntax-highlighter": "8.0.1", + "react-syntax-highlighter": "^10.3.0", "redux": "^4.0.0", "redux-persist": "^5.10.0", "redux-saga": "^0.16.0", diff --git a/src/public/js/App.scss b/src/public/js/App.scss index 08b41634..7f45e255 100644 --- a/src/public/js/App.scss +++ b/src/public/js/App.scss @@ -15,7 +15,11 @@ } > .header { - position: relative; + position: fixed; + z-index: 1; + background: #fff; + width: 100%; + padding-right: 15px; border-bottom: 1px solid #F5F5F5; } diff --git a/src/public/js/components/sideBar/component/Code/index.js b/src/public/js/components/sideBar/component/Code/index.js index 9103a369..bbdf572a 100644 --- a/src/public/js/components/sideBar/component/Code/index.js +++ b/src/public/js/components/sideBar/component/Code/index.js @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { atomOneLight } from 'react-syntax-highlighter/styles/hljs'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism'; import './index.scss'; @@ -49,13 +49,9 @@ export default class extends React.Component {
(this.codeRef = el)}> { if (isMatchLineNumber(crumbedLines, lineNumber)) { return { className: 'crumbedLine' }; diff --git a/src/public/js/components/sideBar/component/SideBar.js b/src/public/js/components/sideBar/component/SideBar.js index e05e5e17..808cd0b3 100644 --- a/src/public/js/components/sideBar/component/SideBar.js +++ b/src/public/js/components/sideBar/component/SideBar.js @@ -55,7 +55,12 @@ export default ({ {standaloneNoCode ? ( ) : ( - + crumbNodeLines) : []} + namespace={namespace} + language={language} + code={file.fileCode} + /> )} diff --git a/src/public/js/components/sideBar/component/SideBar.scss b/src/public/js/components/sideBar/component/SideBar.scss index 14aa2bf3..9d653a45 100644 --- a/src/public/js/components/sideBar/component/SideBar.scss +++ b/src/public/js/components/sideBar/component/SideBar.scss @@ -1,13 +1,14 @@ .SideBar { - position: absolute; + position: fixed; right: 0; - top: 0; + top: 42px; height: 100%; overflow: hidden; width: 650px; max-width: 100%; z-index: 4; background-color: white; + border-top: 1px solid #ebedf0; border-left: 1px solid #ebedf0; padding: 8px 16px; diff --git a/src/public/js/components/treeDiagram/TreeDiagramsContainer.js b/src/public/js/components/treeDiagram/TreeDiagramsContainer.js index 2aa1fe96..d836f7f1 100644 --- a/src/public/js/components/treeDiagram/TreeDiagramsContainer.js +++ b/src/public/js/components/treeDiagram/TreeDiagramsContainer.js @@ -5,12 +5,13 @@ import { Spin } from 'antd'; import StandalonePlaceholder from './component/StandalonePlaceholder'; import { getNamespacesList } from 'core/dataBus/selectors'; +import { getCheckedState } from 'core/controlsBus/selectors'; import { getActiveNamespace } from 'core/namespaceIntegration/selectors'; import TreeDiagram from './component/TreeDiagram'; import './TreeDiagamsContainer.scss'; -const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => { +const TreeDiagramsContainer = ({ namespacesList, activeNamespace, sideBar }) => { if (!namespacesList.length) { return process.env.STANDALONE ? ( @@ -24,7 +25,7 @@ const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => { } return ( -
+
{namespacesList.map(namespace => ( { const mapStateToProps = state => ({ activeNamespace: getActiveNamespace(state), - namespacesList: getNamespacesList(state) + namespacesList: getNamespacesList(state), + sideBar: getCheckedState(state).sideBar }); export default connect(mapStateToProps)(TreeDiagramsContainer); diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js index fe9c8bec..d3b35f67 100644 --- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js +++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js @@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch, props) => { const { namespace } = props; return { onCodeCrumbSelect: (event, options) => { - return event.metaKey + return event.metaKey || event.altKey ? dispatch( selectNodeToOpenInEditor( { path: options.fileNode.path, line: options.codeCrumb.crumbNodeLines[0] }, diff --git a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js index 769d975e..3f7544d7 100644 --- a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js +++ b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js @@ -133,14 +133,13 @@ const SourceTree = props => { {(sourceDiagramOn && sourceEdges) || null} {(sourceDiagramOn && selectedSourceEdges) || null} - {dependenciesDiagramOn && - selectedNode.dependencies && ( - - )} + {dependenciesDiagramOn && selectedNode.dependencies && ( + + )} {(sourceDiagramOn && sourceNodes) || null} {(sourceDiagramOn && sourceDotes) || null}