Replace gradient decorator syntax 'gradient(horizontal|vertical ...)' with 'horizontal-gradient(...)' and 'vertical-gradient(...)' [deprecation]

Samples/basic/demo/data/demo.rml

@@ -140,14 +140,14 @@ p.title
 }
 #decorators button.gradient
 {
-	decorator: gradient( vertical #415857 #5990A3 );
+	decorator: vertical-gradient( #415857 #5990A3 );
 	border: 3dp #415857;
 	border-radius: 8dp;
 	margin-right: 12dp;
 }
 #decorators button.gradient.horizontal
 {
-	decorator: gradient( horizontal #DB6565 #F1B58A );
+	decorator: horizontal-gradient( #DB6565 #F1B58A );
 	border-color: #DB6565;
 }
 #decorators button.gradient:hover
@@ -354,7 +354,7 @@ p.title
 	margin-left: -20dp;
 	width: 40dp;
 	height: 200dp;
-	decorator: gradient( vertical #daf0 #fef6 );
+	decorator: vertical-gradient( #daf0 #fef6 );
 }
 #transition:hover .ray
 {

Source/Core/DecoratorGradient.cpp

@@ -35,31 +35,21 @@
 #include "../../Include/RmlUi/Core/Math.h"
 #include "../../Include/RmlUi/Core/PropertyDefinition.h"
 
-/*
-Gradient decorator usage in CSS:
-
-decorator: gradient( direction start-color stop-color );
-
-direction: horizontal|vertical;
-start-color: #ff00ff;
-stop-color: #00ff00;
-*/
-
 namespace Rml {
 
-DecoratorGradient::DecoratorGradient() {}
+DecoratorStraightGradient::DecoratorStraightGradient() {}
 
-DecoratorGradient::~DecoratorGradient() {}
+DecoratorStraightGradient::~DecoratorStraightGradient() {}
 
-bool DecoratorGradient::Initialise(const Direction dir_, const Colourb start_, const Colourb stop_)
+bool DecoratorStraightGradient::Initialise(const Direction in_direction, const Colourb in_start, const Colourb in_stop)
 {
-	dir = dir_;
-	start = start_;
-	stop = stop_;
+	direction = in_direction;
+	start = in_start;
+	stop = in_stop;
 	return true;
 }
 
-DecoratorDataHandle DecoratorGradient::GenerateElementData(Element* element) const
+DecoratorDataHandle DecoratorStraightGradient::GenerateElementData(Element* element) const
 {
 	Geometry* geometry = new Geometry();
 	const Box& box = element->GetBox();
@@ -80,7 +70,7 @@ DecoratorDataHandle DecoratorGradient::GenerateElementData(Element* element) con
 
 	Vector<Vertex>& vertices = geometry->GetVertices();
 
-	if (dir == Direction::Horizontal)
+	if (direction == Direction::Horizontal)
 	{
 		for (int i = 0; i < (int)vertices.size(); i++)
 		{
@@ -88,7 +78,7 @@ DecoratorDataHandle DecoratorGradient::GenerateElementData(Element* element) con
 			vertices[i].colour = Math::RoundedLerp(t, colour_start, colour_stop);
 		}
 	}
-	else if (dir == Direction::Vertical)
+	else if (direction == Direction::Vertical)
 	{
 		for (int i = 0; i < (int)vertices.size(); i++)
 		{
@@ -100,40 +90,50 @@ DecoratorDataHandle DecoratorGradient::GenerateElementData(Element* element) con
 	return reinterpret_cast<DecoratorDataHandle>(geometry);
 }
 
-void DecoratorGradient::ReleaseElementData(DecoratorDataHandle element_data) const
+void DecoratorStraightGradient::ReleaseElementData(DecoratorDataHandle element_data) const
 {
 	delete reinterpret_cast<Geometry*>(element_data);
 }
 
-void DecoratorGradient::RenderElement(Element* element, DecoratorDataHandle element_data) const
+void DecoratorStraightGradient::RenderElement(Element* element, DecoratorDataHandle element_data) const
 {
 	auto* data = reinterpret_cast<Geometry*>(element_data);
 	data->Render(element->GetAbsoluteOffset(BoxArea::Border));
 }
 
-DecoratorGradientInstancer::DecoratorGradientInstancer()
+DecoratorStraightGradientInstancer::DecoratorStraightGradientInstancer()
 {
-	// register properties for the decorator
 	ids.direction = RegisterProperty("direction", "horizontal").AddParser("keyword", "horizontal, vertical").GetId();
 	ids.start = RegisterProperty("start-color", "#ffffff").AddParser("color").GetId();
 	ids.stop = RegisterProperty("stop-color", "#ffffff").AddParser("color").GetId();
 	RegisterShorthand("decorator", "direction, start-color, stop-color", ShorthandType::FallThrough);
 }
 
-DecoratorGradientInstancer::~DecoratorGradientInstancer() {}
+DecoratorStraightGradientInstancer::~DecoratorStraightGradientInstancer() {}
 
-SharedPtr<Decorator> DecoratorGradientInstancer::InstanceDecorator(const String& /*name*/, const PropertyDictionary& properties_,
+SharedPtr<Decorator> DecoratorStraightGradientInstancer::InstanceDecorator(const String& name, const PropertyDictionary& properties_,
 	const DecoratorInstancerInterface& /*interface_*/)
 {
-	DecoratorGradient::Direction dir = (DecoratorGradient::Direction)properties_.GetProperty(ids.direction)->Get<int>();
+	using Direction = DecoratorStraightGradient::Direction;
+	Direction direction;
+	if (name == "horizontal-gradient")
+		direction = Direction::Horizontal;
+	else if (name == "vertical-gradient")
+		direction = Direction::Vertical;
+	else
+	{
+		direction = (Direction)properties_.GetProperty(ids.direction)->Get<int>();
+		Log::Message(Log::LT_WARNING,
+			"Decorator syntax 'gradient(horizontal|vertical ...)' is deprecated, please replace with 'horizontal-gradient(...)' or "
+			"'vertical-gradient(...)'");
+	}
+
 	Colourb start = properties_.GetProperty(ids.start)->Get<Colourb>();
 	Colourb stop = properties_.GetProperty(ids.stop)->Get<Colourb>();
 
-	auto decorator = MakeShared<DecoratorGradient>();
-	if (decorator->Initialise(dir, start, stop))
-	{
+	auto decorator = MakeShared<DecoratorStraightGradient>();
+	if (decorator->Initialise(direction, start, stop))
 		return decorator;
-	}
 
 	return nullptr;
 }

Source/Core/DecoratorGradient.h

@@ -34,14 +34,21 @@
 
 namespace Rml {
 
-class DecoratorGradient : public Decorator {
+/**
+    Straight gradient.
+
+    CSS usage:
+    decorator: horizontal-gradient( <start-color> <stop-color> );
+    decorator: vertical-gradient( <start-color> <stop-color> );
+ */
+class DecoratorStraightGradient : public Decorator {
 public:
-	enum class Direction { Horizontal = 0, Vertical = 1 };
+	enum class Direction { Horizontal, Vertical };
 
-	DecoratorGradient();
-	virtual ~DecoratorGradient();
+	DecoratorStraightGradient();
+	virtual ~DecoratorStraightGradient();
 
-	bool Initialise(Direction dir_, Colourb start_, Colourb stop_);
+	bool Initialise(Direction direction, Colourb start, Colourb stop);
 
 	DecoratorDataHandle GenerateElementData(Element* element) const override;
 	void ReleaseElementData(DecoratorDataHandle element_data) const override;
@@ -49,23 +56,23 @@ public:
 	void RenderElement(Element* element, DecoratorDataHandle element_data) const override;
 
 private:
-	Direction dir = {};
+	Direction direction = {};
 	Colourb start, stop;
 };
 
-class DecoratorGradientInstancer : public DecoratorInstancer {
+class DecoratorStraightGradientInstancer : public DecoratorInstancer {
 public:
-	DecoratorGradientInstancer();
-	~DecoratorGradientInstancer();
+	DecoratorStraightGradientInstancer();
+	~DecoratorStraightGradientInstancer();
 
 	SharedPtr<Decorator> InstanceDecorator(const String& name, const PropertyDictionary& properties,
 		const DecoratorInstancerInterface& instancer_interface) override;
 
 private:
-	struct GradientPropertyIds {
+	struct PropertyIds {
 		PropertyId direction, start, stop;
 	};
-	GradientPropertyIds ids;
+	PropertyIds ids;
 };
 
 } // namespace Rml

Source/Core/Factory.cpp

@@ -152,7 +152,7 @@ struct DefaultInstancers {
 	DecoratorTiledBoxInstancer decorator_tiled_box;
 	DecoratorTiledImageInstancer decorator_image;
 	DecoratorNinePatchInstancer decorator_ninepatch;
-	DecoratorGradientInstancer decorator_gradient;
+	DecoratorStraightGradientInstancer decorator_straight_gradient;
 
 	// Filters
 	FilterBasicInstancer filter_hue_rotate = {FilterBasicInstancer::ValueType::Angle, "0rad"};
@@ -241,7 +241,9 @@ bool Factory::Initialise()
 	RegisterDecoratorInstancer("tiled-box", &default_instancers->decorator_tiled_box);
 	RegisterDecoratorInstancer("image", &default_instancers->decorator_image);
 	RegisterDecoratorInstancer("ninepatch", &default_instancers->decorator_ninepatch);
-	RegisterDecoratorInstancer("gradient", &default_instancers->decorator_gradient);
+	RegisterDecoratorInstancer("gradient", &default_instancers->decorator_straight_gradient);
+	RegisterDecoratorInstancer("horizontal-gradient", &default_instancers->decorator_straight_gradient);
+	RegisterDecoratorInstancer("vertical-gradient", &default_instancers->decorator_straight_gradient);
 
 	// Filter instancers
 	RegisterFilterInstancer("hue-rotate", &default_instancers->filter_hue_rotate);

Tests/Data/VisualTests/border_radius.rml

@@ -19,7 +19,7 @@
 		.thin {
 			border-width: 10dp 5dp 25dp 20dp;
 			border-radius: 80dp 30dp;
-			decorator: gradient( horizontal #ff8400 #ffd34f );
+			decorator: horizontal-gradient( #ff8400 #ffd34f );
 		}
 		.thick {
 			border-width: 40dp 20dp;

Tests/Data/VisualTests/color_interpolation.rml

@@ -30,10 +30,10 @@
 			width: 300dp;
 		}
 		.rectangle {
-			decorator: gradient( horizontal #f00 #0f0 );
+			decorator: horizontal-gradient( #f00 #0f0 );
 		}
 		.round {
-			decorator: gradient( horizontal #f00 #0f0 );
+			decorator: horizontal-gradient( #f00 #0f0 );
 			border-radius: 50dp;
 		}
 		.round-border {
@@ -42,10 +42,10 @@
 			border-color: #0f0 #f00 #0f0 #f00;
 		}
 		.rectangle.black {
-			decorator: gradient( horizontal #f00 #000 );
+			decorator: horizontal-gradient( #f00 #000 );
 		}
 		.round.black {
-			decorator: gradient( horizontal #f00 #000 );
+			decorator: horizontal-gradient( #f00 #000 );
 			border-radius: 50dp;
 		}
 		.round-border.black {

Tests/Source/UnitTests/Animation.cpp

@@ -48,8 +48,8 @@ static const String document_decorator_rml = R"(
 			bottom: 0;
 		}
 		
-		@decorator from_rule : gradient { %s }
-		@decorator to_rule: gradient{ %s }		
+		@decorator from_rule : horizontal-gradient { %s }
+		@decorator to_rule: horizontal-gradient{ %s }
 
 		@keyframes mix {
 			from { decorator: %s; }
@@ -86,113 +86,117 @@ TEST_CASE("animation.decorator")
 			"",
 			"",
 
-			"gradient(horizontal transparent transparent)",
-			"gradient(horizontal white white)",
+			"horizontal-gradient(transparent transparent)",
+			"horizontal-gradient(white white)",
 
-			"gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
 		},
 		{
 			"",
 			"",
 
 			"none",
-			"gradient(horizontal transparent transparent)",
+			"horizontal-gradient(transparent transparent)",
 
-			"gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
+			"horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
 		},
 		{
 			"",
 			"",
 
 			"none",
-			"gradient(horizontal transparent transparent), gradient(vertical transparent transparent)",
+			"horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
 
-			"gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
+			"horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), horizontal-gradient(horizontal rgba(220,220,220,191) "
+			"rgba(220,220,220,191))",
 		},
 		{
 			"",
 			"",
 
-			"gradient(horizontal transparent transparent), gradient(vertical transparent transparent)",
+			"horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
 			"none",
 
-			"gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), gradient(vertical rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), horizontal-gradient(horizontal rgba(127,127,127,63) "
+			"rgba(127,127,127,63))",
 		},
 
 		/// Only rule declaration
 		{
-			"direction: horizontal; start-color: transparent; stop-color: transparent;",
-			"direction: horizontal; start-color: white; stop-color: white;",
+			"start-color: transparent; stop-color: transparent;",
+			"start-color: white; stop-color: white;",
 
 			"from_rule",
 			"to_rule",
 
-			"gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
 		},
 		{
 			"",
-			"direction: horizontal; start-color: transparent; stop-color: transparent;",
+			"start-color: transparent; stop-color: transparent;",
 
 			"from_rule",
 			"to_rule",
 
-			"gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
+			"horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
 		},
 		{
-			"direction: vertical; start-color: transparent; stop-color: transparent;",
+			"start-color: transparent; stop-color: transparent;",
 			"",
 
 			"from_rule",
 			"to_rule",
 
-			"gradient(vertical rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
 		},
 
 		/// Mix rule and standard declaration
 		{
-			"direction: horizontal; start-color: transparent; stop-color: transparent;",
+			"start-color: transparent; stop-color: transparent;",
 			"",
 
 			"from_rule",
-			"gradient(horizontal white white)",
+			"horizontal-gradient(white white)",
 
-			"gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
 		},
 		{
 			"",
-			"direction: horizontal; start-color: transparent; stop-color: transparent;",
+			"start-color: transparent; stop-color: transparent;",
 
 			"none",
 			"to_rule",
 
-			"gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
+			"horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
 		},
 		{
-			"direction: vertical; start-color: transparent; stop-color: transparent;",
+			"start-color: transparent; stop-color: transparent;",
 			"",
 
 			"from_rule",
 			"none",
 
-			"gradient(vertical rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
 		},
 		{
 			"",
 			"",
 
 			"from_rule, to_rule",
-			"gradient(horizontal transparent transparent), gradient(vertical transparent transparent)",
+			"horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
 
-			"gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
+			"horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), horizontal-gradient(horizontal rgba(220,220,220,191) "
+			"rgba(220,220,220,191))",
 		},
 		{
 			"",
 			"",
 
-			"gradient(horizontal transparent transparent), gradient(vertical transparent transparent)",
+			"horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
 			"from_rule, to_rule",
 
-			"gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), gradient(vertical rgba(127,127,127,63) rgba(127,127,127,63))",
+			"horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), horizontal-gradient(horizontal rgba(127,127,127,63) "
+			"rgba(127,127,127,63))",
 		},
 	};