Microsoft Teams - Toggle Sidebar + Expand Message Pane

Add toggle buttons to hide the Chat/Teams sidebar and also expand the message pane
目前为 2024-09-16 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         Microsoft Teams - Toggle Sidebar + Expand Message Pane
// @namespace    http://tampermonkey.net/
// @version      1.1.0
// @description  Add toggle buttons to hide the Chat/Teams sidebar and also expand the message pane
// @author       D365Fixes
// @license      MIT
// @match        https://teams.microsoft.com/v2/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=teams.microsoft.com
// @run-at       document-start
// ==/UserScript==
 
(function() {
	"use strict";
 
	const styles = `
		.hide-sub-nav div[data-tid="experience-layout"] {
			--sub-nav-width: 0rem !important;
		}
 
		.hide-sub-nav div[data-tid="app-layout-area--sub-nav"] {
			opacity: 0;
			visibility: hidden;
		}
 
		.expand-msg-pane div[data-tid="message-pane-list-runway"], .expand-msg-pane div[data-tid="message-pane-footer"] {
			max-width: 80vw;
		}
 
		div[data-tid="experience-layout"], div[data-tid^="app-layout-area"], div[data-tid="app-layout-area--sub-nav"] {
			transition: all .25s ease-in-out !important;
			transition-delay: unset !important;
		}
 
		#toggle-sidebar-btn, #expand-msg-pane-btn {
			background-color: transparent;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			line-height: 1;
			width: 36px;
			height: 36px;
			padding: 5px;
			margin-left: 10px;
			border: 0;
			cursor: pointer;
		}
	`;
 
	function injectStyles() {
		const styleElement = document.createElement("style");
		styleElement.appendChild(document.createTextNode(styles));
		document.head.appendChild(styleElement);
	}
 
	function createSVGIcon(collapse) {
		const svgNS = "http://www.w3.org/2000/svg";
		const svg = document.createElementNS(svgNS, "svg");
		svg.setAttribute("xmlns", svgNS);
		svg.setAttribute("width", "24");
		svg.setAttribute("height", "24");
		svg.setAttribute("fill", "currentColor");
		svg.setAttribute("aria-hidden", "true");
 
		const path = document.createElementNS(svgNS, "path");
		const d = collapse
			? "m13.1 11.3 1.4-1.2c.3-.3.3-.7.1-1s-.7-.3-1-.1l-2.8 2.4c-.3.2-.3.7-.1 1 0 0 0 .1.1.1l2.8 2.4c.3.3.7.2 1-.1.3-.3.2-.7-.1-1l-1.4-1.2h5.1c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-5.1zM2.2 20.2h19.6c.7 0 1.2-.5 1.2-1.2V5c0-.7-.5-1.2-1.2-1.2H2.2C1.5 3.8 1 4.3 1 5v14c0 .7.5 1.2 1.2 1.2zm.2-1.9V5.7c0-.3.3-.6.6-.6h4.9v13.8H3c-.4 0-.6-.3-.6-.6zm6.8.6V5.1H21c.3 0 .6.3.6.6v12.5c0 .3-.3.6-.6.6H9.2z"
			: "M16.4 12.7 15 13.9c-.3.3-.3.7-.1 1 .3.3.7.3 1 .1l2.8-2.4c.3-.2.3-.7.1-1 0 0 0-.1-.1-.1l-2.8-2.4c-.3-.3-.7-.2-1 .1-.3.3-.2.7.1 1l1.4 1.2h-5.1c-.4 0-.7.3-.7.7 0 .4.3.7.7.7h5.1zM2.2 20.2h19.6c.7 0 1.2-.5 1.2-1.2V5c0-.7-.5-1.2-1.2-1.2H2.2C1.5 3.8 1 4.3 1 5v14c0 .7.5 1.2 1.2 1.2zm.2-1.9V5.7c0-.3.3-.6.6-.6h4.9v13.8H3c-.4 0-.6-.3-.6-.6zm6.8.6V5.1H21c.3 0 .6.3.6.6v12.5c0 .3-.3.6-.6.6H9.2z";
 
		path.setAttribute("d", d);
		path.setAttribute("fill", "currentColor");
 
		svg.appendChild(path);
 
		return svg;
	}
 
	function createMessagePaneSVGIcon(expanded) {
		const svgNS = "http://www.w3.org/2000/svg";
		const svg = document.createElementNS(svgNS, "svg");
		svg.setAttribute("xmlns", svgNS);
		svg.setAttribute("width", "24");
		svg.setAttribute("height", "24");
		svg.setAttribute("fill", "currentColor");
		svg.setAttribute("aria-hidden", "true");
 
		const path = document.createElementNS(svgNS, "path");
		const d = expanded
			? "m16.4 12.7 1.4 1.2c.3.3.3.7.1 1-.3.3-.7.3-1 .1l-2.8-2.4c-.3-.2-.3-.7-.1-1 0 0 0-.1.1-.1l2.8-2.4c.3-.3.7-.2 1 .1.3.3.2.7-.1 1l-1.4 1.2h5.1c.4 0 .7.3.7.7s-.3.7-.7.7h-5.1v-.1zM7.6 12.7l-1.4 1.2c-.3.3-.3.7-.1 1 .3.3.7.3 1 .1l2.8-2.4c.3-.2.3-.7.1-1 0 0 0-.1-.1-.1L7.1 9.1c-.3-.3-.7-.2-1 .1s-.2.7.1 1l1.4 1.2H2.5c-.4 0-.7.3-.7.7s.3.7.7.7h5.1v-.1zM2 2h20v2H2M2 6h20v2H2M2 16h20v2H2M2 20h20v2H2"
			: "m19.6 12.7-1.4 1.2c-.3.3-.3.7-.1 1 .3.3.7.3 1 .1l2.8-2.4c.3-.2.3-.7.1-1 0 0 0-.1-.1-.1l-2.8-2.4c-.3-.3-.7-.2-1 .1-.3.3-.2.7.1 1l1.4 1.2h-5.1c-.4 0-.7.3-.7.7s.3.7.7.7h5.1v-.1zM4.4 12.7l1.4 1.2c.3.3.3.7.1 1-.3.3-.7.3-1 .1l-2.8-2.4c-.3-.2-.3-.7-.1-1 0 0 0-.1.1-.1l2.8-2.4c.3-.3.7-.2 1 .1s.2.7-.1 1l-1.4 1.2h5.1c.4 0 .7.3.7.7s-.3.7-.7.7H4.4v-.1zM2 2h20v2H2M2 6h20v2H2M2 16h20v2H2M2 20h20v2H2";
 
		path.setAttribute("d", d);
		path.setAttribute("fill", "currentColor");
 
		svg.appendChild(path);
 
		return svg;
	}
 
	function addToggleButton() {
		const waitForTitlebarStartSlot = window.setInterval(function() {
			const titlebarSlot = document.querySelector('div[data-tid="titlebar-start-slot"]');
			if (titlebarSlot) {
				window.clearInterval(waitForTitlebarStartSlot);
 
				const toggleButton = document.createElement("button");
				toggleButton.id = "toggle-sidebar-btn";
 
				let sidebarOpen = true;
 
				toggleButton.appendChild(createSVGIcon(sidebarOpen));
 
				toggleButton.addEventListener("click", function() {
					sidebarOpen = !sidebarOpen;
 
					while (toggleButton.firstChild) {
						toggleButton.removeChild(toggleButton.firstChild);
					}
 
					toggleButton.appendChild(createSVGIcon(sidebarOpen));
 
					document.body.classList.toggle("hide-sub-nav");
				});
 
				titlebarSlot.appendChild(toggleButton);
 
				const expandButton = document.createElement("button");
				expandButton.id = "expand-msg-pane-btn";
 
				let messagePaneExpanded = false;
 
				expandButton.appendChild(createMessagePaneSVGIcon(messagePaneExpanded));
 
				expandButton.addEventListener("click", function() {
					messagePaneExpanded = !messagePaneExpanded;
 
					while (expandButton.firstChild) {
						expandButton.removeChild(expandButton.firstChild);
					}
 
					expandButton.appendChild(createMessagePaneSVGIcon(messagePaneExpanded));
 
					document.body.classList.toggle("expand-msg-pane");
				});
 
				titlebarSlot.appendChild(expandButton);
			}
		}, 300);
	}
 
	document.addEventListener("DOMContentLoaded", function() {
		injectStyles();
		addToggleButton();
	});
})();