* Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme

- correct positio of flag-icon [SME: 12706]

clog

@@ -1,2 +1,2 @@
-* Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
-- fix navigation2.conf to more correctly translate menus [SME: 12714]
+* Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme
+- correct positio of flag-icon [SME: 12706]

root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/styles.css/50body

@@ -1,5 +1,4 @@
-{
-    $OUT = <<'EOF';
+/* DO NOT MODIFY THIS FILE! It is updated automatically */
 
 /*	smeserver_manager2  */
 
@@ -234,7 +233,7 @@ a.menu-title {
     width: 100%;
 }
 #h2e11 {
-    width: 70%;
+    width: 50%;
     float: left;
 }
 #h2e12 {
@@ -257,9 +256,9 @@ a.menu-title {
     width: 70%;
 }
 
-#h2e22,#h2e23 {
+#h2e22,#h2e23,#h2e12 {
     float: left;
-    width: 10%;
+    width: 14em;
     text-align: center;
 }
 
@@ -274,5 +273,4 @@ a.menu-title {
 }
 
 /*end*/
-EOF
-}
+

root/etc/e-smith/templates/usr/share/smanager/themes/default/public/js/flag-by-locale.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const flagContainer = document.getElementById('flag-container');
+
+  // Function to get the browser's locale
+  function getBrowserLocale() {
+    return navigator.language || navigator.userLanguage;
+  }
+
+  // Function to map locale to country code
+  function getCountryCodeFromLocale(locale) {
+    const localeParts = locale.split('-');
+    return localeParts.length > 1 ? localeParts[1] : localeParts[0];
+  }
+
+  // Function to create and display the flag icon
+  function displayFlagIcon(countryCode) {
+    const flagIcon = document.createElement('span');
+    flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
+    flagIcon.id = 'flag-icon';
+    flagContainer.appendChild(flagIcon);
+  }
+
+  // Main logic
+  const locale = getBrowserLocale();
+  const countryCode = getCountryCodeFromLocale(locale);
+  displayFlagIcon(countryCode);
+});

root/usr/share/smanager/themes/default/public/js/flag-by-locale.js

@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const flagContainer = document.getElementById('flag-container');
+
+  // Function to get the browser's locale
+  function getBrowserLocale() {
+    return navigator.language || navigator.userLanguage;
+  }
+
+  // Function to map locale to country code
+  function getCountryCodeFromLocale(locale) {
+    const localeParts = locale.split('-');
+    return localeParts.length > 1 ? localeParts[1] : localeParts[0];
+  }
+
+  // Function to fetch country names from a CDN
+  async function fetchCountryNames() {
+    const response = await fetch('https://restcountries.com/v3.1/all');
+    const countries = await response.json();
+    const countryNames = {};
+    for (const country of countries) {
+      const code = country.cca2.toLowerCase(); // Country code (ISO 3166-1 alpha-2)
+      const name = country.name.common; // Common name of the country
+      countryNames[code] = name;
+    }
+    return countryNames;
+  }
+
+  // Function to create and display the flag icon
+  function displayFlagIcon(countryCode, countryName) {
+    const flagIcon = document.createElement('span');
+    flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
+    flagIcon.id = 'flag-icon';
+    flagIcon.title = countryName; // Set the title for the tooltip
+
+    // If you want a custom tooltip instead (uncomment the lines below):
+    /*
+    const tooltip = document.createElement('span');
+    tooltip.className = 'tooltip';
+    tooltip.innerText = countryName;
+    flagIcon.appendChild(tooltip);
+
+    flagIcon.addEventListener('mouseenter', () => {
+      tooltip.style.display = 'block';
+    });
+
+    flagIcon.addEventListener('mouseleave', () => {
+      tooltip.style.display = 'none';
+    });
+    */
+
+    flagContainer.appendChild(flagIcon);
+  }
+
+  // Main logic
+  (async () => {
+    const locale = getBrowserLocale();
+    const countryCode = getCountryCodeFromLocale(locale);
+    const countryNames = await fetchCountryNames(); // Fetch country names
+
+    const countryName = countryNames[countryCode.toLowerCase()] || 'Unknown Country'; // Get the country name
+    displayFlagIcon(countryCode, countryName); // Display the flag with country name
+  })();
+});

root/usr/share/smanager/themes/default/templates/layouts/default.html.ep

@@ -31,7 +31,9 @@
 	%= javascript '/js/vfs_fonts.js'
 	%= javascript '/js/buttons.html5.min.js'
 	%= javascript '/js/buttons.print.min.js'
+	%= javascript '/js/flag-by-locale.js'
 
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
 	%= stylesheet '/css/sme-jquery-overrides.css'
 
 </head>

root/usr/share/smanager/themes/default/templates/partials/_header.html.ep

