Add material to popup

content/popup.js

@@ -12,7 +12,7 @@ var events = {
     chrome.extension.sendMessage({
       message: 'options',
       options: state.options
-    }, (res) => {})
+    })
   },
 
   changeTheme: (e) => {
@@ -20,7 +20,7 @@ var events = {
     chrome.extension.sendMessage({
       message: 'theme',
       theme: state.theme
-    }, (res) => {})
+    })
   },
 
   viewRaw: () => {
@@ -29,8 +29,7 @@ var events = {
       message: 'raw',
       raw: state.raw,
       theme: state.theme
-    }, (res) => {})
-    return false
+    })
   },
 
   setDefaults: () => {
@@ -39,15 +38,23 @@ var events = {
     }, (res) => {
       chrome.extension.sendMessage({message: 'settings'}, init)
     })
-    return false
   },
 
   advancedOptions: () => {
     chrome.extension.sendMessage({message: 'advanced'})
-    return false
   }
 }
 
+var description = {
+  gfm: 'Enable GFM\n(GitHub Flavored Markdown)',
+  tables: 'Enable GFM tables\n(requires the gfm option to be true)',
+  breaks: 'Enable GFM line breaks\n(requires the gfm option to be true)',
+  pedantic: 'Don\'t fix any of the original markdown\nbugs or poor behavior',
+  sanitize: 'Ignore any HTML\nthat has been input',
+  smartLists: 'Use smarter list behavior\nthan the original markdown',
+  smartypants: 'Use "smart" typograhic punctuation\nfor things like quotes and dashes'
+}
+
 function init (res) {
   state.options = res.options
   state.theme = res.theme
@@ -60,14 +67,21 @@ function init (res) {
   m.redraw()
 }
 
+function oncreate (vnode) {
+  componentHandler.upgradeElements(vnode.dom)
+}
+
+chrome.extension.sendMessage({message: 'settings'}, init)
+
 m.mount(document.querySelector('body'), {
-  oninit: () => {
-    chrome.extension.sendMessage({message: 'settings'}, init)
-  },
-  view: () =>
-    m('#options', [
-      m('a[href=""]', {onclick: events.viewRaw}, (state.raw ? 'Html' : 'Markdown')),
-      m('a[href=""]', {onclick: events.setDefaults}, 'Defaults'),
+  view: (vnode) =>
+    m('#popup', [
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.viewRaw},
+        (state.raw ? 'Html' : 'Markdown')),
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.setDefaults},
+        'Defaults'),
 
       m('h4', 'Theme'),
       m('select', {onchange: events.changeTheme}, state.themes.map((theme) =>
@@ -75,19 +89,22 @@ m.mount(document.querySelector('body'), {
       )),
 
       m('h4', 'Compiler Options'),
-      m('ul', Object.keys(state.options).map((key) =>
-        m('li',
-          m('label',
-            m('input[type="checkbox"]', {
+      m('.mdl-grid', Object.keys(state.options).map((key, index) =>
+        m('.mdl-cell',
+          m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
+            {oncreate, title: description[key]}, [
+            m('input[type="checkbox"].mdl-switch__input', {
               name: key,
               checked: state.options[key],
               onchange: events.changeOptions
             }),
-            ' ' + key
-          )
+            m('span.mdl-switch__label', key)
+          ])
         )
       )),
 
-      m('a[href=""]', {onclick: events.advancedOptions}, 'Advanced Options')
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.advancedOptions},
+        'Advanced Options')
     ])
 })

css/popup.css

@@ -1,17 +1,17 @@
-* { margin: 0; padding: 0; outline: 0; }
 
-body { font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; line-height: 17px; color: #404040; background: #fff; }
+#popup { width: 350px; padding: 20px; -webkit-user-select: none; }
+#popup:after { content: ''; display: block; clear: both; }
 
-a { color: #0252aa; text-decoration: none; cursor: pointer; }
-a:hover { text-decoration: underline; }
-input, textarea, select { font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #404040; }
-ul { list-style: none; }
+h4 { cursor: default; }
+h4:nth-of-type(1) { margin-bottom: 5px; }
+h4:nth-of-type(2) { margin-bottom: -5px; }
 
+select {
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 14px; line-height: 17px;
+  text-transform: uppercase;
+  width: 350px; padding: 5px;
+}
 
-body { width: 200px; padding: 10px; }
-label { white-space: nowrap; }
-select { width: 200px; }
-[type=checkbox] { position: relative; z-index: 1; top: 2px; }
-h4 { clear: both; padding: 10px 0 2px 0; }
-a:nth-child(2) { float: right; }
-ul { padding: 0 0 10px 0; }
+button:nth-child(2) { float: right; }
+button:nth-child(2n+3) { float: right; }