Add about dialog

2020-05-11 22:39:11 +03:00 · 2020-05-11 22:39:11 +03:00 · 5d6af51c6b
parent 2b747f1856
commit 5d6af51c6b
14 changed files with 176 additions and 71 deletions
--- a/app/controllers/about-controller.js
+++ b/app/controllers/about-controller.js
@ -0,0 +1,7 @@
+let angApp = require(__dirname+'/../init')
+
+angApp.controller('AboutController', function($scope, AppStateService) {
+    $scope.closeAbout = () => {
+        AppStateService.set(AppStateService.previousState)
+    }
+});
--- a/app/controllers/default-controller.js
+++ b/app/controllers/default-controller.js
@ -1,7 +1,5 @@
 let angApp = require(__dirname+'/../init')

-angApp.controller('DefaultController', function($scope, ChimeVerseService) {
-
-    console.log('always-test')
-
+angApp.controller('DefaultController', function($scope) {
+    // Do nothing atm.
 });
--- a/app/services/app-state-service.js
+++ b/app/services/app-state-service.js
@ -7,8 +7,10 @@ angApp.factory('AppStateService', [ '$rootScope', ($rootScope) => {
    stateService.APP_STATE_LOGIN = 'login'
    stateService.APP_STATE_DEFAULT = 'default'
    stateService.APP_STATE_SETTINGS = 'settings'
+    stateService.APP_STATE_ABOUT = 'about'

    stateService.set = (state) => {
+        stateService.previousState = stateService.state
        stateService.state = state
        $rootScope.$broadcast('app:state:changed', stateService.state);
    }
--- a/app/services/system-service.js
+++ b/app/services/system-service.js
@ -7,7 +7,7 @@ angApp.factory('SystemService', () => {
    let systemService = {}

    systemService.playAudio = () => {
-        var audio = new Audio(__dirname + '/sounds/graceful.ogg')
+        var audio = new Audio(__dirname + '/../../resources/sounds/graceful.ogg')
        audio.play()
    }

--- a/app/views/about/page.html
+++ b/app/views/about/page.html
@ -0,0 +1,32 @@
+<div class="page-about" ng-controller="AboutController">
+    <div class="about-card">
+        <div class="about-card__content">
+            <div class="about-card__logo">
+                <img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt=""
+                    class="chimeverse-branding__img" />
+            </div>
+            <div class="about-card__description">
+                <h3 class="about__title">About Chimeverse v.0.1.52</h3>
+                <div class="about__description">Jabber/XMPP client based on Converse.js and Electron</div>
+                <div>&nbsp;</div>
+                <div class="about__converse-version">
+                    Version of <a href="https://conversejs.org/" target="_blank">converse.js</a> is 6.0.1
+                </div>
+                <div>&nbsp;</div>
+                <div class="about__thanks">
+                    Thanks to
+                    <a href="https://github.com/nick-denry/Chimeverse/graphs/contributors" target="_blank">all contributors</a>
+                </div>
+                <div>&nbsp;</div>
+            </div>
+        </div>
+
+        <div class="about__action">
+            <button class="about__close-button" ng-click="closeAbout()">OK</button>
+        </div>
+        <div>&nbsp;</div>
+        <div class="about__copyright">Copyright &copy; 2019-2020 Nick Denry</div>
+    </div>
+</div>
+
+<ng-include src="'./app/views/shared/_footer.html'"></ng-include>
--- a/app/views/default/page.html
+++ b/app/views/default/page.html
@ -1,10 +1,11 @@
 <div class="page-default">
    <div class="chimeverse-branding">
-      <img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt="" class="chimeverse-branding__img" />
-      <h3 class="chimeverse-branding__header">Chimeverse</h3>
-      <div class="chimeverse-branding__version">v0.1.52</div>
+        <img src="./resources/images/logo.png" srcset="./resources/images/logo@2x.png 2x" alt=""
+            class="chimeverse-branding__img" />
+        <h3 class="chimeverse-branding__header">Chimeverse</h3>
+        <div class="chimeverse-branding__version">v0.1.52</div>
    </div>
    <div class="conversejs-adoption">
-      <div id="conversejs"></div>
+        <div id="conversejs"></div>
    </div>
-  </div>
+</div>
--- a/app/views/login/page.html
+++ b/app/views/login/page.html
@ -30,7 +30,4 @@
        </form>
    </div>
 </div>
-<div class="login-form__footer">
-    <span class="footer__version">Chimeverse v0.1.52.</span>
-    <a class="github-button" href="https://github.com/nick-denry/Chimeverse" data-icon="octicon-star" aria-label="Star nick-denry/Chimeverse on GitHub">Star</a>
-</div>
+<ng-include src="'./app/views/shared/_footer.html'"></ng-include>
--- a/app/views/shared/_footer.html
+++ b/app/views/shared/_footer.html
@ -0,0 +1,4 @@
+<div class="page__footer">
+    <span class="footer__version">Chimeverse v0.1.52.</span>
+    <a class="github-button" href="https://github.com/nick-denry/Chimeverse" data-icon="octicon-star" aria-label="Star nick-denry/Chimeverse on GitHub">Star</a>
+</div>
--- a/index.html
+++ b/index.html
@ -1,52 +1,64 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-  <meta charset="UTF-8">
-  <title>Chimeverse</title>
-  <link rel="stylesheet" type="text/css" media="screen" href="node_modules/open-iconic/font/css/open-iconic.css">
-  <link rel="stylesheet" type="text/css" media="screen" href="node_modules/converse.js/dist/converse.min.css">
-  <link rel="stylesheet" type="text/css" href="resources/css/app.css">
-  <link rel="stylesheet" type="text/css" href="resources/css/page-default.css">
-  <link rel="stylesheet" type="text/css" href="resources/css/login-form.css">
+    <meta charset="UTF-8">
+    <title>Chimeverse</title>
+    <link rel="stylesheet" type="text/css" media="screen" href="node_modules/open-iconic/font/css/open-iconic.css">
+    <link rel="stylesheet" type="text/css" media="screen" href="node_modules/converse.js/dist/converse.min.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/app.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/_footer.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/page-about.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/page-default.css">
+    <link rel="stylesheet" type="text/css" href="resources/css/page-login.css">
 </head>
 <base href="./">
 <body ng-app="app">
-  <div class="main-background"></div>
-  <div class="main-window" ng-controller="AppController" ng-cloak>
-    <div ng-show="state == 'default'">
-      <ng-include src="'./app/views/default/page.html'" onload="getCredentialsAndLogin()"></ng-include>
+    <div class="main-background"></div>
+    <div class="main-window" ng-controller="AppController" ng-cloak>
+        <div ng-show="state == 'default'">
+            <ng-include src="'./app/views/default/page.html'" onload="getCredentialsAndLogin()"></ng-include>
+        </div>
+        <div ng-show="state == 'login'">
+            <ng-include src="'./app/views/login/page.html'"></ng-include>
+        </div>
+        <div ng-show="state == 'about'">
+            <ng-include src="'./app/views/about/page.html'"></ng-include>
+        </div>
+        <div ng-show="state == 'settings'">
+            settings
+        </div>
    </div>
-    <div ng-show="state == 'login'">
-      <ng-include src="'./app/views/login/page.html'"></ng-include>
-    </div>
-    <div ng-show="state == 'settings'">
-      settings
-    </div>
-  </div>
-
-  <!--
+    <!--
      @see comment https://github.com/signalapp/libsignal-protocol-javascript/issues/6#issuecomment-247208665
    -->
-  <script>
-    window.nodeRequire = require
-    delete window.require
-  </script>
-  <!-- Place libsignal at libs dir as it's no more distributed with converse.js -->
-  <script src="libs/converse.js/3rdparty/libsignal-protocol.js"></script>
-  <script>
-    window.require = window.nodeRequire
-    delete window.nodeRequire
-  </script>
-  <script async defer src="node_modules/github-buttons/dist/buttons.min.js"></script>
-  <script>
-    // You can also require other files to run in this process
-    require('./node_modules/converse.js/dist/locales/' + navigator.language + '-LC_MESSAGES-converse-po.js')
-    require('./node_modules/converse.js/dist/locales/dayjs/' + navigator.language + '.js')
-    require('./node_modules/converse.js/dist/emojis.js')
-    require('./node_modules/converse.js/dist/converse.js')
-    require('./renderer.js')
-  </script>
+    <script>
+        window.nodeRequire = require
+        delete window.require
+    </script>
+    <!-- Place libsignal at libs dir as it's no more distributed with converse.js -->
+    <script src="libs/converse.js/3rdparty/libsignal-protocol.js"></script>
+    <script>
+        window.require = window.nodeRequire
+        delete window.nodeRequire
+    </script>
+    <script>
+        // You can also require other files to run in this process
+        require('./node_modules/converse.js/dist/locales/' + navigator.language + '-LC_MESSAGES-converse-po.js')
+        require('./node_modules/converse.js/dist/locales/dayjs/' + navigator.language + '.js')
+        require('./node_modules/converse.js/dist/emojis.js')
+        require('./node_modules/converse.js/dist/converse.js')
+        require('./renderer.js')
+    </script>
+    <script>
+        function loadJs(url) {
+            var script = document.createElement('script');
+            script.src = url;
+            script.setAttribute('async', 'true');
+            document.documentElement.firstChild.appendChild(script);
+        }
+        setTimeout(function () {
+            loadJs("./node_modules/github-buttons/dist/buttons.min.js");
+        }, 500);
+    </script>
 </body>
-
 </html>
--- a/modules/menu-service.js
+++ b/modules/menu-service.js
@ -12,6 +12,13 @@ menuService.createMenu = () => {
    const application = {
        label: 'Chimeverse',
        submenu: [
+            {
+                label: 'About Chimeverse',
+                click: () => {
+                    let activeWindow = BrowserWindow.getFocusedWindow()
+                    activeWindow.webContents.send('about-page-event');
+                }
+            },
            {
                label: 'Reconnect',
                accelerator: 'CmdOrCtrl+R',
--- a/renderer.js
+++ b/renderer.js
@ -11,6 +11,7 @@ require('./app/services/chimeverse-service')
 require('./app/controllers/settings-controller')
 require('./app/controllers/login-controller')
 require('./app/controllers/default-controller')
+require('./app/controllers/about-controller')
 const chimeversePlugin = require('./libs/converse.js/3rdparty/chimeverse-plugin')
 chimeversePlugin.register()

@ -19,16 +20,21 @@ angApp.controller('AppController', function ($scope, $timeout, ChimeVerseService
    //const { remote, ipcRenderer } = require('electron')
    const { ipcRenderer } = require('electron')

+    // Menu force logout event
    ipcRenderer.on('force-logout-event', () => {
        ChimeVerseService.logout()
        let event = new CustomEvent("converse-force-logout") // Dispatch to the plugin
        document.dispatchEvent(event)
        //remote.getCurrentWindow().reload()
    })
-
+    // Menu settings event
    ipcRenderer.on('preferences-event', () => {
        AppStateService.set(AppStateService.APP_STATE_SETTINGS)
    })
+    // Menu about event
+    ipcRenderer.on('about-page-event', () => {
+        AppStateService.set(AppStateService.APP_STATE_ABOUT)
+    })

    $scope.state = AppStateService.APP_STATE_DEFAULT

--- a/resources/css/_footer.css
+++ b/resources/css/_footer.css
@ -0,0 +1,15 @@
+
+ .page__footer {
+    bottom: 20px;
+    color: #777;
+    display: flex;
+    left: 50%;
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%, 0%);
+ }
+
+ .footer__version {
+    font-size: 13px;
+    margin-right: 30px;
+ }
--- a/resources/css/page-about.css
+++ b/resources/css/page-about.css
@ -0,0 +1,39 @@
+.page-about {
+    color: #777;
+    left: 50%;
+    position: absolute;
+    top: 47%;
+    transform: translate(-50%, -50%);
+}
+
+.about-card {
+    background: #fff;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+    margin-top: 30px;
+    min-width: 400px;
+    padding: 30px;
+}
+
+.about-card__content {
+    display: flex;
+}
+
+.about__action {
+    text-align: center;
+}
+
+.about__close-button {
+    border: 0px solid #ddd;
+    background: rgb(5,93,228);
+    background: linear-gradient(0deg, rgba(5,93,228,1) 0%, rgba(76,145,255,1) 100%);
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 18px;
+    outline: none;
+    padding: 10px 30px;
+ }
+
+ .about__copyright {
+    text-align: center;
+ }
--- a/resources/css/page-login.css
+++ b/resources/css/page-login.css
@ -79,19 +79,4 @@
 .login-form__credentials-message {
     font-size: 14px;
    text-align: center;
- }
-
- .login-form__footer {
-    bottom: 20px;
-    color: #777;
-    display: flex;
-    left: 50%;
-    position: absolute;
-    text-align: center;
-    transform: translate(-50%, 0%);
- }
-
- .footer__version {
-    font-size: 13px;
-    margin-right: 30px;
 }