Skip to content

Commit ef048c5

Browse files
author
Olivier Castro-Perrier
authored
Merge pull request #1 from oliviercperrier/SKFP-65-combine-queries
Skfp 65 combine queries
2 parents ee15d78 + 4a3d790 commit ef048c5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+785
-296
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@ lib/
55
.vscode
66
build/
77
storybook-static/
8-
storybook/
98

‎README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,36 @@ Sets of shareable components
88
- @ferlab/ui Components for React
99
- @ferlab/style Set of scss style for the components, can be use with different stacks
1010

11+
## Docs
12+
13+
### Developments
14+
15+
1. Create your own fork
16+
2. Make changes localy
17+
3. Push on your fork
18+
4. Create a pull request from your fork to the main ferlab repo
19+
20+
21+
### How to add new components
22+
23+
First, run the build process and storybook [package/ui doc](./packages/ui/README.md)
24+
25+
All component should be expose to storybook. Please see [storybook doc](./storybook/README.md)
26+
### Deploy storybook to your own github pages from your fork
27+
28+
Why deploy your own storybook
29+
30+
- QA
31+
- Validation with design
32+
- Validate prototypes
33+
34+
35+
Storybook static site will be automaticaly deploy when you push or merge on master. Using your own fork enable to push on master without affecting the main repo.
36+
37+
#### Configure your github page
38+
39+
- Navigate to your GitHub repository settings and find the GitHub Pages section.
40+
- Select the main/master branch, then the docs folder and, click Save.
1141
## Storybook
1242

1343
Interactive set of components available in ferlab-ui through storybook

‎docs/iframe.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,4 @@
7171
}</script><style>#root[hidden],
7272
#docs-root[hidden] {
7373
display: none !important;
74-
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.041500e70c42dc9e91a9.bundle.js"></script><script src="vendors~main.041500e70c42dc9e91a9.bundle.js"></script><script src="main.041500e70c42dc9e91a9.bundle.js"></script></body></html>
74+
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.964a317e8627e4e03033.bundle.js"></script><script src="vendors~main.964a317e8627e4e03033.bundle.js"></script><script src="main.964a317e8627e4e03033.bundle.js"></script></body></html>

‎docs/main.041500e70c42dc9e91a9.bundle.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/main.041500e70c42dc9e91a9.bundle.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/main.964a317e8627e4e03033.bundle.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.964a317e8627e4e03033.bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/runtime~main.041500e70c42dc9e91a9.bundle.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/runtime~main.041500e70c42dc9e91a9.bundle.js renamed to ‎docs/runtime~main.964a317e8627e4e03033.bundle.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/runtime~main.964a317e8627e4e03033.bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendors~main.041500e70c42dc9e91a9.bundle.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎docs/vendors~main.041500e70c42dc9e91a9.bundle.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/vendors~main.964a317e8627e4e03033.bundle.js

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendors~main.041500e70c42dc9e91a9.bundle.js.LICENSE.txt renamed to ‎docs/vendors~main.964a317e8627e4e03033.bundle.js.LICENSE.txt

File renamed without changes.

‎docs/vendors~main.964a317e8627e4e03033.bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/style/components/queryBuilder/Combiner.module.scss

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
height: auto;
1010
border: none;
1111

12-
@include hoverFocus($query-combiner-button-hover-color, $query-combiner-button-focus-color);
13-
}
14-
}
15-
16-
.menuItem {
17-
display: flex;
18-
align-items: center;
12+
.operator {
13+
text-decoration: underline;
1914

20-
.itemIcon {
21-
margin-right: .8rem;
15+
&:hover {
16+
text-decoration: none;
17+
}
18+
}
2219
}
2320
}

‎packages/style/components/queryBuilder/Operator.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import 'theme.template';
22

