test (a1d64ccc) · Commits · jan.koester / blogi

editor/widgets/container/container.cpp

+51 −5

Changes for editor/widgets/container/container.cpp: 51 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		@@ -102,6 +102,11 @@ extern "C" {
		std::string verticalAlign = "";
		std::string m_verticalAlign = "";

		// Flex layout: main-axis direction and cross-axis alignment
		std::string direction = "";
		std::string m_direction = "";
		std::string alignItems = "";

		// Shape divider: a decorative SVG (wave/oval) cut into the
		// container's top or bottom edge, e.g. to end a hero background
		// without a hard horizontal line.
		@@ -340,6 +345,9 @@ extern "C" {
		addSpacingBox("padding", "Padding", "desktop");
		addSpacingBox("margin", "Margin", "desktop");
		addField("vertical_align", "Vertical Align", "select", nullptr, "desktop", mkOpts({"top","center","bottom"}));
		addField("direction", "Direction", "select", nullptr, "desktop", mkOpts({"vertical","horizontal"}));
		addField("align_items", "Align Items", "select", nullptr, "all",
		mkOpts({"", "flex-start","center","flex-end","stretch","baseline"}));
		addField("shape_divider_type", "Shape Divider", "select", nullptr, "desktop", mkOpts({"none","wave","oval"}), "simple");
		addField("shape_divider_position", "Shape Divider Position", "select", nullptr, "desktop", mkOpts({"bottom","top","both"}), "simple");
		addField("shape_divider_color", "Shape Divider Color", "color_var", nullptr, "desktop", nullptr, "simple");
		@@ -374,6 +382,7 @@ extern "C" {
		addField("m_width", "Mobile Width", "text", "e.g. 100%", "mobile");
		addField("m_height", "Mobile Height", "text", "e.g. auto", "mobile");
		addField("m_vertical_align", "Mobile Vertical Align", "select", nullptr, "mobile", mkOpts({"top","center","bottom"}));
		addField("m_direction", "Mobile Direction", "select", nullptr, "mobile", mkOpts({"vertical","horizontal"}));
		addField("m_box_shadow", "Mobile Box Shadow", "select", nullptr, "mobile", mkOpts({"none","sm","md","lg","card","float","inner"}));
		addField("m_box_shadow_color", "Mobile Box Shadow Color", "color_var", nullptr, "mobile");
		addField("m_box_shadow_custom", "Mobile Box Shadow Custom", "text", "e.g. 0 4px 20px rgba(0,0,0,0.5)", "mobile");
		@@ -472,6 +481,11 @@ extern "C" {
		element->SetAttribute("vertical_align", verticalAlign.c_str());
		element->SetAttribute("m_vertical_align", m_verticalAlign.c_str());

		// Flex layout
		element->SetAttribute("direction", direction.c_str());
		element->SetAttribute("m_direction", m_direction.c_str());
		element->SetAttribute("align_items", alignItems.c_str());

		// Shape divider
		element->SetAttribute("shape_divider_type", shapeDividerType.c_str());
		element->SetAttribute("shape_divider_position", shapeDividerPosition.c_str());
		@@ -649,6 +663,14 @@ extern "C" {
		const char* loaded_m_va = xml_data->Attribute("m_vertical_align");
		if (loaded_m_va) m_verticalAlign = loaded_m_va;

		// Flex layout
		const char* loaded_dir = xml_data->Attribute("direction");
		if (loaded_dir) direction = loaded_dir;
		const char* loaded_m_dir = xml_data->Attribute("m_direction");
		if (loaded_m_dir) m_direction = loaded_m_dir;
		const char* loaded_align_items = xml_data->Attribute("align_items");
		if (loaded_align_items) alignItems = loaded_align_items;

		// Shape divider
		const char* loaded_sdt = xml_data->Attribute("shape_divider_type");
		if (loaded_sdt) shapeDividerType = loaded_sdt;
		@@ -744,6 +766,9 @@ extern "C" {
		json_object_object_add(obj, "m_height", json_object_new_string(m_height.c_str()));
		json_object_object_add(obj, "vertical_align", json_object_new_string(verticalAlign.c_str()));
		json_object_object_add(obj, "m_vertical_align", json_object_new_string(m_verticalAlign.c_str()));
		json_object_object_add(obj, "direction", json_object_new_string(direction.c_str()));
		json_object_object_add(obj, "m_direction", json_object_new_string(m_direction.c_str()));
		json_object_object_add(obj, "align_items", json_object_new_string(alignItems.c_str()));
		json_object_object_add(obj, "shape_divider_type", json_object_new_string(shapeDividerType.c_str()));
		json_object_object_add(obj, "shape_divider_position", json_object_new_string(shapeDividerPosition.c_str()));
		json_object_object_add(obj, "shape_divider_color", json_object_new_string(shapeDividerColor.c_str()));
		@@ -970,6 +995,18 @@ extern "C" {
		val = json_object_get_string(val_obj);
		if (val) m_verticalAlign = val;
		}
		if (json_object_object_get_ex(obj, "direction", &val_obj)) {
		val = json_object_get_string(val_obj);
		if (val) direction = val;
		}
		if (json_object_object_get_ex(obj, "m_direction", &val_obj)) {
		val = json_object_get_string(val_obj);
		if (val) m_direction = val;
		}
		if (json_object_object_get_ex(obj, "align_items", &val_obj)) {
		val = json_object_get_string(val_obj);
		if (val) alignItems = val;
		}
		if (json_object_object_get_ex(obj, "shape_divider_type", &val_obj)) {
		val = json_object_get_string(val_obj);
		if (val && val[0]) shapeDividerType = val;
		@@ -1107,11 +1144,13 @@ extern "C" {
		if (!height.empty()) {
		style += " height: " + height + ";";
		}
		if (!verticalAlign.empty()) {
		style += " display: flex; flex-direction: column;";
		if (!verticalAlign.empty() \|\| !direction.empty() \|\| !alignItems.empty()) {
		style += " display: flex; flex-direction: " +
		std::string(direction == "horizontal" ? "row" : "column") + ";";
		if (verticalAlign == "top") style += " justify-content: flex-start;";
		else if (verticalAlign == "center") style += " justify-content: center;";
		else if (verticalAlign == "bottom") style += " justify-content: flex-end;";
		if (!alignItems.empty()) style += " align-items: " + alignItems + ";";
		}
		if (!boxShadowCustom.empty()) {
		style += " box-shadow: " + boxShadowCustom + ";";
		@@ -1232,8 +1271,14 @@ extern "C" {
		if (!m_width.empty()) mobileCSS += " width: " + m_width + " !important;";
		else if (width.find("px") != std::string::npos) mobileCSS += " width: 100% !important;";
		if (!m_height.empty()) mobileCSS += " height: " + m_height + " !important;";
		if (!m_verticalAlign.empty()) {
		mobileCSS += " display: flex !important; flex-direction: column !important;";
		if (!m_verticalAlign.empty() \|\| !m_direction.empty()) {
		// Falls back to the desktop direction so that setting
		// ONLY a mobile vertical-align override doesn't silently
		// revert an already-horizontal desktop layout back to
		// column via this !important block.
		std::string effectiveDirection = !m_direction.empty() ? m_direction : direction;
		mobileCSS += " display: flex !important; flex-direction: " +
		std::string(effectiveDirection == "horizontal" ? "row" : "column") + " !important;";
		if (m_verticalAlign == "top") mobileCSS += " justify-content: flex-start !important;";
		else if (m_verticalAlign == "center") mobileCSS += " justify-content: center !important;";
		else if (m_verticalAlign == "bottom") mobileCSS += " justify-content: flex-end !important;";
		@@ -1258,7 +1303,8 @@ extern "C" {
		}
		if (m_hidden) mobileCSS += " display: none !important;";
		else if (hidden) {
		if (!m_verticalAlign.empty() \|\| !verticalAlign.empty())
		if (!m_verticalAlign.empty() \|\| !verticalAlign.empty() \|\|
		!m_direction.empty() \|\| !direction.empty() \|\| !alignItems.empty())
		mobileCSS += " display: flex !important;";
		else
		mobileCSS += " display: block !important;";