Add share icon to expanded flight card
Angular's expanded FlightCard bottom bar has a share button on the left next to the 'Детали рейса' action on the right. Render an icon button backed by /assets/img/share.svg with the same justify-content: space-between layout. Click uses the Web Share API when available and falls back to writing the current URL to the clipboard.
This commit is contained in:
@@ -150,10 +150,34 @@
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: vars.$space-s;
|
||||
}
|
||||
|
||||
&__share-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 120ms ease;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(46, 87, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
&__details-btn {
|
||||
background: colors.$blue;
|
||||
color: #fff;
|
||||
|
||||
@@ -292,6 +292,30 @@ export const FlightCard: FC<FlightCardProps> = ({
|
||||
|
||||
{onViewDetails && (
|
||||
<div className="flight-card__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="flight-card__share-btn"
|
||||
data-testid="flight-share-button"
|
||||
aria-label={t("BOARD.SHARE")}
|
||||
title={t("BOARD.SHARE")}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const url = typeof window !== "undefined"
|
||||
? window.location.href
|
||||
: "";
|
||||
const navShare = (
|
||||
typeof navigator !== "undefined" &&
|
||||
(navigator as Navigator & { share?: (data: ShareData) => Promise<void> }).share
|
||||
);
|
||||
if (navShare && url) {
|
||||
void navShare.call(navigator, { url });
|
||||
} else if (url && typeof navigator !== "undefined" && navigator.clipboard) {
|
||||
void navigator.clipboard.writeText(url);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src="/assets/img/share.svg" alt="" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flight-card__details-btn"
|
||||
|
||||
Reference in New Issue
Block a user