From aa5936dae5510826ada90f33b7a7caabfc05e50e Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Thu, 5 Jan 2023 16:06:19 -0500
Subject: [PATCH] Locale select panel mock

---
 libretranslate/locales/.gitignore   |  3 +-
 libretranslate/static/css/main.css  | 55 +++++++++++++++++++++++++++++
 libretranslate/templates/index.html | 12 +++++--
 3 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/libretranslate/locales/.gitignore b/libretranslate/locales/.gitignore
index 7dc37f0..034e08a 100644
--- a/libretranslate/locales/.gitignore
+++ b/libretranslate/locales/.gitignore
@@ -1,2 +1,3 @@
 **/*.mo
-.langs.py
\ No newline at end of file
+.langs.py
+.swag.py
diff --git a/libretranslate/static/css/main.css b/libretranslate/static/css/main.css
index e90c35b..3300596 100644
--- a/libretranslate/static/css/main.css
+++ b/libretranslate/static/css/main.css
@@ -39,6 +39,61 @@ h3.header {
   position: relative;
 }
 
+.top-nav .locale-panel{
+  position: absolute;
+  top: 64px;
+  height: 68px;
+  left: -9px;
+  padding: 0 16px;
+  background: #1565c0;
+  width: 240px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0px 4px 5px 0 rgb(0 0 0 / 20%);
+}
+
+.locale-panel select{
+  display: block;
+  height: 32px;
+  font-size: 14px;
+  background-color: #fff;
+}
+
+.locale-panel a{
+  line-height: normal;
+  font-size: 90%;
+  padding: 0;
+  margin-top: 6px;
+  text-align: right;
+}
+
+.locale-panel a i.material-icons{
+  display: inline-block;
+  line-height: initial;
+  line-height: 14px;
+  font-size: 100%;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+
+.locale-panel a:hover{
+  background-color: transparent;
+}
+
+#nav-mobile .locale-panel{
+  color: rgba(0,0,0,0.87);
+  padding: 0 32px;
+}
+
+#nav-mobile .locale-panel a{
+  padding: 0;
+}
+
+#nav-mobile .locale-panel a i.material-icons{
+  float: none;
+}
+
 .language-select {
   display: inline-flex;
   align-items: center;
diff --git a/libretranslate/templates/index.html b/libretranslate/templates/index.html
index 24c42c1..ac41953 100644
--- a/libretranslate/templates/index.html
+++ b/libretranslate/templates/index.html
@@ -62,7 +62,7 @@
 					<img src="{{ url_for('static', filename='icon.svg') }}" alt="LibreTranslate" class="logo">
 					<span>LibreTranslate</span>
 				</a>
-				<ul class="right hide-on-med-and-down">
+				<ul class="right hide-on-med-and-down top-nav position-relative">
 					{% set menulinks %}
 					<li><a href="{{ swagger_url }}">{{ _h("API Docs") }}</a></li>
 					{% if get_api_key_link %}
@@ -72,7 +72,15 @@
 					{% if api_keys %}
 					<li><a class="noline" href="javascript:setApiKey()" title="{{ _h('Set API Key') }}"><i class="material-icons">vpn_key</i></a></li>
 					{% endif %}
-					<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a></li>
+					<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
+					</li>
+					<li class="locale-panel">
+						<select id="locales">
+							<option value="en">English</option>
+							<option value="it">Italian</option>
+						</select>
+						<a href="#">Improve this language<i class="material-icons">create</i></a>
+					</li>
 					{% endset %}
 					{{ menulinks }}
 				</ul>