move language-chooser to map

transparencyint · Mar 6, 2013 · 395c68b · 395c68b
1 parent 432a00c
commit 395c68b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 87 deletions.
diff --git a/app/styles/_index.styl b/app/styles/_index.styl
@@ -273,7 +273,7 @@
     left 0
     right 0
     bottom 0
-    padding 13px
+    padding 13px 13px 8px
     font-size 13px
     color hsl(219,50%,75%)
     border-top 1px solid rgba(0,0,0,.24)
@@ -289,4 +289,64 @@
 @keyframes jiggle {
   0% { transform: rotate(-1deg); }
   50% { transform: rotate(1deg); }
-}
+}
+
+/* language dropdown */
+.select2-search
+  display none !important
+
+#s2id_language
+  margin-top -7px
+  .select2-choice
+    /* button style */
+    display inline-block
+    float left
+    height 30px
+    width 36px
+    padding 0
+    margin 0
+    background none
+    border-radius 3px
+    border 1px solid transparent
+    box-shadow none
+    div
+      display none 
+    .flag
+      width 19px
+    span
+      margin 0
+      text-align center
+  &:hover,
+  &.select2-dropdown-open
+    .select2-choice
+      background linear-gradient(top, hsl(213,55%,55%), hsl(218,55%,51%))
+      border-color rgba(0,0,0,.34)
+      border-top-color rgba(0,0,0,.21)
+      border-bottom-color rgba(0,0,0,.55)
+      box-shadow 0 1px rgba(255,255,255,.21) inset, 0 1px rgba(0,0,0,.08)
+  &.select2-dropdown-open
+    .select2-choice
+      border-radius 0 0 3px 3px
+      box-shadow 0 1px rgba(255,255,255,.13) inset, 0 1px rgba(0,0,0,.08)
+#select2-drop
+  background linear-gradient(top, hsl(212,55%,57%), hsl(213,55%,55%))
+  border 1px solid rgba(0,0,0,.34)
+  border-top-color rgba(0,0,0,.21)
+  border-bottom none
+  border-radius 3px 3px 0 0
+  box-shadow 0 1px rgba(255,255,255,.08) inset, 0 -1px rgba(0,0,0,.13) inset
+  .select2-results
+    padding 0
+    margin 0
+    max-height none
+    .select2-result:first-child
+      border-radius 3px 3px 0 0
+    .select2-highlighted
+      background hsl(215,55%,75%)
+    .select2-result-label
+      padding 0
+      height 32px
+      line-height 30px
+      text-align center
+      .flag
+        width 19px
diff --git a/app/styles/_settings.styl b/app/styles/_settings.styl
@@ -29,60 +29,4 @@
       z-index 5
     .modal
       z-index 11
