From 988acc4c7cfa3d737c113a9acaeeae5a81531ac6 Mon Sep 17 00:00:00 2001
From: Godwin <goodgodwin@hotmail.com>
Date: Sun, 30 Aug 2015 17:54:31 -0700
Subject: [PATCH] Translation control updates

---
 app/assets/stylesheets/_application.scss   |  40 +------
 app/assets/stylesheets/_translations.scss  | 128 +++++++++++++++------
 app/views/pages/resources.html.haml        |  25 ----
 app/views/pages/translation_list.html.haml |  26 -----
 app/views/pages/translation_list.js.haml   |  73 ------------
 app/views/pages/translations.html.haml     |  48 --------
 app/views/translations/locale.html.haml    |   1 -
 7 files changed, 92 insertions(+), 249 deletions(-)
 delete mode 100644 app/views/pages/resources.html.haml
 delete mode 100644 app/views/pages/translation_list.html.haml
 delete mode 100644 app/views/pages/translation_list.js.haml
 delete mode 100644 app/views/pages/translations.html.haml

diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index 3155e1d..643cdeb 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -592,6 +592,7 @@ form {
 
 	button, .button {
 		margin: 0 0.25em;
+	    vertical-align: middle;
 	}
 
 	&.right {
@@ -1117,45 +1118,6 @@ $header-tilt: 8deg;
 				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 {
diff --git a/app/assets/stylesheets/_translations.scss b/app/assets/stylesheets/_translations.scss
index e291b25..ec35268 100644
--- a/app/assets/stylesheets/_translations.scss
+++ b/app/assets/stylesheets/_translations.scss
@@ -65,17 +65,10 @@ $bumbleberry-no-markup: true;
 
 #lingua-franca-translation-form {
 	padding: rems(1) 7.5%;
-	background-color: #FFF;
 	@include default-box-shadow(bottom, 2);
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: #FFF;
-	z-index: 1;
 	max-width: 100%;
 
-	button[type="submit"] {
+	/*button[type="submit"] {
 		position: absolute;
 		right: 7.5%;
 		top: 1em;
@@ -86,7 +79,7 @@ $bumbleberry-no-markup: true;
 			cursor: default;
 			@include _(opacity, 0);
 		}
-	}
+	}*/
 }
 
 #lingua-franca-translation-form h2,
@@ -171,6 +164,8 @@ $bumbleberry-no-markup: true;
 	width: 100%;
 	overflow: hidden;
 	margin-bottom: 100%;
+	background-color: transparent;
+	@include _(box-shadow, none);
 
 	th {
 		text-align: left;
@@ -212,7 +207,7 @@ $bumbleberry-no-markup: true;
 		background-color: $colour-1;
 
 		a {
-			color: #FFF;
+			color: $white;
 
 			.variable {
 				color: inherit;
@@ -231,13 +226,40 @@ $bumbleberry-no-markup: true;
 			display: table-cell;
 		}
 	}
-}
 
-@include breakpoint(large) {
-	body.fixed-banner #main {
-		padding-top: rems(24);
+	.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);
+			}
+		}
+
+		.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;
+			}
+		}
 	}
+}
 
+@include breakpoint(large) {
 	#lingua-franca-keys {
 		margin-bottom: 0;
 	}
@@ -245,7 +267,7 @@ $bumbleberry-no-markup: true;
 	#lingua-franca-translation-form {
 		position: relative;
 		padding: 1rem 7.5%;
-		background-color: #FFF;
+		background-color: $white;
 		@include default-box-shadow(top, 2);
 	}
 }
@@ -255,12 +277,11 @@ $bumbleberry-no-markup: true;
 	@include default-box-shadow(top, 2);
 }
 
-.lingua-franca-translations .translation-examples {
-	//width: 100%;
-	padding: 0 7.5%;
-	z-index: 1;
-	background-color: $white;
-	padding-bottom: 0.5vh;
+.lingua-franca-translations {
+	.translation-examples, #lingua-franca-translation-history {
+		padding: 0 7.5%;
+		padding-bottom: 0.5vh;
+	}
 }
 
 html #lingua-franca-translation-form {
@@ -341,17 +362,16 @@ html #lingua-franca-translation-form {
 			position: fixed;
 			z-index: 99;
 		}
-		
-		/*@include before {
-			content: '';
-			position: fixed;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 101;
-			cursor: pointer;
-		}*/
+	}
+
+	@include breakpoint(large) {
+		&.open {
+			iframe {
+				width: 100%;
+				height: 100%;
+				@include _(transform, scale(0.9) translate(0, 0));
+			}
+		}
 	}
 }
 
@@ -363,19 +383,23 @@ html #lingua-franca-translation-form {
     margin-right: 0.25em;
 }
 
-.translation-history .translation-diff-info,
-.translation-history .diff ul {
+#lingua-franca-keys .translation-history {
+	display: none;
+}
+
+#lingua-franca-translation-history .translation-diff-info,
+#lingua-franca-translation-history .diff ul {
     list-style: none;
     padding: 0;
 }
 
-.translation-history .translation-diff-info li {
+#lingua-franca-translation-history .translation-diff-info li {
     margin-bottom: 0.5em;
     font-style: italic;
 }
 
-.translation-history .translation-diff-info li,
-.translation-history .diff li {
+#lingua-franca-translation-history .translation-diff-info li,
+#lingua-franca-translation-history .diff li {
     width: 50%;
     display: inline-block;
     float: left;
@@ -385,3 +409,33 @@ html #lingua-franca-translation-form {
 	font-style: italic;
 	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;
+	}
+}
diff --git a/app/views/pages/resources.html.haml b/app/views/pages/resources.html.haml
deleted file mode 100644
index c75c300..0000000
--- a/app/views/pages/resources.html.haml
+++ /dev/null
@@ -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. &nbsp;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>
\ No newline at end of file
diff --git a/app/views/pages/translation_list.html.haml b/app/views/pages/translation_list.html.haml
deleted file mode 100644
index 720e7b4..0000000
--- a/app/views/pages/translation_list.html.haml
+++ /dev/null
@@ -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}"
diff --git a/app/views/pages/translation_list.js.haml b/app/views/pages/translation_list.js.haml
deleted file mode 100644
index f86987f..0000000
--- a/app/views/pages/translation_list.js.haml
+++ /dev/null
@@ -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();
-			}
-		});
-	}
diff --git a/app/views/pages/translations.html.haml b/app/views/pages/translations.html.haml
deleted file mode 100644
index 25142a3..0000000
--- a/app/views/pages/translations.html.haml
+++ /dev/null
@@ -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'
diff --git a/app/views/translations/locale.html.haml b/app/views/translations/locale.html.haml
index ba22850..4eebb48 100644
--- a/app/views/translations/locale.html.haml
+++ b/app/views/translations/locale.html.haml
@@ -1,4 +1,3 @@
-- header_is_fixed
 - content_for :banner do
 	#header-title.no-image
 		%h1=_'translate.translation_pages.Locale_Translations', @locale[:name], :vars => {:language => @locale[:name]}