several issues corrections

Asqatasun · Apr 22, 2014 · 568643a · 568643a
1 parent 33607e1
commit 568643a
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 30 deletions.
diff --git a/data/contrast-finder-module.html b/data/contrast-finder-module.html
@@ -8,73 +8,83 @@
     <form name="formulaire" role="form">
       <div class="selector">
         <input type="checkbox" name="selector" id="selector" value="selected"/>
-                <label for="selector" id="label-selector" class="">Element selector</label>
+                <label data-l10n-id="selector" for="selector" id="label-selector" class=""></label>
       </div>
 
       <div class="main">        
 	<div id="cf-colors">
           <div class="one-color">
-            Foreground :
+	    <span id="language-reference" data-l10n-id="foreground"></span>
             <div id="color-sample-foreground" class="color-sample">
-              <span class="hexa-value" id="edit-box-foreground">#------</span>
+	      <span class="hexa-value" id="edit-box-foreground">#------</span>
             </div>
           </div>	  
           <div class="one-color">
-            Background :
+	    <span data-l10n-id="background"></span>
             <div id="color-sample-background" class="color-sample">
               <span class="hexa-value" id="edit-box-background">#------</span>
             </div>
           </div>
         </div>
 
 	<div id="element">
-          Element :
+	  <span data-l10n-id="element"></span>
           <span id="element-targeted"></span>
         </div>
       </div>
-	
-        <div id="cf-messages">
-	  <div class="main cf-message-padding">        
+      
+      <div id="cf-messages">
+	<div class="main cf-message-padding">        
           <div class="bs-callout bs-callout-danger invalid-message" id="invalid-ratio">
-            <span>Gosh, contrast is invalid !</span>
+	    <span data-l10n-id="invalid-contrast"></span>
           </div>
           <div class="bs-callout bs-callout-warning error-message" id="background-error">
-            <span>Hmmm, we could not verify the contrast.<br/>This element has a background-image inherited.</span>
+            <span data-l10n-id="error-background-image"></span></br>
+	    <span data-l10n-id="error-background-image2"></span>
           </div>
           <div class="bs-callout bs-callout-warning error-message" id="channel-alpha">
-            <span>Hmmm, we could not verify the contrast.<br/>This element has a color with alpha channel</span>
+	    <span data-l10n-id="error-background-alpha"></span></br>
+	    <span data-l10n-id="error-background-alpha2"></span>
           </div>
           <div class="bs-callout bs-callout-success valid-message" id="valid-ratio">
-            <span>Hey, contrast is OK !</span>
+	    <span data-l10n-id="valid-contrast"></span>            
           </div>
-	  </div>
-        </div>
-	<div class="main">        
+	</div>
+      </div>
+      <div class="main">        
         <div class="cf-block">
           <div class="my-fieldset">
             <fieldset id="fieldset-component" disabled="disabled">
-              <legend id="legend-component">Component to modify</legend>
+              <legend id="legend-component" data-l10n-id="component"></legend>
               <div class="radio">
                 <label for="foreground-component">
                   <input type="radio" name="component-modify" id="foreground-component" value="foreground" checked="checked">
-                  <span id="foreground-component-text">Foreground</span>
+                  <span id="foreground-component-text" data-l10n-id="foreground"></span>
                 </label>
               </div>
               <div class="radio">
                 <label for="background-component">
                   <input type="radio" name="component-modify" id="background-component" value="background">
-                  <span id="background-component-text">Background</span>
+                  <span id="background-component-text" data-l10n-id="background"></span>
                 </label>
               </div>
             </fieldset>
           </div>
 
           <div id="cf-link-to-solutions" class="cf-block cf-link-to-solutions-disabled">
-            <strong><a id="submit" class="btn btn-gray btn-lg disabled" href="" role="button" title="Find valid colors (brings you to Tanaguru Contrast-Finder website)">Find valid colors</a></strong>
+            <strong><a id="submit" class="btn btn-gray btn-lg" href="" target="_blank" role="button" title="Find valid colors (brings you to Tanaguru Contrast-Finder website in a new tab)"><span data-l10n-id="find-link"></span>
+	    </a></strong>
           </div>
         </div>
 
         <div id="link-cf-website">
+	  <div class="main cf-message-padding">        
+            <div class="bs-callout bs-callout-info info-message" id="invalid-ratio">
+	      <span data-l10n-id="level-aa"></span></br>
+	      <span data-l10n-id="text-size"></span>
+            </div>
+	  </div>
+
           <a href="http://contrast-finder.tanaguru.com">Tanaguru Contrast-Finder</a>
         </div>
       </div>

diff --git a/data/css/contrast-finder-addon.css b/data/css/contrast-finder-addon.css
@@ -63,6 +63,13 @@ a {
     border-color: #f0ad4e;
 }
 
