[beast: 60/70] EBEAST: add StatusBar and a ToolBar with PlayControls

[Tim Janik <timj src gnome org>]

commit 598bf2e4b450c41c8db28b3f814f59a5eb6f2121
Author: Tim Janik <timj gnu org>
Date:   Wed Mar 8 15:33:09 2017 +0100

    EBEAST: add StatusBar and a ToolBar with PlayControls
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/app.js   |   93 +++++++++++++++++++++++++++++++++++++++++++-----------
 ebeast/app.less |    7 ++++
 2 files changed, 81 insertions(+), 19 deletions(-)
---
diff --git a/ebeast/app.js b/ebeast/app.js
index b9a94fe..2c08c64 100644
--- a/ebeast/app.js
+++ b/ebeast/app.js
@@ -1,47 +1,102 @@
 'use strict';
 
-// load external libraries
+// == Essential Modules ==
+// window.$ = preloaded jQuery
 window.Electron = require ('electron').remote;
 window.Bse = require ('./v8bse/v8bse.node');
-// window.$ = preloaded jQuery
 window.Mithril = require ('mithril');
 
-// Assign global App object with defaults
-window.App = {
-  show_about: false,
+// == App ==
+const AppMethods = {
   __proto__ : Electron.app
 };
+const App = {  // global App object with defaults
+  show_about: false,
+  __proto__ : AppMethods
+};
 Object.preventExtensions (App);
+window.App = App;
 
-// load application parts that depend on App
+// == Load Parts ==
+// load and setup application menus
+const Menus = require ('./menus.js');
+Electron.Menu.setApplicationMenu (Menus.build_menubar());
+// load parts that depend on App
 const Widgets = require ('./assets/widgets.js');
 const Dialogs = require ('./assets/dialogs.js');
-const Menus = require ('./menus.js');
 const m = Mithril;
 
-// assign BrowserWindow's menubar
-Electron.Menu.setApplicationMenu (Menus.build_menubar());
+// == App.status() ==
+// update status bar with the given text
+AppMethods.status = function (message) {
+  $('#statusfield').text (message);
+};
+const StatusBar = {
+  view (_vnode) {
+    return (
+      m ('#statusarea.StatusArea.hbox.w100', [
+       m ('#statusbar.StatusBar.maxbox', [
+         'Status: ',
+         m ('#statusfield.StatusField'),
+       ]),
+      ])
+    );
+  },
+};
 
-// Application start onready
-module.exports.start_app = function () {
-  Dialogs.toggle_about = function() {
-    const m = Mithril;
+// == PlayControls ==
+const PlayControls = {
+  view (vnode) {
+    const B = Widgets.IconButton;
     return (
-      m ('button',
-        { onclick: function () { App.show_about = !App.show_about; } },
-        'Toggle About')
+      m ('#playcontrols.PlayControls', vnode.attrs, [
+       m ('span', { style: 'margin: 0 2em' }, [
+         m (B, { icon: 'fa-cog fa-spin0' }),
+       ]),
+       m ('span.ButtonBox', [
+         m (B, { icon: 'fa-fast-backward', hotkey: 'L',     onclick: () => { App.status ('Last...'); } }),
+         m (B, { icon: 'fa-backward',      hotkey: 'B',     onclick: () => { App.status ('Backwards...'); } 
}),
+         m (B, { icon: 'fa-stop',          hotkey: 'Space', onclick: () => { App.status ('Stop...'); } }),
+         m (B, { icon: 'fa-play',          hotkey: 'P',     onclick: () => { App.status ('Play...'); } }), 
// toggle fa-play / fa-pause
+         m (B, { icon: 'fa-circle',        hotkey: 'R',     onclick: () => { App.status ('...Record...'); } 
}),
+         m (B, { icon: 'fa-forward',       hotkey: 'F',     onclick: () => { App.status ('Forwards...'); } 
}),
+         m (B, { icon: 'fa-fast-forward',  hotkey: 'N',     onclick: () => { App.status ('Next...'); } }),
+       ]),
+       m ('span.ButtonBox', { style: 'margin: 0 2em' }, [
+         m (B, { icon: 'fa-music' }),
+       ]),
+       m ('span', { style: 'margin: 0 2em' }, [
+         m (B, { icon: 'fa-info-circle' }),
+       ]),
+      ])
     );
-  };
+  },
+};
+
+// == Toolbar ==
+const Toolbar = {
+  view (vnode) {
+    return (
+      m ('#toolbar.ToolBar', vnode.attrs, vnode.children, [
+       m (PlayControls),
+      ])
+    );
+  },
+};
 
+// == export start_app() ==
+module.exports.start_app = function () { // application setup after onready
   const MithrilApp = {
     view: function () {
       const m = Mithril;
       const app_body = [
-       Dialogs.toggle_about(),
+       m (Toolbar),
+       m ('.maxbox'),
+       m (StatusBar),
        Dialogs.about_dialog(),
       ];
       return (
-       m ('div#mithril.Mithril', {
+       m ('div#mithril.Mithril.vbox', {
          style: 'position: absolute; top: 0; left: 0; right: 0; bottom: 0;',
        }, app_body)
       );
diff --git a/ebeast/app.less b/ebeast/app.less
index 8363d23..aa0aea8 100644
--- a/ebeast/app.less
+++ b/ebeast/app.less
@@ -15,6 +15,8 @@
 @panel-background-border:      darken(@theme-background, 25%);
 @panel-background-light:       lighten(@theme-background, 9%);
 @panel-background-dark:                darken(@theme-background, 9%);
+@toolbar-background:           #606060;
+@toolbar-background-lg:                linear-gradient(to bottom, #666666 0%, #5a5a5a 100%);
 @button-foreground:            #dddddd;
 @button-light:                 #999999;
 @button-lg:                    linear-gradient(to bottom, #777777 0%, #707070 45%, #606060 55%, #555555 
100%);
@@ -61,3 +63,8 @@ body.window-inactive          { color: fade(@theme-foreground, 80%); }
                                                  /* background: fade(@glow-control, 20%); */
                                                  -webkit-box-shadow: none; }
 
+/* == Application Widgets == */
+.PlayControls                  { padding: 1em; margin: 1em;
+                                 background-color: @toolbar-background; background-image: 
@toolbar-background-lg; }
+.StatusBar                     { text-align: left; background-color: #000; }
+.StatusBar .StatusField                { padding-left: 1em; }