aboutsummaryrefslogtreecommitdiffstats
path: root/workflow-designer-ui
diff options
context:
space:
mode:
authorMalek <malek.zoabi@amdocs.com>2018-08-29 10:25:14 +0300
committerMalek <malek.zoabi@amdocs.com>2018-08-29 10:26:30 +0300
commit7f36de0b3bb7e0dcbc80b92819831d3631f7efd4 (patch)
tree0e5f6304c03c43aed3f100f8b3b34e6f0d09a96a /workflow-designer-ui
parent7b771d212127f74a6bd5f6d1a85c39a0b71416d3 (diff)
Add scrollbars to Input/Output table
Issue-ID: SDC-1686 Change-Id: I384bc04685a8f5cbbaedcb6d499fac7c0ed300ea Signed-off-by: Malek <malek.zoabi@amdocs.com>
Diffstat (limited to 'workflow-designer-ui')
-rw-r--r--workflow-designer-ui/src/main/frontend/package.json1
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/_components.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss63
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss18
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/style.scss1
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx5
-rw-r--r--workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js58
-rw-r--r--workflow-designer-ui/src/main/frontend/yarn.lock4
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"