Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Feature/language selector #31

Merged
merged 6 commits into from
Aug 1, 2019
Merged

Feature/language selector #31

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0013459
language-selector
mluena Jul 30, 2019
fc08aa3
Merge branch 'develop' of https://github.com/Vizzuality/mangrove-atla…
mluena Jul 31, 2019
f987a8d
btn styles on active bar
mluena Jul 31, 2019
737ca01
option button styles
mluena Aug 1, 2019
e5ef9d8
PR - #31 amendments
mluena Aug 1, 2019
ee5a8a2
Spinner size, conflicts, language select removed
mluena Aug 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions src/components/button/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,48 @@

transition: all 0.25s ease;

&:hover {
border-color: rgba($primary, 0.4);
cursor: pointer;
}
// &:hover {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don`t leave comments unless you have a good reason.

// border-color: rgba($primary, 0.4);
// cursor: pointer;
// }

&:focus {
border-color: $primary;
}
// &:focus {
// border-color: $primary;
// }

&.background {
background-color: $primary;
color:$white;
&:focus {
height: 26px;
width: 124.8px;
border: 2px solid $white;
opacity: 0.4;
border-radius: 15px;
}
// height: 26px;
// width: 124.8px;
// border: 2px solid $white;
//
// border-radius: 15px;
&.contrast {
background-color: $white;
color: $primary;
border-color: $white;
}
// &:focus {
// height: 26px;
// width: 124.8px;
// border: 2px solid $white;
// opacity: 0.4;
// border-radius: 15px;
// }
}

&.transparent {
border-color: rgba(0, 133, 127, 0.2);
border-color: rgba(0, 133, 127, 0.4);
background-color: transparent;
color: $primary;

&:hover {
border: 2px solid rgba(0, 133, 127, 0.4);
}
&:focus {
border-color: $primary;
}
// &:focus {
// border-color: $primary;
// }
&.contrast {
color: $white;
}
Expand All @@ -59,9 +65,9 @@
&:hover {
border-color: rgba(0,0,0,0.4);
}
&:focus {
border-color: $body-color;
}
// &:focus {
// border-color: $body-color;
// }
}
}

Expand Down
20 changes: 14 additions & 6 deletions src/components/buttonGroup/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
@import '../../styles/vars';

.container {
display: inline-flex;
border: 2px solid rgba(0,0,0,0.2);
height: 30px;
display:inline-flex;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a very very small detail: display: inline-flex

position: relative;
height: 26px;
border-radius: 15px;

* {
button {
display: block;
position: relative;
margin: -2px;
border: none;
text-align: center;
color: $body-color;

&:focus {
border-radius: 15px;
text-align: center;
border: 2px solid white;
margin: -2px;
height: 30px;
background-color: $white;
color: $primary;
}
border-bottom: 3px solid white;;

}
}
}
7 changes: 6 additions & 1 deletion src/components/widget/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,12 @@ const Widget = ({
{name}
</button>
{layerId && (
<Button isActive={isActive} onClick={activeToggleHandler}>
<Button
hasBackground={isActive}
hasContrast={!isActive}
isActive={isActive}
onClick={activeToggleHandler}
>
{isActive ? 'Hide layer' : 'Show layer'}
</Button>
)}
Expand Down
10 changes: 8 additions & 2 deletions src/components/widgets/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import Widget from 'components/widget';
import Button from 'components/button';
import ButtonGroup from 'components/buttonGroup';
import TEMPLATES from 'components/widget/templates';
import CONFIGS from 'components/widget/templates/configs';
import styles from './style.module.scss';
Expand Down Expand Up @@ -42,9 +43,14 @@ class WidgetList extends PureComponent {
<div className={styles.actionBar}>
{
isCollapsed
? <Button onClick={this.onClickExpandAll}>Expand all widgets</Button>
: <Button onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
? <Button hasBackground hasContrast onClick={this.onClickExpandAll}>Expand all widgets</Button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to define theme="c" or something like that

: <Button isTransparent isGrey onClick={this.onClickCollapseAll}>Collapse all widgets</Button>
}
<ButtonGroup onClick={this.onClickExpandAll}>
<Button onClick={this.onClickExpandAll}>Français</Button>
<Button onClick={this.onClickExpandAll}>English</Button>
</ButtonGroup>

</div>
{widgets.map(widget => (
<Widget
Expand Down
2 changes: 2 additions & 0 deletions src/components/widgets/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,7 @@
}

.actionBar {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}