From 21eae42e8b636f2f86009d23135283b746ff24d5 Mon Sep 17 00:00:00 2001 From: JesusPoderoso Date: Tue, 24 Oct 2023 11:31:18 +0200 Subject: [PATCH] Refs #19532: Reorder elements to fix tabs overlapping Signed-off-by: JesusPoderoso --- qml/TabLayout.qml | 265 +++++++++++++++++++++++----------------------- 1 file changed, 132 insertions(+), 133 deletions(-) diff --git a/qml/TabLayout.qml b/qml/TabLayout.qml index c3b37e59..8de5cfaf 100644 --- a/qml/TabLayout.qml +++ b/qml/TabLayout.qml @@ -64,139 +64,6 @@ Item { } } - ListView { - id: tab_list - anchors.top: parent.top - anchors.left: parent.left - width: contentWidth - height: tabs_height_ - orientation: ListView.Horizontal - model: tabLayout.tab_model_ - interactive: false - - // tab design - delegate: Rectangle { - id: delegated_rect - height: tabs_height_ - width: tabLayout.tab_model_.length == max_tabs_ - ? tabLayout.width / tabLayout.tab_model_.length < tab_icons_size_+ (4*tabs_margins_) - ? current_ == modelData["idx"] ? tab_icons_size_+ (2 * tabs_margins_) - : tabLayout.width / tabLayout.tab_model_.length : tabLayout.width / tabLayout.tab_model_.length - : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length > max_tab_size_ ? max_tab_size_ - : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length < tab_icons_size_+ (4*tabs_margins_) - ? current_ == modelData["idx"] ? tab_icons_size_+ (2 * tabs_margins_) - : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length - : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length - color: current_ == modelData["idx"] ? selected_tab_color_ : not_selected_tab_color_ - property string shadow_color: current_ == modelData["idx"] ? selected_shadow_tab_color_ : not_selected_shadow_tab_color_ - gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { position: 0.0; color: modelData["idx"] == 0 || current_ == modelData["idx"] ? delegated_rect.color : shadow_color} - GradientStop { position: 0.04; color: delegated_rect.color } - GradientStop { position: 0.96; color: delegated_rect.color } - GradientStop { position: 1.0; color: current_ == modelData["idx"] + 1 ? shadow_color : delegated_rect.color} - } - Text { - horizontalAlignment: Qt.AlignLeft; verticalAlignment: Qt.AlignVCenter - anchors.left: parent.left - anchors.leftMargin: tabs_margins_ - anchors.right: close_icon.visible ? close_icon.left : parent.right - anchors.rightMargin: tabs_margins_ - anchors.verticalCenter: parent.verticalCenter - text: modelData["title"] - elide: Text.ElideRight - } - // close tab icon - IconSVG { - id: close_icon - visible: modelData["idx"] == current_ ? true : parent.width > min_tab_size_ - anchors.right: parent.right - anchors.rightMargin: tabs_margins_ - anchors.verticalCenter: parent.verticalCenter - name: "cross" - size: tab_icons_size_ - } - // tab selection action - MouseArea { - anchors.top: parent.top; anchors.bottom: parent.bottom; anchors.left: parent.left; - anchors.right: close_icon.left; anchors.rightMargin: - tabs_margins_ - onClicked: { - refresh_layout(modelData["idx"]) - } - } - // close tab action - MouseArea { - anchors.top: parent.top; anchors.bottom: parent.bottom; anchors.right: parent.right - anchors.left: close_icon.left; anchors.leftMargin: - tabs_margins_ - onClicked: { - // act as close is close icon shown (same expression as in close_icon visible attribute) - if (modelData["idx"] == current_ || parent.width > min_tab_size_) - { - remove_idx(modelData["idx"]) - } - // if not, act as open tab action - else - { - refresh_layout(modelData["idx"]) - } - } - } - } - } - - // Add new tab button - Rectangle { - id: add_new_tab_button - visible: tabLayout.tab_model_.length < max_tabs_ - anchors.right: remain_width_rect.left - anchors.verticalCenter: tab_list.verticalCenter - height: tabs_height_ - width: tabLayout.tab_model_.length == max_tabs_ ? 0 : add_tab_width_ - color: not_selected_tab_color_ - gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { position: 0.0; color: not_selected_shadow_tab_color_} - GradientStop { position: 0.08; color: add_new_tab_button.color } - GradientStop { position: 1.0; color: add_new_tab_button.color } - } - // add new tab icon - IconSVG { - visible: tabLayout.tab_model_.length < max_tabs_ - anchors.centerIn: parent - name: "plus" - size: tab_icons_size_ - } - // add new tab action - MouseArea { - anchors.fill: parent - onClicked: { - if (tabLayout.tab_model_.length < max_tabs_) - tabLayout.create_new_tab() - } - } - } - - // remain space in tab bar handled by this component - Rectangle { - id: remain_width_rect - width: tabLayout.width - add_new_tab_button.width - tab_list.width; height: tabs_height_ - anchors.right: tabLayout.right - anchors.verticalCenter: tab_list.verticalCenter - color: not_selected_tab_color_ - - Rectangle { - width: parent.width >= 80 ? 80 : parent.width; height: parent.height - color: parent.color - gradient: Gradient { - orientation: Gradient.Horizontal - GradientStop { position: 0.0; color: not_selected_shadow_tab_color_} - GradientStop { position: 0.08; color: not_selected_tab_color_ } - GradientStop { position: 1.0; color: not_selected_tab_color_ } - } - } - } - - // stack layout (where idx referred to the tab, which would contain different views) StackLayout { id: stack_layout @@ -336,6 +203,138 @@ Item { } } + ListView { + id: tab_list + anchors.top: parent.top + anchors.left: parent.left + width: contentWidth + height: tabs_height_ + orientation: ListView.Horizontal + model: tabLayout.tab_model_ + interactive: false + + // tab design + delegate: Rectangle { + id: delegated_rect + height: tabs_height_ + width: tabLayout.tab_model_.length == max_tabs_ + ? tabLayout.width / tabLayout.tab_model_.length < tab_icons_size_+ (4*tabs_margins_) + ? current_ == modelData["idx"] ? tab_icons_size_+ (2 * tabs_margins_) + : tabLayout.width / tabLayout.tab_model_.length : tabLayout.width / tabLayout.tab_model_.length + : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length > max_tab_size_ ? max_tab_size_ + : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length < tab_icons_size_+ (4*tabs_margins_) + ? current_ == modelData["idx"] ? tab_icons_size_+ (2 * tabs_margins_) + : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length + : (tabLayout.width - add_new_tab_button.width) / tabLayout.tab_model_.length + color: current_ == modelData["idx"] ? selected_tab_color_ : not_selected_tab_color_ + property string shadow_color: current_ == modelData["idx"] ? selected_shadow_tab_color_ : not_selected_shadow_tab_color_ + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: modelData["idx"] == 0 || current_ == modelData["idx"] ? delegated_rect.color : shadow_color} + GradientStop { position: 0.04; color: delegated_rect.color } + GradientStop { position: 0.96; color: delegated_rect.color } + GradientStop { position: 1.0; color: current_ == modelData["idx"] + 1 ? shadow_color : delegated_rect.color} + } + Text { + horizontalAlignment: Qt.AlignLeft; verticalAlignment: Qt.AlignVCenter + anchors.left: parent.left + anchors.leftMargin: tabs_margins_ + anchors.right: close_icon.visible ? close_icon.left : parent.right + anchors.rightMargin: tabs_margins_ + anchors.verticalCenter: parent.verticalCenter + text: modelData["title"] + elide: Text.ElideRight + } + // close tab icon + IconSVG { + id: close_icon + visible: modelData["idx"] == current_ ? true : parent.width > min_tab_size_ + anchors.right: parent.right + anchors.rightMargin: tabs_margins_ + anchors.verticalCenter: parent.verticalCenter + name: "cross" + size: tab_icons_size_ + } + // tab selection action + MouseArea { + anchors.top: parent.top; anchors.bottom: parent.bottom; anchors.left: parent.left; + anchors.right: close_icon.left; anchors.rightMargin: - tabs_margins_ + onClicked: { + refresh_layout(modelData["idx"]) + } + } + // close tab action + MouseArea { + anchors.top: parent.top; anchors.bottom: parent.bottom; anchors.right: parent.right + anchors.left: close_icon.left; anchors.leftMargin: - tabs_margins_ + onClicked: { + // act as close is close icon shown (same expression as in close_icon visible attribute) + if (modelData["idx"] == current_ || parent.width > min_tab_size_) + { + remove_idx(modelData["idx"]) + } + // if not, act as open tab action + else + { + refresh_layout(modelData["idx"]) + } + } + } + } + } + + // Add new tab button + Rectangle { + id: add_new_tab_button + visible: tabLayout.tab_model_.length < max_tabs_ + anchors.right: remain_width_rect.left + anchors.verticalCenter: tab_list.verticalCenter + height: tabs_height_ + width: tabLayout.tab_model_.length == max_tabs_ ? 0 : add_tab_width_ + color: not_selected_tab_color_ + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: not_selected_shadow_tab_color_} + GradientStop { position: 0.08; color: add_new_tab_button.color } + GradientStop { position: 1.0; color: add_new_tab_button.color } + } + // add new tab icon + IconSVG { + visible: tabLayout.tab_model_.length < max_tabs_ + anchors.centerIn: parent + name: "plus" + size: tab_icons_size_ + } + // add new tab action + MouseArea { + anchors.fill: parent + onClicked: { + if (tabLayout.tab_model_.length < max_tabs_) + tabLayout.create_new_tab() + } + } + } + + // remain space in tab bar handled by this component + Rectangle { + id: remain_width_rect + width: tabLayout.width - add_new_tab_button.width - tab_list.width; height: tabs_height_ + anchors.right: tabLayout.right + anchors.verticalCenter: tab_list.verticalCenter + color: not_selected_tab_color_ + + Rectangle { + width: parent.width >= 80 ? 80 : parent.width; height: parent.height + color: parent.color + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: not_selected_shadow_tab_color_} + GradientStop { position: 0.08; color: not_selected_tab_color_ } + GradientStop { position: 1.0; color: not_selected_tab_color_ } + } + } + } + Dialog { id: domain_id_dialog