Schedule details: port plane + dining SVGs from Angular toolkit
The plane and food row icons in ScheduleLegDetails were custom React SVGs (a cargo-airliner side-view and a knife+fork glyph) that didn't match the legacy app. Copy the actual paths verbatim from ClientApp/src/app/toolkit/icons/plane and .../dining so the React panel shows the same stylised top-view plane and the cloche- on-base 'Питание на борту' icon Angular ships. Use currentColor on both fills/strokes so the existing $blue link colour still applies. Reserve a 36px slot in __icon so the rows line up despite the plane (19×19) vs dining (34×26) intrinsic-size mismatch.
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
@use "../../../styles/colors" as colors;
|
||||
@use "../../../styles/variables" as vars;
|
||||
@use "../../../styles/fonts" as fonts;
|
||||
|
||||
.schedule-leg-details {
|
||||
background: colors.$white;
|
||||
border-top: 1px solid colors.$border;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: vars.$space-l vars.$space-xl;
|
||||
background: colors.$white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
min-height: 0;
|
||||
|
||||
&:hover {
|
||||
background: colors.$blue-extra-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: colors.$light-gray;
|
||||
font-size: fonts.$font-size-m;
|
||||
font-weight: fonts.$font-regular;
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: colors.$blue;
|
||||
transition: transform 0.2s ease;
|
||||
// Expanded: arrow points up (no rotation, base SVG apex-up).
|
||||
transform: rotate(0deg);
|
||||
|
||||
&--collapsed {
|
||||
// Collapsed: rotate 180° so apex points down, matching Angular's
|
||||
// `arrow-down-icon` (non-rotated == 180deg).
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 0 vars.$space-xl vars.$space-l;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 140px 1fr;
|
||||
align-items: center;
|
||||
gap: vars.$space-m;
|
||||
padding: vars.$space-m 0;
|
||||
border-bottom: 1px dashed colors.$border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&--meals .schedule-leg-details__label {
|
||||
align-self: flex-start;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: colors.$blue;
|
||||
// Reserve a fixed slot so the row layout isn't pushed when the
|
||||
// SVGs (plane = 19×19, dining = 34×26) have different intrinsic
|
||||
// sizes — gives a consistent left rail across rows.
|
||||
width: 36px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: colors.$light-gray;
|
||||
font-size: fonts.$font-size-m;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: colors.$blue;
|
||||
font-size: fonts.$font-size-m;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: colors.$blue--hover;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: colors.$text-color;
|
||||
font-size: fonts.$font-size-m;
|
||||
}
|
||||
|
||||
&__meals {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: vars.$space-xl;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__meal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 68px;
|
||||
color: colors.$blue;
|
||||
font-size: fonts.$font-size-s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__meal-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__meal-caption {
|
||||
color: colors.$blue;
|
||||
}
|
||||
}
|
||||
@@ -83,12 +83,21 @@ export const ScheduleLegDetails: FC<ScheduleLegDetailsProps> = ({ flight }) => {
|
||||
{aircraft && (
|
||||
<div className="schedule-leg-details__row">
|
||||
<span
|
||||
className="schedule-leg-details__icon"
|
||||
className="schedule-leg-details__icon schedule-leg-details__icon--plane"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="22" height="22">
|
||||
{/* Path copied verbatim from Angular's
|
||||
toolkit/icons/plane/plane-icon.component.html so the
|
||||
schedule details panel shows the same stylised
|
||||
top-view plane the legacy app does. */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 19 19"
|
||||
width="19"
|
||||
height="19"
|
||||
>
|
||||
<path
|
||||
d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5v1.5l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5Z"
|
||||
d="M6.334 16.625h1.583l3.958-6.334h4.355a1.188 1.188 0 0 0 0-2.375h-4.355L7.917 1.583H6.334l1.983 6.333H3.963L2.771 6.333H1.583l.792 2.771-.792 2.771h1.188l1.187-1.583h4.359Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
@@ -121,14 +130,47 @@ export const ScheduleLegDetails: FC<ScheduleLegDetailsProps> = ({ flight }) => {
|
||||
return (
|
||||
<div className="schedule-leg-details__row schedule-leg-details__row--meals">
|
||||
<span
|
||||
className="schedule-leg-details__icon"
|
||||
className="schedule-leg-details__icon schedule-leg-details__icon--dining"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="22" height="22">
|
||||
<path
|
||||
d="M7 3v8H5V3H3v18h2v-8h2v8h2V3H7Zm9 0c-2.2 0-4 1.8-4 4v6h3v8h2v-8h3V7c0-2.2-1.8-4-4-4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
{/* Cloche/serving-dome icon copied verbatim from
|
||||
Angular's toolkit/icons/dining/dining-icon.component
|
||||
so the panel matches the legacy 'Питание на борту'
|
||||
glyph (small dome with handle on a base line). */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 44 34"
|
||||
width="34"
|
||||
height="26"
|
||||
>
|
||||
<g transform="translate(-3 -15.853)">
|
||||
<path
|
||||
d="M7.807 43.151a21.729 21.729 0 0 1-.184-2.83c0-10.552 7.566-19.105 16.9-19.105s16.9 8.554 16.9 19.105a21.733 21.733 0 0 1-.184 2.83"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="m7.623 41.688 2.323 6.031A2 2 0 0 0 11.813 49h25.418a2 2 0 0 0 1.869-1.281l2.323-6.031"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<rect
|
||||
width="1.913"
|
||||
height="5.85"
|
||||
rx=".957"
|
||||
transform="translate(23.548 15.853)"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
width="44"
|
||||
height="1.95"
|
||||
rx=".975"
|
||||
transform="translate(3 41.201)"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="schedule-leg-details__label">
|
||||
|
||||
Reference in New Issue
Block a user