mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
SearchMapPriceLabel component (again)
This commit is contained in:
Vesa Luusua
parent
16964a8e60
commit
6e71495c57
4 changed files with 139 additions and 83 deletions
|
|
@ -5,87 +5,4 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.labelRoot {
|
||||
position: relative;
|
||||
|
||||
transform: translate( -50%, -31px);
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.priceLabel {
|
||||
/**
|
||||
* Since caret is absolutely positioned,
|
||||
* label must have relative to be included to the same rendering layer
|
||||
*/
|
||||
position: relative;
|
||||
|
||||
/* Font */
|
||||
@apply --marketplaceH5FontStyles;
|
||||
font-weight: var(--fontWeightSemiBold);
|
||||
color: var(--matterColor);
|
||||
letter-spacing: 0.1px;
|
||||
|
||||
background-color: var(--matterColorLight);
|
||||
|
||||
/* Borders */
|
||||
border-style: solid;
|
||||
border-color: var(--matterColorNegative);
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--boxShadowPopupLight);
|
||||
|
||||
/* Dimensions */
|
||||
padding: 6px 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
transition: var(--transitionStyleButton);
|
||||
|
||||
&:hover {
|
||||
color: var(--marketplaceColor);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--boxShadowPopup);
|
||||
}
|
||||
|
||||
/* Overwrite dimensions from font styles */
|
||||
@media (--viewportMedium) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.caretShadow {
|
||||
/* Caret / arrow dimensions and position */
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
/* Caret should have same box-shadow as label */
|
||||
box-shadow: var(--boxShadowPopupLight);
|
||||
}
|
||||
|
||||
.caret {
|
||||
|
||||
/* Caret / arrow dimensions and position */
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
/* Caret should have same bg-color and border as label */
|
||||
background-color: var(--matterColorLight);
|
||||
border-right-style: solid;
|
||||
border-right-color: var(--matterColorNegative);
|
||||
border-right-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--matterColorNegative);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
}
|
||||
|
|
|
|||
84
src/components/SearchMapPriceLabel/SearchMapPriceLabel.css
Normal file
84
src/components/SearchMapPriceLabel/SearchMapPriceLabel.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.priceLabel {
|
||||
/**
|
||||
* Since caret is absolutely positioned,
|
||||
* label must have relative to be included to the same rendering layer
|
||||
*/
|
||||
position: relative;
|
||||
|
||||
/* Font */
|
||||
@apply --marketplaceH5FontStyles;
|
||||
font-weight: var(--fontWeightSemiBold);
|
||||
color: var(--matterColor);
|
||||
letter-spacing: 0.1px;
|
||||
|
||||
background-color: var(--matterColorLight);
|
||||
|
||||
/* Borders */
|
||||
border-style: solid;
|
||||
border-color: var(--matterColorNegative);
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--boxShadowPopupLight);
|
||||
|
||||
/* Dimensions */
|
||||
padding: 6px 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
transition: var(--transitionStyleButton);
|
||||
|
||||
&:hover {
|
||||
color: var(--marketplaceColor);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--boxShadowPopup);
|
||||
}
|
||||
|
||||
/* Overwrite dimensions from font styles */
|
||||
@media (--viewportMedium) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.caretShadow {
|
||||
/* Caret / arrow dimensions and position */
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
/* Caret should have same box-shadow as label */
|
||||
box-shadow: var(--boxShadowPopupLight);
|
||||
}
|
||||
|
||||
.caret {
|
||||
|
||||
/* Caret / arrow dimensions and position */
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
/* Caret should have same bg-color and border as label */
|
||||
background-color: var(--matterColorLight);
|
||||
border-right-style: solid;
|
||||
border-right-color: var(--matterColorNegative);
|
||||
border-right-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--matterColorNegative);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
}
|
||||
53
src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
Normal file
53
src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import { OverlayView } from 'react-google-maps';
|
||||
import classNames from 'classnames';
|
||||
import * as propTypes from '../../util/propTypes';
|
||||
|
||||
import css from './SearchMapPriceLabel.css';
|
||||
|
||||
// Center label so that caret is pointing to correct pixel.
|
||||
// (vertical positioning: height + arrow) */
|
||||
const getPixelPositionOffset = (width, height) => {
|
||||
return { x: -(width / 2), y: -(height + 3) };
|
||||
};
|
||||
|
||||
const SearchMapPriceLabel = props => {
|
||||
const { className, rootClassName, price, listing } = props;
|
||||
const geolocation = listing.attributes.geolocation;
|
||||
|
||||
// Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
|
||||
const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
|
||||
const classes = classNames(rootClassName || css.root, className);
|
||||
|
||||
return (
|
||||
<OverlayView
|
||||
position={latLngLiteral}
|
||||
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
|
||||
getPixelPositionOffset={getPixelPositionOffset}
|
||||
>
|
||||
<div className={classes}>
|
||||
<div className={css.caretShadow} />
|
||||
<div className={css.priceLabel}>
|
||||
{price}
|
||||
</div>
|
||||
<div className={css.caret} />
|
||||
</div>
|
||||
</OverlayView>
|
||||
);
|
||||
};
|
||||
|
||||
SearchMapPriceLabel.defaultProps = {
|
||||
className: null,
|
||||
rootClassName: null,
|
||||
};
|
||||
|
||||
const { string } = PropTypes;
|
||||
|
||||
SearchMapPriceLabel.propTypes = {
|
||||
className: string,
|
||||
rootClassName: string,
|
||||
listing: propTypes.listing.isRequired,
|
||||
price: string.isRequired,
|
||||
};
|
||||
|
||||
export default SearchMapPriceLabel;
|
||||
|
|
@ -42,6 +42,7 @@ import RoutesProvider from './RoutesProvider/RoutesProvider';
|
|||
import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel';
|
||||
import SearchIcon from './SearchIcon/SearchIcon';
|
||||
import SearchMap from './SearchMap/SearchMap';
|
||||
import SearchMapPriceLabel from './SearchMapPriceLabel/SearchMapPriceLabel';
|
||||
import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel';
|
||||
import SelectField from './SelectField/SelectField';
|
||||
import StripeBankAccountTokenInputField
|
||||
|
|
@ -102,6 +103,7 @@ export {
|
|||
SaleDetailsPanel,
|
||||
SearchIcon,
|
||||
SearchMap,
|
||||
SearchMapPriceLabel,
|
||||
SearchResultsPanel,
|
||||
SecondaryButton,
|
||||
SelectField,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue