Only show relevant category customization (#54)

CHANGELOG.md

@@ -1,14 +1,20 @@
 # Changelog
 
-## v1.2.0
+## v1.2.1
 
 <!--Releasenotes start-->
+- Only relevant customization options - depending on other chosen settings - will now be shown.
+- Added descriptions next to the category customization inputs in the settings menu.
+- Clicking anywhere outside of it will now close a colour picker.
+<!--Releasenotes end-->
+
+## v1.2.0
+
 - The Add-In will now automatically set categories if a note is added to a message.
 - Added a settings menu allowing you to change the names and colors of categories, as well as to what kind of contexts a category is added.
 - The editor is now focused when opening the Add-In or changing contexts.
 - Fixed a bug where a note would be lost if a message is moved to a different folder.
 - Fixed some display bugs regarding the saving icon.
-<!--Releasenotes end-->
 
 ## v1.1.3
 

manifest.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
   <Id>4d810708-b23f-4105-bfab-6301f6d3a8ba</Id>
-  <Version>1.2.0</Version>
+  <Version>1.2.1</Version>
   <ProviderName>Nikkel Mollenhauer</ProviderName>
   <DefaultLocale>en-GB</DefaultLocale>
   <DisplayName DefaultValue="Mail Notes"/>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "outlook-mail-notes",
 	"description": "Easily add notes to e-mails, senders & conversations in Outlook!",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"author": "Nikkel Mollenhauer",
 	"repository": {
 		"type": "git",

src/css/settings.css

@@ -3,6 +3,7 @@
   display: flex;
   justify-content: space-between;
   width: 90%;
+  height: 5vh;
 }
 
 .settings-div .version-number {
@@ -22,6 +23,9 @@
   color: #333;
   font-size: 16px;
   cursor: pointer;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
   z-index: 10;
 }
 
@@ -94,21 +98,6 @@ select.dropdown:focus:hover {
   background-color: #fff !important;
 }
 
-/* Input */
-.category-input {
-  width: 60%;
-  margin: 5px 0 5px 0;
-  padding: 5px;
-  border-radius: 2px;
-  height: 32px;
-  background-color: #fff;
-  color: rgb(50, 49, 48);
-  font-size: 14px;
-  font-weight: 400;
-  box-sizing: border-box;
-  border: 1px solid #333;
-}
-
 /* Color pickers */
 .color-picker {
   position: relative;
@@ -120,8 +109,7 @@ select.dropdown:focus:hover {
   height: 20px;
   border: 1px solid #333;
   margin: 5px 6px 5px 6px;
-  position: relative;
-  transform: translateY(10%);
+  transform: translateY(2px);
   cursor: pointer;
 }
 
@@ -171,3 +159,25 @@ select.dropdown:focus:hover {
 .color-picker-dropdown .color-picker-grid {
   pointer-events: auto;
 }
+
+/* Input */
+.categoryCustomizationDiv p {
+  text-align: right;
+  display: inline-block;
+  margin-bottom: 0;
+  width: 95px;
+}
+
+.category-input {
+  width: calc(60% - 20px);
+  margin: 5px 0 5px 0;
+  padding: 5px;
+  border-radius: 2px;
+  height: 32px;
+  background-color: #fff;
+  color: rgb(50, 49, 48);
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  border: 1px solid #333;
+}

src/css/taskpane.css

@@ -24,7 +24,6 @@ main {
   flex-wrap: nowrap;
   -webkit-align-items: center;
   align-items: center;
-  min-width: 300px;
 }
 
 /* Utilities */
@@ -37,11 +36,11 @@ main {
 }
 
 .hidden {
-  visibility: hidden;
+  visibility: hidden !important;
 }
 
 .removed {
-  display: none;
+  display: none !important;
 }
 
 .overlay {

src/settings.ts

@@ -11,8 +11,7 @@ export async function setupApplicationSettings() {
   setupSettingsButtonAndVersionNumber();
   await setupCategoryDropdowns(settings);
 
-  setupCategoryNameInputs(settings);
-  setupCategoryColorPicker(settings);
+  setupCategoryCustomization(settings);
 }
 
 function setupSettingsButtonAndVersionNumber() {
@@ -46,12 +45,70 @@ function setupSettingsButtonAndVersionNumber() {
   });
 }
 
+function setupCategoryCustomization(settings: Office.RoamingSettings) {
+  showRelevantCustomization(settings);
+  setupCategoryNameInputs(settings);
+  setupCategoryColorPicker(settings);
+}
+
+async function showRelevantCustomization(settings: Office.RoamingSettings) {
+  const categoryNamesInputsDiv = document.getElementById("categoryNamesInputsDiv") as HTMLDivElement;
+  const generalCategoryCustomization = document.getElementById("generalCategoryCustomization") as HTMLDivElement;
+  const messageCategoryCustomization = document.getElementById("messageCategoryCustomization") as HTMLDivElement;
+  const conversationCategoryCustomization = document.getElementById(
+    "conversationCategoryCustomization"
+  ) as HTMLDivElement;
+  const senderCategoryCustomization = document.getElementById("senderCategoryCustomization") as HTMLDivElement;
+
+  const messageCategories = await settings.get("messageCategories");
+  const categoryContexts = await settings.get("categoryContexts");
+
+  // By default, hide all customization options
+  generalCategoryCustomization.classList.add("removed");
+  messageCategoryCustomization.classList.add("removed");
+  conversationCategoryCustomization.classList.add("removed");
+  senderCategoryCustomization.classList.add("removed");
+  categoryNamesInputsDiv.classList.add("removed");
+
+  switch (messageCategories) {
+    case "mailNotes":
+      generalCategoryCustomization.classList.remove("removed");
+      messageCategoryCustomization.classList.add("removed");
+      conversationCategoryCustomization.classList.add("removed");
+      senderCategoryCustomization.classList.add("removed");
+      categoryNamesInputsDiv.classList.remove("removed");
+      break;
+    case "unique":
+      categoryNamesInputsDiv.classList.remove("removed");
+      if (categoryContexts === "all") {
+        messageCategoryCustomization.classList.remove("removed");
+        conversationCategoryCustomization.classList.remove("removed");
+        senderCategoryCustomization.classList.remove("removed");
+      } else if (categoryContexts === "messagesConversations") {
+        messageCategoryCustomization.classList.remove("removed");
+        conversationCategoryCustomization.classList.remove("removed");
+        senderCategoryCustomization.classList.add("removed");
+      } else if (categoryContexts === "messages") {
+        messageCategoryCustomization.classList.remove("removed");
+        conversationCategoryCustomization.classList.add("removed");
+        senderCategoryCustomization.classList.add("removed");
+      } else {
+        throw new Error("Invalid category context");
+      }
+      break;
+    case "noCategories":
+      break;
+    default:
+      throw new Error("Invalid message categories");
+  }
+}
+
 async function setupCategoryDropdowns(settings: Office.RoamingSettings) {
-  const categoryDropdownsDiv: HTMLDivElement = document.getElementById("categoryDropdownsDiv") as HTMLDivElement;
-  const messageCategoriesDropdown: HTMLSelectElement = categoryDropdownsDiv.children.namedItem(
+  const categoryDropdownsDiv = document.getElementById("categoryDropdownsDiv") as HTMLDivElement;
+  const messageCategoriesDropdown = categoryDropdownsDiv.children.namedItem(
     "messageCategoriesDropdown"
   ) as HTMLSelectElement;
-  const categoryContextsDropdown: HTMLSelectElement = categoryDropdownsDiv.children.namedItem(
+  const categoryContextsDropdown = categoryDropdownsDiv.children.namedItem(
     "categoryContextsDropdown"
   ) as HTMLSelectElement;
 
@@ -96,6 +153,8 @@ async function setupCategoryDropdowns(settings: Office.RoamingSettings) {
     settings.set("messageCategories", selectedCategory);
     settings.saveAsync();
 
+    showRelevantCustomization(settings);
+
     // Update the categories live
     manageNoteCategories(allNotes[mailId], allNotes[conversationId], allNotes[senderId]);
   });
@@ -108,6 +167,8 @@ async function setupCategoryDropdowns(settings: Office.RoamingSettings) {
     settings.set("categoryContexts", selectedContext);
     settings.saveAsync();
 
+    showRelevantCustomization(settings);
+
     // Update the categories live
     manageNoteCategories(allNotes[mailId], allNotes[conversationId], allNotes[senderId]);
   });
@@ -190,11 +251,16 @@ async function setupCategoryColorPicker(settings: Office.RoamingSettings) {
       }
 
       colorPickerCell.addEventListener("click", async function () {
-        // Update the background color of the button
-        colorPickerButton.style.backgroundColor = color.value;
         // Hide the dropdown
         colorPickerDropdown.style.display = "none";
 
+        if (color.preset === addinCategories[inputId].color) {
+          return;
+        }
+
+        // Update the background color of the button
+        colorPickerButton.style.backgroundColor = color.value;
+
         // Change the active-color class
         const activeColor = colorPickerGrid.querySelector(".active-color");
         activeColor.classList.remove("active-color");
@@ -230,6 +296,13 @@ async function setupCategoryColorPicker(settings: Office.RoamingSettings) {
       } else {
         colorPickerDropdown.style.display = "none";
       }
+      // While it is open, clicking anywhere not in the dropdown will close it
+      document.addEventListener("click", function closeDropdown(event: any) {
+        if (!colorPicker.contains(event.target)) {
+          colorPickerDropdown.style.display = "none";
+          document.removeEventListener("click", closeDropdown);
+        }
+      });
     });
   });
 }

src/taskpane.html

@@ -62,7 +62,7 @@ <h2>This isn't the page you're looking for...</h2>
         <h3>Settings</h3>
         <div class="settingDiv">
           <div id="categoryDropdownsDiv">
-            <label>Control how categories are used to label messages with attached notes:</label>
+            <label style="display:block;">Control how categories are used to label messages with attached notes:</label>
             <select id="messageCategoriesDropdown" class="dropdown">
               <option value="mailNotes">Use a "Mail Notes" category for...</option>
               <option value="unique">Use a unique category for...</option>
@@ -73,23 +73,34 @@ <h3>Settings</h3>
               <option value="messagesConversations">...messages and conversations</option>
               <option value="messages">...messages only</option>
             </select>
-            <!-- Input fields for each context, to choose the name and color of the category -->
-            <div id="categoryNamesInputsDiv" style="margin-top: 15px;">
-              <label>Customize your categories:</label>
-              <p><i>When <b>renaming</b> a category, you will need to manually remove categories of this type from other messages, doing so automatically is not supported by Outlook!</i></p>
-              <!-- The ID of the input must be the key of the category saved in settings + 'NameInput' -->
+          </div>
+          <!-- Input fields for each context, to choose the name and color of the category -->
+          <div id="categoryNamesInputsDiv" style="margin-top: 15px;">
+            <label>Customize your categories:</label>
+            <p><i>When <b>renaming</b> a category, you will need to manually remove categories of this type from other messages, doing so automatically is not supported by Outlook!</i></p>
+            <div id="generalCategoryCustomization" class="categoryCustomizationDiv removed">
+              <p>For all notes:</p>
               <input id="generalCategoryNameInput" class="category-input" placeholder="Mail Notes" 
                 value="Mail Notes" title="Set the name of the category to use for all notes and contexts."/>
+            </div>
+            <div id="messageCategoryCustomization" class="categoryCustomizationDiv removed">
+              <p>Messages</p>
               <input id="messageCategoryNameInput" class="category-input" placeholder="Mail Notes - Mail Notes" 
                 value="Message - Mail Notes" title="Set the category name to use for mails with message notes." />
+            </div>
+            <div id="conversationCategoryCustomization" class="categoryCustomizationDiv removed">
+              <p>Conversations</p>
               <input id="conversationCategoryNameInput" class="category-input" placeholder="Conversation - Mail Notes" 
                 value="Conversation - Mail Notes" title="Set the category name to use for mails with attached conversation notes." />
+            </div>
+            <div id="senderCategoryCustomization" class="categoryCustomizationDiv removed">
+              <p>Senders</p>
               <input id="senderCategoryNameInput" class="category-input" placeholder="Sender - Mail Notes" 
                 value="Sender - Mail Notes" title="Set the category name to use for mails with attached sender notes." />
             </div>
             <p><i>If you delete a conversation or sender note on one message, the corresponding categories for other messages will only be updated when you open the Add-In on them.</i></p>
+          </div>
         </div>
-      </div>
     </div>
   </main>