Merge pull request #5281 from overleaf/jpa-rework-language-picker

[web] rework the language picker UI in the footer

GitOrigin-RevId: fb9fe9a560a0f059f58c76d6a85f31ffabc14f4f

services/web/app/views/layout/footer-marketing.pug

@@ -1,11 +1,25 @@
 footer.site-footer
+	- var showLanguagePicker = Object.keys(settings.i18n.subdomainLang).length > 1
+	- var hasCustomLeftNav = nav.left_footer && nav.left_footer.length > 0
 	.site-footer-content.hidden-print
 		.row
 			ul.col-md-9
+				if hasFeature('saas')
+					li © #{new Date().getFullYear()} Overleaf
+				else if !settings.nav.hide_powered_by
+					li
+						| © 2021
+						|
+						a(href='https://www.overleaf.com/for/enterprises') Powered by Overleaf
 
-				if Object.keys(settings.i18n.subdomainLang).length > 1
+					if showLanguagePicker || hasCustomLeftNav
+						li
+							strong.text-muted |
+
+				if showLanguagePicker
 					li.dropdown.dropup.subdued
 						a.dropdown-toggle(
+							href="#",
 							data-toggle="dropdown",
 							aria-haspopup="true",
 							aria-expanded="false",
@@ -13,7 +27,9 @@ footer.site-footer
 							data-ol-lang-selector-tooltip,
 							title=translate('language')
 						)
-							figure(class="sprite-icon sprite-icon-lang sprite-icon-"+currentLngCode alt=translate(currentLngCode))
+							i.fa.fa-fw.fa-language
+							|
+							| #{settings.translatedLanguages[currentLngCode]}
 
 						ul.dropdown-menu(role="menu")
 							li.dropdown-header #{translate("language")}
@@ -21,9 +37,12 @@ footer.site-footer
 								if !subdomainDetails.hide
 									li.lngOption
 										a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams)
-											figure(class="sprite-icon sprite-icon-lang sprite-icon-"+subdomainDetails.lngCode alt=translate(subdomainDetails.lngCode))
-											|  #{translate(subdomainDetails.lngCode)}
-										//- img(src="/img/flags/24/.png")
+											| #{settings.translatedLanguages[subdomainDetails.lngCode]}
+
+				if showLanguagePicker && hasCustomLeftNav
+					li
+						strong.text-muted |
+
 				each item in nav.left_footer
 					li
 						if item.url

services/web/app/views/layout/footer.pug

@@ -1,10 +1,24 @@
 
 
 footer.site-footer
+	- var showLanguagePicker = Object.keys(settings.i18n.subdomainLang).length > 1
+	- var hasCustomLeftNav = nav.left_footer && nav.left_footer.length > 0
 	.site-footer-content.hidden-print
 		.row
 			ul.col-md-9
-				if Object.keys(settings.i18n.subdomainLang).length > 1
+				if hasFeature('saas')
+					li © #{new Date().getFullYear()} Overleaf
+				else if !settings.nav.hide_powered_by
+					li
+						| © 2021
+						|
+						a(href='https://www.overleaf.com/for/enterprises') Powered by Overleaf
+
+					if showLanguagePicker || hasCustomLeftNav
+						li
+							strong.text-muted |
+
+				if showLanguagePicker
 					li.dropdown.dropup.subdued(dropdown)
 						a.dropdown-toggle(
 							href="#",
@@ -15,7 +29,9 @@ footer.site-footer
 							aria-label="Select " + translate('language')
 							tooltip=translate('language')
 						)
-							figure(class="sprite-icon sprite-icon-lang sprite-icon-"+currentLngCode alt=translate(currentLngCode))
+							i.fa.fa-fw.fa-language
+							|
+							| #{settings.translatedLanguages[currentLngCode]}
 
 						ul.dropdown-menu
 							li.dropdown-header #{translate("language")}
@@ -23,8 +39,11 @@ footer.site-footer
 								if !subdomainDetails.hide
 									li.lngOption
 										a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams)
-											figure(class="sprite-icon sprite-icon-lang sprite-icon-"+subdomainDetails.lngCode alt=translate(subdomainDetails.lngCode))
-											|  #{translate(subdomainDetails.lngCode)}
+											| #{settings.translatedLanguages[subdomainDetails.lngCode]}
+
+				if showLanguagePicker && hasCustomLeftNav
+					li
+						strong.text-muted |
 
 				each item in nav.left_footer
 					li

services/web/config/settings.defaults.js

@@ -390,6 +390,30 @@ module.exports = {
     { code: 'xh', name: 'Xhosa' },
   ],
 
+  translatedLanguages: {
+    cn: '简体中文',
+    cs: 'Čeština',
+    da: 'Dansk',
+    de: 'Deutsch',
+    en: 'English',
+    es: 'Español',
+    fi: 'Suomi',
+    fr: 'Français',
+    it: 'Italiano',
+    ja: '日本語',
+    ko: '한국어',
+    nl: 'Nederlands',
+    no: 'Norsk',
+    pl: 'Polski',
+    pt: 'Português',
+    ro: 'Română',
+    ru: 'Русский',
+    sv: 'Svenska',
+    tr: 'Türkçe',
+    uk: 'Українська',
+    'zh-CN': '简体中文',
+  },
+
   // Password Settings
   // -----------
   // These restrict the passwords users can use when registering
@@ -542,17 +566,13 @@ module.exports = {
   nav: {
     title: 'ShareLaTeX Community Edition',
 
-    left_footer: [
-      {
-        text:
-          "Powered by <a href='https://www.sharelatex.com'>ShareLaTeX</a> © 2016",
-      },
-    ],
+    hide_powered_by: process.env.NAV_HIDE_POWERED_BY === 'true',
+    left_footer: [],
 
     right_footer: [
       {
         text: "<i class='fa fa-github-square'></i> Fork on Github!",
-        url: 'https://github.com/sharelatex/sharelatex',
+        url: 'https://github.com/overleaf/overleaf',
       },
     ],
 

services/web/frontend/stylesheets/components/footer.less

@@ -26,6 +26,11 @@ footer.site-footer {
     img {
       vertical-align: text-bottom;
     }
+
+    a:hover,
+    a:focus {
+      color: @white;
+    }
   }
 
   a {