add background color in AppCard

[bugtype]

add background color

Easily distinguish your app cards.

{
  "apps": [{
    "serverURL": "",
    "appId": "",
    "masterKey": "",
    "appName": "",
    "iconName": "",
    "backgroundColor":"#000000"
  }],
  "iconsFolder": "icons"
}

[dplewis]

Can you provide a screenshot?

[bugtype]

@dplewis Here!

[dplewis]

Thanks for getting started on this featured request! #681

Can you add the background color to the data browser? This is just an example.

[bugtype]

Hmm ... I do not recommend it.

[natanrolnik]

Thanks for your PR, @AreYouHappy .
If no value is configured, what value is used? Can you make a condition that, if backgroundColor isn't set, or if it's set to an empty string, it is not used?

[natanrolnik]

Also, besides what I commented above, could you please add it to the Changelog and to Readme, below "App Icon Configuration"? Also, please don't forget to link it in the header of the readme.

[flovilmart]

In my side I’m not sure I’m convinced by the feature.

[dplewis]

@flovilmart It helps people like me with multiple servers. I can't count how many times I've changed production thinking it was on local. Adding colors would help.

[bugtype]

If the backgorundcolor is not entered, it is replaced with the default. ( It is CSS style)
The colors at Data brower don't look good and aren't in now.
Please let me know if you have a problem with that commit!
Thank you for your feedback.

[dplewis]

It’s not that it doesn’t look good it should be an indicator that a different server is being used.

Changing the color of the app card is the same as looking at the URL.

I would like to see something more semi-themed to avoid confusion.

[bugtype]

Hmm .. I don't have good sense of design.
Do you want the Data browser part to change color, too?
[1] Core part
[2] Classes part (Browser)
I'm concerned about how to make the difference between [1] and [2] colors.
Do you have any good ideas?

[dplewis]

@AreYouHappy You could have a primaryBackgroundColor and secondaryBackgroundColor with defaults for both.

[bugtype]

Would you try it?

[dplewis]

@AreYouHappy Thanks for the update. I'll have some time today to try it out!

[dplewis]

Can you change background color here to primary and secondary defaults?

[dplewis]

@AreYouHappy Just tried it out and it works great. Just a small change.

Defaults are working without adding these fields.

[bugtype]

{
  "apps": [{
    "serverURL": "",
    "appId": "",
    "masterKey": "",
    "appName": "",
    "iconName": "",
    "primaryBackgroundColor": "",
    "secondaryBackgroundColor": ""
  }],
  "iconsFolder": "icons"
}

I changed it as follows.

[dplewis]

@natanrolnik How does this look?

[natanrolnik]

@dplewis I understand the need, and in my opinion, it's good: we still have the default version, and whoever wants to customize, it's his/her responsibility to do so. Where are the primary and secondary colors applied, in the end?

[dplewis]

@natanrolnik In the app cards and databrowser. The above attached images.

[natanrolnik]

Thanks @AreYouHappy and @dplewis.
Release 1.2.0 is already available 😃