Resize composeWindow when contents change (#18)

* Resize composeWindow when contents change

Before we used a fixed height window with a transparent background to
mimic resizing the window. This lead to problems with box shadows
showing up behind the full height window and the transparent part not
being clickable.

This new approach resizes the composeWindow to fit the contents.

* Bump version number to 1.4.7

package.json

@@ -1,7 +1,7 @@
 {
   "name": "WIP",
   "description": "Menubar app for WIP",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "author": "Marc Köhlbrugge <[email protected]>",
   "bugs": {
     "url": "https://github.com/marckohlbrugge/wip-menubar/issues"

src/app.js

@@ -143,14 +143,13 @@ app.on('ready', () => {
   function createComposeWindow() {
     composeWindow = new BrowserWindow({
       width: 600,
-      height: 300,
+      height: 54,
       frame: false,
       show: false,
       resizable: false,
       maximizable: false,
       minimizable: false,
       fullscreenable: false,
-      transparent: true,
       alwaysOnTop: true,
       webPreferences: {
         devTools: true,
@@ -562,6 +561,10 @@ app.on('ready', () => {
     }
   }
 
+  async function resize(event, height) {
+    composeWindow.setSize(600, height)
+  }
+
   async function resetOAuth() {
     logger.log('resetOAuth()');
 
@@ -625,6 +628,7 @@ app.on('ready', () => {
   ipcMain.on('completeTodo', completeTodo);
   ipcMain.on('resetOAuth', resetOAuth);
   ipcMain.on('onlineStatusChanged', onlineStatusChange);
+  ipcMain.on('resize', resize);
 
   if (!store.get('oauth.access_token')) {
     // Ask user to connect

src/compose/compose.css

@@ -1,5 +1,5 @@
 html, body {
-  background: transparent;
+  background: black;
 }
 
 /* Hide scrollbar on Linux */
@@ -9,7 +9,6 @@ body::-webkit-scrollbar {
 
 main {
   -webkit-user-select: none;
-  background: black;
   border-radius: 0.4em;
   position: relative;
 }
@@ -62,7 +61,6 @@ main.expanded {
 
 .dropdown-menu {
   padding-top: 0;
-  border-top: 1px #222 solid;
 }
 
 .autocomplete .dropdown-content {
@@ -73,6 +71,7 @@ main.expanded {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
   overflow: hidden;
+  border-top: 1px #222 solid;
 }
 
 .dropdown-item {

src/compose/compose.html

@@ -41,6 +41,7 @@
           :icon="icon"
           icon-pack="custom"
           :placeholder="placeholder"
+          dropdown-position="bottom"
           @keyup.native="keydown"
           @keydown.native.enter="submitForm"
           @drop.native="drop"

src/compose/compose.js

@@ -190,3 +190,18 @@ const example = {
 
 const app = new Vue(example);
 app.$mount('#app');
+
+resize();
+
+function resize() {
+  let containerHeight = document.querySelector(".container").offsetHeight;
+  let dropdownHeight = document.querySelector(".dropdown-menu").offsetHeight;
+
+  let totalHeight = containerHeight + dropdownHeight;
+
+  ipc.send('resize', totalHeight);
+}
+
+const resizeObserver = new ResizeObserver(resize, { box : 'border-box' })
+resizeObserver.observe(document.querySelector(".dropdown-menu"))
+resizeObserver.observe(document.querySelector(".container"))