├── .gitignore ├── images ├── icon.png ├── icon-128.png ├── icon-16.png ├── icon-48.png ├── assets.sketch ├── screenshot-comparison.gif ├── screenshot-comparison1.png ├── screenshot-comparison2.png ├── screenshot-chromewebstore1.png ├── screenshot-chromewebstore2.png └── screenshot-chromewebstore-tile.png ├── manifest.json ├── README.md ├── LICENSE ├── content-styles.css └── content-scripts.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/icon.png -------------------------------------------------------------------------------- /images/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/icon-128.png -------------------------------------------------------------------------------- /images/icon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/icon-16.png -------------------------------------------------------------------------------- /images/icon-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/icon-48.png -------------------------------------------------------------------------------- /images/assets.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/assets.sketch -------------------------------------------------------------------------------- /images/screenshot-comparison.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-comparison.gif -------------------------------------------------------------------------------- /images/screenshot-comparison1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-comparison1.png -------------------------------------------------------------------------------- /images/screenshot-comparison2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-comparison2.png -------------------------------------------------------------------------------- /images/screenshot-chromewebstore1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-chromewebstore1.png -------------------------------------------------------------------------------- /images/screenshot-chromewebstore2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-chromewebstore2.png -------------------------------------------------------------------------------- /images/screenshot-chromewebstore-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laander/trello-birdseye/HEAD/images/screenshot-chromewebstore-tile.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Trello Birds-eye", 4 | "short_name": "trello-birdseye", 5 | "description": "Minimalize the Trello board interface for better overview", 6 | "version": "1.2.2", 7 | "icons": { 8 | "16": "images/icon-16.png", 9 | "48": "images/icon-48.png", 10 | "128": "images/icon-128.png" 11 | }, 12 | "permissions": [ 13 | "storage", 14 | "https://trello.com/*" 15 | ], 16 | "content_scripts": [{ 17 | "run_at": "document_end", 18 | "matches": ["https://trello.com/*"], 19 | "js": ["content-scripts.js"], 20 | "css": ["content-styles.css"] 21 | }] 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Trello Birds-eye View 2 | 3 | > Chrome Extension for minimalistic board/card styling giving you a birds-eye view in Trello 4 | 5 | ![Before & after](images/screenshot-comparison.gif) 6 | 7 | **Why?** 8 | Trello is great, but if you have a lot of cards on your boards, the interface becomes a mess. Too much bulky chrome, borders, margins and paddings. Wouldn't you sometimes wish you could just chip away all the unnecessary junk? 9 | 10 | **How?** 11 | This small Chrome Extension adds an extra button to the Trello toolbar. Click it and you get more than *50% more actual content on your screen*. Yes, 50 fucking percent. 12 | 13 | ## Install 14 | 15 | [**Add the extension to Chrome** from the webstore](https://chrome.google.com/webstore/detail/trello-birdseye/jddlcajmgfdpfnekdppnapoldfhabkeg) 16 | 17 | That's it. Look for the "Birds Eye" button in the boards toolbar in Trello :+1: -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 laander (https://laander.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /content-styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Overwrites the Trello styles when .birdseye is set on body 3 | */ 4 | 5 | .birdseye textarea.mod-list-name { 6 | color: white; 7 | } 8 | 9 | .birdseye .list-header-num-cards { 10 | color: white; 11 | } 12 | 13 | .birdseye .list-wrapper { 14 | margin: 0 0px; 15 | } 16 | 17 | .birdseye .list { 18 | background: transparent; 19 | color: white; 20 | } 21 | 22 | .birdseye .list-cards { 23 | margin: 0 3px; 24 | padding: 0; 25 | border-radius: 3px; 26 | } 27 | 28 | .birdseye .list-card { 29 | margin-bottom: 0px; 30 | border-radius: 0; 31 | border-bottom: 1px solid rgba(0, 0, 0, 0.12); 32 | } 33 | 34 | .birdseye .list-card-cover { 35 | display: none; 36 | } 37 | 38 | .birdseye .list-header-menu-icon { 39 | color: rgba(255, 255, 255, 0.5); 40 | } 41 | 42 | .birdseye .list-header-extras-menu { 43 | color: rgba(255, 255, 255, 0.5); 44 | } 45 | 46 | .birdseye .list-header-extras-menu:hover { 47 | color: rgba(255, 255, 255, 1) !important; 48 | } 49 | 50 | .birdseye .list-header-menu-icon:hover, 51 | .birdseye .list-header-menu-icon.icon-sm.dark-hover:hover { 52 | color: rgba(255, 255, 255, 1); 53 | } 54 | 55 | .birdseye .open-card-composer, 56 | .birdseye .open-card-composer .icon-lg, 57 | .birdseye .open-card-composer .icon-sm { 58 | color: rgba(255, 255, 255, 0.5); 59 | } 60 | 61 | .birdseye .open-card-composer:hover, 62 | .birdseye .open-card-composer:hover .icon-lg, 63 | .birdseye .open-card-composer:hover .icon-sm { 64 | color: rgba(255, 255, 255, 1) !important; 65 | } 66 | 67 | .birdseye .open-card-composer:hover { 68 | background-color: transparent; 69 | color: #FFFFFF; 70 | } 71 | 72 | .birdseye .list-card-operation { 73 | display: none; 74 | } 75 | 76 | 77 | /* Card details */ 78 | 79 | .birdseye .list-card-title { 80 | clear: none; 81 | margin-left: 0; 82 | display: inline; 83 | } 84 | 85 | .birdseye .list-header-extras-menu:hover { 86 | background: inherit; 87 | } 88 | 89 | .birdseye .list-header-extras-menu .icon-sm { 90 | color: rgba(255, 255, 255, 0.5); 91 | } 92 | 93 | .birdseye .list-header-extras-menu:hover .icon-sm { 94 | color: white; 95 | } 96 | 97 | .birdseye .list-card-details { 98 | padding: 6px 6px 6px 8px; 99 | } 100 | 101 | .birdseye .list-card-details .badges { 102 | display: none; 103 | } 104 | 105 | .birdseye .list-card-labels { 106 | margin: 0; 107 | float: right; 108 | } 109 | 110 | .birdseye .list-card-labels .card-label { 111 | min-width: 8px; 112 | width: 10px; 113 | height: 10px; 114 | border-radius: 10px; 115 | margin: 4px 0px 3px 3px; 116 | } 117 | 118 | .birdseye .list-card-members { 119 | float: right; 120 | margin: 0; 121 | } 122 | 123 | .birdseye .list-card-members .member { 124 | height: 15px; 125 | width: 15px; 126 | line-height: 0; 127 | border-radius: 15px; 128 | margin: 2px 0 0px 4px; 129 | } 130 | 131 | .birdseye .list-card-members .member .member-avatar { 132 | height: 15px; 133 | width: 15px; 134 | } 135 | 136 | 137 | /* Scrollbar syling in card */ 138 | 139 | .birdseye .list-cards.u-fancy-scrollbar::-webkit-scrollbar-track-piece { 140 | background: transparent; 141 | } 142 | 143 | .birdseye .list-cards.u-fancy-scrollbar::-webkit-scrollbar-thumb { 144 | background: rgba(255, 255, 255, 0.5); 145 | } -------------------------------------------------------------------------------- /content-scripts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds a button to the toolbar and when activated, applies .birdseye class to body 3 | */ 4 | 5 | // Initializes on first page load + 6 | // uggggllly hax to continiously check whether user has switched page/board 7 | document.onreadystatechange = function () { 8 | if (document.readyState === 'complete') { 9 | shouldInit() 10 | setInterval(shouldInit, 3000) 11 | } 12 | } 13 | 14 | // Checks whether the button element is present - if not (user switched page/board), then init 15 | function shouldInit(event) { 16 | let buttonTarget = document.getElementsByClassName('board-header-btns mod-right') 17 | let buttonContainer = document.getElementsByClassName('birdseye-button') 18 | if (buttonTarget.length !== 0 && buttonContainer.length === 0) { 19 | initApplication() 20 | } 21 | } 22 | 23 | // Create the button and inject into to toolbar 24 | function initApplication() { 25 | 26 | let buttonContainer = document.createElement('a') 27 | buttonContainer.className = 'birdseye-button board-header-btn' 28 | buttonContainer.setAttribute('href', '#') 29 | buttonContainer.setAttribute('id', 'BirdseyeToggle') 30 | buttonContainer.addEventListener('click', clickButton) 31 | 32 | let iconContainer = document.createElement('span') 33 | iconContainer.className = 'icon-sm icon-subscribe board-header-btn-icon' 34 | 35 | let textContainer = document.createElement('span') 36 | textContainer.className = 'board-header-btn-text u-text-underline' 37 | 38 | let text = document.createTextNode('Birds Eye') 39 | textContainer.appendChild(text) 40 | buttonContainer.appendChild(iconContainer) 41 | buttonContainer.appendChild(textContainer) 42 | 43 | let buttonTarget = document.getElementsByClassName('board-header-btns mod-right')[0] 44 | buttonTarget.insertBefore(buttonContainer, buttonTarget.firstChild) 45 | 46 | // When switching pages/boards, the button loses its enabled class, so re-add it 47 | let body = document.getElementsByTagName('body')[0] 48 | if (body.classList.contains('birdseye')) { 49 | buttonContainer.classList.toggle('board-header-btn-enabled') 50 | } 51 | 52 | BirdseyeLoadState() 53 | } 54 | 55 | // Clicking on the button triggers the class toggling 56 | function clickButton() { 57 | let button = document.getElementById('BirdseyeToggle') 58 | setState(!(button.dataset.state == 'true' ? true : false)) 59 | } 60 | 61 | function setState(state) { 62 | let button = document.getElementById('BirdseyeToggle') 63 | let body = document.getElementsByTagName('body')[0] 64 | 65 | if (state == true) { 66 | body.classList.add('birdseye') 67 | button.classList.add('board-header-btn-enabled') 68 | } else { 69 | body.classList.remove('birdseye') 70 | button.classList.remove('board-header-btn-enabled') 71 | } 72 | 73 | button.dataset.state = state 74 | BirdseyeSaveState(state) 75 | } 76 | 77 | function BirdseyeSaveState(state) { 78 | chrome.storage.sync.set({ 79 | 'BirdseyeState': state 80 | }, () => {}) 81 | } 82 | 83 | function BirdseyeLoadState() { 84 | //Get the button state from chrome storage, if its different from what is set, set it to new state 85 | try { 86 | chrome.storage.sync.get('BirdseyeState', function (items) { 87 | if (items.BirdseyeState == true) { 88 | setState(true) 89 | } else { 90 | setState(false) 91 | } 92 | }) 93 | } catch (e) { 94 | chrome.storage.sync.set({ 95 | 'BirdseyeState': false 96 | }) 97 | } 98 | } --------------------------------------------------------------------------------