-
-
Save fortserious/aee38888a9c672c27682fa43940588fa to your computer and use it in GitHub Desktop.
| // ==UserScript== | |
| // @name outlook quick actions hotfix | |
| // @namespace www.rossdoran.com | |
| // @version 1.11 | |
| // @description m$.gfy | |
| // @match https://outlook.office.com/mail/* | |
| // @match https://outlook.live.com/* | |
| // @require https://gist.githubusercontent.com/mjblay/18d34d861e981b7785e407c3b443b99b/raw/debc0e6d4d537ac228d1d71f44b1162979a5278c/waitForKeyElements.js | |
| // @run-at document-start | |
| // ==/UserScript== | |
| // when updating this script - search for ".hDNlA.lHRXq.iZbPU.JCRRb.G1NES" | |
| waitForKeyElements (".WP8_u .UWVIR", moveQuickActions); | |
| waitForKeyElements(".gReZN", moveDeleteAction); // comment out this line to keep the delete quick action on the right | |
| document.head.innerHTML += `<style type="text/css"> | |
| .fui-Input { display: flex !important; } | |
| .nloVY.pz2Jt .bx9dt { min-width: -2px !important; }` + ribbonCSS + | |
| `.WP8_u .UWVIR { display: none !important; } | |
| </style>`; | |
| function navigateToInbox(elem) | |
| { | |
| elem.onclick = ()=> { document.querySelector("button[aria-label='Close']").click(); }; | |
| } | |
| function detach(node) { | |
| return node.parentElement.removeChild(node); | |
| } | |
| function moveDeleteAction(elem) | |
| { | |
| let parent = elem.closest(`.hDNlA.lHRXq.iZbPU.JCRRb.G1NES, | |
| .lHRXq.hDNlA.IjQyD.phGIG.G1NES, | |
| .lHRXq.hDNlA.gPZmZ.phGIG.G1NES, | |
| .lHRXq.hDNlA.IjQyD.phGIG.DLvHz.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, | |
| .lHRXq.hDNlA.IjQyD.JCRRb.DLvHz.G1NES, | |
| .lHRXq.hDNlA.IjQyD.JCRRb.G1NES, | |
| .lHRXq.hDNlA.gPZmZ.JCRRb.G1NES | |
| `); // different for pinned, flagged, returning to inbox after deleting, etc. | |
| if (parent) | |
| { | |
| console.log("TRASHFIND", parent); | |
| var newParent = parent.querySelector(` | |
| .XG5Jd.y1E5h.zItCb, | |
| .XG5Jd.hQj7T, | |
| .OD8Ue.hQj7T, | |
| .xc0ZS.hQj7T | |
| `).firstChild; | |
| if (newParent) | |
| { | |
| newParent.append(detach(elem)); | |
| } | |
| } | |
| } | |
| function moveQuickActions(elem) | |
| { | |
| let parent = elem.closest( | |
| `.XG5Jd.y1E5h.zItCb, | |
| .XG5Jd.hQj7T, | |
| .xc0ZS.hQj7T, | |
| .OD8Ue.hQj7T`); // parent element of left items | |
| if (parent) | |
| { | |
| var newParent = parent.firstChild; // append to first child of left item parent | |
| if (newParent) | |
| { | |
| newParent.append(detach(elem)); | |
| } | |
| } | |
| } |
Updated 1.9 which fixes the delete icon, sorry for the delay.
Edit: And patched to 1.10 to fix delete icons on pinned messages as well.
Thanks a lot!!
holy shit, gang! I haven't updated my copy of the extension for a while and turned it off fully only to discover that they put the quick actions back on the left side by default!!! we're SAVED!
thanks @fortserious for your maintenance of this thing for so long but I think we might finally be out of the woods on this one
A glorious day.
It's been an honor and a pleasure to serve you all. As a parting gift, I've made a final edit to move the Bcc/Cc buttons to the left when replying.
Or if you use Stylish or some other CSS snippet addon, you can just add this to it:
.fui-Input { display: flex !important; }
Cheers!
hmm i disabled all scripts and i still see the quick actions at the left
https://i.imgur.com/Oikmoaa.png
what am i doing wrong?
Also, if i use the last script (on this web, version 1.3), it also doesnt change them to the left, they stay right too
I see. That's because we should be on version 1.11, not 1.3. Sorry, just switched browsers and an old duplicate copy of the script came with it. Fixed.
If not, two questions:
- What outlook URL are you using?
- What's your reading pane setting (Right, Bottom, Fill screen, Popout only) ?
I see. That's because we should be on version 1.11, not 1.3. Sorry, just switched browsers and an old duplicate copy of the script came with it. Fixed.
If not, two questions:
* What outlook URL are you using? * What's your reading pane setting (Right, Bottom, Fill screen, Popout only) ?
hello and thanks
I am using "https://outlook.live.com"
- with your script OFF, and reading pane Right, i get the actions at the right (right to the title)
- with your script OFF, and no reading pane (aka "Fill screen"), i get the actions at the middle (between sender and title)
^ is this normal behaivour? I cant remember if reading pane affected
But there's more, even with your script (version 1.11) i get the same behaivour:
- with your script ON, and reading pane Right, i get the actions at the right (right to the title)
- with your script ON, and no reading pane (aka "Fill screen"), i get the actions at the middle (between sender and title)
confused now haha :D
That fits my expectations. My script will move the buttons to the left (i.e., between sender and title), but apparently only with the reading pane set at "Fill screen". I can try and see if I can make it work on reading pane "Right".
oh so it was the reading pane all along! good to know
Its ok, I got used to have the reading pane on right, u dont need to work it out! u worked so much and we are so thankful!
I think i started using it to the right at some time in the past, and then got used to it and didnt update your script since then, but came to this thread recently as i'm subbed to new posts, and got confused with the behaivour cause i didnt remember the reading pane affected it
So thanks! for all your work
Ugh. Outlook web just moved the RIGHT quick actions to the center/leftish side. I'm thinking about taking a crack at editing this script but was curious if you have any general insight before I dive in?
Sure. (I'll take a look at it when I get a chance too, but it's a busy time of year)
You really have three objectives:
- Determine the selector of the items you want to move
- Determine the selector of the container you want to move them to (or, figure out what CSS you can apply to move it there)
- Ensure they exist before doing anything
I use the waitForKeyElements script for the third part. It essentially creates an event listener on an interval that fires when it sees the element exists on the dom. You give it a selector and a callback (which gets fed the element) as inputs. You can also optionally tell it to stop scanning after the first match. I think it does something like add a data-alreadyFound tag after it detects an element, so you can add that to your selector to prevent your callback from rerunning.
So, usually, the process is pretty simple: use your browser's dev tools to inspect the page and find the classes (or ideally, aria-label, or button text, since those are less likely to change) in question.
Then, your callback should take the element, find its new container, and insert it there (or if you're lucky enough that it's just style changes you need, apply the relevant styles).
It's brittle, but at the end of the day it works. Feel free to email me if you have any questions. My email's linked from my personal website, listed in my profile.
Author
Thanks for the detailed response! I was just toying with some AI stuff to see if they could modify it but no luck. I modify a lot of CSS and wrote userscripts for forums back in the day so although this is a bit more advanced, I understand what you're talking about. Already found a few classes and selectors but just need to brush up on how to accomplish reliable repositioning in the script.
Don't feel any obligation to tackle this, could be a good challenge for me :)
Cheers!

It's changed again and then doesn't work again, thanks microsoft uff :/