+.bs-callout-info {
+    background-color: #E9E9E9;
+    border-color: #656565;
+    text-align: left;
+    margin-bottom: 10px;
+}
+
 .bs-callout-danger {
     background-color: #fdf7f7;
     border-color: #d9534f;
@@ -84,6 +91,11 @@ a {
     display: none;
 }
 
+.info-message {
+    color: #656565;
+    font-size: 18px;
+}
+
 .invalid-message {
     color: #d9534f;
     font-size: 18px;
@@ -133,16 +145,20 @@ a.btn.disabled {
     opacity : 1;
 }
 
-@media (min-height: 600px) {
+a.btn {
+    display: inline-block;
+}
+
+@media (min-height: 720px) {
     #link-cf-website {
 	position:absolute;
 	bottom:0;
 	width:97%;
-	height:60px;
+	margin-bottom:30px;
 	text-align: center;
     }
 }
-@media (max-height: 599px) {
+@media (max-height: 719px) {
     #link-cf-website {
 	text-align: center;
     }

diff --git a/data/js/contrast-finder-module.js b/data/js/contrast-finder-module.js
@@ -10,7 +10,7 @@ var handleClick = function (e) {
 	e.preventDefault();
 	win.removeEventListener('mouseover', handleMouseover, false);
 	if (target !== null)
-	    target.style.border = lastElementStyle;
+	    target.style.outline = lastElementStyle;
 	selector = false;
 	clickedElement = e.target || e.srcElement;
 	getResultAndEmit(clickedElement, "click-refresh");
@@ -23,11 +23,11 @@ self.port.on("selector-checked", function() {
 	if (selector === true) {
 	    win.addEventListener('click', handleClick, false);
 	    if (target !== null) {
-		target.style.border = lastElementStyle;
+		target.style.outline = lastElementStyle;
 	    }
 	    target = e.target || e.srcElement;
-	    lastElementStyle = target.style.border;
-	    target.style.border= "solid #F07D4E";
+	    lastElementStyle = target.style.outline;
+	    target.style.outline= "2px solid #F07D4E";
 	    getResultAndEmit(target, "over-refresh");
 	}
     };
@@ -40,7 +40,7 @@ self.port.on("selector-unchecked", function() {
     win.removeEventListener('mouseover', handleMouseover, false);
     win.removeEventListener('click', handleClick, false);
     if (target !== null)
-	target.style.border = lastElementStyle;
+	target.style.outline = lastElementStyle;
 });
 
 function getResultAndEmit(elem, emitString) {
@@ -49,7 +49,9 @@ function getResultAndEmit(elem, emitString) {
     var tabResult = null;
     var computeRatio = getContrastRatio(getForegroundColor(elem), bgColor);
     if (bgColor == 'error') {
-	stringResult = "background-error" + ";" + elem.tagName;
+	stringResult = "background-error" + ";" 
+	    + colorToHex(getForegroundColor(target)).toUpperCase() + ";"
+	    + elem.tagName;
 	tabResult = stringResult.split(";");
 	self.port.emit(emitString, tabResult);
     } else if(computeRatio == "error-color") {

diff --git a/data/js/form.js b/data/js/form.js
@@ -77,6 +77,10 @@ function initializeHtmlElements() {
     document.getElementById("invalid-ratio").style.display = "none";
     document.getElementById("channel-alpha").style.display = "none";
     document.getElementById("valid-ratio").style.display = "none";
+    var languageReference = document.getElementById("language-reference").textContent;
+    if (languageReference == "Avant plan") {
+	submit.title = "Trouver des couleurs valides (vous emmenera sur Tanaguru Contrast-Finder dans un nouvel onglet)";
+    }
 }
 
 function onValidRatio(tabResult) {
@@ -105,8 +109,7 @@ function onClickInvalidRatio(tabResult) {
 }
 function onBackgroundError(tabResult) {
     document.getElementById("background-error").style.display = "block";
-    dropForegroundAndBackgroundValue();
-    element.textContent = "<" + tabResult[1].toLowerCase() + ">";
+    setForegroundAndDropBackground(tabResult);
 }
 
 function onChannelAlphaError(tabResult) {
@@ -134,6 +137,14 @@ function dropForegroundAndBackgroundValue() {
     background.textContent = "#------";
 }
 
+function setForegroundAndDropBackground(tabResult) {
+    document.getElementById("color-sample-foreground").style.backgroundColor = "#" + tabResult[1];
+    document.getElementById("color-sample-foreground").style.backgroundImage = "none";
+    foreground.textContent = "#" + tabResult[1];
+    background.textContent = "#------";
+    element.textContent = "<" + tabResult[2].toLowerCase() + ">";
+}
+
 var radios = document.forms["formulaire"].elements["component-modify"];
 for(var radio in radios) {
     radios[radio].onclick = function() {

diff --git a/lib/main.js b/lib/main.js
@@ -1,4 +1,5 @@
 var cm = require("sdk/context-menu");
+var _ = require("sdk/l10n").get;
 var array = require('sdk/util/array');
 var data = require("sdk/self").data;
 var tabs = require("sdk/tabs");

diff --git a/locale/en.properties b/locale/en.properties
@@ -0,0 +1,14 @@
+selector= Element selector
+foreground= Foreground
+background= Background
+element= Element :
+component= Component to modify
+find-link= Find valid colors
+invalid-contrast= Gosh, contrast is invalid !
+error-background-image=Hmmm, we could not verify the contrast.This element has an attribut background-image inherited.
+error-background-image2=This element has a background-image inherited.
+error-background-alpha=Hmmm, we could not verify the contrast.
+error-background-alpha2=This element has a color with alpha channel.
+valid-contrast= Hey, contrast is OK !
+level-aa= Level is AA
+text-size= Text size is automatically taken into account
diff --git a/locale/fr.properties b/locale/fr.properties
@@ -0,0 +1,14 @@
+selector= Selecteur d’élement
+foreground= Avant plan
+background= Arrière plan
+element= Elément :
+component= Composante à modifier
+find-link= Trouver des couleurs valides
+invalid-contrast= Saperlipopette, le contraste est invalide !
+error-background-image=Hmmm, nous ne pouvons pas vérifier le contraste.
+error-background-image2=Cet élément a une image de fond héritée.
+error-background-alpha=Hmmm, nous ne pouvons pas vérifier le contraste.
+error-background-alpha2=Cet élément a une couleur possédant une couche alpha.
+valid-contrast= Hey, le contraste est valide !
+level-aa= Le niveau est AA
+text-size= La taille du texte requise est automatiquement calculée