diff options
8 files changed, 141 insertions, 12 deletions
diff --git a/workflow-designer-ui/src/main/frontend/package.json b/workflow-designer-ui/src/main/frontend/package.json index dfd022c2..ddc761df 100644 --- a/workflow-designer-ui/src/main/frontend/package.json +++ b/workflow-designer-ui/src/main/frontend/package.json @@ -32,6 +32,7 @@ "lodash.set": "^4.3.2", "md5": "^2.2.1", "moment": "^2.18.1", + "perfect-scrollbar": "^1.4.0", "prop-types": "^15.6.1", "qs": "^6.5.2", "react": "^16.2.0", diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss index 974317e8..93c75bf5 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss @@ -8,5 +8,4 @@ @import 'components/loader'; @import 'components/tree'; @import 'components/customModal'; - - +@import 'components/scrollbars'; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss new file mode 100644 index 00000000..d036c714 --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss @@ -0,0 +1,63 @@ +.ps__rail-x { + opacity: 1; + height: 4px; + /* there must be 'bottom' or 'top' for ps__rail-x */ + bottom: 0px; +} + +.ps__rail-y { + opacity: 1; + width: 4px; + /* there must be 'right' or 'left' for ps__rail-y */ + right: 0; +} + +.ps__thumb-x { + background-color: $light-gray; + border-radius: 0px; + height: 4px; + /* there must be 'bottom' for ps__thumb-x */ + bottom: 0px; +} + +.ps__thumb-y { + background-color: $light-gray; + border-radius: 0px; + width: 4px; + /* there must be 'right' for ps__thumb-y */ + right: 0px; +} + +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: 1; + background-color: transparent; +} + +.ps .ps__rail-x:hover, +.ps .ps__rail-y:hover, +.ps .ps__rail-x:focus, +.ps .ps__rail-y:focus, +.ps .ps__rail-x.ps--clicking, +.ps .ps__rail-y.ps--clicking { + opacity: 1; + background-color: transparent; +} + +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x { + background-color: $light-gray; + height: 4px; +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y { + background-color: $light-gray; + width: 4px; +} diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss index bc12a150..56a8dd6b 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -45,17 +45,17 @@ } &__table { - min-height: 102px; - max-height: calc(100vh - 202px); - overflow-y: auto; &__thead { background-color: $silver; @include body-1-emphasis; - position: -webkit-sticky; - position: sticky; - top: 0px; - z-index: 1; } + .scrollbars { + min-height: 102px; + max-height: calc(100vh - 243px); + overflow: auto; + position: relative; + } + &__tbody { } } @@ -83,7 +83,7 @@ flex: 1; display: flex; align-items: center; - padding: 20px 17px; + padding: 22px 17px; &--empty { padding: 20px; color: $dark-gray; @@ -114,7 +114,7 @@ .sdc-label__error { margin: unset; position: absolute; - bottom: -20px; + bottom: -22px; } } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss index 49278565..88e33a9c 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss @@ -2,5 +2,6 @@ @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; @import 'common'; @import '../../node_modules/sdc-ui/lib/css/style.css'; +@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css'; @import 'components'; @import 'features'; diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx index 82b02c6c..6b76933e 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx +++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx @@ -20,6 +20,7 @@ import { Translate, I18n } from 'react-redux-i18n'; import cn from 'classnames'; import { SVGIcon } from 'sdc-ui/lib/react'; +import Scrollbars from 'shared/scroll/Scrollbars'; import SearchInput from 'shared/searchInput/SearchInput'; import { getValidationsError } from 'features/version/inputOutput/inputOutputValidations'; import Tab from 'features/version/inputOutput/views/Tab'; @@ -202,7 +203,9 @@ class InputOutputView extends React.Component { <div className="input-output__table"> <TableHead /> <TableBody isCertified={isCertified}> - {dataRowsView} + <Scrollbars className="scrollbars"> + {dataRowsView} + </Scrollbars> </TableBody> </div> </div> diff --git a/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js b/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js new file mode 100644 index 00000000..e5ec8cee --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js @@ -0,0 +1,58 @@ +/* +* Copyright © 2018 European Support Limited +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import PerfectScrollbar from 'perfect-scrollbar'; + +class Scrollbars extends React.Component { + containerRef = React.createRef(); + scrollbars = null; + + componentDidMount() { + const container = this.containerRef.current; + + this.scrollbars = new PerfectScrollbar(container); + } + + componentDidUpdate() { + if (this.scrollbars) { + this.scrollbars.update(); + } + } + + componentWillUnmount() { + this.scrollbars.destroy(); + this.scrollbars = null; + } + + render() { + const { children, className } = this.props; + + return ( + <div className={className} ref={this.containerRef}> + {children} + </div> + ); + } +} + +Scrollbars.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; + +export default Scrollbars; diff --git a/workflow-designer-ui/src/main/frontend/yarn.lock b/workflow-designer-ui/src/main/frontend/yarn.lock index 68f2ed3f..8d668081 100644 --- a/workflow-designer-ui/src/main/frontend/yarn.lock +++ b/workflow-designer-ui/src/main/frontend/yarn.lock @@ -8703,6 +8703,10 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +perfect-scrollbar@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1" + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" |