Merge pull request #31334 from KevinGrandon/bug_1193618_keyboard_chec…

…kboxes Bug 1193618 - Convert keyboard checkboxes to use gaia-checkbox
mozilla-b2g · Aug 13, 2015 · 025b83e · 025b83e
2 parents 243582c + 1796ff3
commit 025b83e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 32 deletions.
diff --git 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
@@ -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
@@ -41,6 +41,7 @@ apps/homescreen/bower_components/gaia-fonts/style.css 0 1
 apps/homescreen/bower_components/gaia-theme/gaia-theme.css 5 0
 apps/homescreen/style/window.css 1 0
 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