feat: Exit Button

settings.json.docker

@@ -643,7 +643,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers"]
+      ["showusers","exit"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

settings.json.template

@@ -642,7 +642,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers"]
+      ["showusers"],["exit"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

src/locales/en.json

@@ -54,6 +54,7 @@
   "pad.toolbar.settings.title": "Settings",
   "pad.toolbar.embed.title": "Share and Embed this pad",
   "pad.toolbar.showusers.title": "Show the users on this pad",
+  "pad.toolbar.help.title": "Exit to Home",
 
   "pad.colorpicker.save": "Save",
   "pad.colorpicker.cancel": "Cancel",

src/node/utils/Settings.ts

@@ -246,7 +246,7 @@ exports.toolbar = {
     right: [
         ['importexport', 'timeslider', 'savedrevision'],
         ['settings', 'embed'],
-        ['showusers'],
+        ['showusers','exit'],
     ],
     timeslider: [
         ['timeslider_export', 'timeslider_settings', 'timeslider_returnToPad'],

src/node/utils/toolbar.ts

@@ -258,6 +258,11 @@ module.exports = {
             localizationId: 'timeslider.toolbar.returnbutton',
             class: 'buttontext',
         },
+        exit:{
+            command: 'exit',
+            localizationId: 'pad.toolbar.exit.title',
+            class: 'buttonicon buttonicon-exit',
+        },  
     },
 
     registerButton(buttonName: string, buttonInfo: any) {

src/static/css/pad.css

@@ -12,6 +12,7 @@
 @import url("pad/gritter.css");
 @import url("pad/loadingbox.css");
 @import url("pad/form.css");
+@import url("pad/exit-button.css");
 
 html {
   font-size: 15px;

src/static/css/pad/exit-button.css

@@ -0,0 +1,8 @@
+.buttonicon-exit:before {
+    content: "\2715"; 
+    margin-right: 5px;
+}
+
+#exit-button {
+    cursor: pointer;
+}

src/static/js/pad_editbar.ts

@@ -381,6 +381,10 @@ exports.padeditbar = new class {
         $('.exportlink').first().trigger('focus');
       }
     });
+    this.registerCommand('exit', () => {
+      console.log('Exit button clicked');
+      window.location.href = '/';
+    });
 
     this.registerCommand('showusers', () => {
       this.toggleDropDown('users');
@@ -478,5 +482,8 @@ exports.padeditbar = new class {
             .substring(0, document.location.href.lastIndexOf('/'));
       }
     });
+
+    
+
   }
 }();

src/static/js/pad_editor.ts

@@ -217,3 +217,7 @@ exports.focusOnLine = (ace) => {
   }
   // End of setSelection / set Y position of editor
 };
+
+// toolbar.registerCommand('exit', () => {
+//   window.location.href = '/';
+// });

src/tests/frontend-new/helper/padHelper.ts

@@ -25,7 +25,9 @@ export const setUserName = async (page: Page, userName: string) => {
     await page.click("input[data-l10n-id='pad.userlist.entername']");
     await page.keyboard.type(userName);
 }
-
+export const exitPad = async (page: Page) => {
+    await page.locator("button[data-l10n-id='pad.toolbar.exit.title']").click();
+}
 
 export const showChat = async (page: Page) => {
     const chatIcon = page.locator("#chaticon")

src/tests/frontend/helper/ui.ts

@@ -85,6 +85,14 @@ helper.toggleUserList = async () => {
   await helper.waitForPromise(() => !isVisible);
 };
 
+helper.exitButton = () => helper.padChrome$("button[data-l10n-id='pad.toolbar.exit.title']");
+
+helper.exitPad = async () => {
+    const button = helper.exitButton();
+    button.trigger('click');
+    await helper.waitForPromise(() => window.location.pathname === '/');
+};
+
 /**
  * Gets the user name input field
  *