Merge pull request #75 from Armored-Dragon/armoredchat-adjustments

ArmoredChat Maintenance

applications/armored-chat/armored_chat.js

@@ -33,7 +33,8 @@
     ac_tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 
     app_button = ac_tablet.addButton({
-      icon: Script.resolvePath("./img/icon.png"),
+      icon: Script.resolvePath("./img/icon_white.png"),
+      activeIcon: Script.resolvePath("./img/icon_black.png"),
       text: "CHAT",
       isActive: app_is_visible,
     });
@@ -69,7 +70,6 @@
       visible: app_is_visible, // FIXME Invalid?
       presentationMode: Desktop.PresentationMode.VIRTUAL,
     });
-    chat_overlay_window.visible = app_is_visible; // The "visible" field in the Desktop.createWindow does not seem to work. Force set it to false
 
     chat_overlay_window.closed.connect(toggleMainChatWindow);
     chat_overlay_window.sendToQml({ url: Script.resolvePath("./index.html") });
@@ -111,7 +111,13 @@
     // Save message to our history
     let saved_message = message;
     delete saved_message.position;
-    message_history.push(message);
+
+    saved_message.timeString = new Date().toLocaleTimeString(undefined, { hour12: false });
+    saved_message.dateString = new Date().toLocaleDateString(undefined, {
+      month: "long",
+      day: "numeric",
+    });
+    message_history.push(saved_message);
     if (message_history.length > settings.max_history) message_history.shift();
     Settings.setValue("ArmoredChat-Messages", message_history);
 
@@ -147,15 +153,26 @@
 
         switch (parsed.setting_name) {
           case "external_window":
-            console.log(parsed.setting_value);
             chat_overlay_window.presentationMode = parsed.setting_value ? Desktop.PresentationMode.NATIVE : Desktop.PresentationMode.VIRTUAL;
             break;
+          case "max_history":
+            let new_history = message_history.splice(0, message_history.length - settings.max_history);
+            Settings.setValue("ArmoredChat-Messages", new_history);
+            break;
         }
         break;
 
       case "initialized":
+        // https://github.com/overte-org/overte/issues/824
+        chat_overlay_window.visible = app_is_visible; // The "visible" field in the Desktop.createWindow does not seem to work. Force set it to the initial state (false)
         _loadSettings();
         break;
+      case "action":
+        switch (parsed.action) {
+          case "clear_history":
+            Settings.setValue("ArmoredChat-Messages", []);
+            break;
+        }
     }
   }
   //
