45 |
54 | );
55 | }
56 | }
57 |
58 | export default Checkbox;
59 |
--------------------------------------------------------------------------------
/web-app/src/components/ColorPicker/ColorPicker.css:
--------------------------------------------------------------------------------
1 | .colorpicker-select {
2 | background-color: #373737;
3 | border: 1px solid #00001c;
4 | display: inline-block;
5 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
6 | border-radius: 4px;
7 | border: 0;
8 | outline: none;
9 | cursor: pointer;
10 | }
11 |
12 | .colorpicker-color {
13 | width: 36px;
14 | height: 20px;
15 | border-radius: 4px;
16 | }
17 |
18 | .colorpicker-popover {
19 | position: fixed;
20 | z-index: 90;
21 | }
22 |
23 | .colorpicker-overlay {
24 | position: fixed;
25 | top: 0;
26 | left: 0;
27 | right: 0;
28 | bottom: 0;
29 | z-index: 89;
30 | }
--------------------------------------------------------------------------------
/web-app/src/components/ColorPicker/ColorPicker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ChromePicker } from 'react-color';
3 | import './ColorPicker.css'
4 |
5 | class ColorPicker extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | showPalette: false
11 | }
12 | }
13 |
14 | handleClick = () => {
15 | this.setState(prevState => ({
16 | showPalette: !prevState.showPalette
17 | }));
18 | };
19 |
20 | handleChange = (color) => {
21 | const { name } = this.props;
22 | const rgb = color.rgb;
23 | const rgba = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
24 | this.props.onChange(name, rgba);
25 | };
26 |
27 | close = () => {
28 | this.setState({
29 | showPalette: false
30 | });
31 | }
32 |
33 | render() {
34 |
35 | const color = {
36 | background: this.props.value
37 | };
38 |
39 | return (
40 |
46 | { checked ? (
47 |
52 | {value}
53 |
41 |
54 | )
55 | };
56 | }
57 |
58 | export default ColorPicker;
--------------------------------------------------------------------------------
/web-app/src/components/DropdownDialog/DropdownDialog.css:
--------------------------------------------------------------------------------
1 | .dropdown-overlay {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | bottom: 0;
7 | z-index: 150;
8 | }
9 |
10 | .dropdown-panel {
11 | position: fixed;
12 | z-index: 151;
13 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
14 | border-radius: 4px;
15 | top: 85px;
16 | right: 35px;
17 | background-color: #FFFFFF;
18 | border: 1px solid #e0e0e0;
19 | }
20 |
21 | .dropdown-body {
22 | padding: 8px;
23 | }
--------------------------------------------------------------------------------
/web-app/src/components/DropdownDialog/DropdownDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './DropdownDialog.css';
3 |
4 | class DropdownDialog extends React.Component {
5 |
6 | render() {
7 | const {
8 | show = false,
9 | children
10 | } = this.props;
11 |
12 | const displayClass = show ? 'display-block' : 'display-none';
13 | return (
14 |
42 |
43 |
44 | { this.state.showPalette && (
45 |
46 |
52 | )}
53 |
47 |
48 |
49 |
51 | this.props.onClose()}>
15 |
21 | );
22 | }
23 | }
24 |
25 | export default DropdownDialog;
--------------------------------------------------------------------------------
/web-app/src/components/GridLayout.css:
--------------------------------------------------------------------------------
1 |
2 | .grid-layout {
3 | position: relative;
4 | background-color: #FFFFFF;
5 | }
6 |
7 | .grid-box {
8 | position: absolute;
9 | overflow-x: hidden;
10 | overflow-y: hidden;
11 | display: flex;
12 | flex-flow: column;
13 | height: 100%;
14 | }
15 |
16 | .grid-box-title {
17 | padding: 3px 6px;
18 | flex: 0 1 auto;
19 | }
20 |
21 | .grid-box-title-value {
22 | font-size: 18px;
23 | }
24 |
25 | .grid-box-content {
26 | flex: 1 1 auto;
27 | overflow-y: auto;
28 | }
29 |
30 | .grid-box-content-panel {
31 | padding: 0px 5px;
32 | z-index: 1;
33 | }
34 |
35 | .grid-title-button-panel {
36 | position: absolute;
37 | right: 0;
38 | top: 0;
39 | background-color: transparent;
40 | padding: 4px;
41 | z-index: 2;
42 | min-width: 20px;
43 | height: 20px;
44 | }
45 |
46 | .grid-draggable {
47 | cursor: move;
48 | height: 25px;
49 | position: absolute;
50 | left: 0px;
51 | top: 0px;
52 | right: 0px;
53 | background-color: transparent;
54 | z-index: 10;
55 | }
56 |
57 | .grid-resizable {
58 | width: 12px;
59 | height: 12px;
60 | position: absolute;
61 | right: 0;
62 | bottom: 0;
63 | cursor: se-resize;
64 | z-index: 10;
65 | }
66 |
67 | .download-csv-button {
68 | display: none;
69 | z-index: 10;
70 | }
71 |
72 | .grid-title-button-panel:hover .download-csv-button {
73 | display: inline-block;
74 | transition: 0.3s;
75 | }
--------------------------------------------------------------------------------
/web-app/src/components/GridLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import GridItem from './GridItem';
4 | import './GridLayout.css';
5 |
6 | class GridLayout extends React.Component {
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | };
12 | }
13 |
14 | render() {
15 | const {
16 | width,
17 | height,
18 | backgroundColor,
19 | components = [],
20 | showGridlines,
21 | isEditMode
22 | } = this.props;
23 |
24 | let style = {
25 | width: width + 'px',
26 | height: height + 'px',
27 | backgroundColor: backgroundColor
28 | };
29 |
30 | if (showGridlines && isEditMode) {
31 | style.backgroundSize = '15px 15px';
32 | style.backgroundImage = 'radial-gradient(rgb(23, 43, 77) 10%, transparent 10%)';
33 | }
34 |
35 | const boxItems = components.map((component, index) =>
36 |
16 |
20 |
17 | {children}
18 |
19 |
57 | {boxItems}
58 |
59 | )
60 | }
61 | }
62 |
63 | export default GridLayout;
--------------------------------------------------------------------------------
/web-app/src/components/Kanban/Kanban.css:
--------------------------------------------------------------------------------
1 | .kanban-container {
2 | width: inherit;
3 | height: inherit;
4 |
5 | display: flex;
6 | flex-direction: row;
7 | }
8 |
9 | .kanban-column {
10 | flex: 1;
11 | display: flex;
12 | flex-direction: column;
13 | }
14 |
15 | .kanban-group-title {
16 | flex: 0 1 auto;
17 | text-align: center;
18 | font-weight: bold;
19 | font-size: 18px;
20 | }
21 |
22 | .kanban-group-panel {
23 | flex: 1;
24 | overflow-y: auto;
25 | }
26 |
27 | .kanban-block {
28 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
29 | border: 1px solid #e0e0e0;
30 | outline: 0;
31 | border-radius: 4px;
32 | padding: 5px;
33 | margin: 8px 5px;
34 | background-color: #FFFFFF;
35 | text-align: center;
36 | }
37 |
38 | .kanban-block-title {
39 | font-weight: bold;
40 | font-size: 16px;
41 | border-bottom: 1px solid black;
42 | padding-bottom: 5px;
43 | }
44 |
45 | .kanban-block-body {
46 | padding-top: 5px;
47 | }
48 |
49 | .kanban-block-body-row {
50 | padding-bottom: 5px;
51 | }
--------------------------------------------------------------------------------
/web-app/src/components/Kanban/Kanban.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './Kanban.css';
4 |
5 | class Kanban extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | }
11 | }
12 |
13 | static propTypes = {
14 | groupByField: PropTypes.string.isRequired,
15 | data: PropTypes.array.isRequired,
16 | blockTitleField: PropTypes.string
17 | };
18 |
19 | componentDidMount() {
20 | }
21 |
22 | render() {
23 | // TODO: allow to setup fixed width for column?
24 | // If the width is defined, the panel should be scrollable.
25 | // TODO: sort the blocks based on orderByField?
26 | const {
27 | groupByField,
28 | blockTitleField,
29 | data = []
30 | } = this.props;
31 |
32 | const groupData = [];
33 | for (let i = 0; i < data.length; i++) {
34 | const row = data[i];
35 | const index = groupData.findIndex(g => g.groupBy === row[groupByField]);
36 | if (index === -1) {
37 | groupData.push({
38 | groupBy: row[groupByField],
39 | blocks: [row]
40 | });
41 | } else {
42 | groupData[index].blocks.push(row);
43 | }
44 | }
45 |
46 | const groupPanelItems = [];
47 | for (let i = 0; i < groupData.length; i++) {
48 | const {
49 | groupBy,
50 | blocks
51 | } = groupData[i];
52 |
53 | const blockItems = [];
54 | for (let j = 0; j < blocks.length; j++) {
55 | const blockRowItems = [];
56 | let blockTitleValue = null;
57 | for (let [key, value] of Object.entries(blocks[j])) {
58 | if (key === blockTitleField) {
59 | blockTitleValue = value;
60 | } else if (key !== groupByField) {
61 | blockRowItems.push(
62 | {value}
63 | );
64 | }
65 | }
66 |
67 | blockItems.push(
68 |
69 | { blockTitleValue && (
70 |
76 | );
77 | }
78 |
79 | groupPanelItems.push(
80 | {blockTitleValue}
71 | )}
72 |
73 | {blockRowItems}
74 |
75 |
81 |
86 | );
87 | }
88 |
89 | return (
90 | {groupBy}
82 |
83 | {blockItems}
84 |
85 |
91 | {groupPanelItems}
92 |
93 | );
94 | }
95 | }
96 |
97 | export default Kanban;
--------------------------------------------------------------------------------
/web-app/src/components/Modal/Modal.css:
--------------------------------------------------------------------------------
1 | .modal-overlay {
2 | background: rgba(0, 0, 0, 0.6);
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 | z-index: 150;
9 | }
10 |
11 | .model-title {
12 | font-size: 22px;
13 | float: left;
14 | }
15 |
16 | .model-close-button {
17 | color: #212121;
18 | float: right;
19 | cursor: pointer;
20 | }
21 |
22 | .model-close-button:hover {
23 | background-color: #212121;
24 | color: #FFFFFF;
25 | }
26 |
27 | .modal-panel {
28 | background-color: #efefef;
29 | position: fixed;
30 | overflow-y: auto;
31 | padding: 10px;
32 | z-index: 200;
33 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
34 | max-height: calc(100vh - 60px);
35 | }
--------------------------------------------------------------------------------
/web-app/src/components/Modal/Modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Modal.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | class Modal extends React.Component {
6 |
7 | render() {
8 | const {
9 | show,
10 | modalClass = '',
11 | title,
12 | children
13 | } = this.props;
14 |
15 | const modalStatus = show ? 'display-block' : 'display-none';
16 | return (
17 |
18 |
31 | );
32 | }
33 | }
34 |
35 | export default Modal;
--------------------------------------------------------------------------------
/web-app/src/components/SearchInput/SearchInput.css:
--------------------------------------------------------------------------------
1 | .search-input-container {
2 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
3 | display: flex;
4 | flex-direction: row;
5 | width: inherit;
6 | box-sizing: border-box;
7 | border: 1px solid #e0e0e0;
8 | border-radius: 4px;
9 | }
10 |
11 | .search-input-icon {
12 | width: 32px;
13 | height: 31px;
14 | background-color: #FFFFFF;
15 | border-radius: 4px 0px 0px 4px;
16 | }
17 |
18 | .search-input-input {
19 | -webkit-appearance: none;
20 | -webkit-box-sizing: border-box;
21 | -moz-box-sizing: border-box;
22 | box-sizing: border-box;
23 | width: calc(100% - 64px);
24 | margin: 0px !important;
25 | padding: 5px 0px !important;
26 | box-shadow: none !important;
27 | border-radius: 0 !important;
28 | border: 2px solid #FFFFFF;
29 | outline: 0;
30 | background: #FFFFFF;
31 | font-size: 16px;
32 | height: 31px;
33 | }
34 |
35 | .search-input-input:focus {
36 | border: 2px solid #FFFFFF !important;
37 | }
38 |
39 | .search-input-reset-button {
40 | border-radius: 0px 4px 4px 0px;
41 | width: 32px;
42 | height: 31px;
43 | box-shadow: none;
44 | background-color: #FFFFFF;
45 | color: #212121;
46 | border: 0;
47 | }
48 |
49 | .search-input-reset-button:hover {
50 | background-color: #FFFFFF;
51 | color: #212121;
52 | }
53 |
54 |
--------------------------------------------------------------------------------
/web-app/src/components/SearchInput/SearchInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import './SearchInput.css';
5 |
6 | class SearchInput extends React.Component {
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {};
11 | }
12 |
13 | static propTypes = {
14 | name: PropTypes.string.isRequired,
15 | value: PropTypes.string.isRequired,
16 | onChange: PropTypes.func.isRequired,
17 | inputWidth: PropTypes.number
18 | };
19 |
20 | handleInputChange = (event) => {
21 | const { name } = this.props;
22 | const value = event.target.value;
23 | this.props.onChange(name, value);
24 | }
25 |
26 | reset = () => {
27 | const { name } = this.props;
28 | this.props.onChange(name, '');
29 | }
30 |
31 | render() {
32 | const {
33 | name,
34 | value,
35 | inputWidth
36 | } = this.props;
37 |
38 | let inputStyle = {};
39 | if (inputWidth) {
40 | inputStyle.width = inputWidth + 'px';
41 | }
42 |
43 | return (
44 |
19 |
26 |
30 |
20 |
25 | {title}
21 |
24 | 26 |
27 | {children}
28 |
29 |
45 |
62 | );
63 | }
64 | }
65 |
66 | export default SearchInput;
--------------------------------------------------------------------------------
/web-app/src/components/Select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class Select extends React.Component {
5 |
6 | constructor(props) {
7 | super(props);
8 | this.state = {};
9 | }
10 |
11 | static propTypes = {
12 | name: PropTypes.string.isRequired,
13 | value: PropTypes.string.isRequired,
14 | onChange: PropTypes.func.isRequired,
15 | options: PropTypes.array.isRequired,
16 | optionDisplay: PropTypes.string,
17 | optionValue: PropTypes.string,
18 | preloadOneEmpty: PropTypes.bool
19 | };
20 |
21 | handleOptionChange = (event) => {
22 | const name = this.props.name;
23 | const value = event.target.value;
24 | this.props.onChange(name, value);
25 | }
26 |
27 | render() {
28 | const {
29 | value,
30 | options = [],
31 | optionValue,
32 | optionDisplay,
33 | preloadOneEmpty = true
34 | } = this.props;
35 |
36 | const optionList = [];
37 | if (preloadOneEmpty) {
38 | optionList.push(
39 |
40 | );
41 | }
42 |
43 | options.forEach((option, index) => {
44 | let value;
45 | let display;
46 | if (optionValue && optionDisplay) {
47 | // The options contain objects.
48 | value = option[optionValue];
49 | display = option[optionDisplay];
50 | } else {
51 | // The options contain string or number.
52 | value = option;
53 | display = option;
54 | }
55 |
56 | optionList.push(
57 |
58 | )
59 | });
60 |
61 | return (
62 |
68 | )
69 | };
70 | }
71 |
72 | export default Select;
--------------------------------------------------------------------------------
/web-app/src/components/SelectButtons/SelectButtons.css:
--------------------------------------------------------------------------------
1 | .selectbuttons-container {
2 | display: flex;
3 | flex-direction: row;
4 | width: inherit;
5 | box-sizing: border-box;
6 | }
7 |
8 | .selectbuttons-container .select-button {
9 | margin-right: 5px;
10 | min-width: 100px;
11 | text-align: center;
12 | border-radius: 4px;
13 | font-weight: 700;
14 | height: 32px;
15 | line-height: 32px;
16 | cursor: pointer;
17 | background-color: #FFFFFF;
18 | border: 0;
19 | outline: none;
20 | color: #8993A4;
21 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
22 | flex-grow: 1;
23 | }
24 |
25 | .selectbuttons-container .select-button:hover {
26 | background-color: #C1C7D0;
27 | }
28 |
29 | .selectbuttons-container .select-button-active {
30 | background-color: #212121;
31 | color: white;
32 | }
33 |
34 |
35 |
--------------------------------------------------------------------------------
/web-app/src/components/SelectButtons/SelectButtons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './SelectButtons.css';
4 |
5 | class SelectButtons extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {};
10 | }
11 |
12 | static propTypes = {
13 | name: PropTypes.string.isRequired,
14 | value: PropTypes.string.isRequired,
15 | selections: PropTypes.array.isRequired,
16 | onChange: PropTypes.func.isRequired
17 | };
18 |
19 | clickButton = (value) => {
20 | const { name } = this.props;
21 | this.props.onChange(name, value);
22 | }
23 |
24 | render() {
25 | const {
26 | value,
27 | selections = []
28 | } = this.props;
29 | const buttonItems = [];
30 | for (let i = 0; i < selections.length; i++) {
31 | const {
32 | display,
33 | value: actualValue
34 | } = selections[i];
35 | const activeClass = actualValue === value ? 'select-button-active' : '';
36 | buttonItems.push(
37 |
46 |
48 |
56 |
61 | this.clickButton(actualValue)} key={actualValue}>{display}
38 | )
39 | }
40 |
41 | return (
42 |
43 | {buttonItems}
44 |
45 | )
46 | };
47 | }
48 |
49 | export default SelectButtons;
--------------------------------------------------------------------------------
/web-app/src/components/Tabs/Tabs.css:
--------------------------------------------------------------------------------
1 | .tab-header {
2 | list-style-type: none;
3 | border-bottom: 1px solid #ccc;
4 | padding: 0px;
5 | margin: 0px;
6 | }
7 |
8 | .tab-header-item {
9 | display: inline-block;
10 | list-style: none;
11 | margin-bottom: -1px;
12 | padding: 6px 12px;
13 | cursor: pointer;
14 | color: #8993A4;
15 | }
16 |
17 | .tab-header-active {
18 | border-bottom: 3px solid #0065FF;
19 | color: #212121;
20 | }
21 |
22 | .tab-content {
23 | }
--------------------------------------------------------------------------------
/web-app/src/components/Tabs/Tabs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Tabs.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | class Tabs extends React.Component {
6 |
7 | handleTabClick = (title) => {
8 | this.props.onTabChange(title);
9 | }
10 |
11 | render() {
12 | const {
13 | activeTab,
14 | children,
15 | showTabBgColor = false
16 | } = this.props;
17 |
18 | const tabHeaders = [];
19 | let tabContent = null;
20 | for (let i = 0; i < children.length; i++) {
21 | if (children[i]) {
22 | const {
23 | title,
24 | icon,
25 | iconOnly = false
26 | } = children[i].props;
27 |
28 | let active = '';
29 | let tabStyle = {};
30 | if (title === activeTab) {
31 | active = 'tab-header-active';
32 | tabContent = children[i].props.children;
33 | tabStyle = showTabBgColor ? {backgroundColor: '#FFFFFF'} : {};
34 | }
35 |
36 | tabHeaders.push(
37 |
50 |
57 | );
58 | }
59 | }
60 |
61 | export default Tabs;
62 |
63 |
--------------------------------------------------------------------------------
/web-app/src/components/Toast/Toast.css:
--------------------------------------------------------------------------------
1 | .toast-container {
2 | text-align: center;
3 | font-weight: 700;
4 | color: #FFFFFF;
5 | position: fixed;
6 | padding: 10px;
7 | z-index: 300;
8 | left: 50%;
9 | width: 400px;
10 | top: 10px;
11 | margin-left: -200px;
12 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
13 | overflow-y: auto;
14 | }
--------------------------------------------------------------------------------
/web-app/src/components/Toast/Toast.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Toast.css';
3 |
4 | const COLOR_RED = '#ef5350';
5 | const COLOR_GREEN = '#66bb6a';
6 |
7 | class Toast extends React.Component {
8 |
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | showToast: false,
13 | message: '',
14 | backgroundColor: COLOR_RED,
15 | timeoutId: ''
16 | };
17 |
18 | Toast._toastRef = this;
19 | }
20 |
21 | componentWillUnmount() {
22 | const { timeoutId } = this.state;
23 | if (timeoutId) {
24 | clearInterval(timeoutId);
25 | }
26 | }
27 |
28 | show = (message, bgColor) => {
29 | const { timeoutId } = this.state;
30 | if (timeoutId) {
31 | clearTimeout(timeoutId);
32 | }
33 | this.setState({
34 | showToast: true,
35 | message: message,
36 | backgroundColor: bgColor,
37 | timeoutId: ''
38 | }, () => {
39 | const timeoutId = setTimeout(() => {
40 | this.hide();
41 | }, 3000);
42 | this.setState({
43 | timeoutId: timeoutId
44 | });
45 | });
46 | }
47 |
48 | hide = () => {
49 | this.setState({
50 | showToast: false,
51 | message: ''
52 | });
53 | }
54 |
55 | static showSuccess = (message) => {
56 | Toast._toastRef.show(message, COLOR_GREEN);
57 | }
58 |
59 | static showError = (message) => {
60 | Toast._toastRef.show(message, COLOR_RED);
61 | }
62 |
63 | render() {
64 | const {
65 | showToast,
66 | message,
67 | backgroundColor
68 | } = this.state;
69 |
70 | const toastStatus = showToast ? 'display-block' : 'display-none';
71 | const style = {
72 | backgroundColor: backgroundColor
73 | }
74 |
75 | return (
76 | -
51 | {tabHeaders}
52 |
54 | {tabContent}
55 |
56 |
77 | {message}
78 |
79 | );
80 | }
81 | }
82 |
83 | export default Toast;
--------------------------------------------------------------------------------
/web-app/src/components/filters/DatePicker.css:
--------------------------------------------------------------------------------
1 | .row:after {
2 | content: "";
3 | display: table;
4 | clear: both;
5 | }
6 |
7 | .calendar-container {
8 | padding-top: 5px;
9 | }
10 |
11 | .calendar-dialog {
12 | width: 189px;
13 | border: 1px solid #dfe1e6;
14 | position: fixed;
15 | background-color: #FFFFFF;
16 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
17 | }
18 |
19 | .calendar-cell {
20 | width: 25px;
21 | height: 25px;
22 | line-height: 25px;
23 | float: left;
24 | text-align: center;
25 | }
26 |
27 | .calendar-container .select-date {
28 | -webkit-box-sizing: border-box;
29 | -moz-box-sizing: border-box;
30 | box-sizing: border-box;
31 | box-shadow: none !important;
32 | border: 2px solid #dfe1e6 !important;
33 | padding: 5px 8px;
34 | cursor: pointer;
35 | width: 100%;
36 | background-color: #FFFFFF;
37 | }
38 |
39 | .calendar-container .header-cell {
40 | border: 1px solid #dfe1e6;
41 | background-color: #dfe1e6;
42 | color: #000000;
43 | font-weight: bold;
44 | }
45 |
46 | .calendar-container .body-cell {
47 | border: 1px solid #dfe1e6;
48 | }
49 |
50 | .calendar-container .clickable {
51 | cursor: pointer;
52 | }
53 |
54 | .calendar-container .clickable:hover {
55 | background-color: #0065FF;
56 | color: #FFFFFF;
57 | }
58 |
59 | .calendar-container .non-clickable {
60 | background-color: #dfe1e6;
61 | }
62 |
63 | .calendar-container .cell-active {
64 | background-color: #000000;
65 | color: #FFFFFF;
66 | }
67 |
68 | .calendar-container .display-date {
69 | float: left;
70 | width: 109px;
71 | height: 25px;
72 | text-align: center;
73 | }
74 |
75 | .calendar-container .calendar-button {
76 | color: #0065FF;
77 | width: 40px;
78 | cursor: pointer;
79 | }
80 |
81 | .calendar-container .select-year {
82 | height: 20px;
83 | margin-top: 3px;
84 | border: 1px solid #dfe1e6 !important;
85 | }
86 |
87 | .calendar-overlay {
88 | position: fixed;
89 | top: 0;
90 | left: 0;
91 | right: 0;
92 | bottom: 0;
93 | }
--------------------------------------------------------------------------------
/web-app/src/components/filters/InputRange.css:
--------------------------------------------------------------------------------
1 | .input-range-container {
2 | padding: 3px 10px 8px 5px;
3 | }
4 |
5 | .input-range {
6 | -webkit-appearance: none;
7 | width: 100%;
8 | height: 5px;
9 | border-radius: 8px;
10 | background: #cccccc;
11 | outline: none;
12 | opacity: 0.7;
13 | -webkit-transition: .2s;
14 | transition: opacity .2s;
15 | }
16 |
17 | .input-range:hover {
18 | opacity: 1;
19 | }
20 |
21 | .input-range::-webkit-slider-thumb {
22 | appearance: none;
23 | width: 20px;
24 | height: 20px;
25 | border-radius: 50%;
26 | background: #0065FF;
27 | cursor: pointer;
28 | }
29 |
30 | .input-range::-moz-range-thumb {
31 | width: 20px;
32 | height: 20px;
33 | border-radius: 50%;
34 | background: #0065FF;
35 | cursor: pointer;
36 | }
37 |
38 | .input-range-value {
39 | background-color: #373737;
40 | color: #dfdfdf;
41 | padding: 2px 4px;
42 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
43 | outline: 0;
44 | border-radius: 4px;
45 | font-size: 16px;
46 | }
--------------------------------------------------------------------------------
/web-app/src/components/filters/InputRange.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './InputRange.css';
4 |
5 | class InputRange extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {};
10 | }
11 |
12 | static propTypes = {
13 | name: PropTypes.string.isRequired,
14 | min: PropTypes.number.isRequired,
15 | max: PropTypes.number.isRequired,
16 | value: PropTypes.number.isRequired,
17 | onChange: PropTypes.func.isRequired,
18 | step: PropTypes.number.isRequired
19 | };
20 |
21 | handleInputChange = (event) => {
22 | const { name } = this.props;
23 | const value = Number(event.target.value);
24 | this.props.onChange(name, value);
25 | }
26 |
27 | render() {
28 | const {
29 | name,
30 | min,
31 | max,
32 | value,
33 | step
34 | } = this.props;
35 |
36 | return (
37 |
38 |
52 | );
53 | }
54 | }
55 |
56 | export default InputRange;
--------------------------------------------------------------------------------
/web-app/src/components/filters/Paginator.css:
--------------------------------------------------------------------------------
1 |
2 | .paginator-button {
3 | border: 1px solid black;
4 | padding: 6px 12px;
5 | text-align: center;
6 | text-decoration: none;
7 | display: inline-block;
8 | font-size: 16px;
9 | cursor: pointer;
10 | }
--------------------------------------------------------------------------------
/web-app/src/components/filters/Paginator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './Paginator.css';
4 |
5 | class Paginator extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {};
10 | }
11 |
12 | static propTypes = {
13 | name: PropTypes.string.isRequired,
14 | value: PropTypes.number.isRequired,
15 | min: PropTypes.number,
16 | max: PropTypes.number
17 | };
18 |
19 | previous = () => {
20 | const {
21 | name,
22 | value,
23 | min = 1
24 | } = this.props;
25 | const current = Number(value);
26 | let prev = current - 1;
27 | if (prev < min) {
28 | prev = current;
29 | }
30 | this.props.onChange(name, prev);
31 | }
32 |
33 | next = () => {
34 | const {
35 | name,
36 | value,
37 | max = 100
38 | } = this.props;
39 | const current = Number(value);
40 | let next = current + 1;
41 | if (next > max) {
42 | next = current;
43 | }
44 | this.props.onChange(name, next);
45 | }
46 |
47 | clickNumber = (value) => {
48 | const {
49 | name
50 | } = this.props;
51 | const current = Number(value);
52 | this.props.onChange(name, current);
53 | }
54 |
55 | render() {
56 | const {
57 | value,
58 | min = 1,
59 | max = 100
60 | } = this.props;
61 |
62 | if (max <= min) {
63 | return (
39 | {value}
40 |
41 |
51 | error: min >= max
);
64 | }
65 |
66 | if (value > max || value < min) {
67 | return (error: value out of range
);
68 | }
69 |
70 | let showPrevious = true;
71 | let showNext = true;
72 | if (value === min) {
73 | showPrevious = false;
74 | } else if (value === max) {
75 | showNext = false;
76 | }
77 |
78 | return (
79 |
80 | { showPrevious && (
81 |
82 | )}
83 |
84 |
85 |
86 | { showNext && (
87 |
88 | )}
89 |
90 | );
91 | }
92 | }
93 |
94 | export default Paginator;
--------------------------------------------------------------------------------
/web-app/src/components/filters/Slicer.css:
--------------------------------------------------------------------------------
1 | .slicer-body {
2 | padding-top: 5px;
3 | }
4 |
5 | .slicer-toggle-button {
6 | margin-top: 5px;
7 | background-color: #212121;
8 | color: #FFFFFF;
9 | border-radius: 4px;
10 | border: 0;
11 | height: 20px;
12 | line-height: 20px;
13 | outline: none;
14 | cursor: pointer;
15 | }
--------------------------------------------------------------------------------
/web-app/src/components/filters/Slicer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | import Checkbox from '../Checkbox/Checkbox';
6 | import './Slicer.css';
7 |
8 | class Slicer extends React.Component {
9 |
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | isSelectAll: false,
14 | searchValue: ''
15 | };
16 | }
17 |
18 | static propTypes = {
19 | checkBoxes: PropTypes.array.isRequired,
20 | onChange: PropTypes.func.isRequired,
21 | readOnly: PropTypes.bool
22 | };
23 |
24 | toggleSelectAll = () => {
25 | const newIsSelectAll = !this.state.isSelectAll;
26 | const newCheckBoxes = [...this.props.checkBoxes];
27 | for (let i = 0; i < newCheckBoxes.length; i++) {
28 | newCheckBoxes[i].isChecked = newIsSelectAll;
29 | }
30 |
31 | this.setState(prevState => ({
32 | isSelectAll: !prevState.isSelectAll
33 | }));
34 |
35 | this.props.onChange(this.props.id, newCheckBoxes);
36 | }
37 |
38 | handleSearchValueChange = (event) => {
39 | const searchValue = event.target.value;
40 | this.setState({
41 | searchValue: searchValue
42 | });
43 | }
44 |
45 | handleCheckBoxChange = (name, isChecked) => {
46 | const newCheckBoxes = [...this.props.checkBoxes];
47 | const index = newCheckBoxes.findIndex(x => x.value === name);
48 | newCheckBoxes[index].isChecked = isChecked;
49 | this.props.onChange(this.props.id, newCheckBoxes);
50 | }
51 |
52 | render() {
53 | const {
54 | checkBoxes = [],
55 | readOnly = false
56 | } = this.props;
57 |
58 | const {
59 | searchValue,
60 | isSelectAll
61 | } = this.state;
62 |
63 | const checkBoxItems = [];
64 | for (let i = 0; i < checkBoxes.length; i++) {
65 | const {
66 | value,
67 | isChecked
68 | } = checkBoxes[i];
69 | if (!searchValue || (searchValue && value.includes(searchValue))) {
70 | checkBoxItems.push(
71 | (
72 |
86 | {/*
87 |
95 |
104 | */}
105 |
109 | );
110 | }
111 | }
112 |
113 | export default Slicer;
114 |
--------------------------------------------------------------------------------
/web-app/src/components/processbar/Processbar.css:
--------------------------------------------------------------------------------
1 | .progress-container {
2 | background: #ddd;
3 | overflow: hidden;
4 | position: relative;
5 | width: inherit;
6 | height: 22px;
7 | }
8 |
9 | .progress-bar {
10 | background: #f80;
11 | left: 0;
12 | position: absolute;
13 | top: 0;
14 | height: 22px;
15 | }
16 |
17 | .progress-value {
18 | color: green;
19 | position: absolute;
20 | top: 0px;
21 | right: 8px;
22 | }
--------------------------------------------------------------------------------
/web-app/src/components/processbar/Processbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './Processbar.css';
4 |
5 | class Processbar extends React.Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | }
11 | }
12 |
13 | static propTypes = {
14 | value: PropTypes.number.isRequired,
15 | percentage: PropTypes.number.isRequired,
16 | fontColor: PropTypes.string,
17 | barColor: PropTypes.string,
18 | backgroundColor: PropTypes.string
19 | };
20 |
21 | componentDidMount() {
22 | }
23 |
24 |
25 | render() {
26 | const {
27 | value,
28 | percentage,
29 | fontColor = 'green',
30 | barColor = '#f80',
31 | backgroundColor = '#ddd'
32 | } = this.props;
33 |
34 | const containerStyle = {
35 | backgroundColor: backgroundColor
36 | };
37 |
38 | const progressBarStyle = {
39 | width: percentage + '%',
40 | backgroundColor: barColor
41 | };
42 |
43 | const valueStyle = {
44 | color: fontColor
45 | };
46 |
47 | return (
48 |
106 | {checkBoxItems}
107 |
108 |
49 |
50 |
52 | );
53 | }
54 | }
55 |
56 | export default Processbar;
57 |
--------------------------------------------------------------------------------
/web-app/src/components/table/Table.css:
--------------------------------------------------------------------------------
1 | /** ReactTable */
2 | .ReactTable {
3 | font-size: 15px !important;
4 | }
5 |
6 | .ReactTable .rt-table {
7 | background-color: #FFFFFF;
8 | }
9 |
10 | .ReactTable .rt-thead.-header {
11 | box-shadow: none !important;
12 | border-bottom: 1px solid #B3BAC5;
13 | }
14 |
15 | .ReactTable .rt-tbody .rt-td {
16 | padding: 5px 3px;
17 | }
18 |
19 | .ReactTable .-pagination {
20 | width: 400px !important;
21 | box-shadow: none !important;
22 | border-top: none !important;
23 | float: right;
24 | margin-right: 5px;
25 | font-size: 12px !important;
26 | padding: 0px !important;
27 | }
28 |
29 |
30 | .ReactTable .pagination-bottom {
31 | border-top: 1px solid #B3BAC5;
32 | background-color: #FFFFFF;
33 | height: 35px;
34 | }
35 |
36 | .ReactTable .-pagination .-previous {
37 | width: 60px !important;
38 | flex: none !important;
39 | height: 26px;
40 | margin-top: 4px;
41 | }
42 |
43 | .ReactTable .-pagination .-center {
44 | width: 270px !important;
45 | flex: none !important;
46 | }
47 |
48 | .ReactTable .-pagination .-next {
49 | width: 60px !important;
50 | flex: none !important;
51 | height: 26px;
52 | margin-top: 4px;
53 | }
54 |
55 | .ReactTable .-pagination .-pageInfo {
56 | margin: 3px 0px 3px 0px !important;
57 | }
58 |
59 | .ReactTable .-pagination .-pageSizeOptions {
60 | margin: 3px 0px 3px 0px !important;
61 | }
62 |
63 | .ReactTable .-pagination .-btn {
64 | border: 0;
65 | outline: none;
66 | cursor: pointer;
67 | color: #000000 !important;
68 | background-color: #FFFFFF !important;
69 | }
70 |
71 | .ReactTable .rt-tbody .rt-tr-group:last-child {
72 | border-bottom: solid 1px rgba(0,0,0,0.05) !important;
73 | }
74 |
75 | .ReactTable .rt-thead .rt-th.-sort-asc,
76 | .ReactTable .rt-thead .rt-td.-sort-asc {
77 | box-shadow: inset 0 3px 0 0 #0065FF;
78 | }
79 |
80 | .ReactTable .rt-thead .rt-th.-sort-desc,
81 | .ReactTable .rt-thead .rt-td.-sort-desc {
82 | box-shadow: inset 0 -3px 0 0 #0065FF;
83 | }
84 |
85 | .ReactTable .rt-resizer {
86 | z-index: auto !important;
87 | }
--------------------------------------------------------------------------------
/web-app/src/components/table/Table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ReactTable from 'react-table';
4 | import 'react-table/react-table.css';
5 | import './Table.css';
6 |
7 | class Table extends React.PureComponent {
8 |
9 | static propTypes = {
10 | data: PropTypes.array.isRequired,
11 | columns: PropTypes.array.isRequired,
12 | defaultPageSize: PropTypes.number,
13 | drillThrough: PropTypes.array,
14 | showPagination: PropTypes.bool,
15 | height: PropTypes.number,
16 | errorMsg: PropTypes.string
17 | };
18 |
19 | handleTdClick = (reportId, columnName, columnValue) => {
20 | this.props.onTableTdClick(reportId, columnName, columnValue);
21 | }
22 |
23 | render() {
24 | const {
25 | data = [],
26 | columns = [],
27 | drillThrough = [],
28 | defaultPageSize = 10,
29 | showPagination = true,
30 | height,
31 | errorMsg
32 | } = this.props;
33 |
34 | const columnHeaders = [];
35 | columns.forEach(column => {
36 | const columnName = column.name;
37 | const header = {
38 | Header: columnName,
39 | accessor: columnName
40 | };
41 | if (drillThrough.length > 0) {
42 | const index = drillThrough.findIndex(d => d.columnName === columnName);
43 | if (index !== -1) {
44 | const reportId = drillThrough[index].reportId;
45 | header.Cell = (props =>
46 | this.handleTdClick(reportId, columnName, props.value)}>
48 | {props.value}
49 |
50 | );
51 | }
52 | }
53 |
54 | columnHeaders.push(header);
55 | });
56 |
57 | if (errorMsg) {
58 | return (
59 | {value}
51 | {errorMsg}
60 | );
61 | }
62 |
63 | if (data.length === 0 || columns.length === 0) {
64 | return (
65 | No data
66 | );
67 | }
68 |
69 | const pageSize = showPagination ? undefined : data.length;
70 | const style = height ? {
71 | height: height + 'px'
72 | } : {};
73 |
74 | return (
75 |
27 |
31 | );
32 | }
33 | }
34 |
35 | export default Card;
--------------------------------------------------------------------------------
/web-app/src/components/widgets/Iframe.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class Iframe extends React.Component {
5 |
6 | static propTypes = {
7 | src: PropTypes.string.isRequired,
8 | title: PropTypes.string.isRequired
9 | };
10 |
11 | render() {
12 | const {
13 | src,
14 | title
15 | } = this.props;
16 |
17 | const style = {
18 | width: '100%',
19 | height: '100%',
20 | border: '0px',
21 | display: 'block'
22 | }
23 |
24 | return (
25 |
26 | );
27 | }
28 | }
29 |
30 | export default Iframe;
--------------------------------------------------------------------------------
/web-app/src/components/widgets/ImageBox.css:
--------------------------------------------------------------------------------
1 | .image-original-scale {
2 | width: 100%;
3 | height: 100%;
4 | object-fit: contain;
5 | display: block;
6 | }
7 |
8 | .image-full {
9 | width: 100%;
10 | height: 100%;
11 | display: block;
12 | }
--------------------------------------------------------------------------------
/web-app/src/components/widgets/ImageBox.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './ImageBox.css';
4 |
5 | class ImageBox extends React.Component {
6 |
7 | static propTypes = {
8 | src: PropTypes.string.isRequired,
9 | isFull: PropTypes.bool
10 | };
11 |
12 | render() {
13 | const {
14 | isFull = false,
15 | src
16 | } = this.props;
17 |
18 | const imageClass = isFull ? 'image-full' : 'image-original-scale';
19 |
20 | return (
21 |
28 | {value}
29 |
30 |
29 | { isLink ?
30 | (
31 | {value}
32 | ) :
33 | (
34 | value
35 | )
36 | }
37 |
38 | );
39 | }
40 | }
41 |
42 | export default TextBox;
--------------------------------------------------------------------------------
/web-app/src/i18n.js:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import { initReactI18next } from 'react-i18next';
3 |
4 | import translationEN from './locales/en/translation';
5 | import translationZH from './locales/zh/translation';
6 | import translationES from './locales/es/translation';
7 | import translationFR from './locales/fr/translation';
8 |
9 | // the translations
10 | const resources = {
11 | en: {
12 | translation: translationEN
13 | },
14 | zh: {
15 | translation: translationZH
16 | },
17 | es: {
18 | translation: translationES
19 | },
20 | fr: {
21 | translation: translationFR
22 | }
23 | };
24 |
25 | i18n
26 | .use(initReactI18next)
27 | .init({
28 | resources: resources,
29 | lng: 'en',
30 | fallbackLng: 'en',
31 | interpolation: {
32 | escapeValue: false
33 | }
34 | });
35 |
36 | export default i18n;
--------------------------------------------------------------------------------
/web-app/src/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #root,
4 | .app {
5 | width: 100%;
6 | height: 100%;
7 | margin: 0;
8 | padding: 0;
9 | font-family: Tahoma, Geneva, sans-serif;
10 | color: #212121;
11 | -webkit-font-smoothing: antialiased;
12 | text-rendering: optimizeLegibility;
13 | -webkit-transition: all 0.15s ease;
14 | transition: all 0.15s ease;
15 | }
16 |
17 | textarea,
18 | input,
19 | button,
20 | select {
21 | font-family: inherit;
22 | font-size: inherit;
23 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
24 | }
25 |
26 | textarea {
27 | resize: vertical;
28 | }
29 |
30 | /* Toastify */
31 | .Toastify__toast-body {
32 | white-space: pre-wrap;
33 | word-wrap: break-word;
34 | width: 260px;
35 | }
36 |
37 | /* Echarts */
38 | .echarts {
39 | width: 100% !important;
40 | height: 100% !important;
41 | }
42 |
43 | /* Utility */
44 | .display-flex {
45 | display: flex;
46 | }
47 |
48 | .row:after {
49 | content: "";
50 | display: table;
51 | clear: both;
52 | }
53 |
54 | .float-left {
55 | float: left;
56 | }
57 |
58 | .float-right {
59 | float: right;
60 | }
61 |
62 | .inline-block {
63 | display: inline-block;
64 | }
65 |
66 | .ellipsis {
67 | text-overflow: ellipsis;
68 | white-space: nowrap;
69 | overflow: hidden;
70 | }
71 |
72 | .display-block {
73 | display: block;
74 | }
75 |
76 | .display-none {
77 | display: none;
78 | }
79 |
80 | .word-break-all {
81 | word-break: break-all;
82 | }
83 |
84 | hr {
85 | display: block;
86 | height: 1px;
87 | border: 0;
88 | border-top: 1px solid #ccc;
89 | margin: 8px 0;
90 | padding: 0;
91 | }
92 |
93 | .bold {
94 | font-weight: 700;
95 | }
96 |
97 | .cursor-pointer {
98 | cursor: pointer;
99 | }
100 |
101 | .full-width {
102 | width: 100%;
103 | }
104 |
105 | /* Scroll bar */
106 | ::-webkit-scrollbar {
107 | width: 10px;
108 | height: 10px;
109 | }
110 |
111 | ::-webkit-scrollbar-thumb {
112 | background: #bdbdbd;
113 | border: 0px none transparent;
114 | }
115 |
116 | ::-webkit-scrollbar-thumb:hover {
117 | background: #bdbdbd;
118 | }
119 |
120 | ::-webkit-scrollbar-thumb:active {
121 | background: #bdbdbd;
122 | }
123 |
124 | ::-webkit-scrollbar-track {
125 | background: transparent;
126 | border: 0px none transparent;
127 | }
128 |
129 | ::-webkit-scrollbar-track:hover {
130 | background: transparent;
131 | }
132 |
133 | ::-webkit-scrollbar-track:active {
134 | background: transparent;
135 | }
136 |
137 | ::-webkit-scrollbar-corner {
138 | background: transparent;
139 | }
--------------------------------------------------------------------------------
/web-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import { BrowserRouter } from "react-router-dom";
5 | import './i18n';
6 | import './index.css';
7 |
8 | ReactDOM.render(
9 | PageNotFound
10 | Login 11 |
12 |
14 | );
15 | };
16 | }
17 |
18 | export default ReportFullScreenView;
19 |
--------------------------------------------------------------------------------
/web-app/src/views/Studio/ReactSelectHelper.js:
--------------------------------------------------------------------------------
1 | export const CUSTOM_STYLE = {
2 | control: (provided, state) => ({
3 | ...provided,
4 | background: '#ffffff',
5 | borderColor: state.isSelected ? '#bdbdbd' : '#e0e0e0',
6 | minHeight: '32px',
7 | height: '32px',
8 | boxShadow: 'rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px',
9 | '&:hover': {
10 | borderColor: state.isFocused ? '#bdbdbd' : '#e0e0e0'
11 | }
12 | }),
13 | valueContainer: (provided, state) => ({
14 | ...provided,
15 | height: '32px',
16 | padding: '0 6px'
17 | }),
18 | indicatorsContainer: (provided, state) => ({
19 | ...provided,
20 | height: '32px',
21 | }),
22 | singleValue: (provided, state) => ({
23 | ...provided,
24 | top: '45%'
25 | }),
26 | placeholder: (provided, state) => ({
27 | ...provided,
28 | top: '45%'
29 | }),
30 | menu: (provided, state) => ({
31 | ...provided,
32 | marginTop: '0px',
33 | zIndex: '100'
34 | }),
35 | option: (provided, state) => ({
36 | ...provided,
37 | color: state.isSelected ? '#FFFFFF' : '#212121',
38 | backgroundColor: state.isSelected ? '#212121' : '#FFFFFF',
39 | padding: '6px 8px',
40 | '&:hover': {
41 | backgroundColor: '#C1C7D0',
42 | color: '#FFFFFF'
43 | }
44 | })
45 | }
--------------------------------------------------------------------------------
/web-app/src/views/Studio/SchemaPanel.css:
--------------------------------------------------------------------------------
1 | .schema-side-panel {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | bottom: 0;
6 | z-index: 500;
7 | width: 449px;
8 | min-width: 249px;
9 | overflow-y: auto;
10 | border-left: 1px solid #ccc;
11 | background-color: #efefef;
12 | padding: 5px;
13 | }
14 |
15 | .schema-title-row {
16 | padding: 4px 8px;
17 | cursor: pointer;
18 | margin-bottom: 3px;
19 | border: 0;
20 | outline: 0;
21 | border-radius: 4px;
22 | background-color: #FFFFFF;
23 | box-shadow: rgba(50, 50, 93, 0.149) 0px 1px 3px, rgba(0, 0, 0, 0.0196) 0px 1px 0px;
24 | }
25 |
26 | .schema-column-row-type {
27 | color: #8993A4;
28 | }
--------------------------------------------------------------------------------
/web-app/src/views/Studio/ScrollTabPanel.css:
--------------------------------------------------------------------------------
1 | .dynamic-tab-container {
2 | box-sizing: border-box;
3 | height: 40px;
4 | position: relative;
5 | border-bottom: 1px solid #ccc;
6 | margin-top: 3px;
7 | }
8 |
9 | .dynamic-tab-button-group {
10 | position: absolute;
11 | top: 0;
12 | left: 8px;
13 | width: 120px;
14 | line-height: 40px;
15 | height: 40px;
16 | }
17 |
18 | .dynamic-tab-droppable-container {
19 | position: absolute;
20 | top: 0;
21 | left: 120px;
22 | right: 0px;
23 | }
24 |
25 | .dynamic-tab-content-container {
26 | flex: 1 0 auto;
27 | display: flex;
28 | flex-direction: row;
29 | }
30 |
31 | .dynamic-tab-select-item {
32 | display: flex;
33 | height: 33px;
34 | line-height: 33px;
35 | }
36 |
37 | .dynamic-tab-select-value {
38 | width: 100px;
39 | text-overflow: ellipsis;
40 | white-space: nowrap;
41 | overflow: hidden;
42 | }
43 |
44 | .dynamic-tab-close-button {
45 | border-radius: 4px;
46 | height: 33px;
47 | width: 28px;
48 | outline: none;
49 | padding: 0px !important;
50 | cursor: pointer;
51 | box-shadow: none !important;
52 | border: 0 !important;
53 | background-color: transparent !important;
54 | }
--------------------------------------------------------------------------------
/web-app/src/views/Studio/Studio.css:
--------------------------------------------------------------------------------
1 | .studio-container {
2 | box-sizing: border-box;
3 | display: flex;
4 | flex-direction: row;
5 | height: 100%;
6 | background-color: #FFFFFF;
7 | }
8 |
9 | .studio-menu-sidebar {
10 | width: 199px;
11 | min-width: 199px;
12 | overflow-y: auto;
13 | border-right: 1px solid #ccc;
14 | background-color: #efefef;
15 | }
16 |
17 | .studio-property-sidebar {
18 | width: 199px;
19 | min-width: 199px;
20 | overflow-y: auto;
21 | border-right: 1px solid #ccc;
22 | background-color: #efefef;
23 | }
24 |
25 | .studio-property-panel {
26 | border-bottom: 1px solid #ccc;
27 | background-color: #FFFFFF;
28 | padding: 5px 8px 0px 8px;
29 | }
30 |
31 | .studio-body {
32 | flex: 1 1 auto;
33 | display: flex;
34 | flex-direction: column;
35 | overflow: hidden;
36 | }
37 |
38 | .studio-editor-container {
39 | height: 320px;
40 | }
41 |
42 | .studio-result-control-container {
43 | border-top: 1px solid #ccc;
44 | border-bottom: 1px solid #ccc;
45 | padding: 5px 8px;
46 | display: flex;
47 | justify-content: space-between;
48 | }
49 |
50 | .studio-result-container {
51 | overflow-y: auto;
52 | }
53 |
54 | .studio-datasource-container {
55 | padding: 5px 8px;
56 | border-bottom: 1px solid #ccc;
57 | display: flex;
58 | }
59 |
60 | .studio-datasource-select {
61 | width: 300px;
62 | }
63 |
64 | .studio-query-menu-item {
65 | border-left: 3px solid #EBECF0;
66 | margin: 5px 0px;
67 | padding: 3px 3px 3px 8px;
68 | font-weight: 700;
69 | color: #8993A4;
70 | cursor: pointer;
71 | }
72 |
73 | .studio-query-menu-item:hover {
74 | border-left: 3px solid #0065FF;
75 | }
76 |
77 | .studio-query-menu-item-active {
78 | border-left: 3px solid #0065FF;
79 | color: #0065FF;
80 | }
--------------------------------------------------------------------------------
/web-app/src/views/Workspace.css:
--------------------------------------------------------------------------------
1 | .workspace-name {
2 | display: block;
3 | color: #0065FF;
4 | padding: 7px 16px;
5 | font-size: 22px;
6 | font-weight: 700;
7 | float: left;
8 | margin-right: 6px;
9 | }
10 |
11 | .workspace-nav {
12 | width: 100%;
13 | height: 40px;
14 | background-color: #212121;
15 | box-sizing: border-box;
16 | }
17 |
18 | .workspace-nav-menu {
19 | list-style-type: none;
20 | margin: 0;
21 | padding: 0;
22 | overflow: hidden;
23 | float: left;
24 | }
25 |
26 | .workspace-nav-menu-text {
27 | margin-left: 6px;
28 | }
29 |
30 | .workspace-nav-menu-item {
31 | display: inline-block;
32 | list-style: none;
33 | font-size: 16px;
34 | }
35 |
36 | .workspace-nav-menu-item-value {
37 | display: block;
38 | color: #FFFFFF;
39 | padding: 11px 9px 10px 9px;
40 | cursor: pointer;
41 | }
42 |
43 | .workspace-nav-menu-item-dropdown {
44 | position: absolute;
45 | z-index: 1;
46 | background-color: #212121;
47 | min-width: 100px;
48 | }
49 |
50 | .workspace-nav-menu-item-value:hover {
51 | background-color: #003ccb;
52 | color: #FFFFFF !important;
53 | }
54 |
55 | .menu-item-active {
56 | background-color: #0065FF;
57 | color: #FFFFFF !important;
58 | }
59 |
60 | .workspace-content {
61 | position: fixed;
62 | top: 40px;
63 | left: 0px;
64 | right: 0;
65 | bottom: 0;
66 | background-color: #efefef;
67 | overflow-x: hidden;
68 | overflow-y: auto;
69 | }
70 |
71 | .workspace-account-menu {
72 | float: right;
73 | }
74 |
75 | .workspace-account-button {
76 | display: inline-block;
77 | color: #FFFFFF;
78 | padding: 11px 10px 10px 10px;
79 | text-decoration: none;
80 | cursor: pointer;
81 | }
82 |
83 | .workspace-account-button:hover {
84 | background-color: #003ccb;
85 | color: #FFFFFF !important;
86 | }
87 |
88 | .workspace-account-dropdown {
89 | position: absolute;
90 | right: 0px;
91 | z-index: 1;
92 | background-color: #212121;
93 | width: 80px;
94 | }
95 |
96 | .workspace-dropdown-button {
97 | color: #FFFFFF;
98 | cursor: pointer;
99 | padding: 8px 12px;
100 | }
101 |
102 | .workspace-dropdown-button:hover {
103 | background-color: #003ccb;
104 | color: #FFFFFF !important;
105 | }
--------------------------------------------------------------------------------