Fix #165, Add RTL spinner, small graphical changes

codexa · Mar 6, 2014 · 5504283 · bdcomp · Mar 7, 2014 · ferndot
1 parent 5a7930d
commit 5504283
Show file tree

Hide file tree

Showing 16 changed files with 376 additions and 119 deletions.
diff --git a/index.html b/index.html
@@ -252,7 +252,7 @@ <h2 data-l10n-id="other">Other</h2>
       <menu type="toolbar">
         <button data-click="saveFromEditor" id="editorSaveButton"><span class="icon icon-save"></span></button>
         <button data-click="fullscreen"><span class="icon icon-fs"></span></button>
-        <button data-click="sidebar" data-click-id="main" class="drawerEnabled"><span class="icon icon-menu"></span></button>
+        <button data-click="sidebar" data-click-id="main" class="menu drawerEnabled"><span class="icon icon-menu"></span></button>
       </menu>
       <h1><span id="currentFileLocation" style="display:none;"></span><span id="currentFileDirectory" style="display:none;"></span><span id="currentFileName"></span><span id="currentFileType"></span></h1>
     </header>
@@ -282,7 +282,7 @@ <h1><span id="currentFileLocation" style="display:none;"></span><span id="curren
           </div>
         </li>
         <div class="tabToolbar">
-          <button data-click="sidebar" data-click-id="main" class="icon-menu"></button>
+          <button data-click="sidebar" data-click-id="main" class="icon-menu drawerEnabled"></button>
           <button data-click="closeFile" class="icon-close"></button>
           <button data-click="fullscreen" class="icon-efs"></button>
           <button data-click="saveFromEditor" id="zenSaveButton" class="icon-save"></button>

