First set of UI improvements

client/agora/public/css/agora-theme.css

@@ -727,7 +727,7 @@ a:hover {
 /* SIDE MENu */
 .sidebar {
     height: 100%;
-    width: 85px;
+    width: 250px;
     position: fixed;
     z-index: 1;
     top: 0;
@@ -786,7 +786,7 @@ a:hover {
 
 
 .dashboard-content {
-    transition: margin-left .5s;
+    margin-left: 250px;
 }
 
 /* .friends-content {
@@ -1624,7 +1624,7 @@ input:checked+.slider:before {
     top: 50%;
     left: 60%;
     font-size: 10px;
-    font-family: Verdana, sans-serif;
+    font-family: sans-serif;
 }
 
 input:checked+.slider:after {
@@ -2145,12 +2145,12 @@ input:checked+.slider:after {
     padding-left: 25%;
 }
 
-
-.dashboard-content {
+/* 
+.{
     transition: margin-left .5s;
 }
 
-/* .friends-content {
+.friends-content {
     transition: margin-left .5s;
 } */
 

client/agora/public/css/gallery/note-gallery.css

@@ -66,24 +66,27 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 18rem;
-  margin-top: 20px; /* Adjust as needed */
+  margin-top: -40px; /* Adjust as needed */
+  margin-left: auto;
 }
 
 .add-button {
-  border-radius: 50%; /* Makes the button circular */
-  width: 50px; /* Adjust size as needed */
+  border-radius: 10px; /* Makes the button circular */
+  width: 100px; /* Adjust size as needed */
   height: 50px; /* Adjust size as needed */
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px; /* Adjust icon size as needed */
+  font-size: 20px; /* Adjust icon size as needed */
+
+  background-color: #ffffff; 
+  color: #000000;
 }
 
 /* Optional: Add hover effect */
 .add-button:hover {
-  background-color: #007bff; /* Darker shade of primary color */
-  color: white;
+  background-color: #826131; /* Darker shade of primary color */
+  color: #ffffff;
 }
 
 /* Drop-down option */

client/agora/public/css/note.css

@@ -1,6 +1,6 @@
 .note-body {
     transition: margin-left 0.5s;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-family: sans-serif;
 }
 
 #page-content {

client/agora/public/css/topic.css

@@ -4,7 +4,17 @@
 
 .topic-body {
     transition: margin-left 0.5s;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-family: sans-serif;
+}
+
+#black-bar {
+    position: fixed;
+    right: 0;
+    top: 0px;
+    width: 50px;
+    height: 100%;
+    z-index: 1;
+    background-color: #17191a;
 }
 
 .topic-content {
@@ -594,6 +604,7 @@
 
 
 .resource-type-container {
+    margin-right: 0;
     float: right;   
     border: 1px solid #ccc;
     width:120px;
@@ -712,7 +723,7 @@
 
 .share-button {
     position: absolute;
-    right: 20px;
+    right: 45px;
     top: -20px;
 }
 
@@ -977,9 +988,8 @@
     position: fixed;
     right: 0;
     height: 100%;
-    background-color: #1f1f1f;
+    background-color: #17191a;
     width: 50px; /* Initial width */
-    border-left: 1px solid #dee2e6;
     z-index: 10;
     overflow: hidden;
     transition: width 0.5s; /* Animation for width change */

client/agora/public/js/agnesAI.js

@@ -23,9 +23,11 @@
     // Check the current width and toggle between 70% and 100%
     if ( resourcesZone.style.width === '65%' ) {
         resourcesZone.style.width = '95%';
+        document.getElementById( 'black-bar' ).style.width = '50px'; // For continuity with the drawer - otherwise there's a big white gap
     }
     else {
         resourcesZone.style.width = '65%';
+        document.getElementById( 'black-bar' ).style.width = '30%'; // For continuity with the drawer - otherwise there's a big white gap
     }
 
 } );
@@ -47,7 +49,7 @@
 } );
 
 if( document.getElementById( "agnesModal" ) ) {
     document.getElementById( "agnesModal" ).addEventListener( "shown.bs.modal", ( e ) => {
         let modal = document.querySelector( ".agnes-modal-pos" );
         let agnesButton = document.querySelector( ".agnes-btn-container" );
 

client/agora/public/js/editorMain.js

@@ -66,7 +66,7 @@
     }
 
     // add the event listener for adding a new topic
-    //addTopicEvent();
+    // addTopicEvent();
 
 
     /**
@@ -80,19 +80,18 @@
         ( debug ) ? console.log( "Workspace Title Change: complete" ) : null;
     } );
 
-    const workspaceDescription = document.getElementById( "workspace-desc" );
+    /* const workspaceDescription = document.getElementById( "workspace-desc" );
     workspaceDescription.addEventListener( "change", async () => {
         ( debug ) ? console.log( "Workspace Description Change: start" ) : null;
         getCurrentWorkspace().workspaceDescription = workspaceDescription.value;
         await saveWorkspace( getCurrentWorkspace() );
         ( debug ) ? console.log( "Workspace Description Change: complete" ) : null;
-    } );
-
+    } ); */
 
     /**
      * Event listener for entering a tag
      */
     let ul = document.querySelector( ".tag-list" );
     let tagInput = document.getElementById( "mySearch" );
     if( tagInput ) {
         tagInput.addEventListener( "keyup", async function( e ) {
@@ -137,7 +136,7 @@
     await createTopicEditorGui();
 
     // add the event listener for adding a new topic
-    //addTopicEvent();   
+    // addTopicEvent();   
 
     // prompt the user to name the topic
     editTopicName( newTopic.topicId );

client/agora/public/js/editorManager.js

@@ -9,7 +9,7 @@
  * imports
  */
 // state manager
 import { getCurrentWorkspace, getCurrentActiveTopic, addTab, activeTab, setActiveTab, debug, dataDebug, addNewTextResource, updateTopicName, getCurrentWorkspaceOwner, getCurrentWorkspaceSharedUsers, updateUserPermission, addNewTag } from "./state/stateManager.js";
 // DOM event functions (eg. 
 import { textEditorUpdateEvent, tabClickEvent, tabLongClickEvent, deleteResourceEvent, addTopicEvent, deleteTagEvent } from "./editorMain.js";
 
@@ -41,7 +41,7 @@
 
 // Workspace resizing
 let activeHeightObj = {};
 let activeHeightList = [];
 
 export let lastEditedResourceId;
 
@@ -58,7 +58,7 @@
     ( debug ) ? console.log( "updateWorkspaceDom() : start" ) : null;
     ( debug && dataDebug ) ? console.log( "using workspace: " + JSON.stringify( getCurrentWorkspace() ) ) : null;
     document.getElementById( "workspace-title" ).value = getCurrentWorkspace().workspaceName;
-    document.getElementById( "workspace-desc" ).value = getCurrentWorkspace().workspaceDescription;
+    //document.getElementById( "workspace-desc" ).value = getCurrentWorkspace().workspaceDescription;
     ( debug ) ? console.log( "updateWorkspaceDom() : complete" ) : null;
 };
 
@@ -231,7 +231,7 @@
                 } );
 
                 // Reset the long press flag when the mouse leaves the element
                 tabBtn.addEventListener( 'mouseleave', function( e ) {
                     clearTimeout( pressTimer );
                     longPressDetected = false;
                 } );        
@@ -585,7 +585,7 @@
             saveTopicName( topicId );
         }
     } );
     input.addEventListener( 'blur', function( event ) {
         console.log( 'blur event' );
         saveTopicName( topicId );
     } );