-      display block
-
-/* language dropdown */
-.select2-search
-  display none !important
-
-#s2id_language
-  margin-left 8px
-  .select2-choice
-    /* button style */
-    display inline-block
-    float left
-    height 34px
-    width 40px
-    padding 0
-    margin 0
-    background #4d86cb
-    background linear-gradient(top, hsl(213,55%,55%), hsl(218,55%,51%))
-    border-radius 3px
-    border 1px solid rgba(0,0,0,.34)
-    border-top-color rgba(0,0,0,.21)
-    border-bottom-color rgba(0,0,0,.55)
-    box-shadow 0 1px rgba(255,255,255,.21) inset, 0 1px rgba(0,0,0,.08)
-    div
-      display none 
-    .flag
-      width 24px
-      margin-top 4px
-    span
-      margin 0
-      text-align center
-  &.select2-dropdown-open
-    .select2-choice
-      border-radius 3px 3px 0 0
-#select2-drop
-  background linear-gradient(top, hsl(218,55%,51%), hsl(219,55%,42%))
-  border 1px solid rgba(0,0,0,.34)
-  border-top-color transparent
-  border-bottom-color rgba(0,0,0,.55)
-  border-radius 0 0 3px 3px
-  box-shadow 0 1px rgba(255,255,255,.08) inset, 0 1px rgba(0,0,0,.08)
-  .select2-results
-    padding 0
-    margin 0
-    max-height none
-    .select2-result:last-child
-      border-radius 0 0 3px 3px
-    .select2-highlighted
-      background hsl(215,55%,55%)
-    .select2-result-label
-      padding 5px 8px
-      height 32px
-      .flag
-        width 24px
-        margin-right 8px
-        margin-top 1px
-        vertical-align top
+      display block
diff --git a/app/views/index_view.js b/app/views/index_view.js
@@ -20,7 +20,9 @@ module.exports = View.extend({
 
       'keyup #add-country input': 'handleKeys',
       'click #add-country .button': 'toggleAddForm',
-      'submit form': 'handleSubmit'
+      'submit form': 'handleSubmit',
+
+      'change #language': 'changeLanguage'
     };
 
     return _events;
@@ -199,7 +201,9 @@ module.exports = View.extend({
 
   getRenderData: function() {
     return {
-      countries: this.options.countries.toJSON()
+      countries: this.options.countries.toJSON(),
+      activeLanguage: config.get('language'),
+      languages: config.get('languages')
     };
   },
 
@@ -227,9 +231,28 @@ module.exports = View.extend({
   },
 
   afterRender: function(){
+    this.$('#language').select2({
+      formatResult: this.renderFlag,
+      formatSelection: this.renderFlag
+    });
+
     _.defer(this.fadeInCountries);
   },
 
+  renderFlag: function(data, container){
+    var flagUri = data.id;
+
+    if(flagUri === 'en')
+      flagUri = navigator.language.match(/gb/i) ? 'gb' : 'us';
+
+    var flag = '<img class="flag" src="../images/flags/'+ flagUri +'.svg" alt="'+ data.text +'" title="'+ data.text +'">';
+    container.html(flag);
+  },
+
+  changeLanguage: function(event){
+    config.set({language: this.$('#language').val()});
+  },
+
   fadeInCountries: function(){
     var countries = this.$('.point');
     var count = countries.size();

diff --git a/app/views/presentation/presentation_settings_view.js b/app/views/presentation/presentation_settings_view.js
@@ -5,26 +5,7 @@ module.exports = Settings.extend({
 
   getRenderData: function(){
     return { 
-      editLink: '/edit/' + this.editor.country.get('abbreviation'),
-      active: config.get('language'),
-      languages: this.getLanguages()
+      editLink: '/edit/' + this.editor.country.get('abbreviation')
     };
-  },
-
-  renderFlag: function(data, container){
-    var flagUri = data.id;
-
-    if(flagUri === 'en')
-      flagUri = navigator.language.match(/gb/i) ? 'gb' : 'us';
-
-    var flag = '<img class="flag" src="../images/flags/'+ flagUri +'.svg" alt="'+ data.text +'" title="'+ data.text +'">';
-    container.html(flag);
-  },
-
-  afterRender: function(){    
-    this.$('#language').select2({
-      formatResult: this.renderFlag,
-      formatSelection: this.renderFlag
-    });
   }
 });
diff --git a/app/views/templates/index.eco b/app/views/templates/index.eco
@@ -31,5 +31,10 @@
       <a href="/login/">Login</a>
     <% end %>
       <a href="http://www.transparency.org/privacy">Privacy</a><a href="http://www.transparency.org/terms">Terms</a><a href="http://www.transparency.org/impressum">Imprint</a>
+      <select id="language">
+        <% for language in @languages: %>
+          <option value="<%= language.code %>" <%= 'selected' if language.code is @activeLanguage %>><%= language.name %></option>
+        <% end %>
+      </select>
   </div>
 </footer>
diff --git a/app/views/templates/presentation/presentation_settings.eco b/app/views/templates/presentation/presentation_settings.eco
@@ -1,9 +1,3 @@
 <% if user.isLoggedIn(): %>
   <a href="<%= @editLink %>" class="button presentation rightAligned"><%= t('Editor') %></a>
 <% end %>
-
-<select id="language">
-  <% for language in @languages: %>
-    <option value="<%= language.code %>" <%= 'selected' if language.code is @active %>><%= language.name %></option>
-  <% end %>
-</select>