From 1796ff37b69ea9b9e412912783042bf56fcbc12e Mon Sep 17 00:00:00 2001
From: Kevin Grandon <kevingrandon@yahoo.com>
Date: Wed, 12 Aug 2015 09:27:46 -0700
Subject: [PATCH] Bug 1193618 - Convert keyboard checkboxes to use
 gaia-checkbox

---
 apps/keyboard/settings.html      | 42 ++++++++++----------------------
 apps/keyboard/style/settings.css |  8 +++---
 build/csslint/xfail.list         |  1 +
 3 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/apps/keyboard/settings.html b/apps/keyboard/settings.html
index 7c52e04bc999..b3acb77ba6d0 100644
--- a/apps/keyboard/settings.html
+++ b/apps/keyboard/settings.html
@@ -7,7 +7,6 @@
   <title>Keyboard Settings</title>
   <!-- <link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css" /> -->
   <link rel="stylesheet" type="text/css" href="app://theme.gaiamobile.org/shared/elements/gaia-theme/gaia-theme.css" />
-  <link rel="stylesheet" type="text/css" href="shared/style/switches.css"/>
   <link rel="stylesheet" type="text/css" href="shared/style/headers.css"/>
   <link rel="stylesheet" type="text/css" href="shared/style/lists.css"/>
   <link rel="stylesheet" type="text/css" href="shared/style/buttons.css"/>
@@ -26,6 +25,7 @@
   <script defer src="shared/elements/gaia-toast/gaia-toast.js"></script>
   <script defer src="shared/elements/gaia_subheader/script.js"></script>
   <script defer src="shared/elements/gaia_buttons/script.js"></script>
+  <script defer src="shared/elements/gaia_checkbox/script.js"></script>
   <script defer src="shared/elements/gaia_confirm/script.js"></script>
 
   <!-- L10n -->
@@ -66,43 +66,27 @@ <h1 data-l10n-id="settingsPageTitle"></h1>
       <section data-type="list" id="general-settings">
         <ul>
           <li>
-            <aside class="pack-end">
-              <label class="pack-checkbox">
-                <input type="checkbox" data-setting="keyboard.vibration" disabled checked id="cb-vibration">
-                <span></span>
-              </label>
-            </aside>
-            <p><label data-l10n-id="vibration" for="cb-vibration"></label></p>
+            <gaia-checkbox data-setting="keyboard.vibration" disabled checked id="cb-vibration">
+              <label data-l10n-id="vibration"></label>
+            </gaia-checkbox>
           </li>
 
           <li>
-            <aside class="pack-end">
-              <label class="pack-checkbox">
-                <input type="checkbox" data-setting="keyboard.clicksound" disabled checked id="cb-clickSound">
-                <span></span>
-              </label>
-            </aside>
-            <p><label data-l10n-id="clickSound" for="cb-clickSound"></label></p>
+            <gaia-checkbox data-setting="keyboard.clicksound" disabled checked id="cb-clickSound">
+              <label data-l10n-id="clickSound"></label>
+            </gaia-checkbox>
           </li>
 
           <li>
-            <aside class="pack-end">
-              <label class="pack-checkbox">
-                <input type="checkbox" data-setting="keyboard.autocorrect" disabled checked id="cb-autoCorrect">
-                <span></span>
-              </label>
-            </aside>
-            <p><label data-l10n-id="autoCorrect" for="cb-autoCorrect"></label></p>
+            <gaia-checkbox data-setting="keyboard.autocorrect" disabled checked id="cb-autoCorrect">
+              <label data-l10n-id="autoCorrect"></label>
+            </gaia-checkbox>
           </li>
 
           <li>
-            <aside class="pack-end">
-              <label class="pack-checkbox">
-                <input type="checkbox" data-setting="keyboard.wordsuggestion" disabled checked id="cb-wordSuggestion">
-                <span></span>
-              </label>
-            </aside>
-            <p><label data-l10n-id="wordSuggestion" for="cb-wordSuggestion"></label></p>
+            <gaia-checkbox data-setting="keyboard.wordsuggestion" disabled checked id="cb-wordSuggestion">
+              <label data-l10n-id="wordSuggestion"></label>
+            </gaia-checkbox>
           </li>
 
           <!-- User dictionary settings <li> will be added here. -->
diff --git a/apps/keyboard/style/settings.css b/apps/keyboard/style/settings.css
index 3a4b6df92bef..0a8d607e890c 100644
--- a/apps/keyboard/style/settings.css
+++ b/apps/keyboard/style/settings.css
@@ -72,9 +72,11 @@ aside.pack-end > label {
   margin-top: 0.5rem;
 }
 
-section[data-type="list"] p>label {
-  width: 100%;
-  display: inline-block;
+/* Temporary styles until being ported to use gaia-list */
+section[data-type="list"] li gaia-checkbox {
+    -moz-margin-start: 1.5rem;
+    padding: 1.5rem 0;
+    width: calc(100% - 3rem) !important;
 }
 
 /* XXX we're trying to offset what we have inherted from lists.css only to make
diff --git a/build/csslint/xfail.list b/build/csslint/xfail.list
index e60321ef3930..51bb80076115 100644
--- a/build/csslint/xfail.list
+++ b/build/csslint/xfail.list
@@ -37,6 +37,7 @@ apps/gallery/style/open.css 0 1
 apps/gallery/style/gallery_tablet.css 0 4
 apps/gallery/style/info.css 0 2
 apps/keyboard/style/keyboard.css 1 3
+apps/keyboard/style/settings.css 0 1
 apps/music/bower_components/gaia-theme/gaia-theme.css 5 0
 apps/music/style/music.css 0 2
 apps/pdfjs/content/web/viewer.css 0 1