Browse Source

Translation control updates

development
Godwin 9 years ago
parent
commit
988acc4c7c
  1. 40
      app/assets/stylesheets/_application.scss
  2. 120
      app/assets/stylesheets/_translations.scss
  3. 25
      app/views/pages/resources.html.haml
  4. 26
      app/views/pages/translation_list.html.haml
  5. 73
      app/views/pages/translation_list.js.haml
  6. 48
      app/views/pages/translations.html.haml
  7. 1
      app/views/translations/locale.html.haml

40
app/assets/stylesheets/_application.scss

@ -592,6 +592,7 @@ form {
button, .button { button, .button {
margin: 0 0.25em; margin: 0 0.25em;
vertical-align: middle;
} }
&.right { &.right {
@ -1117,45 +1118,6 @@ $header-tilt: 8deg;
margin-top: 2em; margin-top: 2em;
} }
} }
.lingua-franca-navigation {
width: 25%;
@include clearfix;
ul {
padding: 0;
list-style: none;
font-weight: normal;
@include font-family(secondary);
ul {
margin-left: 1em;
margin-bottom: 1em;
@include font-family(primary);
}
}
.current {
@include before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: -1.5em;
top: 0.6667em;
border-width: 1em 0 1em 1em;
border-color: transparent transparent transparent #333;
border-style: solid;
font-size: 0.25em;
}
}
}
#lingua-franca-keys {
width: 75%;
float: right;
}
} }
#main-nav { #main-nav {

120
app/assets/stylesheets/_translations.scss

