Commit 73832c9f authored by Jan Köster's avatar Jan Köster
Browse files

background gradiant

parent bce5afd3

editor/widgets/accordion/accordion.cpp

+117 −3
Changes for editor/widgets/accordion/accordion.cpp: 117 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -50,6 +50,13 @@ extern "C" { 
            std::string headerPadding     = "12px 16px";

            std::string headerBorderRadius = "4px";



            // Header background gradient (layers via the background: shorthand)

            std::string headerBgGradientType   = "none";

            std::string headerBgGradientColor1 = "";

            std::string headerBgGradientColor2 = "";

            std::string headerBgGradientAngle  = "";

            std::string headerBgGradientCustom = "";



            // Content / body properties

            std::string contentBgColor    = "var(--blogi-bg)";

            std::string contentTextColor  = "var(--blogi-text)";
@@ -57,6 +64,13 @@ extern "C" { 
            std::string borderColor       = "var(--blogi-border)";

            std::string borderRadius      = "4px";



            // Content background gradient (layers via the background: shorthand)

            std::string contentBgGradientType   = "none";

            std::string contentBgGradientColor1 = "";

            std::string contentBgGradientColor2 = "";

            std::string contentBgGradientAngle  = "";

            std::string contentBgGradientCustom = "";



            // Light mode overrides

            std::string l_headerBgColor    = "";

            std::string l_headerTextColor  = "";
@@ -197,6 +211,11 @@ extern "C" { 
                // Header settings

                addField("header_label", "Header Label", "text", "Toggle Section", "all", nullptr, nullptr, "simple");

                addField("header_bg_color", "Header Background (Dark)", "color_var", nullptr, "all", nullptr, nullptr, "simple");

                addField("header_bg_gradient_type", "Header Background Gradient", "select", nullptr, "desktop", mkOpts({"none","linear","radial"}), nullptr, "simple");

                addField("header_bg_gradient_color_1", "Header Gradient Color 1", "color_var", nullptr, "desktop");

                addField("header_bg_gradient_color_2", "Header Gradient Color 2", "color_var", nullptr, "desktop");

                addField("header_bg_gradient_angle", "Header Gradient Angle", "text", "e.g. 135deg", "desktop");

                addField("header_bg_gradient_custom", "Header Gradient Custom", "text", "e.g. linear-gradient(135deg, #ff0000, #0000ff)", "desktop");

                addField("l_header_bg_color", "Header Background (Light)", "color_var", nullptr, "light", nullptr, nullptr, "simple");

                addField("header_text_color", "Header Text Color (Dark)", "color_var", nullptr, "all", nullptr, nullptr, "simple");

                addField("l_header_text_color", "Header Text Color (Light)", "color_var", nullptr, "light", nullptr, nullptr, "simple");
@@ -207,6 +226,11 @@ extern "C" { 


                // Content settings

                addField("content_bg_color", "Content Background (Dark)", "color_var", nullptr, "all", nullptr, nullptr, "simple");

                addField("content_bg_gradient_type", "Content Background Gradient", "select", nullptr, "desktop", mkOpts({"none","linear","radial"}), nullptr, "simple");

                addField("content_bg_gradient_color_1", "Content Gradient Color 1", "color_var", nullptr, "desktop");

                addField("content_bg_gradient_color_2", "Content Gradient Color 2", "color_var", nullptr, "desktop");

                addField("content_bg_gradient_angle", "Content Gradient Angle", "text", "e.g. 135deg", "desktop");

                addField("content_bg_gradient_custom", "Content Gradient Custom", "text", "e.g. linear-gradient(135deg, #ff0000, #0000ff)", "desktop");

                addField("l_content_bg_color", "Content Background (Light)", "color_var", nullptr, "light", nullptr, nullptr, "simple");

                addField("content_text_color", "Content Text Color (Dark)", "color_var", nullptr, "all", nullptr, nullptr, "simple");

                addField("l_content_text_color", "Content Text Color (Light)", "color_var", nullptr, "light", nullptr, nullptr, "simple");
@@ -273,12 +297,24 @@ extern "C" { 
                element->SetAttribute("header_padding", headerPadding.c_str());

                element->SetAttribute("header_border_radius", headerBorderRadius.c_str());



                element->SetAttribute("header_bg_gradient_type", headerBgGradientType.c_str());

                element->SetAttribute("header_bg_gradient_color_1", headerBgGradientColor1.c_str());

                element->SetAttribute("header_bg_gradient_color_2", headerBgGradientColor2.c_str());

                element->SetAttribute("header_bg_gradient_angle", headerBgGradientAngle.c_str());

                element->SetAttribute("header_bg_gradient_custom", headerBgGradientCustom.c_str());



                element->SetAttribute("content_bg_color", contentBgColor.c_str());

                element->SetAttribute("content_text_color", contentTextColor.c_str());

                element->SetAttribute("content_padding", contentPadding.c_str());

                element->SetAttribute("border_color", borderColor.c_str());

                element->SetAttribute("border_radius", borderRadius.c_str());



                element->SetAttribute("content_bg_gradient_type", contentBgGradientType.c_str());

                element->SetAttribute("content_bg_gradient_color_1", contentBgGradientColor1.c_str());

                element->SetAttribute("content_bg_gradient_color_2", contentBgGradientColor2.c_str());

                element->SetAttribute("content_bg_gradient_angle", contentBgGradientAngle.c_str());

                element->SetAttribute("content_bg_gradient_custom", contentBgGradientCustom.c_str());



                element->SetAttribute("l_header_bg_color", l_headerBgColor.c_str());

                element->SetAttribute("l_header_text_color", l_headerTextColor.c_str());

                element->SetAttribute("l_content_bg_color", l_contentBgColor.c_str());
@@ -327,12 +363,24 @@ extern "C" { 
                val = xml_data->Attribute("header_padding");         if (val) headerPadding = val;

                val = xml_data->Attribute("header_border_radius");   if (val) headerBorderRadius = val;



                val = xml_data->Attribute("header_bg_gradient_type");   if (val) headerBgGradientType = val;

                val = xml_data->Attribute("header_bg_gradient_color_1"); if (val) headerBgGradientColor1 = val;

                val = xml_data->Attribute("header_bg_gradient_color_2"); if (val) headerBgGradientColor2 = val;

                val = xml_data->Attribute("header_bg_gradient_angle");  if (val) headerBgGradientAngle = val;

                val = xml_data->Attribute("header_bg_gradient_custom"); if (val) headerBgGradientCustom = val;



                val = xml_data->Attribute("content_bg_color");       if (val) contentBgColor = val;

                val = xml_data->Attribute("content_text_color");     if (val) contentTextColor = val;

                val = xml_data->Attribute("content_padding");        if (val) contentPadding = val;

                val = xml_data->Attribute("border_color");           if (val) borderColor = val;

                val = xml_data->Attribute("border_radius");          if (val) borderRadius = val;



                val = xml_data->Attribute("content_bg_gradient_type");   if (val) contentBgGradientType = val;

                val = xml_data->Attribute("content_bg_gradient_color_1"); if (val) contentBgGradientColor1 = val;

                val = xml_data->Attribute("content_bg_gradient_color_2"); if (val) contentBgGradientColor2 = val;

                val = xml_data->Attribute("content_bg_gradient_angle");  if (val) contentBgGradientAngle = val;

                val = xml_data->Attribute("content_bg_gradient_custom"); if (val) contentBgGradientCustom = val;



                val = xml_data->Attribute("l_header_bg_color");      if (val) l_headerBgColor = val;

                val = xml_data->Attribute("l_header_text_color");    if (val) l_headerTextColor = val;

                val = xml_data->Attribute("l_content_bg_color");     if (val) l_contentBgColor = val;
@@ -383,12 +431,24 @@ extern "C" { 
                json_object_object_add(obj, "header_padding", json_object_new_string(headerPadding.c_str()));

                json_object_object_add(obj, "header_border_radius", json_object_new_string(headerBorderRadius.c_str()));



                json_object_object_add(obj, "header_bg_gradient_type", json_object_new_string(headerBgGradientType.c_str()));

                json_object_object_add(obj, "header_bg_gradient_color_1", json_object_new_string(headerBgGradientColor1.c_str()));

                json_object_object_add(obj, "header_bg_gradient_color_2", json_object_new_string(headerBgGradientColor2.c_str()));

                json_object_object_add(obj, "header_bg_gradient_angle", json_object_new_string(headerBgGradientAngle.c_str()));

                json_object_object_add(obj, "header_bg_gradient_custom", json_object_new_string(headerBgGradientCustom.c_str()));



                json_object_object_add(obj, "content_bg_color", json_object_new_string(contentBgColor.c_str()));

                json_object_object_add(obj, "content_text_color", json_object_new_string(contentTextColor.c_str()));

                json_object_object_add(obj, "content_padding", json_object_new_string(contentPadding.c_str()));

                json_object_object_add(obj, "border_color", json_object_new_string(borderColor.c_str()));

                json_object_object_add(obj, "border_radius", json_object_new_string(borderRadius.c_str()));



                json_object_object_add(obj, "content_bg_gradient_type", json_object_new_string(contentBgGradientType.c_str()));

                json_object_object_add(obj, "content_bg_gradient_color_1", json_object_new_string(contentBgGradientColor1.c_str()));

                json_object_object_add(obj, "content_bg_gradient_color_2", json_object_new_string(contentBgGradientColor2.c_str()));

                json_object_object_add(obj, "content_bg_gradient_angle", json_object_new_string(contentBgGradientAngle.c_str()));

                json_object_object_add(obj, "content_bg_gradient_custom", json_object_new_string(contentBgGradientCustom.c_str()));



                json_object_object_add(obj, "l_header_bg_color", json_object_new_string(l_headerBgColor.c_str()));

                json_object_object_add(obj, "l_header_text_color", json_object_new_string(l_headerTextColor.c_str()));

                json_object_object_add(obj, "l_content_bg_color", json_object_new_string(l_contentBgColor.c_str()));
@@ -443,6 +503,21 @@ extern "C" { 
                if (json_object_object_get_ex(obj, "header_border_radius", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val && val[0]) headerBorderRadius = val;

                }

                if (json_object_object_get_ex(obj, "header_bg_gradient_type", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val && val[0]) headerBgGradientType = val;

                }

                if (json_object_object_get_ex(obj, "header_bg_gradient_color_1", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) headerBgGradientColor1 = val;

                }

                if (json_object_object_get_ex(obj, "header_bg_gradient_color_2", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) headerBgGradientColor2 = val;

                }

                if (json_object_object_get_ex(obj, "header_bg_gradient_angle", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) headerBgGradientAngle = val;

                }

                if (json_object_object_get_ex(obj, "header_bg_gradient_custom", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) headerBgGradientCustom = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_color", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val && val[0]) contentBgColor = val;

                }
@@ -458,6 +533,21 @@ extern "C" { 
                if (json_object_object_get_ex(obj, "border_radius", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val && val[0]) borderRadius = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_gradient_type", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val && val[0]) contentBgGradientType = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_gradient_color_1", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) contentBgGradientColor1 = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_gradient_color_2", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) contentBgGradientColor2 = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_gradient_angle", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) contentBgGradientAngle = val;

                }

                if (json_object_object_get_ex(obj, "content_bg_gradient_custom", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) contentBgGradientCustom = val;

                }

                if (json_object_object_get_ex(obj, "l_header_bg_color", &val_obj)) {

                    val = json_object_get_string(val_obj); if (val) l_headerBgColor = val;

                }
@@ -536,6 +626,30 @@ extern "C" { 
                    return !v.empty() && v != "none";

                };



                auto gradientCss = [](const std::string &type, const std::string &angle, const std::string &c1, const std::string &c2) -> std::string {

                    if (type == "linear") {

                        std::string ang = angle.empty() ? "135deg" : angle;

                        std::string col1 = c1.empty() ? "rgba(0,0,0,0)" : c1;

                        std::string col2 = c2.empty() ? "rgba(0,0,0,0)" : c2;

                        return "linear-gradient(" + ang + ", " + col1 + ", " + col2 + ")";

                    } else if (type == "radial") {

                        std::string col1 = c1.empty() ? "rgba(0,0,0,0)" : c1;

                        std::string col2 = c2.empty() ? "rgba(0,0,0,0)" : c2;

                        return "radial-gradient(circle, " + col1 + ", " + col2 + ")";

                    }

                    return "";

                };



                std::string headerGradientValue = !headerBgGradientCustom.empty()

                    ? headerBgGradientCustom

                    : gradientCss(headerBgGradientType, headerBgGradientAngle, headerBgGradientColor1, headerBgGradientColor2);

                std::string headerBgResolved = !headerGradientValue.empty() ? headerGradientValue : headerBgColor;



                std::string contentGradientValue = !contentBgGradientCustom.empty()

                    ? contentBgGradientCustom

                    : gradientCss(contentBgGradientType, contentBgGradientAngle, contentBgGradientColor1, contentBgGradientColor2);

                std::string contentBgResolved = !contentGradientValue.empty() ? contentGradientValue : contentBgColor;



                // --- Wrapper ---

                libhtmlpp::HtmlElement wrapper("div");

                wrapper.setAttribute("class", (rc + "-acc").c_str());
@@ -558,8 +672,8 @@ extern "C" { 
                if (iconPosition == "left") hdrStyle += " flex-direction: row;";

                else hdrStyle += " flex-direction: row;";

                hdrStyle += " justify-content: space-between;";

                if (validCss(headerBgColor))    hdrStyle += " background-color: " + headerBgColor + ";";

                else                            hdrStyle += " background-color: transparent;";

                if (validCss(headerBgResolved)) hdrStyle += " background: " + headerBgResolved + ";";

                else                            hdrStyle += " background: transparent;";

                if (validCss(headerTextColor))   hdrStyle += " color: " + headerTextColor + ";";

                if (validCss(headerFontSize))    hdrStyle += " font-size: " + headerFontSize + ";";

                if (validCss(headerFontWeight))  hdrStyle += " font-weight: " + headerFontWeight + ";";
@@ -616,7 +730,7 @@ extern "C" { 
                } else {

                    cStyle += " max-height: 0px; opacity: 0;";

                }

                if (validCss(contentBgColor))   cStyle += " background: " + contentBgColor + ";";

                if (validCss(contentBgResolved)) cStyle += " background: " + contentBgResolved + ";";

                if (validCss(contentTextColor))  cStyle += " color: " + contentTextColor + ";";

                if (validCss(contentPadding))    cStyle += " padding: " + contentPadding + ";";

                content.setAttribute("style", cStyle.c_str());

editor/widgets/accordion/translations.h

+10 −0
Changes for editor/widgets/accordion/translations.h: 10 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -39,6 +39,11 @@ namespace blogi { namespace webedit { namespace accordion_i18n { 
            {"Content Background (Dark)", "Inhalt-Hintergrund (Dunkel)"},

            {"Content Background (Light)", "Inhalt-Hintergrund (Hell)"},

            {"Content Background (Mobile Light)", "Inhalt-Hintergrund (Mobil Hell)"},

            {"Content Background Gradient", "Inhalt-Hintergrund-Farbverlauf"},

            {"Content Gradient Angle", "Inhalt-Verlaufswinkel"},

            {"Content Gradient Color 1", "Inhalt-Verlaufsfarbe 1"},

            {"Content Gradient Color 2", "Inhalt-Verlaufsfarbe 2"},

            {"Content Gradient Custom", "Eigener Inhalt-Farbverlauf"},

            {"Content Padding", "Inhalt-Innenabstand"},

            {"Content Text Color (Dark)", "Inhalt-Textfarbe (Dunkel)"},

            {"Content Text Color (Light)", "Inhalt-Textfarbe (Hell)"},
@@ -47,7 +52,12 @@ namespace blogi { namespace webedit { namespace accordion_i18n { 
            {"Header Background (Dark)", "Kopf-Hintergrund (Dunkel)"},

            {"Header Background (Light)", "Kopf-Hintergrund (Hell)"},

            {"Header Background (Mobile Light)", "Kopf-Hintergrund (Mobil Hell)"},

            {"Header Background Gradient", "Kopf-Hintergrund-Farbverlauf"},

            {"Header Border Radius", "Kopf-Randradius"},

            {"Header Gradient Angle", "Kopf-Verlaufswinkel"},

            {"Header Gradient Color 1", "Kopf-Verlaufsfarbe 1"},

            {"Header Gradient Color 2", "Kopf-Verlaufsfarbe 2"},

            {"Header Gradient Custom", "Eigener Kopf-Farbverlauf"},

            {"Header Font Size", "Kopf-Schriftgröße"},

            {"Header Font Weight", "Kopf-Schriftgewicht"},

            {"Header Label", "Kopf-Beschriftung"},

editor/widgets/article/article.cpp

+132 −0

File changed.

Preview size limit exceeded, changes collapsed.

editor/widgets/article/translations.h

+10 −0
Changes for editor/widgets/article/translations.h: 10 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -36,15 +36,25 @@ namespace blogi { namespace webedit { namespace article_i18n { 
        static const std::unordered_map<std::string, std::string> m = {

            {"Background Color (Dark)", "Hintergrundfarbe (Dunkel)"},

            {"Background Color (Light)", "Hintergrundfarbe (Hell)"},

            {"Background Gradient", "Hintergrund-Farbverlauf"},

            {"Border", "Rahmen"},

            {"Border Radius", "Randradius"},

            {"CSS Class", "CSS-Klasse"},

            {"Custom CSS", "Eigenes CSS"},

            {"Gradient Angle", "Verlaufswinkel"},

            {"Gradient Color 1", "Verlaufsfarbe 1"},

            {"Gradient Color 2", "Verlaufsfarbe 2"},

            {"Gradient Custom", "Eigener Farbverlauf"},

            {"Height", "Höhe"},

            {"Hidden", "Ausgeblendet"},

            {"Margin", "Außenabstand"},

            {"Max Width", "Maximale Breite"},

            {"Min Height", "Minimale Höhe"},

            {"Mobile Background Gradient", "Hintergrund-Farbverlauf (Mobil)"},

            {"Mobile Gradient Angle", "Verlaufswinkel (Mobil)"},

            {"Mobile Gradient Color 1", "Verlaufsfarbe 1 (Mobil)"},

            {"Mobile Gradient Color 2", "Verlaufsfarbe 2 (Mobil)"},

            {"Mobile Gradient Custom", "Eigener Farbverlauf (Mobil)"},

            {"Opacity", "Deckkraft"},

            {"Padding", "Innenabstand"},

            {"Vertical Align", "Vertikale Ausrichtung"},

editor/widgets/button/button.cpp

+235 −3

File changed.

Preview size limit exceeded, changes collapsed.