Merge pull request #3121 from SaptakS/feature/language-menu/globe-icon

Add globe icon in the locale dropdown for better understanding
freedomofpress · Mar 12, 2018 · fdfcb50 · fdfcb50
2 parents 30cb748 + 37da339
commit fdfcb50
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 3 deletions.
diff --git a/securedrop/journalist_templates/locales.html b/securedrop/journalist_templates/locales.html
@@ -2,8 +2,9 @@
 <div class="menu">
   <input id="menu-1-checkbox" class="menu__checkbox visually-hidden" type="checkbox" >
   <label for="menu-1-checkbox" class="menu__trigger">
-    <span class="menu__trigger-arrow">▼</span>
+    <img class="icon menu__trigger-icon" src="/static/i/font-awesome/fa-globe-black.png" width="18px" height="16px">
     <span class="menu__trigger-text">{{ g.locales[g.locale] }}</span>
+    <span class="menu__trigger-arrow">▼</span>
   </label>
 
   <ul class="menu__items">

diff --git a/securedrop/sass/modules/_menu.sass b/securedrop/sass/modules/_menu.sass
@@ -21,6 +21,9 @@
   display: inline-block
   text-transform: capitalize
 
+.menu__trigger-icon
+  padding-right: 0.15em
+
 .menu__items
   display: none
   position: absolute
@@ -57,7 +60,7 @@
   width: 100vw
   height: 100vh
   background-color: transparent
-  & .menu__trigger-text, & .menu__trigger-arrow
+  & .menu__trigger-text, & .menu__trigger-arrow, & .menu__trigger-icon
     display: none
 
 .menu__checkbox:focus  ~ .menu__trigger

diff --git a/securedrop/source_templates/locales.html b/securedrop/source_templates/locales.html
@@ -2,8 +2,9 @@
 <div class="menu">
   <input id="menu-1-checkbox" class="menu__checkbox visually-hidden" type="checkbox" >
   <label for="menu-1-checkbox" class="menu__trigger">
-    <span class="menu__trigger-arrow">▼</span>
+    <img class="icon menu__trigger-icon" src="/static/i/font-awesome/fa-globe-black.png" width="18px" height="16px">
     <span class="menu__trigger-text">{{ g.locales[g.locale] }}</span>
+    <span class="menu__trigger-arrow">▼</span>
   </label>
 
   <ul class="menu__items">

diff --git a/securedrop/static/i/font-awesome/black/globe.svg b/securedrop/static/i/font-awesome/black/globe.svg
diff --git a/securedrop/static/i/font-awesome/fa-globe-black.png b/securedrop/static/i/font-awesome/fa-globe-black.png