diff --git a/src/app/commoncomponents/MaterialButton.qml b/src/app/commoncomponents/MaterialButton.qml index 402ce2aab..83de3912f 100644 --- a/src/app/commoncomponents/MaterialButton.qml +++ b/src/app/commoncomponents/MaterialButton.qml @@ -46,6 +46,8 @@ AbstractButton { iconSource.length !== 0 property var preferredWidth + property real textLeftPadding + property real textRightPadding Binding on width { when: root.preferredWidth !== undefined || @@ -173,6 +175,8 @@ AbstractButton { Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter + leftPadding: textLeftPadding + rightPadding: textRightPadding text: root.text font.weight: Font.Medium elide: Text.ElideRight diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml index f1b41da91..509e05618 100644 --- a/src/app/constant/JamiTheme.qml +++ b/src/app/constant/JamiTheme.qml @@ -434,11 +434,17 @@ Item { property real tipBoxTitleFontSize: calcSize(13) property real tipBoxContentFontSize: calcSize(12) + //Popups + property real popuptextSize: calcSize(15) + property real popupButtonsMargin: 20 // MaterialLineEdit property real materialLineEditPointSize: calcSize(10 + fontSizeOffset) property real materialLineEditPadding: 16 + //MaterialButton + property real buttontextPadding: 10 + // UsernameLineEdit property real usernameLineEditPointSize:calcSize(9 + fontSizeOffset) property real usernameLineEditlookupInterval: 200 diff --git a/src/app/wizardview/components/NoUsernamePopup.qml b/src/app/wizardview/components/NoUsernamePopup.qml index 37e28d31b..077426fc9 100644 --- a/src/app/wizardview/components/NoUsernamePopup.qml +++ b/src/app/wizardview/components/NoUsernamePopup.qml @@ -28,49 +28,62 @@ import Qt5Compat.GraphicalEffects import "../../commoncomponents" -BaseModalDialog { +Popup { id: root - width: 350 - height: 240 + + width: popupContent.width + height: popupContent.height + + parent: Overlay.overlay + + // center in parent + x: Math.round((parent.width - width) / 2) + y: Math.round((parent.height - height) / 2) signal joinClicked - popupContent: Item { + modal:true + padding: 0 + + visible: false + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside + + Rectangle { + id: container + + anchors.fill: parent + radius: JamiTheme.modalPopupRadius + color: JamiTheme.secondaryBackgroundColor ColumnLayout { + id: popupContent - anchors.fill: parent - anchors.bottomMargin: 30 + Layout.alignment: Qt.AlignCenter PushButton { id: btnClose - Layout.alignment: Qt.AlignRight + Layout.alignment: Qt.AlignRight width: 30 height: 30 imageContainerWidth: 30 imageContainerHeight : 30 - Layout.rightMargin: 8 - + Layout.margins: 8 radius : 5 - imageColor: "grey" normalColor: JamiTheme.transparentColor - source: JamiResources.round_close_24dp_svg - onClicked: { root.visible = false } } Text { - Layout.preferredWidth: 280 Layout.leftMargin: 20 Layout.rightMargin: 20 Layout.alignment: Qt.AlignCenter horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: 15 + font.pixelSize: JamiTheme.popuptextSize font.weight: Font.Medium wrapMode: Text.WordWrap color: JamiTheme.textColor @@ -78,12 +91,13 @@ BaseModalDialog { } RowLayout{ - + Layout.margins: JamiTheme.popupButtonsMargin Layout.alignment: Qt.AlignCenter MaterialButton { - preferredWidth: 96 - Layout.alignment: Qt.AlignCenter + preferredWidth: text.contentWidth + textLeftPadding: JamiTheme.buttontextPadding + textRightPadding: JamiTheme.buttontextPadding secondary: true color: JamiTheme.secAndTertiTextColor secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor @@ -96,14 +110,55 @@ BaseModalDialog { } MaterialButton { - preferredWidth: 170 - Layout.alignment: Qt.AlignCenter + preferredWidth: text.contentWidth + textLeftPadding: JamiTheme.buttontextPadding + textRightPadding: JamiTheme.buttontextPadding Layout.leftMargin: 20 primary:true text: JamiStrings.chooseAUsername onClicked: root.close() } } + + } + } + + background: Rectangle { + color: JamiTheme.transparentColor + } + + Overlay.modal: Rectangle { + color: JamiTheme.transparentColor + // Color animation for overlay when pop up is shown. + ColorAnimation on color { + to: JamiTheme.popupOverlayColor + duration: 500 + } + } + + DropShadow { + z: -1 + width: root.width + height: root.height + horizontalOffset: 3.0 + verticalOffset: 3.0 + radius: container.radius * 4 + color: JamiTheme.shadowColor + source: container + transparentBorder: true + } + + enter: Transition { + NumberAnimation { + properties: "opacity"; from: 0.0; to: 1.0 + duration: JamiTheme.shortFadeDuration + } + } + + exit: Transition { + NumberAnimation { + properties: "opacity"; from: 1.0; to: 0.0 + duration: JamiTheme.shortFadeDuration } } }