-
-
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)); | |
| } | |
| } | |
| } |
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!
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?