Mini Kabibi Habibi

layout cxui_crop_bar {
    constant:
        bar_title: '$$$/CxUI/Crop/Bar/Title=Crop Bar';

        bar_button_width:  38;
        bar_button_height: 35;

        text_button_height: bar_button_height - 7;

        drag_bar_width: 12;

    interface:
        includeGenerate: true;
        includeDismiss: false;

    view cxui_bar_window(name: bar_title,
                         placement: place_row,
                         spacing: 0,
                         margin: 0) {
        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,
                horizontal: align_fill,
                vertical: align_fill) {

                TOptional(bind: @includeGenerate,
                          value: true,
                          placement: place_row,
                          margin: [0, gTinyGap, 0, gTinyGap],
                          spacing: gTinyGap,
                          horizontal: align_left,
                          vertical: align_fill) {
                    TIconButton(identifier: @generate, 
                                dataType: 'int32',
                                width: bar_button_width,
                                height: text_button_height,
                                horizontal: align_left,
                                vertical: align_center,
                                button_style: 'context_bar',
                                frame: 2,
                                fontColorFromTheme: true,
                                alignIconTextTogether: true,
                                iconRootName: 'CxUI_GenerativeExpand',
                                layoverText: '$$$/CxUI/Crop/Bar/Button/Generate/Label=Generative Expand',
                                layoverTextPosition: align_right,
                                tooltip: '$$$/CxUI/Crop/Bar/Button/Generate/Tooltip=Generate new content with or without text prompts.');
                }
                row(margin: [0, gTinyGap, 0, gTinyGap],
                    spacing: gGap,
                    horizontal: align_left,
                    vertical: align_fill) {
                    /* Share the same resource with the popup in crop option bar. kAspectRatioPopup = vCrop+2 = 2383 */
                    TPopup(identifier: @ratio,
                           resourceIdentifier: 2382,
                           horizontal: align_left,
                           vertical: align_center,
                           tooltip: '$$$/CxUI/Crop/Bar/Popup/Ratio/Tooltip=Select a preset aspect ratio');
                }
                TPunchButton(identifier: @straighten,
                            dataType: 'int32',
                            width: bar_button_width,
                            height: bar_button_height,
                            horizontal: align_left,
                            vertical: align_center,
                            button_style: 'context_bar',
                            iconRootName: 'CropLevel',
                            tooltip: '$$$/CxUI/Crop/Bar/Button/Straighten/Tooltip=Straighten the image by drawing a line on it');
                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');
                TOptional(bind: @includeDismiss,
                          value: true,
                          placement: place_row,
                          margin: 0,
                          spacing: 0,
                          horizontal: align_left,
                          vertical: align_fill) {
                    row(margin: [gMargin, gGap, gMargin, gGap],
                        horizontal: align_left,
                        vertical: align_fill) {
                        TNarrowGroupSeparator(width: 1,
                                              vertical: align_fill,
                                              style: 'invert');
                    }
                    TIconButton(identifier: @cancel,
                                dataType: 'int32',
                                width: bar_button_width,
                                height: bar_button_height,
                                horizontal: align_left,
                                vertical: align_center,
                                button_style: 'context_bar',
                                fontColorFromTheme: true,
                                layoverText: '$$$/CxUI/Crop/Bar/Button/Cancel/Label=Cancel',
                                tooltip: '$$$/CropCommandOptions/ToolTip/Cancel=Cancel current crop operation');
                    TIconButton(identifier: @commit,
                                dataType: 'int32',
                                width: bar_button_width,
                                height: bar_button_height,
                                horizontal: align_left,
                                vertical: align_center,
                                button_style: 'context_bar_emphasized',
                                fontColorFromTheme: true,
                                layoverText: '$$$/CxUI/Crop/Bar/Button/Done/Label=Done',
                                tooltip: '$$$/CropCommandOptions/ToolTip/OK=Commit current crop operation');
                }
            }
        }
    }
}