Color presets

[vistree]

This is a feedback to the creecros-test-1 branch! add a preset dropdown to let users to choose from different presets. As a starting point we could offer the css settings from existing theme-plugins (moon, nebula, standard theme). Maybe we can parse the CSS from those plugins as we implement a file based settings approach??

[creecros]

add a preset dropdown to let users to choose from different presets. As a starting point we could offer the css settings from existing theme-plugins (moon, nebula, standard theme).

• I agree, just not sure the best approach. If we include the themes, they may get outdated, so I was thinking about having it download the css from their repo, that way it pulls the latest. It would become sort of like the plugin directory, where developers can add their themes by pull requests?

Maybe we can parse the CSS from those plugins as we implement a file based settings approach??

• I tried this and failed miserably. But I suck at understanding CSS, so maybe that's why.

[creecros]

So as a Test, I just added:

file_put_contents("/var/www/app/plugins/Customizer/Tmpfile.css", fopen("https://raw.githubusercontent.com/kenlog/Nebula/master/Assets/css/nebula.css", 'r'));

        $this->hook->on("template:layout:css", array("template" => "plugins/Customizer/Tmpfile.css"));

to Plugin.php, and it worked...so we just make the download URL a variable of URL's for CSS themes, and we can use the Tmpfile.css (which we can name whatever) as the file we write to for custom themes.

[creecros]

Works: https://github.com/creecros/Customizer/tree/Theme-Presets

Loaded with the CSS urls on existing themes, not sure that was the best thing to do. Added a modified version of Moon as an included file, just to test that as well. Works.

[vistree]

Let me describe a little bit more what was on my mind:

• rename current dropdown "Theme" to "Preset colors from theme"
• add a "Load" button next the the "Preset" dropdown
• add empty (!!!) color switcher fields

Clicking on "Load" button:

• set color switcher fields to values from selected theme

Let users modify the preselected colors In the future: let users modify preselected font-families + -sizes

Clicking "Save" button:

• store the selected theme as variable, so the theme dropdown shows the currently selected theme on page reload
• write the values from color switcher fields to custom.css from Customizer plugin
• if color switcher is empty, DON't write it to the file (Kanboard standard value is used instead then)

Reloding the Customizer settings page:

• set "Preset colors from theme" to value from stored variable
• preset color switchers from Customizer custom.css

[vistree]

If you like this I can start with some basics.

[creecros]

It's hard for me to understand fully, but it sounds good. If you start, I might get a better understanding with the code, and then I can help.

[vistree]

Hi creecros, I like your css load in current Customizer master branch ;-) I try to use this as a base for my suggestions. One question (my PHP symphony knowledge is really basic ;-( I want to add a button to the file /plugins/Customizer/Template/file/show.php

I tried to use: <?= $this->url->link(t("Load CSS from file"), "CustomizerConfigController", "cssparse", array("file" => $values["themeSelection"]), true, "btn btn-red") ?> In CustomizerConfigController I added: public function cssparse() { $filename = $this->request->getStringParam("file"); $this->configModel->loadCSS($filename); $this->flash->success(t("CSS file loaded.")); $this->response->redirect($this->helper->url->to("CustomizerFileController", "show", array("plugin" => "Customizer"))); } But when clicking on the button, I get a white page with the error message: Internal Error: Controller not found Why is the Controller not available from within show.php? I tried to compare with the core "Webhooks" settings where you find a "Reset token" button. There the core ConfigController is used and available form within the webhooks.php file.

[creecros]

Add 'plugin' => 'Customizer' to your array, when you call your controller

[vistree]

Umpf, yes. Thanx!

[creecros]

I scratched my head on that one a few times.

[vistree]

Hmm, it seems, I can't really help with developing. I do not understand the concept of the application design ;-( Even easy things do not work. E.g. I tried to define a constant in ConfigFileModel.php (or CustomzerConfigController.php) which are available in the definition PHP but not e.g. in template files (like the show.php). So, maybe I need to describe my ideas better? What is working is a button to load the CSS classes from selected files in an array. But I can't make the array available in the show.php template ;-(

[creecros]

Push it to a branch, and I can take a look

[vistree]

OK, I pushed a new branch (css-parser-example). In CustomizerFileModel.php you find a rough function to parse some css classes with colors. This is called by a function from CustomizerConfigController.php where I put the result to the global $customizer variable. Additonally I defined a global constant there. Controller-function is called from button within show.php. Here I also tried to get the results back - both do not work ;-( Whats wrong?

[vistree]

Instead of my simple parsing function we could use a css-parsing-librariy like PHP-CSS-Parser My idea was to add additional color picker fields to the show.php and prepopulate them by the parsed colors from the selected theme. This way users could modify the colors definied in the selected theme-css

[creecros]

Let me review, and see if I can't figure it out. Give me a day or two to wrap my head around it.

[creecros]

What's the purpose of the constant?

[vistree]

just to check, if constants are available in the show.php - so if it fails to make the array available through global $customizer to make single color-values available through defined constants

[creecros]

ok, I can't tell you exactly why, but it seems that passing through two controllers and setting globals is causing an issue. I updated your code, so that the global only passes through 1 controller to the view, and it is now passing $customizer['cssparser'].

Merged into your branch #37

[creecros]

i will note that, print $cssval; is invalid because $customizer['cssparser'] is storing arrays of arrays.

[vistree]

Thanx!!!

[creecros]

i got no sleep on that one last night! I was almost going to resort to imploding the array into a string to send to the configModel.

[vistree]

Eijeijei, I'm really sorry! I have spent half the weekend with this problem and would probably never have figured it out ;-(

[creecros]

no worries, i like solving problems. never give up!

[vistree]

tested and array is available - so great ;-)

[vistree]

OK, now I have initial work done in branch css-parser-example Maybe the code better explains what I wanted to do. If you set one of the themes and save the settings you can afterwards select a different theme with the new "Load CSS from file" button. If the theme has a .body color class defined, this value will be visible in the Customizer UI settings page for the color picker "Login Page Background Color"

[creecros]

Only issue I see is, Border and Shadow Color data will not be parsed.

[vistree]

Sure - my code is a base only and maybe needs to be reviewed. As I'm not an experienced programmer there might be better ways to implement "the idea". Real work is to decide what to do with the parsed CSS. In the moment I filter out just color, background and background-color rules. We can add everything we want or - maybe - keep the whole parsed array and use it with the user modifications to write out the custom theme?! Filtering is done in CustomizerFileModel.php if (trim($rule[0]) == 'color' || trim($rule[0]) == 'background' || trim($rule[0]) == 'background-color') {

[creecros]

closing for now, maybe oneday, when i have motivation, i'll come back to this.