diff --git a/src/css/content.scss b/src/css/content.scss index 2a312286..6e63d43b 100644 --- a/src/css/content.scss +++ b/src/css/content.scss @@ -743,12 +743,20 @@ $color-dark-yellow: #DAA520; li.k2-extension { display: flex; align-items: center; + list-style: none; +} + +// Prevent the isolated K2 tab from covering GitHub's next tab. +nav[aria-label="Repository"] a[href*="/pulls"] { + margin-right: 48px; } .k2-nav-link { display: flex; align-items: center; - padding: 8px 16px; + box-sizing: border-box; + height: 100%; + padding: 0 8px; font-size: 14px; font-weight: 400; line-height: 1.5; diff --git a/src/js/lib/pages/github/all.js b/src/js/lib/pages/github/all.js index 9a84d2e6..c98ef6ab 100644 --- a/src/js/lib/pages/github/all.js +++ b/src/js/lib/pages/github/all.js @@ -1,4 +1,6 @@ +import $ from 'jquery'; import Base from './_base'; +import k2Button from '../../../template/button.github.k2.html'; /** * This class manages the things that happen on *every* GitHub page. All it's doing is adding links to the @@ -17,6 +19,41 @@ export default function () { * Add buttons to the page and setup the event handler */ AllPages.setup = function () { + let k2Tab = $('li.k2-extension'); + + if (!k2Tab.length) { + // Keep the K2 tab outside GitHub's managed list because inserting it into that list breaks search. + $('body').append(k2Button({url: '/Expensify/Expensify'})); + k2Tab = $('li.k2-extension'); + } + + const positionK2Tab = () => { + const pullsTab = $('nav[aria-label="Repository"] a[href*="/pulls"]').first(); + + if (!pullsTab.length) { + k2Tab.hide(); + return; + } + + // Use the Pull requests position so the isolated K2 tab looks like part of GitHub's tab list. + const rectangle = pullsTab[0].getBoundingClientRect(); + k2Tab.css({ + display: 'flex', + position: 'fixed', + top: rectangle.top, + left: rectangle.right + 8, + height: rectangle.height, + zIndex: 1000, + }); + }; + + positionK2Tab(); + + // Keep the isolated tab aligned when the window moves GitHub's tab list. + $(window) + .off('resize.k2-extension scroll.k2-extension') + .on('resize.k2-extension scroll.k2-extension', positionK2Tab); + // Set up timestamp format conversion setTimeout(() => AllPages.applyTimestampFormat(), 500); setInterval(() => AllPages.applyTimestampFormat(), 5000);