Skip to content

Commit 4a41a82

Browse files
ArneiArnei
committed
Merge branch 'main' into cleanup-notifications
2 parents 67e502f + c57779c commit 4a41a82

File tree

66 files changed

+6082
-6216
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+6082
-6216
lines changed

‎src/components/configuration/partials/wizard/BumperPage.tsx

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import FileUpload from "../../../shared/wizard/FileUpload";
55
import { FormikProps } from "formik";
66
import { Field } from "../../../shared/Field";
77
import Notifications from "../../../shared/Notifications";
8+
import ModalContentTable from "../../../shared/modals/ModalContentTable";
89

910
/**
1011
* This component renders the bumper/trailer (depending on isTrailer flag) page for new themes in the new themes wizard
@@ -33,79 +34,75 @@ const BumperPage = <T extends RequiredFormProps>({
3334

3435
return (
3536
<>
36-
<div className="modal-content">
37-
<div className="modal-body">
38-
<div className="full-col">
39-
<p className="tab-description">
40-
{t(
41-
!isTrailer
42-
? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION"
43-
: "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION"
44-
)}
45-
</p>
46-
{/* notifications */}
47-
<Notifications context="not_corner" />
48-
<div className="obj">
49-
<header>
50-
{t(
51-
!isTrailer
52-
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE"
53-
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE"
54-
)}
55-
</header>
56-
<div className="obj-container content-list padded">
57-
<div className="list-row">
58-
<div className="header-column">
59-
<label className="large">
60-
{t(
61-
!isTrailer
62-
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ENABLE"
63-
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ENABLE"
64-
)}
65-
</label>
66-
</div>
67-
{/* Checkbox for activating bumper/trailer */}
68-
<div className="content-column">
69-
<div className="content-container">
70-
<Field
71-
id="bumper-toggle"
72-
type="checkbox"
73-
name={!isTrailer ? "bumperActive" : "trailerActive"}
74-
/>
75-
</div>
76-
</div>
77-
</div>
78-
</div>
79-
</div>
80-
81-
{/* if checkbox is checked, then render object for uploading files */}
82-
{((!isTrailer && formik.values.bumperActive) ||
83-
(isTrailer && formik.values.trailerActive)) && (
84-
<div className="obj">
85-
<header>
37+
<ModalContentTable>
38+
<p className="tab-description">
39+
{t(
40+
!isTrailer
41+
? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION"
42+
: "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION"
43+
)}
44+
</p>
45+
{/* notifications */}
46+
<Notifications context="not_corner" />
47+
<div className="obj">
48+
<header>
49+
{t(
50+
!isTrailer
51+
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE"
52+
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE"
53+
)}
54+
</header>
55+
<div className="obj-container content-list padded">
56+
<div className="list-row">
57+
<div className="header-column">
58+
<label className="large">
8659
{t(
8760
!isTrailer
88-
? "CONFIGURATION.THEMES.DETAILS.BUMPER.SELECT"
89-
: "CONFIGURATION.THEMES.DETAILS.TRAILER.SELECT"
61+
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ENABLE"
62+
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ENABLE"
9063
)}
91-
</header>
92-
<div className="obj-container padded">
93-
{/* Upload file for bumper/trailer */}
94-
<FileUpload
95-
acceptableTypes="video/*"
96-
fileId={!isTrailer ? "bumperFile" : "trailerFile"}
97-
fileName={!isTrailer ? "bumperFileName" : "trailerFileName"}
98-
formik={formik}
99-
buttonKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_BUTTON"
100-
labelKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_LABEL"
101-
isEdit={isEdit}
64+
</label>
65+
</div>
66+
{/* Checkbox for activating bumper/trailer */}
67+
<div className="content-column">
68+
<div className="content-container">
69+
<Field
70+
id="bumper-toggle"
71+
type="checkbox"
72+
name={!isTrailer ? "bumperActive" : "trailerActive"}
10273
/>
10374
</div>
10475
</div>
105-
)}
76+
</div>
10677
</div>
10778
</div>
108-
</div>
79+
80+
{/* if checkbox is checked, then render object for uploading files */}
81+
{((!isTrailer && formik.values.bumperActive) ||
82+
(isTrailer && formik.values.trailerActive)) && (
83+
<div className="obj">
84+
<header>
85+
{t(
86+
!isTrailer
87+
? "CONFIGURATION.THEMES.DETAILS.BUMPER.SELECT"
88+
: "CONFIGURATION.THEMES.DETAILS.TRAILER.SELECT"
89+
)}
90+
</header>
91+
<div className="obj-container padded">
92+
{/* Upload file for bumper/trailer */}
93+
<FileUpload
94+
acceptableTypes="video/*"
95+
fileId={!isTrailer ? "bumperFile" : "trailerFile"}
96+
fileName={!isTrailer ? "bumperFileName" : "trailerFileName"}
97+
formik={formik}
98+
buttonKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_BUTTON"
99+
labelKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_LABEL"
100+
isEdit={isEdit}
101+
/>
102+
</div>
103+
</div>
104+
)}
105+
</ModalContentTable>
109106

