Rename all the references from 'popup' to 'content'

Contributes to CURA-5941.
This commit is contained in:
Diego Prado Gesto 2018-12-04 13:14:12 +01:00
parent 692686597c
commit e159cbdb1a
6 changed files with 57 additions and 49 deletions

View file

@ -45,7 +45,7 @@ Cura.ExpandableComponent
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
popupItem: Column contentItem: Column
{ {
id: viewSettings id: viewSettings

View file

@ -6,40 +6,48 @@ import Cura 1.0 as Cura
import QtGraphicalEffects 1.0 // For the dropshadow import QtGraphicalEffects 1.0 // For the dropshadow
// The expandable component has 3 major sub components: // The expandable component has 2 major sub components:
// * The headerItem; Always visible and should hold some info about what happens if the component is expanded // * The headerItem; Always visible and should hold some info about what happens if the component is expanded
// * The popupItem; The content that needs to be shown if the component is expanded. // * The contentItem; The content that needs to be shown if the component is expanded.
// * The icon; An icon that is displayed on the right of the drawer.
Item Item
{ {
id: base id: base
// Enumeration with the different possible alignments of the popup with respect of the headerItem // Enumeration with the different possible alignments of the content with respect of the headerItem
enum PopupAlignment enum ContentAlignment
{ {
AlignLeft, AlignLeft,
AlignRight AlignRight
} }
enum ContentType
{
Floating,
Fixed
}
// The headerItem holds the QML item that is always displayed. // The headerItem holds the QML item that is always displayed.
property alias headerItem: headerItemLoader.sourceComponent property alias headerItem: headerItemLoader.sourceComponent
// The popupItem holds the QML item that is shown when the "open" button is pressed // The contentItem holds the QML item that is shown when the "open" button is pressed
property alias popupItem: popup.contentItem property alias contentItem: content.contentItem
property color popupBackgroundColor: UM.Theme.getColor("action_button") // Defines the type of the contents
property int contentType: ExpandableComponent.ContentType.Floating
property color contentBackgroundColor: UM.Theme.getColor("action_button")
property color headerBackgroundColor: UM.Theme.getColor("action_button") property color headerBackgroundColor: UM.Theme.getColor("action_button")
property color headerHoverColor: UM.Theme.getColor("action_button_hovered") property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
// Defines the alignment of the popup with respect of the headerItem, by default to the right // Defines the alignment of the content with respect of the headerItem, by default to the right
property int popupAlignment: ExpandableComponent.PopupAlignment.AlignRight property int contentAlignment: ExpandableComponent.ContentAlignment.AlignRight
// How much spacing is needed around the popupItem // How much spacing is needed around the contentItem
property alias popupPadding: popup.padding property alias contentPadding: content.padding
// How much spacing is needed for the popupItem by Y coordinate // How much spacing is needed for the contentItem by Y coordinate
property var popupSpacingY: 0 property var contentSpacingY: 0
// How much padding is needed around the header & button // How much padding is needed around the header & button
property alias headerPadding: background.padding property alias headerPadding: background.padding
@ -53,7 +61,7 @@ Item
property alias iconSize: collapseButton.height property alias iconSize: collapseButton.height
// Is the "drawer" open? // Is the "drawer" open?
readonly property alias expanded: popup.visible readonly property alias expanded: content.visible
property alias expandedHighlightColor: expandedHighlight.color property alias expandedHighlightColor: expandedHighlight.color
@ -63,8 +71,8 @@ Item
// On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right. // On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
property alias headerCornerSide: background.cornerSide property alias headerCornerSide: background.cornerSide
// Change the popupItem close behaviour // Change the contentItem close behaviour
property alias popupClosePolicy : popup.closePolicy property alias contentClosePolicy : content.closePolicy
property alias headerShadowColor: shadow.color property alias headerShadowColor: shadow.color
@ -72,15 +80,15 @@ Item
property int shadowOffset: 2 property int shadowOffset: 2
function togglePopup() function toggleContent()
{ {
if (popup.visible) if (content.visible)
{ {
popup.close() content.close()
} }
else else
{ {
popup.open() content.open()
} }
} }
@ -108,7 +116,7 @@ Item
} }
} }
// A highlight that is shown when the popup is expanded // A highlight that is shown when the content is expanded
Rectangle Rectangle
{ {
id: expandedHighlight id: expandedHighlight
@ -140,7 +148,7 @@ Item
{ {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
onClicked: togglePopup() onClicked: toggleContent()
hoverEnabled: true hoverEnabled: true
onEntered: background.color = headerHoverColor onEntered: background.color = headerHoverColor
onExited: background.color = headerBackgroundColor onExited: background.color = headerBackgroundColor
@ -163,21 +171,21 @@ Item
Popup Popup
{ {
id: popup id: content
// Ensure that the popup is located directly below the headerItem // Ensure that the content is located directly below the headerItem
y: background.height + base.shadowOffset + popupSpacingY y: background.height + base.shadowOffset + base.contentSpacingY
// Make the popup aligned with the rest, using the property popupAlignment to decide whether is right or left. // Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
// In case of right alignment, the 3x padding is due to left, right and padding between the button & text. // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
x: popupAlignment == ExpandableComponent.PopupAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0 x: contentAlignment == ExpandableComponent.ContentAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
padding: UM.Theme.getSize("default_margin").width padding: UM.Theme.getSize("default_margin").width
closePolicy: Popup.CloseOnPressOutsideParent closePolicy: Popup.CloseOnPressOutsideParent
background: Cura.RoundedRectangle background: Cura.RoundedRectangle
{ {
cornerSide: Cura.RoundedRectangle.Direction.Down cornerSide: Cura.RoundedRectangle.Direction.Down
color: popupBackgroundColor color: contentBackgroundColor
border.width: UM.Theme.getSize("default_lining").width border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining") border.color: UM.Theme.getColor("lining")
radius: UM.Theme.getSize("default_radius").width radius: UM.Theme.getSize("default_radius").width
@ -187,20 +195,20 @@ Item
onContentItemChanged: onContentItemChanged:
{ {
// Since we want the size of the popup to be set by the size of the content, // Since we want the size of the content to be set by the size of the content,
// we need to do it like this. // we need to do it like this.
popup.width = contentItem.width + 2 * popup.padding content.width = contentItem.width + 2 * content.padding
popup.height = contentItem.height + 2 * popup.padding content.height = contentItem.height + 2 * content.padding
} }
} }
// DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the Popup item. // DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the content item.
// Apparently the order in which these are handled matters and so the height is correctly updated if this is here. // Apparently the order in which these are handled matters and so the height is correctly updated if this is here.
Connections Connections
{ {
// Since it could be that the popup is dynamically populated, we should also take these changes into account. // Since it could be that the content is dynamically populated, we should also take these changes into account.
target: popup.contentItem target: content.contentItem
onWidthChanged: popup.width = popup.contentItem.width + 2 * popup.padding onWidthChanged: content.width = content.contentItem.width + 2 * content.padding
onHeightChanged: popup.height = popup.contentItem.height + 2 * popup.padding onHeightChanged: content.height = content.contentItem.height + 2 * content.padding
} }
} }

View file

@ -93,7 +93,7 @@ Cura.ExpandableComponent
} }
} }
popupItem: Item contentItem: Item
{ {
width: base.width - 2 * UM.Theme.getSize("default_margin").width width: base.width - 2 * UM.Theme.getSize("default_margin").width
height: 200 height: 200

View file

@ -15,10 +15,10 @@ Cura.ExpandableComponent
property string disabledText: catalog.i18nc("@label:Should be short", "Off") property string disabledText: catalog.i18nc("@label:Should be short", "Off")
iconSource: UM.Theme.getIcon("pencil") iconSource: UM.Theme.getIcon("pencil")
popupPadding: UM.Theme.getSize("default_lining").width contentPadding: UM.Theme.getSize("default_lining").width
popupSpacingY: UM.Theme.getSize("narrow_margin").width contentSpacingY: UM.Theme.getSize("narrow_margin").width
popupClosePolicy: Popup.CloseOnEscape contentClosePolicy: Popup.CloseOnEscape
UM.I18nCatalog UM.I18nCatalog
{ {
@ -36,5 +36,5 @@ Cura.ExpandableComponent
id: extrudersModel id: extrudersModel
} }
popupItem: PrintSetupSelectorContents {} contentItem: PrintSetupSelectorContents {}
} }