3-
.icon {
3+
.icon, .text {
44
color:$query-icon-operator-color;
55

66
&:hover, &:active {

‎packages/style/components/queryBuilder/QueryBar.module.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,19 @@
3232
height: 100%;
3333
left: 0;
3434
top: 0;
35-
width: 4px;
35+
width: $query-bar-identifier-width;
3636
background: $query-bar-identifier;
3737
}
3838

3939

4040
.selectionWrapper {
41+
padding-left: $query-bar-padding-left + $query-bar-identifier-width;
4142
.label {
4243
font-size: 1.2rem;
43-
align-self: flex-start;
44+
padding-top: 1px;
45+
padding-left: 0.4em;
46+
font-weight: 600;
47+
box-shadow: none !important;
4448
}
4549
}
4650

@@ -84,7 +88,6 @@
8488
display: flex;
8589
align-items: center;
8690
padding: .3rem;
87-
align-self: flex-start;
8891

8992
&:first-child {
9093
margin-right: 1.6rem;

‎packages/style/components/queryBuilder/QueryBuilder.module.scss

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,29 @@
1515
}
1616

1717
.actions {
18+
align-items: center;
19+
20+
>*:not(:first-child) {
21+
margin-left: 1.5em;
22+
}
23+
24+
.switch {
25+
&.withLabel {
26+
display: flex;
27+
align-items: center;
28+
29+
.label {
30+
margin-left: 0.5em;
31+
}
32+
}
33+
}
1834

1935
.buttons {
2036
display: flex;
2137
align-items: center;
22-
&:not(:last-child) {
23-
margin-right: .8rem;
24-
}
2538

26-
>:first-child {
27-
margin-right: .6rem;
39+
&:last-child {
40+
margin-left: 1em;
2841
}
2942
}
3043
}

‎packages/style/components/queryBuilder/QueryPill.module.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.container {
44
background: $query-pill-bg;
5-
padding: .2rem .2rem .2rem .6rem;
5+
padding: .2rem .2rem .2rem .2rem;
66
border-radius: 2px;
77
align-items: center;
88
line-height: 20px;
@@ -11,13 +11,16 @@
1111
background: $query-pill-bg-active;
1212
}
1313

14-
.textSpace {
15-
margin-right: .6rem;
14+
.operator {
15+
margin-right: .4rem;
16+
margin-left: .2rem;
1617
}
1718

1819
.field {
1920
font-weight: 600;
2021
font-size: 1.2rem;
22+
margin-left: .4rem;
23+
margin-right: .2rem;
2124
}
2225

2326
.close {

‎packages/style/components/queryBuilder/QueryValues.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616

1717
.operator {
18-
margin: 0 .7rem;
18+
margin: 0 .4rem;
1919
}
2020
}
2121

‎packages/style/themes/default/_theme.template.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,14 @@ $query-bar-bg-active: #FFEFC1;
1414
$query-bar-border-color: #BCC9DC;
1515
$query-bar-border-color-active: #FFDC73;
1616
$query-bar-height: 100%;
17-
$query-bar-padding: .8rem 1.2rem;
17+
$query-bar-padding-top: 0.8em;
18+
$query-bar-padding-bottom: 0.8em;
19+
$query-bar-padding-right: 1.2em;
20+
$query-bar-padding-left: 1.2em;
21+
$query-bar-padding: $query-bar-padding-top $query-bar-padding-right $query-bar-padding-bottom $query-bar-padding-left;
1822

1923
$query-bar-identifier: #BCC9DC;
24+
$query-bar-identifier-width: 0.4em;
2025
$query-bar-identifier-active: #F5B800;
2126

2227
$query-bar-button-hover-color: $query-default-action-hover-color;
@@ -36,6 +41,7 @@ $query-combiner-button-focus-color: $query-default-action-focus-color;
3641

3742

3843
$query-icon-operator-color: #5A77A0;
44+
$query-text-operator-color-hover: #26436E;
3945
$query-icon-operator-color-hover: #26436E;
4046
$query-icon-label-operator-color: #26436E;
4147
$query-total-color: inherit;

‎packages/ui/README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @ferlab-ui React core components
22

3-
### Install
3+
## Install
44

55
npm i @ferlab/ui
66

@@ -11,9 +11,18 @@ Styles are installed separetly
1111
[@ferlab/style](github/)
1212

1313

14+
## Development
1415
### Storybook
1516

16-
In order to see and test all available components, you can run
17+
In order to see and test all available components
18+
19+
First you need to build the components
20+
21+
> npm run build
22+
23+
or run in development mode
24+
25+
> npm start
1726
1827
```bash
1928
cd ferlab-ui/storybook

‎packages/ui/src/components/QueryBuilder/Combiner.tsx

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
2-
import { Button, Dropdown, Menu } from 'antd';
2+
import { Button, Tooltip } from 'antd';
33

44
import StackLayout from '../../layout/StackLayout';
55

66
import AndOperator from './icons/AndOperator';
77
import OrOperator from './icons/OrOperator';
8-
import { CombinerEnum, IDictionary, TSqonGroupOp } from './types';
8+
import { CombinerEnum, IDictionary } from './types';
9+
import { TSqonGroupOp } from '../../data/types';
910

1011
import styles from '@ferlab/style/components/queryBuilder/Combiner.module.scss';
1112

@@ -15,27 +16,35 @@ interface ICombinerProps {
1516
onChange: (type: TSqonGroupOp) => void;
1617
}
1718

18-
const Combiner: React.FC<ICombinerProps> = ({ onChange, type, dictionary = {} }) => (
19-
<StackLayout className={styles.container}>
20-
<Dropdown
21-
overlay={
22-
<Menu>
23-
<Menu.Item className={styles.menuItem} onClick={() => onChange(CombinerEnum.And)}>
24-
<AndOperator className={styles.itemIcon} />{' '}
25-
{dictionary.query?.combine?.intersection || 'Intersection'}
26-
</Menu.Item>
27-
<Menu.Item className={styles.menuItem} onClick={() => onChange(CombinerEnum.Or)}>
28-
<OrOperator className={styles.itemIcon} /> {dictionary.query?.combine?.union || 'Union'}
29-
</Menu.Item>
30-
</Menu>
31-
}
32-
trigger={['click']}
33-
>
34-
<Button className={styles.button} type="text">
35-
{type === 'and' ? <AndOperator /> : <OrOperator />}
36-
</Button>
37-
</Dropdown>
38-
</StackLayout>
39-
);
19+
const Combiner: React.FC<ICombinerProps> = ({ onChange, type, dictionary = {} }) => {
20+
const isAndOperator = () => {
21+
return type === 'and';
22+
};
23+
24+
const toggleOperator = () => {
25+
onChange(isAndOperator() ? CombinerEnum.Or : CombinerEnum.And);
26+
};
27+
28+
const getTooltipTitle = () => {
29+
return `
30+
${dictionary.actions?.changeOperatorTo || 'Change operator to'}
31+
${isAndOperator() ? dictionary.query?.combine?.or || 'Or' : dictionary.query?.combine?.and || 'And'}
32+
`;
33+
};
34+
35+
return (
36+
<StackLayout className={styles.container}>
37+
<Tooltip title={getTooltipTitle()} align={{ offset: [0, 5] }}>
38+
<Button className={styles.button} type="text" onClick={() => toggleOperator()}>
39+
{isAndOperator() ? (
40+
<AndOperator className={styles.operator} />
41+
) : (
42+
<OrOperator className={styles.operator} />
43+
)}
44+
</Button>
45+
</Tooltip>
46+
</StackLayout>
47+
);
48+
};
4049

4150
export default Combiner;

0 commit comments

Comments
 (0)