The ynab-date-border-browser-plugin from polltery

ynab-date-border-browser-plugin's Introduction

What is this?

A YNAB (https://app.ynab.com) browser plugin that helps users view their date sorted transactions clearly with borders around each day.

Before:

After:

Production releases

Firefox

Add-on available at https://addons.mozilla.org/en-US/firefox/addon/ynab-date-borders/

Chrome

Chrome exenstion coming soon!

How to debug

Firefox

From https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

In Firefox: Open the about:debugging page, click the This Firefox option, click the Load Temporary Add-on button, then select any file in your extension's directory.

Chrome

..todo

Without extension, using dev tools (F12) [FOR DEVELOPMENT ONLY!]

Open browser dev tools and then enter the following in the console. This will render borders around the transactions for given dates.

// fetch a list of all the date elements
let dateElementsOnAccountPage = document.querySelectorAll('.ynab-grid-cell-date.user-data')
// start from 1 instead of 0, because we compare current date with previous date to decide if we want to draw a top border
for(let i = 1; i < dateElementsOnAccountPage .length; i++){
    if(dateElementsOnAccountPage[i-1].innerHTML.trim() !== dateElementsOnAccountPage [i].innerHTML.trim()){
        dateElementsOnAccountPage[i].parentElement.style.borderTop = '2px solid #405163'
    }
}

Contribution

Would you like to contribute? come check out the issue tab, start development and open a PR for me to review.

Disclaimer

This project is not affiliated with YNAB (https://www.ynab.com/), it's just a brower plugin to help solve this specific problem and make the UI more accessible.

ynab-date-border-browser-plugin's People

Contributors

Watchers

ynab-date-border-browser-plugin's Issues

Add customization options

Allow the border to be customizable for users, I think this will require some kind of pop up UI for the extension.

Refer here for border customization options: https://developer.mozilla.org/en-US/docs/Web/CSS/border

Develop a version for Toolkit for YNAB

https://github.com/toolkit-for-ynab/toolkit-for-ynab hosts a number of plugins for YNAB. A version for their toolkit would be nice, although it will have to be done in a different repository. A link here to the repo and PR can be maintained here.

Their feature documentation to get started: https://github.com/toolkit-for-ynab/toolkit-for-ynab/blob/main/docs/building-features.md

Making use of their observe(changedNodes: Set): void should be good enough for this. I recommend this to be done after fixing #3, which can used for shouldInvoke() method.

Only add top-borders when accounts page is sorted by date

Currently the top borders are added on page load and whenever any date element is added, but it's pretty useless when this happens.. I recommend we add a check so this only works when account page is sorted by date.

I did some r&d and i think this function can help check if account is sorted by date..

document.querySelector('.is-sorting').classList.contains('ynab-grid-cell-date')

Also update the date box to show (Y+) with a tooltip to let the users know the plugin is loaded and working

polltery / ynab-date-border-browser-plugin Goto Github PK

ynab-date-border-browser-plugin's Introduction

What is this?

Production releases

Firefox

Chrome

How to debug

Firefox

Chrome

Without extension, using dev tools (F12) [FOR DEVELOPMENT ONLY!]

Contribution

Disclaimer

ynab-date-border-browser-plugin's People

Contributors

Watchers

Forkers

ynab-date-border-browser-plugin's Issues

Recommend Projects

Recommend Topics

Recommend Org