Skip to content

Feature/gee design improvements #3375

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Apr 25, 2018
Merged

Feature/gee design improvements #3375

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
97e938d
button active style
pjosh Apr 23, 2018
0a10a73
remove polygon hover style
pjosh Apr 23, 2018
61c4eb7
tile infowindow style
pjosh Apr 23, 2018
3bea097
thumbnails hover style
pjosh Apr 23, 2018
30d05c2
empty state for the thumbnails carousel
pjosh Apr 23, 2018
17314eb
hide the tool button when the screen is less than 1300px
pjosh Apr 23, 2018
9bea9a7
fix button style
pjosh Apr 23, 2018
814061a
change no content text
pjosh Apr 24, 2018
f942867
fix button position
pjosh Apr 24, 2018
91bad73
settings responsive
pjosh Apr 24, 2018
cb6ef87
fix z-index on dates
pjosh Apr 24, 2018
4add537
timeline event & css transform
pjosh Apr 24, 2018
c0727f9
removing the icon margin
pjosh Apr 24, 2018
38e12c2
fix button z-index
pjosh Apr 24, 2018
07b2321
adding readOnly prop on the datepicker
pjosh Apr 24, 2018
5999327
datepicker styles & unify shadows and fangs
pjosh Apr 24, 2018
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
4 changes: 3 additions & 1 deletion app/javascript/components/button/themes/button-map-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
}

&.--active {
background-color: $border;
background-color: $green-gfw;
Copy link
Contributor

Choose a reason for hiding this comment

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

This will also change the country pages button.

color: $black;
fill: $black;
}

svg {
Expand Down
84 changes: 47 additions & 37 deletions ...ap/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Slider from 'components/slider';
import Carousel from 'components/carousel';
import Dropdown from 'components/dropdown';
import Datepicker from 'components/datepicker';
import NoContent from 'components/no-content';
import RecentImageryThumbnail from 'pages/map/recent-imagery/components/recent-imagery-thumbnail';

import WEEKS from 'pages/map/data/weeks.json';
Expand Down Expand Up @@ -113,43 +114,52 @@ class RecentImagerySettings extends PureComponent {
/>
</div>
<div className="c-recent-imagery-settings__thumbnails">
<div className="c-recent-imagery-settings__thumbnails__description">
{this.state.thumbnailsDescription || selectedTile.description}
</div>
<Carousel
settings={{
slidesToShow: thumbsToShow,
infinite: tiles.length > thumbsToShow,
centerMode: tiles.length > thumbsToShow,
centerPadding: '20px',
responsive: null,
draggable: false,
dots: false,
arrows: tiles.length > thumbsToShow
}}
>
{tiles.length &&
tiles.map((tile, i) => (
<div key={`recent-imagery-thumb-${tile.id}`}>
<RecentImageryThumbnail
id={i}
tile={tile}
selected={selectedTileIndex === i}
handleClick={() => {
setRecentImagerySettings({ selectedTileIndex: i });
}}
handleMouseEnter={() => {
this.setState({
thumbnailsDescription: tile.description
});
}}
handleMouseLeave={() => {
this.setState({ thumbnailsDescription: null });
}}
/>
</div>
))}
</Carousel>
{tiles.length >= 2 && (
<div>
<div className="c-recent-imagery-settings__thumbnails__description">
{this.state.thumbnailsDescription || selectedTile.description}
</div>
<Carousel
settings={{
slidesToShow: thumbsToShow,
infinite: tiles.length > thumbsToShow,
centerMode: tiles.length > thumbsToShow,
centerPadding: '20px',
responsive: null,
draggable: false,
dots: false,
arrows: tiles.length > thumbsToShow
}}
>
{tiles.map((tile, i) => (
<div key={`recent-imagery-thumb-${tile.id}`}>
<RecentImageryThumbnail
id={i}
tile={tile}
selected={selectedTileIndex === i}
handleClick={() => {
setRecentImagerySettings({ selectedTileIndex: i });
}}
handleMouseEnter={() => {
this.setState({
thumbnailsDescription: tile.description
});
}}
handleMouseLeave={() => {
this.setState({ thumbnailsDescription: null });
}}
/>
</div>
))}
</Carousel>
</div>
)}
{tiles.length < 2 && (
<NoContent
className="c-recent-imagery-settings__empty-thumbnails"
message="We haven't found more images for this selection"
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be better to say "We can't find additional images for the selection"

/>
)}
</div>
</div>
);
Expand Down
5 changes: 5 additions & 0 deletions ...map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
&__thumbnails {
position: relative;
width: 100%;
min-height: rem(146px);
padding-top: rem(14px);
margin-top: rem(20px);
border-top: 1px solid rgba(#9e9e9e, 0.3);
Expand Down Expand Up @@ -135,4 +136,8 @@
}
}
}

