Merge pull request #1085 from TomaszKandula/dev

merge: dev to master
TomaszKandula · May 6, 2024 · 0126195 · 0126195
2 parents 8a7185b + d9e4f8e
commit 0126195
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 15 deletions.
diff --git a/TokanPages.ClientApp/src/Components/Articles/ArticleCard/articleCard.tsx b/TokanPages.ClientApp/src/Components/Articles/ArticleCard/articleCard.tsx
@@ -33,7 +33,7 @@ export const ArticleCard = (props: Properties): JSX.Element => {
         case "fra": flagImage = "fra.png"; break;
         case "ger": flagImage = "ger.png"; break;
         case "pol": flagImage = "pol.png"; break;
-        case "spa": flagImage = "spa.png"; break;
+        case "esp": flagImage = "esp.png"; break;
         case "ukr": flagImage = "ukr.png"; break;
         default: flagImage = "eng.png";
     }

diff --git a/TokanPages.ClientApp/src/Components/Articles/ArticleDetail/articleDetail.tsx b/TokanPages.ClientApp/src/Components/Articles/ArticleDetail/articleDetail.tsx
@@ -47,7 +47,7 @@ export const ArticleDetail = (props: Properties): JSX.Element => {
         case "fra": flagImage = "fra.png"; break;
         case "ger": flagImage = "ger.png"; break;
         case "pol": flagImage = "pol.png"; break;
-        case "spa": flagImage = "spa.png"; break;
+        case "esp": flagImage = "esp.png"; break;
         case "ukr": flagImage = "ukr.png"; break;
         default: flagImage = "eng.png";
     }

diff --git a/...lientApp/src/Components/Layout/Navigation/View/__snapshots__/navigationView.test.tsx.snap b/...lientApp/src/Components/Layout/Navigation/View/__snapshots__/navigationView.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`test component: featuresView should render correctly '<NavigationView /
       >
         <button
           aria-label="menu"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-nav_icon-18 MuiIconButton-colorInherit"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-nav_icon-19 MuiIconButton-colorInherit"
           tabindex="0"
           type="button"
         >
@@ -53,24 +53,35 @@ exports[`test component: featuresView should render correctly '<NavigationView /
         </p>
       </div>
       <div
-        class="MuiGrid-root makeStyles-content_right_side-11 MuiGrid-item MuiGrid-grid-xs-true"
+        class="MuiGrid-root makeStyles-content_right_side-12 MuiGrid-item MuiGrid-grid-xs-true"
       >
         <div
-          class="MuiBox-root MuiBox-root-37 makeStyles-languagesBox-32"
+          class="MuiBox-root MuiBox-root-40 makeStyles-languagesBox-35"
         >
           <div
-            class="MuiFormControl-root"
+            class="MuiFormControl-root makeStyles-languages_control-36"
           >
             <div
-              class="MuiInputBase-root MuiInput-root makeStyles-languages_selection-33 MuiInputBase-formControl MuiInput-formControl"
+              class="MuiInputBase-root MuiInput-root makeStyles-languages_selection-37 MuiInputBase-formControl MuiInput-formControl"
             >
               <div
                 aria-haspopup="listbox"
                 class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
                 role="button"
                 tabindex="0"
               >
-                English
+                <div
+                  style="display:flex;align-items:center"
+                >
+                  <img
+                    alt=""
+                    class="makeStyles-flag_image-48"
+                    src="http://localhost:5000/api/v1/content/assets/getNonVideoAsset/?blobName=images/flags/eng.png"
+                  />
+                  <div>
+                    English
+                  </div>
+                </div>
               </div>
               <input
                 aria-hidden="true"
@@ -92,7 +103,7 @@ exports[`test component: featuresView should render correctly '<NavigationView /
           </div>
         </div>
         <div
-          class="makeStyles-user_avatar-36"
+          class="makeStyles-user_avatar-39"
         >
           <button
             class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"

diff --git a/TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationStyle.tsx b/TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationStyle.tsx
@@ -52,18 +52,23 @@ export const NavigationStyle = makeStyles(theme => ({
         display: "flex",
         justifyContent: "center",
     },
+    flag_image: {
+        height: 14,
+        width: 14,
+        marginRight: 5,
+    },
     languagesBox: {
         [theme.breakpoints.down(700)]: {
             marginRight: 0,
         },
         marginRight: 30,
         alignSelf: "center",
     },
+    languages_control: {
+    },
     languages_selection: {
         color: Colours.colours.gray1,
-    },
-    languages_menu: {
-        color: Colours.colours.violet,
+        width: 120,
     },
     content_right_side: {
         display: "flex",

diff --git a/TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationView.tsx b/TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationView.tsx
@@ -6,11 +6,13 @@ import Avatar from "@material-ui/core/Avatar";
 import MenuIcon from "@material-ui/icons/Menu";
 import { FormControl, Grid, MenuItem, Select, Typography, Box } from "@material-ui/core";
 import { LanguageItemDto } from "../../../../Api/Models/";
+import { GET_FLAG_URL } from "../../../../Api/Request";
 import { ApplicationLanguageState } from "../../../../Store/States/";
 import { HideOnScroll } from "../../../../Shared/Components/Scroll";
 import { Item } from "../../../../Shared/Components/ListRender/Models";
 import { ViewProperties } from "../../../../Shared/Abstractions";
 import { LanguageChangeEvent } from "../../../../Shared/types";
+import { RenderImage } from "../../../../Shared/Components";
 import { SideMenuView } from "./../SideMenu/sideMenuView";
 import { NavigationStyle } from "./navigationStyle";
 import { v4 as uuidv4 } from "uuid";
@@ -57,8 +59,8 @@ const RenderContent = (props: BaseProperties): JSX.Element => {
             <Box className={classes.languagesBox}>
                 <RenderLanguageSelection
                     {...props}
+                    styleControl={classes.languages_control}
                     styleSelect={classes.languages_selection}
-                    styleMenu={classes.languages_menu}
                 />
             </Box>
             <div className={classes.user_avatar}>
@@ -80,17 +82,22 @@ const RenderMenuIcon = (props: Properties): JSX.Element => {
 };
 
 const RenderLanguageSelection = (props: Properties): JSX.Element => {
+    const classes = NavigationStyle();
     return (
         <FormControl className={props.styleControl}>
             <Select
+                displayEmpty
+                disableUnderline
                 value={props.languageId}
                 onChange={props.languageHandler}
-                disableUnderline
                 className={props.styleSelect}
             >
                 {props.languages?.languages.map((item: LanguageItemDto, _index: number) => (
                     <MenuItem value={item.id} key={uuidv4()} className={props.styleMenu}>
-                        {item.name}
+                        <div style={{ display: "flex", alignItems: "center" }}>
+                            {RenderImage(GET_FLAG_URL, `${item.id}.png`, classes.flag_image)}
+                            <div>{item.name}</div>
+                        </div>
                     </MenuItem>
                 ))}
             </Select>