outlook-quickactions-hotfix.js

// ==UserScript==
// @name       outlook quick actions hotfix
// @namespace  www.rossdoran.com
// @version    1.7
// @description  m$.gfy
// @match      https://outlook.office.com/mail/*
// @match      https://outlook.live.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @run-at document-start
// ==/UserScript==

var hideRibbon = false; // switch to true if you want to hide the ribbon, or false if you want the ribbon to be shown

var ribbonCSS = hideRibbon ? " .HIqgw.n0tDR, #RibbonRoot  { display: none !important; height:0px !important; }" : "";

// custom style

 $('head').append(`<style type="text/css">
                  .nloVY.pz2Jt .bx9dt { min-width: -2px !important; }` + ribbonCSS +
                  `</style>`);

waitForKeyElements (".WP8_u .UWVIR", moveQuickActions);

waitForKeyElements(".QpoLy", moveDeleteAction); // comment out this line to keep the delete quick action on the right

waitForKeyElements(".C2IG3.LPIso.oTkSL.iDEcr.wk4Sg", navigateToInbox); // i can't fathom why this is necessary, but this line makes the Inbox link return to your inbox, as it should

function navigateToInbox(elem)
{
    $(elem).click(function()
                  {
$("button[aria-label='Close']").click();
    }
        );
}

function moveDeleteAction(elem)
{
    var elem = $(elem);
    var parent = elem.closest(`.hDNlA.lHRXq.iZbPU.JCRRb.G1NES,
                              .hDNlA.lHRXq.IjQyD.JCRRb.G1NES,
                              .hDNlA.lHRXq.epBmH.IMyk_,
                              .zKDWD.YbB6r.IKvQi.IjQyD.JCRRb.cSOXK.G1NES,
                              .zKDWD.YbB6r.IKvQi.IjQyD.JCRRb.G1NES,
                              .zKDWD.YbB6r.IKvQi.iZbPU.JCRRb.G1NES,
                              .zKDWD.YbB6r.IKvQi.iZbPU.wZij3.G1NES,
                              .zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES,
                              .zKDWD.YbB6r.IKvQi.epBmH.EhiOs,
                              .zKDWD.IKvQi.IjQyD.JCRRb.G1NES,
                              .zKDWD.IKvQi.iZbPU.JCRRb._KLsp.G1NES,
                              .zKDWD.IKvQi.iZbPU.JCRRb.G1NES,
                              .zKDWD.IKvQi.gPZmZ.JCRRb.G1NES,
                              .zKDWD.IKvQi.epBmH,
                              .hDNlA.lHRXq.gPZmZ.JCRRb.G1NES
                              `); // different for pinned, flagged, returning to inbox after deleting, etc.
    if (parent.length > 0)
    {
    var newParent = parent.find(`
    .XG5Jd.y1E5h.zItCb,
    .XG5Jd.hQj7T,
    .OD8Ue.hQj7T,
    .xc0ZS.hQj7T
    `).children().first();
    if (newParent.length > 0)
    {
        elem.detach().appendTo(newParent);
    }
    }
}

function moveQuickActions(elem)
{
    var elem = $(elem);

    var parent = elem.closest(
        `.XG5Jd.hQj7T,
        .xc0ZS.hQj7T,
        .OD8Ue.hQj7T`); // parent element of left items
    if (parent.length > 0)
    {
    var newParent = parent.children().first(); // append to first child of left item parent
    if (newParent.length > 0)
    {
        elem.detach().appendTo(newParent);
    }
    }
}

Still on the right for me, also changing text dimension doesn't change anything (i mean for the icons).

@Peppins32 I'm waiting for my grill to preheat and I just zoomed in to your pic and noticed I accidentally uncapitalized the T in last character of the 2nd class. I have 1.6 up for you, and I'm feeling really good about it.

I still have 1.3 installed when I went through the configuration options, try the first 3 options to see which one fixes it (change any option, save and reload the page).

I just upgraded to 1.5 and the icons stay on the left side.

Thanks again for new version! Works fine 05 april 2024

@Peppins32 I'm waiting for my grill to preheat and I just zoomed in to your pic and noticed I accidentally uncapitalized the T in last character of the 2nd class. I have 1.6 up for you, and I'm feeling really good about it.

Oh god, finally this time worked!!!

There is just a little issue. If you have some pinned message, the delete button are still on the right with "<div class="QpoLy">".

Glad to hear it! Yeah that makes sense. If you do the same inspect elements trick with the pinned message and paste the classname here I can cover that case as well.

Read above, unfortunately the div class appear only when i'm with mouse on it (i mean the > that allow you to see more lines).

Read above, unfortunately the div class appear only when i'm with mouse on it (i mean the > that allow you to see more lines).

Yes, that's true. It's a little tricky, but if you position the devtools window carefully, you can arrange it so that your mouse cursor will be on top of it when you click on Inspect, which will keep the hovered element in focus.

I didi it, mouse + arrows xD

Updated 1.7 with the new class.

Work but this happened:

As you can see, buttons aren't close to each other :/

Why there are spaces?

Sorry, was abroad on holiday. Updated to latest version, seems perfect once again. @Peppins32 - I had a space between pin and delete when first loading the page, which went away after waiting a little while. I think that might be unavoidable.