GSoC PMA week 1: The coding begins !!

It’s been a week since I’ve been working on my Google Summer of Code project with phpMyAdmin and my work for the first two week was to fix a very important tool in PMA, which is Theme Generator. The tool was build by my mentor himself as his last year’s GSoC project. The tool allows user to create their own custom themes seamlessly.

Recently PMA shifted all their theme’s styles from css to scss. Which stopped the working of the theme generator. The first two weeks of my GSoC project were dedicated to fixing the theme generator.

I divided my work into two parts. For the first week I decided to fix the theme generator page which has the colour-picker tool for the user to choose from, four type of colour palettes: Monochromatic, Complementary, Analogous and Triadic and other details of the theme to be filled by the user. It also consisted of a preview option. For the second week I decided to change the files generated by the theme generator for new themes to be compatible with new rendering system. Initially they were in .css.php format but now had to be converted to pure scss files.

When I started with my work, the broken theme generator looked somewhat like this.

It took a little time to understand the rendering system in PMA as the code is quite vast. My major work was to pass the php variables to sass file and use them as scss variables in pure scss files. I went through the styling of theme generator, which was css in (theme_generator.css.php file) and JS for colour picker and previewing. I changed the styling to theme_generator.scss file and made the theme generator pick up css from there and was finally able to get it rendered as required.