@ -65,17 +65,10 @@ $bumbleberry-no-markup: true;
#lingua-franca-translation-form { #lingua-franca-translation-form {
padding: rems(1) 7.5%; padding: rems(1) 7.5%;
background-color: #FFF;
@include default-box-shadow(bottom, 2); @include default-box-shadow(bottom, 2);
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #FFF;
z-index: 1;
max-width: 100%; max-width: 100%;
button[type="submit"] { /*button[type="submit"] {
position: absolute; position: absolute;
right: 7.5%; right: 7.5%;
top: 1em; top: 1em;
@ -86,7 +79,7 @@ $bumbleberry-no-markup: true;
cursor: default; cursor: default;
@include _(opacity, 0); @include _(opacity, 0);
} }
} }*/
} }
#lingua-franca-translation-form h2, #lingua-franca-translation-form h2,
@ -171,6 +164,8 @@ $bumbleberry-no-markup: true;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
margin-bottom: 100%; margin-bottom: 100%;
background-color: transparent;
@include _(box-shadow, none);
th { th {
text-align: left; text-align: left;
@ -212,7 +207,7 @@ $bumbleberry-no-markup: true;
background-color: $colour-1; background-color: $colour-1;
a { a {
color: #FFF; color: $white;
.variable { .variable {
color: inherit; color: inherit;
@ -231,13 +226,40 @@ $bumbleberry-no-markup: true;
display: table-cell; display: table-cell;
} }
} }
.lingua-franca-navigation {
ul {
padding: 0;
list-style: none;
font-weight: normal;
@include font-family(secondary);
ul {
margin-left: 1em;
margin-bottom: 1em;
@include font-family(primary);
}
} }
@include breakpoint(large) { .current {
body.fixed-banner #main { @include before {
padding-top: rems(24); content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: -1.5em;
top: 0.6667em;
border-width: 1em 0 1em 1em;
border-color: transparent transparent transparent #333;
border-style: solid;
font-size: 0.25em;
}
}
}
} }
@include breakpoint(large) {
#lingua-franca-keys { #lingua-franca-keys {
margin-bottom: 0; margin-bottom: 0;
} }
@ -245,7 +267,7 @@ $bumbleberry-no-markup: true;
#lingua-franca-translation-form { #lingua-franca-translation-form {
position: relative; position: relative;
padding: 1rem 7.5%; padding: 1rem 7.5%;
background-color: #FFF; background-color: $white;
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
} }
} }
@ -255,13 +277,12 @@ $bumbleberry-no-markup: true;
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
} }
.lingua-franca-translations .translation-examples { .lingua-franca-translations {
//width: 100%; .translation-examples, #lingua-franca-translation-history {
padding: 0 7.5%; padding: 0 7.5%;
z-index: 1;
background-color: $white;
padding-bottom: 0.5vh; padding-bottom: 0.5vh;
} }
}
html #lingua-franca-translation-form { html #lingua-franca-translation-form {
@include _(box-shadow, none); @include _(box-shadow, none);
@ -341,17 +362,16 @@ html #lingua-franca-translation-form {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
} }
}
/*@include before { @include breakpoint(large) {
content: ''; &.open {
position: fixed; iframe {
top: 0; width: 100%;
right: 0; height: 100%;
bottom: 0; @include _(transform, scale(0.9) translate(0, 0));
left: 0; }
z-index: 101; }
cursor: pointer;
}*/
} }
} }
@ -363,19 +383,23 @@ html #lingua-franca-translation-form {
margin-right: 0.25em; margin-right: 0.25em;
} }
.translation-history .translation-diff-info, #lingua-franca-keys .translation-history {
.translation-history .diff ul { display: none;
}
#lingua-franca-translation-history .translation-diff-info,
#lingua-franca-translation-history .diff ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.translation-history .translation-diff-info li { #lingua-franca-translation-history .translation-diff-info li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
font-style: italic; font-style: italic;
} }
.translation-history .translation-diff-info li, #lingua-franca-translation-history .translation-diff-info li,
.translation-history .diff li { #lingua-franca-translation-history .diff li {
width: 50%; width: 50%;
display: inline-block; display: inline-block;
float: left; float: left;
@ -385,3 +409,33 @@ html #lingua-franca-translation-form {
font-style: italic; font-style: italic;
color: #888; color: #888;
} }
.lingua-franca-translations {
position: fixed;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: $white;
@include _(transform, scale(0));
$transition-time: 250ms;
@include _(transition, #{transform $transition-time ease-in-out, z-index 0ms linear $transition-time});
&.editing {
z-index: 1;
@include _(transform, scale(1));
@include _(transition, transform $transition-time ease-in-out);
}
}
@include breakpoint(large) {
.lingua-franca-translations {
left: $sidebar-width;
}
.actions {
margin-top: 1em;
}
}

25
app/views/pages/resources.html.haml

@ -1,25 +0,0 @@
- page_title = 'Bike!Bike! Reources'
- title page_title
- banner_title page_title
- description 'Bike!Bike! list of resources - Bike Collective Wiki, ThinkTank, Bike!Bike! photos and documents'
.row
.columns
%p
Here is a list of online resources available to commmunity bike projects. The bike collective wiki in particlular has great start up kits and many helpful articles about how community bike shops operate.  The think tank is a list serve with over 600 contributors. When you join the list, you can talk to community bike shops from all over the world about how to better organize and operate a shop.
%ul
%li
%a{href: 'http://www.bikecollectives.org/wiki/index.php?title=Main_Page', target: '_blank'}
Bike Collective Wiki
%li
%a{href: 'http://lists.bikecollectives.org/listinfo.cgi/thethinktank-bikecollectives.org', target: '_blank'}
Think tank sign up
%li
%a{href: 'http://www.flickr.com/photos/93412361@N07/with/8494632542/', target: '_blank'}
flickr bikebike!
%li
%a{href: 'https://www.dropbox.com/sh/4phyl9lft18whzi/SXQ6XUklKB', target: '_blank'}
Drop box for bikebike2012 (shared public box)
%p
If you have more resources you think should be listed here, please post them to the <a href="http://tqa.bikebike.org/project/issues/website" rel="external">issue tracker for the bikebike! website.</a></div></div>

26
app/views/pages/translation_list.html.haml

@ -1,26 +0,0 @@
- page_title = 'Translations'
- title page_title
- banner_title page_title
.row
%h1
= _ 'languages.list'
%h2
= _ 'languages.active'
%ul.languages.active.small-block-grid-1.medium-block-grid-3.large-block-grid-4.grid.links
- @language_codes.each do |code|
- if code && @completeness.has_key?(code.to_s)
%li.text-center
- completeness = @completeness[code.to_s]
-# percent = @total_translations ? ((completeness / @total_translations.to_f) * 100).to_i : 0
%a{:href => "/translations/#{code}/", :class => (completeness > 99 ? 'complete' : completeness > 67 ? 'needs-work' : nil)}
%h3=_"languages.#{code}"
.completeness
= "#{completeness} / #{@total_translations} (#{completeness}%)"
%h2= _ 'languages.inactive'
%ul.languages.inactive.small-block-grid-1.medium-block-grid-3.large-block-grid-4.grid.links
- @language_codes.each do |code|
- if code && !@completeness.has_key?(code.to_s)
%li.text-center
%a{:href => "/translations/#{code}/"}
%h3=_"languages.#{code}"

73
app/views/pages/translation_list.js.haml

@ -1,73 +0,0 @@
- content_for :dom_ready
$('table#translations td.value').click(function() {
var $this = $(this);
if(!$this.find('.translation-form').length()) {
startTranslating($this);
}
});
if ($('table#translations').length()) {
$(document).click(function(event) {
$target = $(event.target);
if ($target.closest('table#translations').length() < 1 && !$target.hasClass('auto-translate')) {
stopTranslating();
}
$('.auto-translate').click (function(event) {
event.preventDefault();
$td = $(this).parent();
saveTranslation($td, null, true);
});
}
- content_for :scripts
function saveTranslation($td, $move_to, auto_translate) {
var val = '';
var do_auto_translate = true;
if (typeof auto_translate == "undefined" || !auto_translate) {
val = $td.find('textarea').val();
do_auto_translate = false;
}
var key = $td.parent().data().key;
var params = {
translationkey: key,
translationvalue: val,
translationlang: window.location.href.replace(/^.*\/(\w+)\/$/, '$1')
};
if (do_auto_translate) {
params['auto_translate'] = true;
}
$.post('/translate/', params, function(json) {
$td.html(json.translation);
if ($td.parent().hasClass('not-exists')) {
$td.parent().removeClass('not-exists');
$td.parent().addClass('exists');
}
$('.translation-form').remove();
if (typeof $move_to != "undefined" && $move_to) {
startTranslating($move_to);
}
});
}
function stopTranslating() {
$('.translation-form').remove();
}
function startTranslating($td) {
stopTranslating();
var value = $td.parent().hasClass('not-exists') ? '' : $td.html().trim();
var $tr = $td.parent();
var key = $tr.data().key;
$td.append('<div class="translation-form"><textarea>' + value + '</textarea><button class="small" data-key="' + key + '">Save</textarea>');
var $textarea = $td.find('textarea');
$textarea.select();
$td.find('.translation-form button').click(function() { saveTranslation($td); });
$textarea.keydown(function(event) {
if (event.keyCode == 9) {
event.preventDefault();
var $new_tr = event.shiftKey ? $tr.prev() : $tr.next();
saveTranslation($td, $new_tr.find('.value'));
} else if (event.keyCode == 27) {
stopTranslating();
}
});
}

48
app/views/pages/translations.html.haml

@ -1,48 +0,0 @@
- page_title = (_ 'language_translations', vars: {:language => (_ ('languages.' + @lang))})
- title page_title
- banner_title page_title
- page_style :form
.row
%table.columns#translations{data: {token: form_authenticity_token}}
%thead
%tr
%th.key=_'translations.Key'
%th.key=_'translations.Pages'
%th.key=_'translations.Value'
- @translations.sort{| a1, a2 | a1[0].downcase <=> a2[0].downcase}.each do |k,translation|
- current_translation = Translation.locale(@lang.to_sym).lookup(k)
- current_translation = current_translation.size() > 0 ? current_translation = current_translation[0].value : nil
- cached = (translation && translation['languages'] && translation['languages'].include?(@lang))
- vars = translation && translation.has_key?('vars') && translation['vars'].size() > 0 ? translation['vars'] : nil
- (vars && vars.include?(:count) ? I18n.backend.get_pluralization_rules(@lang) : [nil]).each do |pluralization|
- key = k + (pluralization ? ".#{pluralization.to_s}" : '')
%tr{:class => current_translation ? 'exists' : 'not-exists', :data => {:key => key}}
%td.key
= key
- if vars
.tags
%h5=_'translations.Vars'
%ul
- vars.each do |v|
%li=v
%td.pages
%ul
- if translation
- translation['pages'].each do |page|
%li
%a{:href => page}=page
%td.value.primary
- if current_translation
= current_translation
- elsif I18n.locale.to_s == @lang.to_s
Nil
- else
- translation_hint = Translation.locale(I18n.locale).lookup(k)
- translation_hint = translation_hint && translation_hint.size() > 0 ? translation_hint = translation_hint[0].value : nil
= translation_hint ? (_ "languages.#{I18n.locale.to_s}") + " = \"#{translation_hint}\"" : 'Nil'
- unless current_translation
%a{:href => '#', :class => 'auto-translate button small'}='Auto'
- content_for :footer_scripts do
= javascript_include_tag 'translations'

1
app/views/translations/locale.html.haml

@ -1,4 +1,3 @@
- header_is_fixed
- content_for :banner do - content_for :banner do
#header-title.no-image #header-title.no-image
%h1=_'translate.translation_pages.Locale_Translations', @locale[:name], :vars => {:language => @locale[:name]} %h1=_'translate.translation_pages.Locale_Translations', @locale[:name], :vars => {:language => @locale[:name]}

Loading…
Cancel
Save