Start implementing a more streamlined interface for visual progress o…

…f completion

app/assets/stylesheets/tolk.css.scss

@@ -1,7 +1,55 @@
 @import 'bootstrap';
+@import 'tolk/variables';
+@import 'tolk/mixins';
 
-body {
-  padding-top: 75px;
+header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: $headerHeight;
+}
+
+#locales {
+  position: fixed;
+  left: 0;
+  top: $headerHeight;
+  bottom: $footerHeight;
+  width: $localesWidth;
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+
+    &.completed a {
+      @include linear-gradient(lighten(#9bc83f, 10%), #9bc83f)
+    }
+  }
+
+  a {
+    background: #fefefe;
+    display: block;
+    border-bottom: 1px solid #eee;
+  }
+}
+
+#container {
+  position: fixed;
+  left: $localesWidth;
+  top: $headerHeight;
+  bottom: $footerHeight;
+  right: 0;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $footerHeight;
 }
 
 td form {

app/assets/stylesheets/tolk/_mixins.scss

@@ -0,0 +1,58 @@
+@mixin border-radius($specs) {
+  -webkit-border-radius: $specs;
+     -moz-border-radius: $specs;
+       -o-border-radius: $specs;
+          border-radius: $specs;
+}
+@mixin box-shadow($specs) {
+  -webkit-box-shadow: $specs;
+     -moz-box-shadow: $specs;
+       -o-box-shadow: $specs;
+          box-shadow: $specs;
+}
+@mixin wrapper($width) {
+  width: $width;
+  margin: 0 auto;
+}
+@mixin css3pie {
+  behavior: asset-path('pie/pie.js', js);
+}
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+     -moz-transition: $transition;
+       -o-transition: $transition;
+          transition: $transition;
+}
+@mixin transform($properties) {
+  -webkit-transform: $properties;
+     -moz-transform: $properties;
+       -o-transform: $properties;
+          transform: $properties;
+}
+@mixin transform-origin($properties) {
+  -webkit-transform-origin: $properties;
+     -moz-transform-origin: $properties;
+       -o-transform-origin: $properties;
+          transform-origin: $properties;
+}
+@mixin linear-gradient($color1, $color2, $bgImage: null) {
+  background-color: $color2;
+  background-image: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, $color1, $color2); /* Chrome 10+, Saf5.1+ */
+  background-image: -moz-linear-gradient(top, $color1, $color2); /* FF3.6 */
+  background-image: -ms-linear-gradient(top, $color1, $color2); /* IE10 */
+  background-image: -o-linear-gradient(top, $color1, $color2); /* Opera 11.10+ */
+  background-image: linear-gradient(top, $color1, $color2);
+
+  @if $bgImage != null {
+    background: $color2 $bgImage;
+  } @else {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$color1}, EndColorStr=#{$color2});
+    zoom:1;
+  }
+}
+@mixin clearfix {
+  &:before, &:after { content: ""; display: table; }
+  &:after { clear: both; }
+  zoom: 1;
+}

app/assets/stylesheets/tolk/_variables.scss

@@ -0,0 +1,3 @@
+$headerHeight: 50px;
+$footerHeight: 50px;
+$localesWidth: 150px;

app/helpers/tolk/application_helper.rb

@@ -1,33 +1,10 @@
 module Tolk
   module ApplicationHelper
-    def format_i18n_value(value)
-      h(yaml_value(value)).gsub(/\n/, '<br />')
-    end
-
-    def format_i18n_text_area_value(value)
-      yaml_value(value)
-    end
-
-    def yaml_value(value)
-      if value.present?
-        unless value.is_a?(String)
-          value = value.respond_to?(:ya2yaml) ? value.ya2yaml(:syck_compatible => true) : value.to_yaml
-        end
+    def completed_percentage_link(locale)
+      content_tag :li, :style => "background-position: 0 #{locale.completed_percentage}%;",
+        :class => locale.phrases_completed? ? 'completed' : nil do
+        link_to locale.language_name, locale_path(locale)
       end
-
-      value
-    end
-
-    def tolk_locale_selection
-      existing_locale_names = Tolk::Locale.available_locales
-
-      pairs = Tolk::Locale::MAPPING.to_a.map(&:reverse).sort_by(&:first)
-      pairs.reject { |pair| existing_locale_names.include?(pair.last) }
-    end
-
-    def scope_selector_for(locale)
-      select_tag 'scope', options_for_select([[Tolk::Locale.primary_locale.language_name, "origin"],
-                                              [locale.language_name, "target"]], params[:scope])
     end
   end
 end

app/views/layouts/tolk/application.html.erb

@@ -8,30 +8,24 @@
     <%= yield :head %>
   </head>
   <body>
-    <div class="topbar" data-dropdown="dropdown">
-      <div class="topbar-inner">
-        <div class="container">
-          <h3><%= link_to 'Tolk', tolk.root_path %></h3>
-          <ul class="nav">
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle"><%= current_locale.language_name %></a>
-              <ul class="dropdown-menu">
-                <%- Tolk::Locale.available_locales.each do |locale| %>
-                <li><%= link_to "#{locale.language_name} - #{locale.missing_keys.length}", locale_path(locale) %></li>
-                <%- end %>
-              </ul>
-            </li>
-            <li><%= link_to t('Completed'), locale_path(current_locale) %></li>
-            <li><%= link_to t('Missing (%{count})', :count => current_locale.missing_keys.length), missing_locale_path(current_locale) %></li>
-          </ul>
-          <form class="pull-left" action="">
-            <input type="text" placeholder="<%= t 'Search Translations' %>">
-          </form>
-        </div>
+    <header>
+      <h1><%= link_to 'Tolk', tolk.root_path %></h1>
+    </header>
+    <div id="main">
+      <div id="locales">
+        <ul>
+          <% Tolk::Locale.available_locales.each do |locale| -%>
+            <%= completed_percentage_link locale %>
+          <% end -%>
+          <li class="add"><%= link_to t('New Locale'), new_locale_path %></li>
+        </ul>
+      </div>
+      <div id="container">
+        <%= yield %>
       </div>
     </div>
-    <div class='container'>
-      <%= yield %>
-    </div>
+    <footer>
+      Tolk
+    </footer>
   </body>
 </html>