diff --git a/scripts/firetext.js b/scripts/firetext.js
@@ -915,7 +915,20 @@ document.addEventListener('blur', function(event) {
 function initGestures () {
   new GestureDetector(document.body).startDetecting();
   document.body.addEventListener('swipe', function (event) {
-    processActions(('data-swipe-'+event.detail.direction), event.target);  
+  	// Detect direction
+    var direction;
+    if (document.body.classList.contains('rtl')) {
+      if (event.detail.direction == 'right') {
+      	direction = 'left';
+      } else if (event.detail.direction == 'left') {
+      	direction = 'right';
+      }
+    } else {
+      direction = event.detail.direction;
+    } 
+
+    // Process the action
+    processActions(('data-swipe-'+direction), event.target); 
   });
 }
 

diff --git a/scripts/language.js b/scripts/language.js
@@ -15,16 +15,27 @@ firetext.language = function () { return this.getCurrent(); };
 /* Init
 ------------------------*/ 
 firetext.language.init = function () {
-  if (!firetext.settings.get('language')) {
-    firetext.settings.save('language', document.webL10n.getLanguage());    
-  } 
-
-  // Localize interface
-  var language = firetext.settings.get('language');
-  document.webL10n.setLanguage(language);
-  document.body.setAttribute('language', language);
+	if (!firetext.settings.get('language')) {
+		firetext.settings.save('language', document.webL10n.getLanguage());		 
+	} 
+
+	// Localize interface
+	var language = firetext.settings.get('language');
+	document.webL10n.setLanguage(language);
+	document.body.setAttribute('data-language', language);
+
+	// LTR / RTL
+	if (language == 'he' |
+			language == 'ar' |
+			language == 'tr') {
+		document.body.classList.remove('ltr');  
+		document.body.classList.add('rtl');  		
+	} else {
+		document.body.classList.remove('rtl');  
+		document.body.classList.add('ltr');  
+	}
 }
 
 firetext.language.getCurrent = function () {
-  return (firetext.settings.get('language'));
+	return (firetext.settings.get('language'));
 }
diff --git a/style/bb/buttons.css b/style/bb/buttons.css
@@ -23,7 +23,7 @@ a[role="button"] {
   background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom;
   border: 0.1rem solid #a6a6a6;
   border-radius: 0.2rem;
-  font: 500 1.6rem/3.8rem 'MozTT', Sans-serif;
+  font: 500 1.5rem/3.8rem 'MozTT', Sans-serif;
   color: #333;
   text-align: center;
   text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
@@ -113,18 +113,6 @@ li a[role="button"] {
   overflow: visible;
 }
 
-/* Hacking box-shadow */
-li button:after,
-li a[role="button"]:after {
-  content: "";
-  position: absolute;
-  bottom: -0.3rem;
-  left: 0;
-  right: 0;
-  height: 0.2rem;
-  background: url(buttons/images/ui/shadow.png) repeat-x left bottom;
-}
-
 /* Press */
 li a[role="button"]:active:after,
 li button:active:after {

diff --git a/style/bb/drawer.css b/style/bb/drawer.css
@@ -193,7 +193,6 @@ section[data-type="sidebar"] > nav {
   max-height: calc(100% - 5rem);
     max-height: -moz-calc(100% - 5rem);
     max-height: -webkit-calc(100% - 5rem);
-  margin-right: -0.8rem;
   width: 100%;
 }
 
@@ -270,4 +269,26 @@ section[data-type="sidebar"] > nav > ul > li > a {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}
+}
+
+
+/* RTL */
+.rtl section[data-type="sidebar"] {
+    left: auto;
+    right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] {
+    right: auto;
+    left: 0;    
+}
+
+.rtl section[data-type="sidebar"] [role="toolbar"] {
+    left: auto;
+    right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] [role="toolbar"] {
+    right: auto;
+    left: 0;    
+}
diff --git a/style/bb/input_areas.css b/style/bb/input_areas.css
@@ -294,42 +294,44 @@ form p button[type="reset"]::-moz-focus-inner,
  * Right-to-Left layout
  */
 
-html[dir="rtl"] form p input:valid,
-html[dir="rtl"] form p input:valid:focus,
-html[dir="rtl"] .form p input:valid,
-html[dir="rtl"] .form p input:valid:focus {
+.rtl form p input:focus,
+.rtl .form p input:focus,
+.rtl form p input:valid,
+.rtl form p input:valid:focus,
+.rtl .form p input:valid,
+.rtl .form p input:valid:focus {
   padding: 0 0.8rem 0 3.5rem;
 }
 
-html[dir="rtl"] form p textarea:valid,
-html[dir="rtl"] form p textarea:valid:focus,
-html[dir="rtl"] .form p textarea:valid,
-html[dir="rtl"] .form p textarea:valid:focus {
+.rtl form p textarea:valid,
+.rtl form p textarea:valid:focus,
+.rtl .form p textarea:valid,
+.rtl .form p textarea:valid:focus {
   padding: 0.8rem 0.8rem 0.8rem 3.5rem;
 }
 
-html[dir="rtl"] form p input + button[type="reset"],
-html[dir="rtl"] form p textarea + button[type="reset"],
-html[dir="rtl"] .form p input + button[type="reset"],
-html[dir="rtl"] .form p textarea + button[type="reset"] {
+.rtl form p input + button[type="reset"],
+.rtl form p textarea + button[type="reset"],
+.rtl .form p input + button[type="reset"],
+.rtl .form p textarea + button[type="reset"] {
   right: auto;
   left: 0;
 }
 
-html[dir="rtl"] fieldset legend.action:after {
+.rtl fieldset legend.action:after {
   margin: 0 0.5rem 0 0;
 }
 
-html[dir="rtl"] fieldset legend {
+.rtl fieldset legend {
   padding: 0 1.8rem 0 0.5rem;
 }
 
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > textarea,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > textarea {
+.rtl form[role="search"] button[type="submit"] + p > textarea,
+.rtl .form[role="search"] button[type="submit"] + p > textarea {
   padding: 0.5rem 0.8rem 0.5rem 3rem;
 }
 
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > button,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > button {
+.rtl form[role="search"] button[type="submit"] + p > button,
+.rtl .form[role="search"] button[type="submit"] + p > button {
   left: 1rem;
-}
+}
diff --git a/style/bb/lists.css b/style/bb/lists.css
@@ -110,7 +110,7 @@
 
 [data-type="list"] aside[class^="icon-"], 
 [data-type="list"] aside[class*=" icon-"] {
-  padding: 1.4rem .5rem;
+  padding: 1.4rem 0;
     -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -127,6 +127,15 @@
   text-align: right;
 }
 
+.pack-end button {
+    font-size: 1.5rem;
+    width: auto;
+    padding: 0 0.2rem;
+    margin-top: 0.5rem;
+    position: absolute;
+    right: 0;
+}
+
 [data-type="list"] aside[data-icon] {
   width: 3rem;
   height: 6rem;
@@ -160,7 +169,6 @@
 }
 
 [data-type="list"] li p:first-of-type {
-  font-size: 1.8rem;
   line-height: 2.2rem;
   color: #000;
   padding: 1rem 0 0;
@@ -214,3 +222,19 @@
 [data-type="list"] [data-type="edit"] li > a:active:after {
   display: none;
 }
+
+
+/* RTL */
+.rtl [data-type="list"] aside { 
+    float: right;   
+    margin: 0 0 0 0.5rem;
+}
+
+.rtl [data-type="list"] .pack-end {
+    float: left;
+}
+
+.pack-end button {
+    left: 0;
+    right: auto;
+}
diff --git a/style/bb/tabs.css b/style/bb/tabs.css
@@ -264,3 +264,25 @@
 [role="tablist"][data-type="filter"].bottom > [role="tab"] > a {
   height: auto;
 }
+
+
+/* RTL */
+.rtl [role="tablist"] > [role="tab"] {
+    float: right;   
+}
+
+.rtl [role="tablist"] [role="tabpanel"] {
+    -moz-transform: translateX(102%);
+    -webkit-transform: translateX(102%);
+    -o-transform: translateX(102%);
+    -ms-transform: translateX(102%);
+  transform: translateX(102%);
+}
+
+.rtl [role="tablist"] .selected ~ [role="tab"] [role="tabpanel"] {
+    -moz-transform: translateX(-102%);
+    -webkit-transform: translateX(-102%);
+    -o-transform: translateX(-102%);
+    -ms-transform: translateX(-102%);
+  transform: translateX(-102%);
+}
diff --git a/style/bb/toolbars.css b/style/bb/toolbars.css
@@ -54,3 +54,18 @@
   box-sizing: border-box;
   text-align: right;
 }
+
+
+/* RTL */
+.rtl [role="toolbar"] ul {
+    float: right;   
+}
+
+.rtl [role="toolbar"] ul:last-child {
+    float: left;
+    text-align: left;
+}
+
+.rtl [role="toolbar"] li {
+    float: right;   
+}