Teamwork Customizations

README.md

Teamwork View Customization

Ever wish you could skip past all the timers in Teamwork tasks? Want to jump quickly to the top of the page when reviewing comments without losing your place? Wouldn't it be nice if teamwork was usable in a smaller window? Wish the active timer wasn't always in the way? You've come to the right place.

Here are some instructions for quickly and easily customizing Teamwork using a Chrome extension and some custom CSS and JS.

Features

• The buttons at the top of the screen now wrap when the screen gets smaller.
• The logged timers table section
  • is limited to half the screen height.
  • is scrollable.
  • has sticky header and table head.
  • timer edit button is never hidden.
  • billable and billed icon columns, and the decimal hours column are hidden.
• The comments section
  • is limited to four fifths of the screen height.
  • is scrollable.
  • has sticky header.
  • has collapsed the date and action icon area to allow more room for text.
• The active timer
  • is pinned to the bottom of the screen and the margin is removed.
  • is somewhat transparent until you hover it. No more blocking content.
  • can still be moved left and right.
  • is no longer unnecessarily wide and fits in the left sidebar when viewing a task.
• Scrolling with the cursor outside the scrollable sections will make the entire page scroll. This is perfect for keeping your reading location while you look elsewhere on the task.

Steps

1. Install the User JavaScript and CSS Chrome Extension

2. Open Teamwork

3. Click on the extension icon

4. Click Add New

5. Copy the code from the gist files to the frames in the extension settings.

6. Give your settings a name (like "Teamwork") and click Save.

7. Rejoice!

8. You can quickly disable the customizations by clicking on the extension icon and flicking the switch.

Contact

Comment here with any questions or ideas and I'll try to help however I can.

teamwork.css

#app {
    & .TimeTimer {
        bottom: 0 !important;
        opacity: 0.5;
        top: unset !important;
        
        &:hover {
        	opacity: 1;
        }
        
        & > div {
        	margin: 0 !important;
        }
        
        & .w-96 {
        	width: unset;
        }
        
        & .h-16 {
        	height: unset;
        }
        
        & .truncate {
        	white-space: unset;
        }
        
        & .flex:has(>[data-identifier="task-details-start-timer-log-button"]) {
        	flex-direction: column;
        }
        
        & .invisible {
        	visibility: unset;
        }
    }
}

teamwork.old.css

.main-header__right {
    flex-wrap: wrap;
    gap: 10px 0;
    justify-content: unset;
}

#app {
    & .fixed.z-\[--timer-z-index\].transition-all {
        bottom: 0 !important;
        /*left: 88px !important;*/
        opacity: 0.5;
        /*right: 0 !important;*/
        top: unset !important;
        z-index: 200;
    }
    
    & .fixed.z-\[--timer-z-index\].transition-all:hover {
        opacity: 0.9;
    }
    
    & .v-sheet.v-theme--main.elevation-2.v-sheet--rounded.my-4.ml-5.mr-4.flex.flex-col.overflow-hidden.bg-\[color\:--lsds-c-timer-color-background-default\] {
        margin: 0;
    }
    
    & .v-sheet .h-16.w-96 {
        width: unset;
        height: unset;
    }
}

#taskTime {
    max-height: 70vh;
    overflow-y: scroll;
    padding-top: 0;

    & h2 {
        background: #fff;
        padding-top: 24px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    & .w-time-grid thead {
        position: sticky;
        top: 52px;
        z-index: 1;
    }
}

#w-time-grid {
    & th,
    & td {
        &:nth-child(7),
        &:nth-child(8),
        &:nth-child(10) {
            @media screen and (max-width: 1599px) {
                display: none;
            }
        }
    }
}

button[data-identifier="task-details-log-more-time-button"] {
    max-width: 110px;
    white-space: normal;
}

.w-time-totals__section {
    flex-direction: column;
}

.w-time-list__avatar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#w-time-grid .w-time-list__btn-edit {
    opacity: 1;
    visibility: visible;
}

#taskComments {
    max-height: 80vh;
    overflow: hidden;
    overflow-y: scroll;
    padding-top: 0;
    position: sticky;

    & .s-comments-list__title {
        background: #fff;
        padding-top: 24px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .w-comment__details {
        width: unset;
    }

    .w-comment__info {
        flex-shrink: unset;
    }

    .w-comment__info-group {
        flex-direction: column-reverse;
    }
}

teamwork.old.js

(function styleIframe() {
	const updateAttributes = (doc) => {
		doc.querySelector('[data-time-column="descriptionAndTags"]').setAttribute('width', '500')
	}
	
    const observer = new MutationObserver((_mutations, instance) => {
        const iframe = document.querySelector('iframe.tw-legacyViewWrapper');
        if (!iframe) return;
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        if (!iframeDocument) return;

        const timerSection = iframeDocument.querySelector('#taskTime');
        if (!timerSection) return;

        const styleTag = document.querySelector('head style');
        if (!styleTag) return;

        const newStyleTag = styleTag.cloneNode(true);
        iframeDocument.head.appendChild(newStyleTag);
        
        updateAttributes(iframeDocument);
        
        instance.disconnect();
    });
    observer.observe(document, {
        childList: true,
        subtree: true,
    });
}());