Author Topic: Customizing Financier: Adding (non-Emoji) icons to Account names  (Read 690 times)

Offline JumpySquirrel

Customizing Financier: Adding (non-Emoji) icons to Account names
« on: December 21, 2016, 07:16:36 PM »
Full Disclosure: I am not an expert by any means. This took quite a bit of trial and error to get right. There is probably a better way to do this, but this works for me for now.

Also remember: This may break at any point as enhancements/fixes are implemented by Alex. If possible, I will try to keep it updated to accommodate but no guarantees.


Going along with the "Customizing Financier" thread (https://discuss.financier.io/index.php?topic=97.0) that outlines how to add Emoji to your Account Names, I wanted a way to help identify which account I may be looking for (plus, I think it just looks good). However, with 3+ credit cards and only a single credit card Emoji, I went looking for another option.

Alex is currently using Font Awesome for some icons and using custom javascript added to the page onload using an extension such as Tampermonkey (Chrome) or Greasemonkey (Firefox), you can pull in these icons and preface the Account Name with them.

Font Awesome includes a bunch of "payment" icons (http://fontawesome.io/icons/) so you can include a Visa, Mastercard, Discover, Cash, AMEX, etc logo.

Tampermonkey/Greasemonkey script to create once the extension is installed:
Code: [Select]
// ==UserScript==
// @name         Financier Account Icons
// @version      0.1
// @description  Add FontAwesome icons to Account listing (left panel only)
// @author       JumpySquirrel @ https://discuss.financier.io
// @match        https://app.financier.io/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @require      https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// @grant        GM_addStyle
// ==/UserScript==

var accountDict = {
    "Visa Account Name": "cc-visa",
    "Amazon Card": "amazon",
    "Mastercard Account Name": "cc-mastercard",
    "Checking": "bank",
    "Cash": "money",
    "Mortgage": "home",
    "PayPal": "paypal"
};

//waitForKeyElements function courtesy https://gist.github.com/BrockA/2625891
waitForKeyElements (".app-view__accounts", setAccountIcons);

function setAccountIcons (jNode) {

    //Loop through each account
    $( ".app-view__name" ).each(function(index){

        //Get current Account Name
        var accountName = $(this).html();

        //Get FA Icon Name From AccountDict (or Account Name if undefined)
        var iconName = accountDict[accountName];
        if(iconName === undefined) { iconName = accountName.toLowerCase(); }

        //Build Icon String
        var accountIconString = "<i class=\"fa fa-" + iconName + "\" style=\"padding-top:9px; padding-right:2px\"></i>";

        //Add Icon String
        $(this).before(accountIconString);

    });

}

The only thing that should need to be modified is the following. Each line should include the Account Name followed by the name of the Font Awesome icon (http://fontawesome.io/icons/) you want to use

Code: [Select]
var accountDict = {
    "Visa Account Name": "cc-visa",
    "Amazon Card": "amazon",
    "Mastercard Account Name": "cc-mastercard",
    "Checking": "bank",
    "Cash": "money",
    "Mortgage": "home",
    "PayPal": "paypal"
};

If you don't want an Account to have an icon, it can simple be left out of this and no icon will display.

See the attached screenshot for the end result.

Let me know if you have any questions / this doesn't work for you. I'm open to making necessary changes/suggestions if people find it helpful and it isn't working for them.

Offline JumpySquirrel

Re: Customizing Financier: Adding (non-Emoji) icons to Account names
« Reply #1 on: December 21, 2016, 09:58:06 PM »
Similar principal, but using SVG logos from various banks. Not sure which I like better.

Offline asromzek

Re: Customizing Financier: Adding (non-Emoji) icons to Account names
« Reply #2 on: December 22, 2016, 09:57:02 AM »
I need to get back into playing things like this after the holiday craziness subsides. That's some awesome stuff.
/s implied, unless stated otherwise.