Merge pull request #55 from InteropIO/feat/window-sizing

Feat/window sizing
InteropIO · Nov 13, 2024 · adea40a · adea40a
2 parents 8332da6 + 2b731a9
commit adea40a
Show file tree

Hide file tree

Showing 18 changed files with 925 additions and 414 deletions.
diff --git a/index.html b/index.html
@@ -41,14 +41,14 @@
               <button
                 class="btn btn-icon btn-icon-action minimize"
                 type="button"
-                id="dropdownMenuButton"
+                id="dropdownMenuButtonMinimize"
               >
                 <i class="icon-window-minimize"></i>
               </button>
               <button
                 class="btn btn-icon btn-icon-action"
                 type="button"
-                id="dropdownMenuButton"
+                id="dropdownMenuButtonActions"
                 dropdown-button-id="top-menu"
               >
                 <i class="icon-ellipsis-vert"></i>
@@ -96,9 +96,9 @@
           <li class="favorite position-relative">
             <i class="icon-star-full"></i>
           </li>
-          <li class="fav-app-nav">
+          <li class="favorites-nav">
             <ul
-              id="fav-apps"
+              id="favorites"
               class="nav nav-tabs flex-column accordion"
               column
             ></ul>
@@ -164,20 +164,17 @@ <h5 class="draggable m-0">Load Layouts</h5>
             placeholder="Search Layout..."
           />
         </div>
+        <div class="layout-save-alert-wrapper"></div>
         <ul class="nav nav-tabs flex-column"></ul>
       </div>
 
-      <div
-        class="toggle-content hide"
-        id="layout-content"
-        menu-id="layout-save"
-      >
+      <div class="toggle-content hide" id="layout-save" menu-id="layout-save">
         <div class="p-2">
           <div class="d-flex justify-content-between mb-2">
             <h5 class="draggable m-0">Save Layouts</h5>
             <span class="icon-arrow-up-down close-drawer m-0"></span>
           </div>
-          <div class="input-group">
+          <div class="input-group layout-save-input-group">
             <input
               type="text"
               id="layout-save-name"
@@ -186,6 +183,9 @@ <h5 class="draggable m-0">Save Layouts</h5>
               placeholder="Layout name..."
             />
             <div class="input-group-append">
+              <div class="loader-wrapper">
+                <div id="layout-save-loader" class="loader"></div>
+              </div>
               <button class="btn btn-secondary" id="layout-save-btn">
                 <i class="icon-floppy"></i>
               </button>

