[beast: 58/70] EBEAST: widgets: provide ButtonBox styling and IconButton

[Tim Janik <timj src gnome org>]

commit 47452d0d8fa01a43d8f779e0277869d380a15311
Author: Tim Janik <timj gnu org>
Date:   Wed Mar 8 09:46:52 2017 +0100

    EBEAST: widgets: provide ButtonBox styling and IconButton
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/assets/widgets.js   |   22 +++++++++++++++++++---
 ebeast/assets/widgets.less |   22 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 7 deletions(-)
---
diff --git a/ebeast/assets/widgets.js b/ebeast/assets/widgets.js
index 249a35d..be24c51 100644
--- a/ebeast/assets/widgets.js
+++ b/ebeast/assets/widgets.js
@@ -1,7 +1,8 @@
 'use strict';
+const m = Mithril;
 
 // == Keys ==
-module.exports.KeyCode = {
+exports.KeyCode = {
   BACKSPACE: 8, TAB: 9, ENTER: 13, RETURN: 13, CAPITAL: 20, CAPSLOCK: 20, ESC: 27, ESCAPE: 27, SPACE: 32,
   PAGEUP: 33, PAGEDOWN: 34, END: 35, HOME: 36, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, PRINTSCREEN: 44, 
INSERT: 45, DELETE: 46,
   F1: 112, F2: 113, F3: 114, F4: 115, F5: 116, F6: 117, F7: 118, F8: 119, F9: 120, F10: 121, F11: 122, F12: 
123,
@@ -24,11 +25,26 @@ function create_animation_callback (callback) {
     }
   };
 }
-module.exports.create_animation_callback = create_animation_callback;
+exports.create_animation_callback = create_animation_callback;
 
 /// Enqueue @a callback to be executed once at the next AnimationFrame.
 function queue_animation_callback (callback) {
   const queue_callback = create_animation_callback (callback);
   queue_callback();
 }
-module.exports.queue_animation_callback = queue_animation_callback;
+exports.queue_animation_callback = queue_animation_callback;
+
+// == IconButton ==
+const IconButton = {
+  view (vnode) {
+    if (vnode.children != false)
+      throw Error ('IconButton takes no children');
+    const iconname = vnode.attrs.icon || 'fa-fonticons';
+    const attrs = { icon: undefined, key: vnode.attrs.key || iconname, __proto__: vnode.attrs };
+    return (
+      m ('button.IconButton', attrs,
+        m ('span.IconButtonIcon.fa.fa-lg.fa-fw', { class: iconname }))
+    );
+  },
+};
+exports.IconButton = IconButton;
diff --git a/ebeast/assets/widgets.less b/ebeast/assets/widgets.less
index 315ba10..61fdd0d 100644
--- a/ebeast/assets/widgets.less
+++ b/ebeast/assets/widgets.less
@@ -9,16 +9,30 @@ button                        { -webkit-appearance: normal; }
 .theme-buttonshade             { background-image: @button-lg;
                                  border-top: 1px solid @button-light; border-left: 1px solid @button-light;
                                  border-bottom: 1px solid @button-dark; border-right: 1px solid 
@button-dark; }
-button                         { .theme-buttonframe; .theme-buttonshade;
+.theme-buttonhover             { box-shadow: inset 500px 500px @button-hover; }
+.theme-buttonactive            { box-shadow: inset 500px 500px @button-active;
+                                 background-image: @button-active-lg;
+                                 border-color: @button-active-border; }
+button                         { .theme-buttonshade;
                                  display: inline-flex; text-align: center; margin: 0; padding: 3px 1em; }
 button:focus                   { outline: @focus-outline; }
-button:hover                   { box-shadow: inset 500px 500px @button-hover; }
+button:hover                   { .theme-buttonhover; }
 button.fake-active,
-button:active                  { box-shadow: inset 500px 500px @button-active;
-                                 border-color: @button-active-border; }
+button:active                  { .theme-buttonactive; }
 button, button *               { color: @button-foreground; fill: @button-foreground !important; }
 button.fake-active *,          /* use '*' + fill!important to include svg elements in buttons */
 button:active *                { color: @button-active-fg; fill: @button-active-fg !important; }
+/* .IconButton */
+.IconButton                    { margin: 0 0; padding: 7px; }
+.IconButton .IconButtonIcon    { font-size: 1.3em /*1.33333333em*/; }
+/* .ButtonBox */
+.ButtonBox                     { display: inline-flex; background-color: @button-border;
+                                 border: 1px solid @button-border; }
+.ButtonBox button              { margin: 0 0 0 1px; }
+.ButtonBox button:first-of-type        { margin-left: 0; }
+.ButtonBox                             { border-radius: @button-radius; }
+.ButtonBox > button:first-of-type      { border-top-left-radius: @button-radius; border-bottom-left-radius: 
@button-radius; }
+.ButtonBox > button:last-of-type       { border-top-right-radius: @button-radius; 
border-bottom-right-radius: @button-radius; }
 
 /* == Layouts == */
 html .w100                     { width: 100%; }