@@ -205,10 +222,9 @@
     );
   }
   function _loadSettings() {
-    console.log("Loading config");
     settings = Settings.getValue("ArmoredChat-Config", settings);
-    console.log("\nSettings follow:");
-    console.log(JSON.stringify(settings, " ", 4));
+
+    _emitEvent({ type: "setting_update", setting_name: "max_history", setting_value: Number(settings.max_history) });
 
     // Compact chat
     if (settings.compact_chat) {
@@ -224,7 +240,6 @@
     // Refill the history with the saved messages
     message_history.forEach((message) => {
       delete message.action;
-      console.log(`Prefilling ${JSON.stringify(message)}`);
       _emitEvent({ type: "show_message", ...message });
     });
   }

applications/armored-chat/index.css

@@ -99,6 +99,8 @@ body .page .content.message-list .message .body .image-container img {
 }
 body .page .content.message-list .message .embeds {
   width: 100%;
+  word-wrap: anywhere;
+  overflow-x: hidden;
   overflow-x: hidden;
 }
 body .page .content.message-list .message .embeds a {
@@ -123,11 +125,19 @@ body .page .content.settings .setting {
   padding: 0.5rem 0.25rem;
   box-sizing: border-box;
 }
-body .page .content.settings .setting-toggle input {
+body .page .content.settings .setting input {
   margin: auto 0 auto auto;
-  width: 20px;
   height: 20px;
 }
+body .page .content.settings .setting-button input {
+  width: 100px;
+}
+body .page .content.settings .setting-value input {
+  width: 70px;
+}
+body .page .content.settings .setting-toggle input {
+  width: 20px;
+}
 body .page .content.settings .setting:nth-child(even) {
   background-color: #1a1a1a;
 }

applications/armored-chat/index.html

@@ -64,6 +64,14 @@
           <span>External Window</span>
           <input id="external-window-toggle" type="checkbox" />
         </div>
+        <div class="setting setting-button">
+          <span>Erase history</span>
+          <input id="erase-history" type="button" title="Clear" value="Clear" />
+        </div>
+        <div class="setting setting-value">
+          <span>Max history</span>
+          <input id="max-history" type="number" title="Maximum entires to store" />
+        </div>
       </div>
     </div>
 
@@ -179,6 +187,16 @@
     _emitEvent({ type: "setting_update", setting_name: "external_window", setting_value: external_window });
   });
 
+  qs("#erase-history").addEventListener("click", () => {
+    let response = confirm("Are you sure you want to erase all messages?");
+    if (response) _emitEvent({ type: "action", action: "clear_history" });
+    // _emitEvent({ type: "setting_update", setting_name: "max_history", setting_value: compact_mode });
+  });
+
+  qs("#max-history").addEventListener("change", () => {
+    _emitEvent({ type: "setting_update", setting_name: "max_history", setting_value: qs("#max-history").value });
+  });
+
   // TODO: Limit embeds to 3.
   function _showMessage(message) {
     var target = message.channel + "-chat";
@@ -217,11 +235,16 @@
 
     // Update template data to message data
     message_clone.querySelector(".name").innerText = message.displayName;
-    message_clone.querySelector(".timestamp").innerText = new Date().toLocaleTimeString(undefined, { hour12: false });
-    message_clone.querySelector(".timestamp").title = new Date().toLocaleDateString(undefined, {
-      month: "long",
-      day: "numeric",
-    });
+    if (!message.timeString) {
+      message_clone.querySelector(".timestamp").innerText = new Date().toLocaleTimeString(undefined, { hour12: false });
+      message_clone.querySelector(".timestamp").title = new Date().toLocaleDateString(undefined, {
+        month: "long",
+        day: "numeric",
+      });
+    } else {
+      message_clone.querySelector(".timestamp").innerText = message.timeString;
+      message_clone.querySelector(".timestamp").title = message.dateString;
+    }
 
     message_clone.querySelector(".embeds").innerHTML = message_embeds;
     message_clone.querySelector(".body").innerText = message.message;
@@ -246,6 +269,10 @@
         qs("#external-window-toggle").checked = true;
         external_window = true;
         break;
+
+      case "max_history":
+        qs(`#max-history`).value = message.setting_value;
+        break;
     }
   }
 
@@ -264,8 +291,10 @@
     <div class="pfp"><img src="./img/ui/user_white.png" /></div>
     <div class="name">[NAME]</div>
     <div class="timestamp" title="[DATE]">[TIMESTAMP]</div>
-    <div class="embeds">[EMBEDS]</div>
-    <div class="body">[CONTENT]</div>
+    <div>
+      <div class="embeds">[EMBEDS]</div>
+      <div class="body">[CONTENT]</div>
+    </div>
   </div>
 </template>
 

applications/armored-chat/index.scss

@@ -107,15 +107,14 @@ body {
             img {
               width: auto;
               height: 100%;
-
-              // max-width: 400px;
-              // max-height: 300px;
             }
           }
         }
 
         .embeds {
           width: 100%;
+          word-wrap: anywhere;
+          overflow-x: hidden;
 
           overflow-x: hidden;
           a {
@@ -128,8 +127,6 @@ body {
             max-height: 300px;
 
             img {
-              // width: auto;
-              // height: 100%;
               max-width: 400px;
               max-height: 300px;
             }
@@ -149,12 +146,25 @@ body {
         display: flex;
         padding: 0.5rem 0.25rem;
         box-sizing: border-box;
+
+        input{
+          margin: auto 0 auto auto;
+          height: 20px;
+        }
+      }
+      .setting-button{
+        input {
+          width: 100px;
+        }
+      }
+      .setting-value{
+        input {
+          width: 70px;
+        }
       }
       .setting-toggle {
         input {
-          margin: auto 0 auto auto;
           width: 20px;
-          height: 20px;
         }
       }
       .setting:nth-child(even) {

applications/metadata.js

@@ -321,7 +321,7 @@ var metadata = { "applications":
             "name": "Chat",
             "description": "Chat application",
             "jsfile": "armored-chat/armored_chat.js",
-            "icon": "armored-chat/img/icon.png",
+            "icon": "armored-chat/img/icon_black.png",
             "caption": "CHAT"
         },
         {