Expected Behavior

One of the features in the Beta Wishlist is Gradients. I would like to work on adding it. I have already gotten a simple gradient working and will discuss my approach here.
If there are any changes to be made, please comment. If not, could any of the maintainers create a branch- like WIP-gradients for this feature?

The following are some functionality this feature must have.

User Stories

1. The user should be able to change the type of coloring used (simple, linear gradient, radial gradient).
2. The user should be able to change the color shades of gradients using stop colors.
3. The user should be able to change the direction in which the gradient flows using the direction line.
4. If the user changes from either of the gradients to a simple color, their previous color should be used.

Possible Solution

UI Changes

In the ColorPicker popover, add a dropdown menu. This menu will be created using Gtk.ComboBoxText.
The dropdown menu will contain 3 items
1. Simple Color: this will represent a simple, plain color.
2. Linear Gradient: this will represent a linear gradient.
3. Radial Gradient: this will represent a radial gradient.

The user can select what kind of fill they want.

Other that the dropdown menu, a direction line will also be created. This line will determine the direction of gradients. This line will only be present if "Linear Gradient" or "Radial Gradient" Mode is chosen.

The user can then drag this line around to change the direction of gradient. This is similar to how most graphics software products use gradients.

This is what the popover looks like after adding the dropdown menu

This is what the gradient looks like by default.

Code Changes

• The dropdown menu will be created in Akira.Layouts.Partials.FillItem, inside the Gtk.Popover.
• The widget used for this is Gtk.ComboBoxText.
• To handle drawing gradients and the direction line, Akira.Lib.Components.Gradient will be used.
• When a new item is selected from this menu, it triggers a signal changed.
• The handler for this signal will change the color property in Akira.Models.FillsItemModel.
• This in turn changes the color property in Akira.Lib.Components.Fill.
• In Akira.Lib.Components.Fill, a Akira.Lib.Components.Gradient object is used to draw a linear or radial gradient Pattern using the Cairo library.

This approach looks a little too complicated to me, but when the user changes the color of a CanvasItem, these are the steps that happen, which is why I did the same.

I have implemented this, and can be found on my fork in the branch WIP-Gradient.

As of now, when the user selects the Linear Gradient or Radial Gradient mode, a static gradient of colors black and white and running diagonally appears. Its color or direction cannot be changed. The direction line also isn't created. But selecting another mode removes the gradient.

Future Work

Implement the remaining User Stories. There are also some bugs that cause the CanvasItem to draw Simple colors even when gradient mode is selected.