Mini Kabibi Habibi

layout cxui_gradient_bar {
    constant:
        bar_title: '$$$/CxUI/Gradient/Bar/Title=Gradient Bar';

        bar_button_width:  38;
        bar_button_height: 35;
        preview_button_width : 87;
        preview_button_height: 22;
        popup_button_width: 45;
        drag_bar_width: 12;
        color_patch_diameter: 26;

    interface:
        showColorPatch: false;

    view cxui_bar_window(name: bar_title,
                         placement: place_row,
                         spacing: 0,
                         margin: 0,
                         font: staticSmallFont) {
        cxui_background_view(placement: place_row,
                             margin: 0,
                             spacing: 0,
                             horizontal: align_fill,
                             vertical: align_fill) {
            cxui_drag_bar(identifier: @drag,
                          width: drag_bar_width,
                          horizontal: align_left,
                          vertical: align_fill);
            TView(width: 3);
            row(margin: 0,
                spacing: 0,
                child_vertical: align_center,
                horizontal: align_fill,
                vertical: align_fill) {
                TModernGradientView(
                    identifier  : @preview,
                    vertical    : align_center,
                    width       : preview_button_width,
                    height      : preview_button_height);
                /* mCXUIGradientType = 816 */
                ZMenuPopup( resourceIdentifier  : 816,
                            identifier          : @type_popup,
                            tooltip             : '$$$/CxUI/Gradient/Bar/GradientType/ToolTips=Set how gradient colors will be displayed on canvas');
                TOptional(bind: @showColorPatch) {
                    row(margin: [0, 10, 0, 0],
                        child_vertical: align_center,
                        horizontal: align_fill,
                        vertical: align_fill) {
                        TCircleColorPatch(identifier: @selected_color,
                                          height: color_patch_diameter,
                                          width: color_patch_diameter,
                                          tooltip: '$$$/CxUI/Gradient/Bar/ColorPatch/Tooltip=Displays the color of the selected color stop.');
                    }
                }
                TIconButton(identifier: @reverse,
                            dataType: 'int32',
                            width: bar_button_width,
                            height: bar_button_height,
                            horizontal: align_left,
                            vertical: align_center,
                            iconRootName: 'GradientReverse',
                            tooltip: '$$$/CxUI/Gradient/Bar/Button/Reverse/Tooltip=Reverse the gradient colors');
                TIconButton(identifier: @properties_panel,
                            dataType: 'int32',
                            width: bar_button_width,
                            height: bar_button_height,
                            horizontal: align_left,
                            vertical: align_center,
                            iconRootName: 'CxUI_Properties',
                            tooltip: '$$$/CxUI/Gradient/Bar/Button/Properties/Tooltip=Open the properties panel');
                TPunchButton(identifier: @more,
                             dataType: 'int32',
                             width: bar_button_width,
                             height: bar_button_height,
                             horizontal: align_left,
                             vertical: align_center,
                             button_style: 'context_bar',
                             iconRootName: 'CxUI_More',
                             tooltip: '$$$/CxUI/Bar/Common/Button/More/Tooltip=More options');
            }
        }
    }
}