@@ -1,27 +1,128 @@
+<style>
+#h2l1 {
+    display: flex;                  /* Use flexbox layout */
+    justify-content: space-between; /* Space between child elements */
+    align-items: center;           /* Center items vertically */
+}
+
+#h2e11 {
+    flex: 1;                       /* Allow the first div to take available space on the left */
+}
+
+#h2e12 { 
+    display: flex;                 /* Make this div a flex container */
+    align-items: center;           /* Vertically center content in this div */
+    margin-left: 20px;            /* Add margin to the left of this div */
+}
+
+#flag-container {
+    display: flex;                 /* Make this div a flex container */
+    align-items: center;           /* Vertically center content in this div */
+    margin-left: 20px;             /* Add margin to the left of the flag container */
+    padding-right: 20px;           /* Add padding to the right side of the flag container */
+}
+
+.flag-icon {
+    width: 43px;
+    font-size: 20px;
+}
+
+#legacy-button button {
+    background-color: #98d36e; /* Button background color */
+    font-weight: lighter;      /* Lighter text for the button */
+    color: #063;               /* Button text color */
+    padding: 5px 10px;         /* Padding for the button */
+    border: none;              /* Remove default button border */
+    border-radius: 4px;        /* Rounded corners for button */
+    cursor: pointer;           /* Change cursor on hover */
+}
+
+#legacy-button button:hover {
+    background-color: #82c961; /* Change color on hover */
+}
+
+.infobar {
+    display: flex;                  /* Use flexbox for alignment */
+    justify-content: space-between; /* Space between child elements */
+    align-items: center;            /* Center items vertically */
+    padding: 10px;                  /* Adjust padding as desired */
+}
+
+#h2e21 {
+    flex: 1;                        /* Allow the first div to take available space on the left */
+}
+
+#h2e22 {
+    display: flex;                  /* Make this div a flex container */
+    justify-content: center;        /* Center the help button */
+    align-items: center;            /* Center vertically */
+    flex: none;                    /* Prevent this div from growing */
+    position: relative;             /* Relative position for centering */
+    width: 100px;                  /* Set a width for the help button container */
+}
+
+#h2e23 {
+    margin-left: auto;              /* Push the third div to the right */
+}
+
+.login-button {
+    background-color: #98d36e;     /* Button background color */
+    font-weight: bold;              /* Bold text */
+    xxcolor: #ffffff;                 /* Button text color */
+    padding: 8px 12px;              /* Adjust padding for button height */
+    border: none;                   /* Remove default border */
+    border-radius: 4px;             /* Rounded corners */
+    cursor: pointer;                /* Change cursor on hover */
+}
+
+.login-button:hover {
+    background-color: #82c961;      /* Change color on hover */
+}
+
+#help-button {
+    text-decoration: none;          /* Remove underline from link */
+    font-size: 20px;                /* Adjust font size as needed */
+    padding: 8px 12px;              /* Add padding to the help link */
+    background-color: #98d36e;      /* Background for visibility */
+    border-radius: 4px;             /* Rounded corners */
+    color: #000;                    /* Button text color */
+}
+
+#help-button:hover {
+    background-color: #82c961;      /* Change background on hover */
+}
+</style>
+
 <div id="header2" class="hd2">
     <div id="h2l1"> 
-	<div id="h2e11">
-	    <a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
-	</div>
-<!--        <div id="h2e12"><h5><a href="initial">Server Manager</a>
-            <a href="/server-manager" target='_blank'>&nbsp &nbsp (Prev SM)</a></h5> -->           
-        <div id="h2e12" style="float:right;"><br><a href="/server-manager" target='_blank'><button style="background-color:#98d36e;font-weight:bold;color:#063;">Legacy SM</button></a></div>
-    </div>
+		<div id="h2e11">
+			<a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
+		</div> 
 
-    <div id="h2l2" class="infobar"> 
-	<div id="h2e21">
-        <b>
-        <%= session 'SystemName' %>@<%= session 'DomainName' %></b> 
-	</div>
-        <div id="h2e22">
-          <a target="_parent" href="manual">&nbsp;&nbsp;<b> ? </b>&nbsp;&nbsp;</a>&nbsp;
-	</div>
-	<div id="h2e23">
-%    if ( not defined $c->session->{username} ) {
-          <a target="_parent" href="login"><b>Login</b></a>&nbsp;
-%    } else {
-          <a target="_parent" href="logout"><b><%= $c->session->{username} %> Logout</b></a>&nbsp;
-%    }
-	</div>
+		<div id="h2e22">
+			<a id="help-button" target="_parent" href="manual"><button> ? </button></a>
+		</div>
+    
+        <div id="h2e12">
+			<a id="legacy-button" href="/server-manager" target='_blank'><button>Legacy SM</button></a>
+        </div>
+		<div id="h2e23">
+			% if ( not defined $c->session->{username} ) {
+				<a target="_parent" href="login"><button class="login-button">Login</button></a>
+			% } else {
+				<a target="_parent" href="logout"><button class="login-button"><%= $c->session->{username} %> Logout</button></a>
+			% }
+		</div>
+		<div id="flag-container">
+			<!-- The flag icon will be inserted here -->
+		</div>
     </div>
+	<div id="h2l2" class="infobar"> 
+		<div id="h2e21">
+			<b>
+				<%= session 'SystemName' %>@<%= session 'DomainName' %></b> 
+		</div>
+		
+		
+	</div>
 </div>

smeserver-manager.spec

@@ -2,7 +2,7 @@ Summary: Sme server  navigation module : manager 2
 %define name smeserver-manager
 Name: %{name}
 %define version 11.0.0
-%define release 10
+%define release 12
 Version: %{version}
 Release: %{release}%{?dist}
 License: GPL
@@ -108,6 +108,12 @@ true
 %defattr(-,root,root)
 
 %changelog
+* Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme
+- correct positio of flag-icon [SME: 12706]
+
+* Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme
+- Add in flag icon indication of locale [SME: 12706]
+
 * Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
 - fix navigation2.conf to more correctly translate menus [SME: 12714]