diff --git a/js/applications.js b/js/applications.js
@@ -245,9 +245,28 @@ function favoriteApplicationHTMLTemplate(app) {
   `;
 }
 
+function favoriteLayoutHTMLTemplate(layout, currentlyActiveLayout) {
+  if (!layout) {
+    return '';
+  }
+
+  const displayName = typeof layout.name === 'string' ? layout.name : 'No name set';
+  const isLayoutActive = layout.name === currentlyActiveLayout.name
+
+  return `<li class="nav-item${
+    isLayoutActive ? ' layout-active' : ''
+  }" layout-name="${layout.name}" layout-type="${layout.type}">
+    <a class="nav-link" href="#" draggable="false" title="${displayName}">
+      <i class="icon-03-context-viewer ml-2 mr-2"></i>
+      <span class="text-animation">${displayName}</span>
+    </a>
+  </li>
+  `;
+}
+
 const noApplicationsHTML = `<li class="text-center pt-3">No applications</li>`;
 const noRunningAppsHTML = `<li class="text-center pt-3">No running applications</li><li class="text-center pt-3"><button class="btn btn-secondary" menu-button-id="apps">Start application</button></li>`;
-const noFavoriteAppsHTML = `<li class="text-center pt-3">No favorite apps</li>`;
+const noFavoriteAppsOrLayoutsHTML = `<li class="text-center pt-3">No favorite apps or layouts</li>`;
 
 export {
   // applicationsObs,
@@ -257,10 +276,11 @@ export {
   applicationHTMLTemplate,
   applicationFolderHTMLTemplate,
   favoriteApplicationHTMLTemplate,
+  favoriteLayoutHTMLTemplate,
   handleAppClick,
   handleSearchChange,
   runningApps,
   noApplicationsHTML,
   noRunningAppsHTML,
-  noFavoriteAppsHTML,
+  noFavoriteAppsOrLayoutsHTML,
 };
diff --git a/js/connect-related.js b/js/connect-related.js
@@ -6,14 +6,14 @@ import {
 } from './settings.js';
 import {
   setOrientation,
-  setWindowSize,
   setWindowPosition,
   setDrawerOpenClasses,
-  setDrawerOpenDirection,
 } from './utils.js';
 
 console.time('Glue');
 
+const rxjs = window.rxjs;
+
 var gluePromise = new Promise(async (res, rej) => {
   window.addEventListener('load', async () => {
     let glue = await Glue({
@@ -55,51 +55,17 @@ const glueInfo = {
   gw: window.glue42gd.gwURL,
 };
 
-gluePromise.then((glue) => {
+gluePromise.then(() => {
   trackApplications();
   trackLayouts();
   trackWorkspaces();
   trackThemeChanges();
   trackWindowMove();
-  trackDisplayChange();
   trackConnection();
   trackNotificationCount();
-  trackWindowZoom();
   trackNotificationPanelVisibilityChange();
 });
 
-async function trackWindowZoom() {
-  const glue = await gluePromise;
-  applyWindowZoom();
-  trackWindowResize();
-
-  glue.windows.my().onBoundsChanged(() => {
-    applyWindowZoom();
-  });
-}
-
-async function applyWindowZoom() {
-  const glue = await gluePromise;
-  const glueWindowHeight = glue.windows.my().bounds.height;
-  const windowHeight = window.innerHeight;
-  const zoomRatio = windowHeight / glueWindowHeight;
-
-  document.documentElement.style.zoom = zoomRatio;
-}
-
-function applyWindowZoomWithDelay() {
-  setTimeout(() => {
-    applyWindowZoom();
-  }, 1000);
-}
-
-function trackWindowResize() {
-  window.addEventListener('resize', () => {
-    applyWindowZoom();
-    applyWindowZoomWithDelay();
-  });
-}
-
 async function trackApplications() {
   const glue = await gluePromise;
 
@@ -136,6 +102,9 @@ async function trackLayouts() {
   glue.layouts.onRemoved(pushAllLayouts);
   glue.layouts.onChanged(pushAllLayouts);
   glue.layouts.onRenamed(pushAllLayouts);
+  glue.layouts.onSaveRequested((info) => {
+    console.log(info);
+  });
   activeLayout.next((await glue.layouts.getCurrentLayout()) || {});
   glue.layouts.onRestored((layout) => {
     activeLayout.next(layout || {});
@@ -182,7 +151,7 @@ async function trackNotificationCount() {
   notificationEnabledObs
     .pipe(rxjs.operators.filter((data) => data))
     .pipe(rxjs.operators.take(1))
-    .subscribe((data) => {
+    .subscribe(() => {
       glue.agm.subscribe('T42.Notifications.Counter').then((subscription) => {
         subscription.onData(({ data }) => {
           notificationsCountObs.next(data.count);
@@ -211,14 +180,6 @@ async function trackWindowMove() {
   });
 }
 
-async function trackDisplayChange() {
-  const glue = await gluePromise;
-
-  glue.displays.onDisplayChanged(async () => {
-    await setWindowSize();
-  });
-}
-
 async function trackNotificationPanelVisibilityChange() {
   const glue = await gluePromise;
   const notificationPanel = document.querySelector('#notification-panel');
@@ -319,8 +280,9 @@ async function openWorkspace(name, type, context) {
 
 async function saveLayout(name) {
   const glue = await gluePromise;
+  const result = await glue.layouts.save({ name });
 
-  return glue.layouts.save({ name });
+  return result;
 }
 
 async function getDefaultLayout() {
@@ -393,13 +355,16 @@ async function getNotificationsConfiguration() {
   const methodExists = await checkNotificationsConfiguration();
 
   if (methodExists) {
-    const { enable, enableToasts } =
+    const { enable, enableToasts, showNotificationBadge } =
       await glue.notifications.getConfiguration();
     const setting = {
       enableNotifications: enable,
       enableToasts,
+      showNotificationBadge,
     };
 
+    showHideNotificationBadge(showNotificationBadge);
+
     setSetting(setting);
   }
 }
@@ -416,32 +381,32 @@ async function trackNotificationsConfigurationChanged() {
 
   if (methodExists) {
     await glue.notifications.onConfigurationChanged((config) => {
-      console.log('Notifications configuration changed', config);
-
       const { enable, enableToasts, showNotificationBadge } = config;
       const setting = {
         enableNotifications: enable,
         enableToasts,
         showNotificationBadge,
       };
 
-      if (typeof showNotificationBadge !== 'undefined') {
-        const notificationBadge = document.querySelector(
-          '#notifications-count'
-        );
-
-        if (showNotificationBadge) {
-          notificationBadge.classList.remove('d-none');
-        } else {
-          notificationBadge.classList.add('d-none');
-        }
-      }
+      showHideNotificationBadge(showNotificationBadge);
 
       setSetting(setting);
     });
   }
 }
 
+const showHideNotificationBadge = (flag) => {
+  if (typeof flag !== 'undefined') {
+    const notificationBadge = document.querySelector('#notifications-count');
+
+    if (flag) {
+      notificationBadge.classList.remove('d-none');
+    } else {
+      notificationBadge.classList.add('d-none');
+    }
+  }
+};
+
 async function openNotificationPanel() {
   const glue = await gluePromise;
   const panelApp = glue.windows.find(
@@ -459,7 +424,7 @@ async function openNotificationPanel() {
 async function openFeedbackForm() {
   const glue = await gluePromise;
 
-  glue.feedback ?? glue.feedback();
+  glue.feedback?.();
 }
 
 async function registerHotkey() {
@@ -681,6 +646,7 @@ async function getPrefs() {
       toolbarAppRows: settings.toolbarAppRows,
       vertical: settings.vertical,
       favoriteApps: settings.favoriteApps,
+      favoriteLayouts: settings.favoriteLayouts,
       schedule: settings.schedule,
     });
     setSettings();
@@ -693,12 +659,9 @@ async function getPrefs() {
   if (glue.windows.my().state === 'minimized') {
     const un = glue.windows.my().onNormal(async () => {
       un();
-      await setWindowSize();
     });
   }
 
-  await setWindowSize();
-  setDrawerOpenDirection();
   await setDrawerOpenClasses();
   await setWindowPosition();
 

diff --git a/js/favorites.js b/js/favorites.js
@@ -1,10 +1,28 @@
 import { getSetting, setSetting } from "./settings.js";
 
 const favoriteApps = new rxjs.BehaviorSubject([]);
+const favoriteLayouts = new rxjs.BehaviorSubject([]);
 
 function init() {
   const savedFavApps = getSetting('favoriteApps');
+  const savedFavLayouts = getSetting('favoriteLayouts');
+
   favoriteApps.next(savedFavApps);
+  favoriteLayouts.next(savedFavLayouts);
+}
+
+function updateFavoriteLayouts() {
+  let currentFavoriteLayouts = favoriteLayouts.value;
+
+  document.querySelectorAll('[layout-name]').forEach((layoutElement) => {
+    let layoutName = layoutElement.getAttribute('layout-name');
+
+    if (currentFavoriteLayouts.includes(layoutName)) {
+      layoutElement.classList.add('fav-layout');
+    } else {
+      layoutElement.classList.remove('fav-layout');
+    }
+  });
 }
 
 function updateFavoriteApps() {
@@ -32,6 +50,30 @@ function addFavoriteApp(appName) {
   updateFavoriteApps();
 }
 
+function addFavoriteLayout(layoutName) {
+  console.log(`adding layout named: "${layoutName}" to favorites`);
+
+  let newLayouts = favoriteLayouts.value.slice();
+
+  newLayouts.push(layoutName);
+  favoriteLayouts.next(newLayouts);
+  setSetting({ favoriteLayouts: newLayouts });
+  updateFavoriteLayouts();
+}
+
+function removeFavoriteLayout(layoutNameToDelete) {
+  console.log('removing favorite layout');
+
+  let currentLayouts = favoriteLayouts.value.slice();
+
+  currentLayouts = currentLayouts.filter(
+    (layoutName) => layoutName !== layoutNameToDelete
+  );
+  favoriteLayouts.next(currentLayouts);
+  setSetting({ favoriteLayouts: currentLayouts });
+  updateFavoriteLayouts();
+}
+
 function removeFavoriteApp(appName) {
   console.log('removing favorite app');
 
@@ -45,4 +87,14 @@ function removeFavoriteApp(appName) {
   updateFavoriteApps();
 }
 
-export { init, favoriteApps, addFavoriteApp, removeFavoriteApp, updateFavoriteApps };
+export {
+  init,
+  favoriteApps,
+  favoriteLayouts,
+  addFavoriteApp,
+  addFavoriteLayout,
+  removeFavoriteApp,
+  removeFavoriteLayout,
+  updateFavoriteApps,
+  updateFavoriteLayouts,
+};