110107
{/* Show navigation buttons only if page is used for a new theme*/}
111108
{!isEdit && (

‎src/components/configuration/partials/wizard/GeneralPage.tsx

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Notifications from "../../../shared/Notifications";
44
import { FormikProps } from "formik";
55
import { Field } from "../../../shared/Field";
66
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
7+
import ModalContentTable from "../../../shared/modals/ModalContentTable";
78

89
/**
910
* This component renders the general page for new themes in the new themes wizard
@@ -30,41 +31,37 @@ const GeneralPage = <T,>({
3031
return (
3132
<>
3233
{/* Fields for name and description */}
33-
<div className="modal-content">
34-
<div className="modal-body">
35-
<div className="full-col">
36-
<div className="form-container">
37-
<div className="row">
38-
<Notifications context={"other"}/>
39-
<label className="required" style={isEdit ? editStyle: undefined}>
40-
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
41-
</label>
42-
<Field
43-
name="name"
44-
type="text"
45-
autoFocus={!isEdit}
46-
placeholder={
47-
t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME") + "..."
48-
}
49-
/>
50-
</div>
51-
<div className="row">
52-
<label style={isEdit ? editStyle: undefined}>
53-
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
54-
</label>
55-
<Field
56-
name="description"
57-
as="textarea"
58-
placeholder={
59-
t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION") +
60-
"..."
61-
}
62-
/>
63-
</div>
64-
</div>
34+
<ModalContentTable>
35+
<div className="form-container">
36+
<div className="row">
37+
<Notifications context={"other"}/>
38+
<label className="required" style={isEdit ? editStyle: undefined}>
39+
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
40+
</label>
41+
<Field
42+
name="name"
43+
type="text"
44+
autoFocus={!isEdit}
45+
placeholder={
46+
t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME") + "..."
47+
}
48+
/>
49+
</div>
50+
<div className="row">
51+
<label style={isEdit ? editStyle: undefined}>
52+
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
53+
</label>
54+
<Field
55+
name="description"
56+
as="textarea"
57+
placeholder={
58+
t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION") +
59+
"..."
60+
}
61+
/>
6562
</div>
6663
</div>
67-
</div>
64+
</ModalContentTable>
6865

6966
{/* Show navigation buttons only if page is used for a new theme*/}
7067
{!isEdit && (

‎src/components/configuration/partials/wizard/ThemeSummaryPage.tsx

Lines changed: 72 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { useTranslation } from "react-i18next";
33
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
44
import { FormikProps } from "formik";
5+
import ModalContentTable from "../../../shared/modals/ModalContentTable";
56

67
/**
78
* This component renders the summary page for new themes in the new theme wizard.
@@ -29,83 +30,79 @@ const ThemeSummaryPage = <T extends RequiredFormProps>({
2930

3031
return (
3132
<>
32-
<div className="modal-content">
33-
<div className="modal-body">
34-
<div className="full-col">
35-
<div className="obj">
36-
<header>
37-
{t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")}
38-
</header>
39-
<div className="obj-container summary-list padded">
40-
<ul>
41-
{/* show only when file is uploaded for a list item */}
42-
{formik.values.bumperFile && (
43-
<li>
44-
<h4>
45-
{t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")}
46-
</h4>
47-
<p>
48-
<span>
49-
{t(
50-
"CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED"
51-
)}
52-
</span>
53-
{formik.values.bumperFileName}
54-
</p>
55-
</li>
56-
)}
57-
{formik.values.trailerFile && (
58-
<li>
59-
<h4>
60-
{t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")}
61-
</h4>
62-
<p>
63-
<span>
64-
{t(
65-
"CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED"
66-
)}
67-
</span>
68-
{formik.values.trailerFileName}
69-
</p>
70-
</li>
71-
)}
72-
{formik.values.titleSlideMode === "upload" &&
73-
formik.values.titleSlideBackground && (
74-
<li>
75-
<h4>
76-
{t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")}
77-
</h4>
78-
<p>
79-
<span>
80-
{t(
81-
"CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED"
82-
)}
83-
</span>
84-
{formik.values.titleSlideBackgroundName}
85-
</p>
86-
</li>
87-
)}
88-
{formik.values.watermarkFile && (
89-
<li>
90-
<h4>
91-
{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")}
92-
</h4>
93-
<p>
94-
<span>
95-
{t(
96-
"CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED"
97-
)}
98-
</span>
99-
{formik.values.watermarkFileName}
100-
</p>
101-
</li>
102-
)}
103-
</ul>
104-
</div>
105-
</div>
33+
<ModalContentTable>
34+
<div className="obj">
35+
<header>
36+
{t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")}
37+
</header>
38+
<div className="obj-container summary-list padded">
39+
<ul>
40+
{/* show only when file is uploaded for a list item */}
41+
{formik.values.bumperFile && (
42+
<li>
43+
<h4>
44+
{t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")}
45+
</h4>
46+
<p>
47+
<span>
48+
{t(
49+
"CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED"
50+
)}
51+
</span>
52+
{formik.values.bumperFileName}
53+
</p>
54+
</li>
55+
)}
56+
{formik.values.trailerFile && (
57+
<li>
58+
<h4>
59+
{t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")}
60+
</h4>
61+
<p>
62+
<span>
63+
{t(
64+
"CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED"
65+
)}
66+
</span>
67+
{formik.values.trailerFileName}
68+
</p>
69+
</li>
70+
)}
71+
{formik.values.titleSlideMode === "upload" &&
72+
formik.values.titleSlideBackground && (
73+
<li>
74+
<h4>
75+
{t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")}
76+
</h4>
77+
<p>
78+
<span>
79+
{t(
80+
"CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED"
81+
)}
82+
</span>
83+
{formik.values.titleSlideBackgroundName}
84+
</p>
85+
</li>
86+
)}
87+
{formik.values.watermarkFile && (
88+
<li>
89+
<h4>
90+
{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")}
91+
</h4>
92+
<p>
93+
<span>
94+
{t(
95+
"CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED"
96+
)}
97+
</span>
98+
{formik.values.watermarkFileName}
99+
</p>
100+
</li>
101+
)}
102+
</ul>
106103
</div>
107104
</div>
108-
</div>
105+
</ModalContentTable>
109106

110107
{/* Button for navigation to next page */}
111108
<WizardNavigationButtons

0 commit comments

Comments
 (0)