Working on chat & simple graphics

2026-05-19 04:18:45 +00:00 · 2019-12-24 11:50:11 +01:00 · 2019-12-24 11:50:11 +01:00 · bee04e1339
commit bee04e1339
parent 084fe5e0a4
16 changed files with 41522 additions and 18 deletions
--- a/view/index.js
+++ b/view/index.js
--- a/index.js
+++ b/index.js
@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron')
+const { app, protocol, session, ipcMain, globalShortcut, BrowserWindow, Menu } = require('electron');

 var win;

@ -6,17 +6,34 @@ function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600,
+        fullscreen: true,
+        autoHideMenuBar: true,
+        kiosk: true,
        webPreferences: {
-            nodeIntegration: true
+            nodeIntegration: true,
+            nodeIntegrationInWorker: true
        }
    })
-
-    if(process.env.NODE_ENV == "dev"){
-        win.loadFile('view/index.html')
+    globalShortcut.register('f11', () => {
+        //win.setKiosk(!win.isKiosk());
+        win.setFullScreen(!win.isFullScreen());
+     });
+     
+     if (process.env.NODE_ENV == "dev") {
+        win.webContents.openDevTools()
+         
+        globalShortcut.register('Ctrl+Alt+Escape', () => {
+             app.quit();
+        });
+    } else {
+        globalShortcut.register('ctrl+r', () => { });
+        window.onbeforeunload = (e) => {
+            e.returnValue = false;
+        }
    }
+    win.loadFile('view/index.html')
    win.removeMenu();
    win.setMenu(null);
-    win.webContents.openDevTools()

    win.on('closed', () => {
        win = null
--- a/view/assets/fonts/tuffy/LICENSE.txt
+++ b/view/assets/fonts/tuffy/LICENSE.txt
@ -0,0 +1,11 @@
+We, the copyright holders of this work, hereby release it into the
+public domain. This applies worldwide.
+
+In case this is not legally possible,
+
+We grant any entity the right to use this work for any purpose, without
+any conditions, unless such conditions are required by law.
+
+Thatcher Ulrich <tu@tulrich.com> http://tulrich.com
+Karoly Barta bartakarcsi@gmail.com
+Michael Evans http://www.evertype.com
--- a/view/assets/fonts/tuffy/Tuffy.otf
+++ b/view/assets/fonts/tuffy/Tuffy.otf
--- a/view/assets/fonts/tuffy/Tuffy.ttf
+++ b/view/assets/fonts/tuffy/Tuffy.ttf
--- a/view/assets/fonts/tuffy/tuffy_regular.sfd
+++ b/view/assets/fonts/tuffy/tuffy_regular.sfd
--- a/view/assets/images/background.jpg
+++ b/view/assets/images/background.jpg
--- a/view/assets/images/esterMain.png
+++ b/view/assets/images/esterMain.png
--- a/view/assets/images/scenic-landscape-1493434907dkG.jpg
+++ b/view/assets/images/scenic-landscape-1493434907dkG.jpg
--- a/view/assets/scripts/gridstack.js
+++ b/view/assets/scripts/gridstack.js
--- a/view/assets/scripts/gridstack.min.map
+++ b/view/assets/scripts/gridstack.min.map
--- a/view/assets/scripts/jquery.min.js
+++ b/view/assets/scripts/jquery.min.js
--- a/view/calendar.js
+++ b/view/calendar.js
--- a/view/index.html
+++ b/view/index.html
@ -8,8 +8,8 @@
    if (typeof module === 'object') { window.module = module; module = undefined; }
    </script>

-    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.all.js"></script>
+    <script src="./assets/scripts/jquery.min.js"></script>
+    <script src="./assets/scripts/gridstack.js"></script>
    
    <script>if (window.module) module = window.module;</script>
    
@ -17,12 +17,31 @@
    <link rel="stylesheet" href="./main.css">
 </head>
 <body>
-    <div class="grid-stack">
-        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
-            <div class="grid-stack-item-content">my first widget</div>
+    <div class="contents">
+        <div class="widgets content-item">
+            <div class="avatar">
+                <img class="avatar--img" id="avatar" src="assets/images/esterMain.png">
+                <h1 class="avatar--text" id="username">USERNAME</h1>
+            </div>
+            <div class="grid-stack">
+                <!-- Movable widgets, generated at runtime -->
+            </div>
        </div>
-        <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
-            <div class="grid-stack-item-content">another widget!</div>
+        <div class="chat content-item">
+            <div class="chat--content">
+                <div class="chat--divider">
+                    Dnes
+                </div>
+                <div class="chat--sent">
+                    Ahoj!
+                </div>
+                <div class="chat--response">
+                    Ahoj
+                </div>
+            </div>
+            <div class="chat--form">
+                <input id="input" type="text" class="chat--input">
+            </div>
        </div>
    </div>
    
@ -30,7 +49,11 @@
        $('.grid-stack').gridstack({
            animate: true
        });
+
+        var grid = $('.grid-stack').data('gridstack');
+        grid.enableResize(true, true);
    </script>
-    <script src="./index.js"></script>
+    <script src="./user.js"></script>
+    <script src="./calendar.js"></script>
 </body>
 </html>
--- a/view/main.css
+++ b/view/main.css
@ -1,16 +1,88 @@
 html {
-    background: url("./assets/images/scenic-landscape-1493434907dkG.jpg");
+    background: url("./assets/images/background.jpg");
    background-size: cover;
    margin: 0;
    padding: 0;
 }
 body {
-    /*backdrop-filter: blur(3px);*/
    margin: 0;
    padding: 0;
 }
-.grid-stack-item {
-    backdrop-filter: blur(15px);
+.contents {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+.content-item {
+    width: 50%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.grid-stack-item-content {
+    backdrop-filter: blur(25px);
    border-radius: 15px;
    color: white;
+    padding: 5px;
+}
+.avatar {
+    margin: 5px;
+    backdrop-filter: blur(25px);
+    color: white;
+    border-radius: 140px 15px 15px 140px;
+    padding: 0;
+}
+.avatar--img {
+    height: 140;
+    border-radius: 50%;
+}
+.avatar--text {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 145px;
+    vertical-align: middle;
+    margin-top: 56px;
+}
+
+.chat--content {
+    height: calc(100% - 20px);
+}
+.chat--divider {
+    color: grey;
+    text-align: center;
+}
+
+.chat--sent {
+    color: white;
+}
+
+.chat--response {
+    color: white;
+}
+
+
+.chat--input {
+    width: 100%;
+    height: 20px;
+    color: white;
+    background-color: transparent;
+    position: relative;
+    bottom: 0;
+    left: 0;
+    border: none;
+    border-bottom: 2px solid white;
+}
+
+.chat--input::focus {
+    outline: none;
+}
+
+@font-face {
+    font-family: Tuffy;
+    src: url("assets/fonts/tuffy/Tuffy.otf") format("opentype");
+}
+
+h1, h2, h3 {
+    font-family: Tuffy;
 }
--- a/view/user.js
+++ b/view/user.js
@ -0,0 +1,4 @@
+const username = "Daniel Bulant";
+
+var accountElement = document.getElementById("username");
+accountElement.innerText = username;