@@ -643,9 +643,6 @@
         if( resource ) {
 
 
-
-
-
             // title container
             let titleContainer = document.createElement( "div" );
             titleContainer.className = "title-container";
@@ -663,7 +660,6 @@
             else{
                 title.value = "Untitled";
             }
-
 
             // add the change listener for the title
             title.addEventListener( "change", async () => {
@@ -793,7 +789,7 @@
  * Private functions
  */
 
 function getTabLocation( id ) {
     let tabContent = document.getElementsByClassName( "tabcontent" );
     let location = -1;
     for ( let i=0; i<tabContent.length; i++ ) {
@@ -985,7 +981,7 @@
 
 
     ( debug ) ? console.log( "refreshTabs() : Start" ) : null;
     let i, tabcontent, tablinks;
 
     // activeTabUuid = tab.getAttribute( "name" );
     // activeTab = activeTab = document.getElementById( "resources-zone" + name.slice( -1 ) );
@@ -1019,7 +1015,7 @@
     ( debug ) ? console.log( "refreshTabs : Complete" ) : null;
 }
 
 function closeTab( tabId ) {
     ( debug ) ? console.log( "closeTab : " + tabId ) : null;
     let tabContent = document.getElementsByClassName( "tabcontent" );
     let tablinks = document.getElementsByClassName( "tablinks" );

client/agora/public/js/scripts.js

@@ -9,108 +9,22 @@
  * Menu management for agora 
  */
 
-let clientSettings = {
-    sideBarLocked: false
-};
-
-let sideBarStatus = true;
+let clientSettings = {};
 
 /**
  * Triggered when the page is loaded.
  */
 window.addEventListener( "load", () => {
-    // Determines whether the user is on a page that contains the sidebar
-    if ( document.querySelector( "#agoraSideBar" ) ) {
-        loadClientSettings();
-
-        // Only add the hover events if the sidebar is not in the docked position
-        if ( !clientSettings.sideBarLocked ) {
-            // add events for toggle sidebar
-            if ( document.getElementById( "agoraSideBar" ) ) {
-                toggleSidebar();
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
-            }
-        }
-
-        if ( document.getElementById( "pin-menu" ) ) {
-            document.getElementById( "pin-menu" ).addEventListener( "click", lockSidebar );
-        }
-    }
+    loadClientSettings();
 } );
 
-/**
- * Toggles the sidebar.
- */
-function toggleSidebar() {
-    if ( !sideBarStatus ) {
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
-        // document.querySelector(".friends-content").style.marginLeft = "250px";
-    }
-    else {
-        document.getElementById( "agoraSideBar" ).style.width = "85px";
-        if ( window.innerWidth > 992 ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "85px";
-            // document.querySelector(".friends-content").style.marginLeft = "85px";
-        }
-    }
-    sideBarStatus = !sideBarStatus;
-}
-
-/**
- * Locks the sidebar into position.
- */
-function lockSidebar() {
-    if ( !clientSettings.sideBarLocked ) {
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
-        // document.querySelector(".friends-content").style.marginLeft = "250px";
-
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
-
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
-
-        document.getElementById( "tack-icon" ).style.rotate = "45deg";
-
-        sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
-    }
-    else {
-        document.getElementById( "tack-icon" ).style.rotate = "0deg";
-
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
-    }
-
-    clientSettings.sideBarLocked = !clientSettings.sideBarLocked;
-
-    saveClientSettings();
-}
-
 /**
  * Loads the client settings from local storage and sets the properties associated with them.
  */
 function loadClientSettings() {
     if ( !localStorage.getItem( 'client-settings' ) ) {
         saveClientSettings();
     }
-    else {
-        clientSettings = JSON.parse( localStorage.getItem( 'client-settings' ) );
-
-        if ( clientSettings.sideBarLocked ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
-            // document.querySelector(".friends-content").style.marginLeft = "250px";
-
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
-
-            document.getElementById( "agoraSideBar" ).style.width = "250px";
-
-            document.getElementById( "tack-icon" ).style.rotate = "45deg";
-
-            sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
-        }
-    }
 }
 
 /**

client/agora/public/js/state/stateManager.js

@@ -1,9 +1,9 @@
 // get models and controller functions from modules
 import { addTopicEvent } from "../editorMain.js";
 import { createNewResource, saveResource } from "../controllers/clientResourceController.js";
 import { createNewTopic, saveTopic, getTopic, getResourcesForTopic, deleteTopic } from "../controllers/clientTopicController.js";
 import { createNewWorkspace, saveWorkspace, getWorkspace, getPermission, getAllSharedUsersForWorkspace, getWorkspaceOwner, updatePermission } from "../controllers/clientWorkspaceController.js";
 import { createNewTag, saveTag, deleteTag, getTags } from "../controllers/clientTagController.js";
 
 
 /**
@@ -44,9 +44,9 @@
         workspaceSharedUsers = await getAllSharedUsersForWorkspace( workspaceUuid );
 
         // get tags associated with the workspace
-        workspace.tags = [];
+        /* workspace.tags = [];
         const tags = await getTags( "workspace", workspaceUuid );
-        ( tags ) ? workspace.tags = tags: [];
+        ( tags ) ? workspace.tags = tags: []; */
 
         const workspaceTitle = document.getElementById( "workspace-title" );
         const workspaceDescription = document.getElementById( "workspace-desc" );
@@ -56,6 +56,10 @@
             workspaceDescription.readOnly = true;
             tagBox.readOnly = true;
         }
+
+        // Fix for the sidebar until we can find how to make it relative
+        // I'm convinced there's some absolute positioning somewhere causing this
+        document.querySelector( ".dashboard-content" ).style.marginLeft = "85px";
     }
     else {
         console.log( "workspace already initialized" );
@@ -141,8 +145,8 @@
         newTopic.topicName = topicName;
 
         // make sure the worspace fields are up to date
-        getCurrentWorkspace().name = document.getElementById( "workspace-title" ).value;
-        getCurrentWorkspace().description = document.getElementById( "workspace-desc" ).value;
+        //getCurrentWorkspace().name = document.getElementById( "workspace-title" ).value;
+        //getCurrentWorkspace().description = document.getElementById( "workspace-desc" ).value;
 
         // save the topic
         newTopic = await saveTopic( newTopic, null );
@@ -239,7 +243,7 @@
     ( debug ) ? console.log( "textEditorUpdate() : Start" ) : null;
     if ( resource ) {
         // update the resource title
-        resource.resourceName = document.getElementById( "input-title-" + resource.resourceId ).value;
+        // resource.resourceName = document.getElementById( "input-title-" + resource.resourceId ).value;
 
         // update the resource content
         if( content != null ) {

client/agora/views/add-friends/partials/gallery/control-bar.ejs

@@ -1,6 +1,8 @@
 <div id="gallery-header">
     <div class="container-fluid">
         <div class="row pt-2 pb-2">
+            <h4 style=" font-size: 30px; color: black;">Add Friends</h4>
+
             <div class='col-md-4'>
                 <!--Search bar-->
                 <input id="user-search" class="card-search form-control" placeholder="Enter a username"/>
@@ -28,12 +30,13 @@
 
                 </div>
 
+                <!--
                 <div class="title d-flex align-items-center" role="group" aria-label="Title"
                     style="margin-left: 12.5px;">
 
                     <h4 style=" font-size: 30px; color: black; margin: 0;">Add Friends</h4>
 
-                </div>
+                </div>-->
 
             </div>
         </div>