Project

General

Profile

Feature #26539

Make the themes editable via UI as well as the graphs color.

Added by gerry the hat almost 3 years ago. Updated over 2 years ago.

Status:
Done
Priority:
Important
Assignee:
Damian Szidiropulosz
Category:
GUI (new)
Estimated time:
Severity:
Reason for Closing:
Reason for Blocked:
Needs QA:
Yes
Needs Doc:
Yes
Needs Merging:
No
Needs Automation:
No
Support Suite Ticket:
n/a
Hardware Configuration:

Description

"Warriors" theme has a blue background, which makes it hard to identify a graph in blue. I'm sorry to say, but I don't like the graphs color at all.

So please make the graphs and the themes color editable via UI.

debug-freenas-20171107213532.txz (360 KB) debug-freenas-20171107213532.txz gerry the hat, 11/07/2017 01:35 PM

History

#2 Avatar?id=14398&size=24x24 Updated by Kris Moore almost 3 years ago

  • Assignee changed from Release Council to James Nixon
  • Target version set to 11.2-BETA1

James, I know we discussed user editable themes before. You still up for the challenge?

#3 Updated by James Nixon almost 3 years ago

  • Status changed from Unscreened to Screened

Kris Moore wrote:

James, I know we discussed user editable themes before. You still up for the challenge?

Absolutely!

#4 Updated by Dru Lavigne almost 3 years ago

  • Private changed from No to Yes

#5 Updated by Dru Lavigne almost 3 years ago

  • Assignee changed from James Nixon to Erin Clark

#6 Updated by Dru Lavigne almost 3 years ago

  • Status changed from Screened to Not Started

#7 Updated by Peter Southwell over 2 years ago

  • Status changed from Not Started to In Progress
  • Assignee changed from Erin Clark to Peter Southwell
  • Priority changed from Nice to have to Important

#8 Updated by Peter Southwell over 2 years ago

I think it'd be cool to allow for import/export of these as well..

Be a great way of getting around people not liking our existing ones.... A tool to create they're own!! awesome

#9 Updated by Peter Southwell over 2 years ago

So.. If I WERE to do the themes.. Ive thought of such a simple way... SAAS.. Makes variable substitution.. really complicated... They're meant to be static generated before run time.. By WebPack.. rather then scripts... So.. Replacing full functional themes.. totally simple right? but variables in those themes... boom... Suiper super hard.

But.. IVe got a simple way around it.. And maybe Damiam thought of this.. lol.. Not sure.. but I heard him say "palette something".. But.. If we have our SAAS files use global pallets defined externally... THEN.. The files would be static.. BUT.. We can change the Palletes referenced.. on the fly Super super easy... This... Would make the UI save user theme... Very simple.. Just a form.. With every main pallette name.. and.. A color popup.. Set to the current color (with edit box).. You can type in color.. Or use color wheel.. Save As Theme.. Boom.. We select.. "Dynamic Theme".... But load user color definiation.. Very simple to do this...

IF... I were asked to do the task today.. Tht's how Id do it ?

#11 Updated by Peter Southwell over 2 years ago

<style>
:root{
var-MainColor:green;
--main-color: yellow;
}

h1#foo {
color: var(MainColor);
background-color: var(--main-color);
}
h1#norm {
color: black;
}
</style>

<h1 id="foo">My h1 foo element</h1>
<h1 id="norm">Standard h1 element</h1>
<p>The above should be the same color</p>

Then you can set the variable in the ThemeService

https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript

You can use document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

#12 Updated by Peter Southwell over 2 years ago

  • Assignee changed from Peter Southwell to Damian Szidiropulosz

Like the way you suggested Damian.

#13 Updated by Damian Szidiropulosz over 2 years ago

  • Subject changed from Make the themes editable via UI as well as the graphs color to Make the themes editable via UI as well as the graphs color.
  • Status changed from In Progress to Done

The solution to this one involved a total refresh of the theme engine. We have a new theme engine based on css variables that we can alter on the fly without any precompilation by sass. There is a new theme utility that allows for users to create their own custom themes by choosing color palettes. Also features a global preview feature that allows the user to walk through the site with their form colors applied. There is a preferences page now where users can set some global UI options including some theme management.

#14 Updated by Damian Szidiropulosz over 2 years ago

  • Private changed from Yes to No

#15 Updated by Dru Lavigne over 2 years ago

  • Target version changed from 11.2-BETA1 to Master - FreeNAS Nightlies
  • Needs Merging changed from Yes to No

Also available in: Atom PDF