moved over form-control

renderer/css/misc.css

@@ -1,23 +1,6 @@
 /* ----------------------------------*/
 /* MISC CSS THAT SHOULD BE BROKEN UP */
 /* ----------------------------------*/
-.form-control {
-  display: inline-block;
-  width: 100%;
-  min-height: 25px;
-  padding: var(--padding-less) var(--padding);
-  font-size: var(--font-size-default);
-  line-height: var(--line-height-default);
-  background-color: var(--chrome-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--default-border-radius);
-  outline: none;
-}
-
-.form-control:focus {
-  border-color: var(--focus-input-color);
-  box-shadow: 0 0 0 3px var(--focus-input-color);
-}
 
 .toolbar-header .title {
   -webkit-app-region: drag;
@@ -27,14 +10,6 @@
   padding: 1rem;
 }
 
-.search-input {
-  width: auto;
-  padding: 1px 5px;
-  vertical-align: middle;
-  border-color: #ccc;
-  min-height: auto;
-}
-
 .form-control:focus {
   border-color: #6db3fd;
   box-shadow: 0 0 0 1px #6db3fd;

renderer/views/components/form-control.js

@@ -0,0 +1,26 @@
+const css = require('csjs')
+const insert = require('insert-css')
+
+const style = css`
+  .form-control {
+    display: inline-block;
+    width: 100%;
+    min-height: 25px;
+    padding: var(--padding-less) var(--padding);
+    font-size: var(--font-size-default);
+    line-height: var(--line-height-default);
+    background-color: var(--chrome-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--default-border-radius);
+    outline: none;
+  }
+
+  .form-control:focus {
+    border-color: var(--focus-input-color);
+    box-shadow: 0 0 0 3px var(--focus-input-color);
+  }
+`
+
+insert(css.getCss(style))
+
+module.exports.style = style

renderer/views/components/search.js

@@ -1,9 +1,26 @@
 const html = require('choo/html')
+const css = require('csjs')
+const insert = require('insert-css')
+const fcStyle = require('./form-control').style
 
-module.exports = (send) => html`
+const style = css`
+  .search-input {
+    width: auto;
+    padding: 1px 5px;
+    vertical-align: middle;
+    border-color: #ccc;
+    min-height: auto;
+  }
+`
+insert(css.getCss(style))
+
+function search (oninput) {
+  return html`
   <input
     type="text"
-    class="search-input form-control"
+    class="${style['search-input']} ${fcStyle['form-control']}"
     placeholder="Search"
-    oninput=${(e) => send('library:search', e.target.value)}>
+    oninput=${oninput}>
 `
+}
+module.exports = search

renderer/views/components/toolbar.js

@@ -25,7 +25,7 @@ module.exports = (state, prev, send) => html`
   <header class="toolbar toolbar-header ${style.toolbar}">
     ${player(state.player, send)}
     <div>
-      ${search(send)}
+      ${search((e) => send('library:search', e.target.value))}
       <a href="/preferences" class="btn btn-default">
         <button></button>
       </a>

renderer/views/components/volume.js

@@ -1,6 +1,7 @@
 const html = require('choo/html')
 const css = require('csjs')
 const insert = require('insert-css')
+const assign = Object.assign
 
 const style = css`
   .volume-control {
@@ -14,8 +15,6 @@ const style = css`
 `
 insert(css.getCss(style))
 
-module.exports = volume
-
 const defaults = {
   min: 0,
   max: 1,
@@ -24,7 +23,7 @@ const defaults = {
 }
 
 function volume (value, oninput, opts) {
-  opts = Object.assign({}, defaults, opts)
+  opts = assign({}, defaults, opts)
   const { min, max, step, style } = opts
   return html`
   <input type="range"
@@ -34,3 +33,5 @@ function volume (value, oninput, opts) {
     value="${value}">
 `
 }
+
+module.exports = volume

renderer/views/preferences.js

@@ -1,8 +1,9 @@
 const html = require('choo/html')
 const title = require('./components/title')
+const fcStyle = require('./components/form-control').style
 const { app, dialog } = require('electron').remote
 
-module.exports = (state, prev, send) => {
+function preferences (state, prev, send) {
   function showDialog () {
     dialog.showOpenDialog({
       defaultPath: app.getPath('home'),
@@ -23,7 +24,7 @@ module.exports = (state, prev, send) => {
               <div class="form-group">
                   <label>Library Folder Path</label>
                   <input type="text"
-                    class="form-control"
+                    class="${fcStyle['form-control']}"
                     onclick=${showDialog}
                     value="${state.config.music}">
               </div>
@@ -39,3 +40,5 @@ module.exports = (state, prev, send) => {
     </main>
   `
 }
+
+module.exports = preferences