&__empty-thumbnails {
padding-top: rem(11px);
}
}
12 changes: 10 additions & 2 deletions ...p/recent-imagery/components/recent-imagery-thumbnail/recent-imagery-thumbnail-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,21 @@
cursor: pointer;
outline: none;

&--selected::before {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid $green-gfw;
border: 4px solid transparent;
}

&:hover::before {
border-color: $slate;
}

&--selected::before {
border-color: $green-gfw !important;
}
}
28 changes: 24 additions & 4 deletions app/javascript/pages/map/recent-imagery/recent-imagery-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,34 @@
height: calc(100vh - #{rem(36px)});
}

@media screen and (min-width: 62.5rem) {
@media screen and (min-width: rem(1300px)) {
display: block;
}
}

.recent-imagery-infowindow {
font-family: $font-family-1;
color: $white;
font-size: 10px;
text-shadow: 0 0 3px $slate-light;
padding: rem(10px);
margin: rem(3px) rem(3px) rem(5px) rem(3px);
font-size: 12px;
color: $slate;
background-color: $tip;
box-shadow: 0 1px 3px 0 rgba($slate, 0.25);

&__arrow {
position: absolute;
left: rem(-18px);
right: 0;
top: rem(37px);
width: 0;
height: 0;
margin: auto;
border-left: 7px solid $tip;
border-right: none;
border-top: 7px solid $slate-light;
transform-origin: 0 0;
transform: rotate(-45deg);
border-top-color: $tip;
box-shadow: -2px 2px 2px 0 rgba($slate, 0.1);
}
}
36 changes: 16 additions & 20 deletions app/javascript/pages/map/recent-imagery/recent-imagery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,12 @@ class RecentImageryContainer extends PureComponent {
this.boundsPolygonInfowindow.close();
}
this.boundsPolygonInfowindow = new google.maps.InfoWindow({
content: `<div class="recent-imagery-infowindow">${description}</div>`,
content: `
<div class="recent-imagery-infowindow">
${description}
<div class="recent-imagery-infowindow__arrow"></div>
</div>
`,
position: polygonCenter.top
});
}
Expand All @@ -226,27 +231,18 @@ class RecentImageryContainer extends PureComponent {
let clickTimeout = null;

google.maps.event.addListener(this.boundsPolygon, 'mouseover', () => {
const zoom = map.getZoom();
if (zoom < 10) {
this.boundsPolygon.setOptions({
fillColor: '#000000',
fillOpacity: 0.1,
strokeColor: '#000000',
strokeOpacity: 0.5,
strokeWeight: 1
});
this.boundsPolygonInfowindow.open(map);
}
this.boundsPolygon.setOptions({
strokeColor: '#000000',
strokeOpacity: 0.5,
strokeWeight: 1
});
this.boundsPolygonInfowindow.open(map);
});
google.maps.event.addListener(this.boundsPolygon, 'mouseout', () => {
const zoom = map.getZoom();
if (zoom < 10) {
this.boundsPolygon.setOptions({
fillColor: 'transparent',
strokeWeight: 0
});
this.boundsPolygonInfowindow.close();
}
this.boundsPolygon.setOptions({
strokeWeight: 0
});
this.boundsPolygonInfowindow.close();
});
google.maps.event.addListener(this.boundsPolygon, 'click', () => {
clickTimeout = setTimeout(() => {
Expand Down