[beast: 35/47] EBEAST: vc/aboutdialog.vue: add Beast About dialog component

[Tim Janik <timj src gnome org>]

commit 432b03311532d8b270281d911c2272aa36fd7fa2
Author: Tim Janik <timj gnu org>
Date:   Thu Jun 8 18:05:57 2017 +0200

    EBEAST: vc/aboutdialog.vue: add Beast About dialog component
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/vc/aboutdialog.vue |   62 +++++++++++++++++++++++++++++++++++++++++++++
 ebeast/vc/bundle.js       |    1 +
 2 files changed, 63 insertions(+), 0 deletions(-)
---
diff --git a/ebeast/vc/aboutdialog.vue b/ebeast/vc/aboutdialog.vue
new file mode 100644
index 0000000..2210b3c
--- /dev/null
+++ b/ebeast/vc/aboutdialog.vue
@@ -0,0 +1,62 @@
+<!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
+
+<docs>
+  ## vc-aboutdialog - Modal dialog listing version informatoin about Beast
+  ### Events:
+  - **close** - A *close* event is emitted once the "Close" button activated.
+</docs>
+
+<style lang="less">
+  @import 'mixins.less';
+  .vc-aboutdialog .vc-modaldialog-container    { max-width: 70em; }
+  .vc-aboutdialog table        { table-layout: fixed; max-width: 100%; }
+  .vc-aboutdialog th   { text-align: right; padding-right: .5em; min-width: 15em; }
+  .vc-aboutdialog td   { font-family: monospace; max-width: 50%; overflow-wrap: break-word; }
+</style>
+
+<template>
+  <vc-modaldialog class="vc-aboutdialog" @close="$emit ('close')">
+    <div slot="header">About BEAST</div>
+    <slot></slot>
+    <table>
+      <tr v-for="p in info_pairs">
+       <th>{{ p[0] }}</th>
+       <td>{{ p[1] }}</td>
+      </tr>
+    </table>
+  </vc-modaldialog>
+</template>
+
+<script>
+function about_pairs() {
+  const App = Electron.app;
+  const os = require ('os');
+  return [
+    [ 'Application:',  App.getName() + ' ' + App.getVersion() ],
+    [ 'OS:',           process.platform + ' ' + process.arch + ' (' + os.release() + ')' ],
+    [ 'Electron:',     process.versions.electron ],
+    [ 'Chrome:',       process.versions.chrome ],
+    [ 'User Agent:',   navigator.userAgent ],
+    [ 'V8:',           process.versions.v8 ],
+    [ 'Node.js:',      process.versions.node ],
+    [ 'Bse:',          Bse.server.get_version() ],
+    [ 'Vorbis:',       Bse.server.get_vorbis_version() ],
+    [ 'Libuv:',                process.versions.uv ],
+    [ 'Executable:',   App.getPath ('exe') ],
+    [ 'jQuery:',       jQuery.fn.jquery ],
+    [ 'Vuejs:',                Vue.version ],
+    [ 'Working Dir:',  App.getAppPath() ],
+    [ 'Desktop Dir:',  App.getPath ('desktop') ],
+    [ 'Config Path:',  App.getPath ('userData') ],
+    [ 'Music Path:',   App.getPath ('music') ],
+  ];
+}
+module.exports = {
+  name: 'vc-aboutdialog',
+  data: function() { return { info_pairs: about_pairs() }; },
+  methods: {
+    dummy (method, e) {
+    },
+  },
+};
+</script>
diff --git a/ebeast/vc/bundle.js b/ebeast/vc/bundle.js
index 40996de..4593b48 100644
--- a/ebeast/vc/bundle.js
+++ b/ebeast/vc/bundle.js
@@ -11,6 +11,7 @@ const vue_components = [
   require ('./button-bar.vue'),
   require ('./playcontrols.vue'),
   require ('./modaldialog.vue'),
+  require ('./aboutdialog.vue'),
 ];
 
 // register components