View file

@ -15,8 +15,8 @@ Cura.ExpandableComponent
property bool isPrinterConnected: Cura.MachineManager.printerConnected property bool isPrinterConnected: Cura.MachineManager.printerConnected
property var outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null property var outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
popupPadding: UM.Theme.getSize("default_lining").width contentPadding: UM.Theme.getSize("default_lining").width
popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft contentAlignment: Cura.ExpandableComponent.ContentAlignment.AlignLeft
iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left") iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
UM.I18nCatalog UM.I18nCatalog
@ -80,7 +80,7 @@ Cura.ExpandableComponent
} }
} }
popupItem: Item contentItem: Item
{ {
id: popup id: popup
width: UM.Theme.getSize("machine_selector_widget_content").width width: UM.Theme.getSize("machine_selector_widget_content").width

View file

@ -11,8 +11,8 @@ Cura.ExpandableComponent
{ {
id: viewSelector id: viewSelector
popupPadding: UM.Theme.getSize("default_lining").width contentPadding: UM.Theme.getSize("default_lining").width
popupAlignment: Cura.ExpandableComponent.PopupAlignment.AlignLeft contentAlignment: Cura.ExpandableComponent.ContentAlignment.AlignLeft
iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left") iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
property var viewModel: UM.ViewModel { } property var viewModel: UM.ViewModel { }
@ -70,7 +70,7 @@ Cura.ExpandableComponent
} }
} }
popupItem: Column contentItem: Column
{ {
id: viewSelectorPopup id: viewSelectorPopup
width: viewSelector.width - 2 * viewSelector.popupPadding width: viewSelector.width - 2 * viewSelector.popupPadding