diff --git a/client/ui/controllers/installController.cpp b/client/ui/controllers/installController.cpp index 63510d1a0..7e32ff896 100644 --- a/client/ui/controllers/installController.cpp +++ b/client/ui/controllers/installController.cpp @@ -113,8 +113,7 @@ void InstallController::installServer(DockerContainer container, QJsonObject &co ContainerProps::containerHumanNames().value(container) + tr(" is already installed on the server. "); } if (installedContainers.size() > 1) { - finishMessage += tr("\nAlready installed containers were found on the server. " - "All installed containers have been added to the application"); + finishMessage += tr("\nAdded containers that were already installed on the server"); } if (errorCode == ErrorCode::NoError) { diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index 3a8a41754..2419b51a6 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -114,7 +114,7 @@ DrawerType { BasicButtonType { Layout.fillWidth: true - Layout.topMargin: 8 + Layout.topMargin: 24 defaultColor: "transparent" hoveredColor: Qt.rgba(1, 1, 1, 0.08) @@ -123,7 +123,7 @@ DrawerType { textColor: "#D7D8DB" borderWidth: 1 - text: qsTr("Show content") + text: qsTr("Show connection settings") onClicked: { configContentDrawer.visible = true diff --git a/client/ui/qml/Controls2/BackButtonType.qml b/client/ui/qml/Controls2/BackButtonType.qml index 67ffbd9cf..f10447450 100644 --- a/client/ui/qml/Controls2/BackButtonType.qml +++ b/client/ui/qml/Controls2/BackButtonType.qml @@ -23,6 +23,9 @@ Item { image: backButtonImage imageColor: "#D7D8DB" + implicitWidth: 40 + implicitHeight: 40 + onClicked: { if (backButtonFunction && typeof backButtonFunction === "function") { backButtonFunction() diff --git a/client/ui/qml/Controls2/BasicButtonType.qml b/client/ui/qml/Controls2/BasicButtonType.qml index b0c39ddcb..a5cde9519 100644 --- a/client/ui/qml/Controls2/BasicButtonType.qml +++ b/client/ui/qml/Controls2/BasicButtonType.qml @@ -90,6 +90,9 @@ Button { anchors.centerIn: parent Image { + Layout.preferredHeight: 20 + Layout.preferredWidth: 20 + source: root.imageSource visible: root.imageSource === "" ? false : true diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index 2feb5e17d..b91f0b7a7 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/client/ui/qml/Controls2/DropDownType.qml @@ -24,6 +24,8 @@ Item { property string rootButtonImage: "qrc:/images/controls/chevron-down.svg" property string rootButtonImageColor: "#D7D8DB" property string rootButtonBackgroundColor: "#1C1D21" + property string rootButtonBackgroundHoveredColor: "#1C1D21" + property string rootButtonBackgroundPressedColor: "#1C1D21" property string rootButtonHoveredBorderColor: "#494B50" property string rootButtonDefaultBorderColor: "#2C2D30" @@ -71,6 +73,10 @@ Item { Behavior on border.color { PropertyAnimation { duration: 200 } } + + Behavior on color { + PropertyAnimation { duration: 200 } + } } RowLayout { @@ -112,6 +118,9 @@ Item { ImageButtonType { Layout.rightMargin: 16 + implicitWidth: 40 + implicitHeight: 40 + hoverEnabled: false image: rootButtonImage imageColor: rootButtonImageColor @@ -126,12 +135,20 @@ Item { onEntered: { if (menu.visible === false) { rootButtonBackground.border.color = rootButtonHoveredBorderColor + rootButtonBackground.color = rootButtonBackgroundHoveredColor } } onExited: { if (menu.visible === false) { rootButtonBackground.border.color = rootButtonDefaultBorderColor + rootButtonBackground.color = rootButtonBackgroundColor + } + } + + onPressed: { + if (menu.visible === false) { + rootButtonBackground.color = pressed ? rootButtonBackgroundPressedColor : entered ? rootButtonHoveredBorderColor : rootButtonDefaultBorderColor } } diff --git a/client/ui/qml/Controls2/Header2Type.qml b/client/ui/qml/Controls2/Header2Type.qml index 9433f52a6..4d812f6ce 100644 --- a/client/ui/qml/Controls2/Header2Type.qml +++ b/client/ui/qml/Controls2/Header2Type.qml @@ -31,6 +31,9 @@ Item { ImageButtonType { id: headerActionButton + implicitWidth: 40 + implicitHeight: 40 + image: root.actionButtonImage imageColor: "#D7D8DB" diff --git a/client/ui/qml/Controls2/HeaderType.qml b/client/ui/qml/Controls2/HeaderType.qml index b4af37844..d0ed3418c 100644 --- a/client/ui/qml/Controls2/HeaderType.qml +++ b/client/ui/qml/Controls2/HeaderType.qml @@ -36,6 +36,9 @@ Item { ImageButtonType { id: headerActionButton + implicitWidth: 40 + implicitHeight: 40 + Layout.alignment: Qt.AlignRight image: root.actionButtonImage diff --git a/client/ui/qml/Controls2/ImageButtonType.qml b/client/ui/qml/Controls2/ImageButtonType.qml index 55e19f427..1ab575113 100644 --- a/client/ui/qml/Controls2/ImageButtonType.qml +++ b/client/ui/qml/Controls2/ImageButtonType.qml @@ -15,11 +15,8 @@ Button { property string imageColor: "#878B91" property string disableImageColor: "#2C2D30" - property int backGroudRadius: 12 - property int implicitSize: 40 - - implicitWidth: implicitSize - implicitHeight: implicitSize + property alias backgroundColor: background.color + property alias backgroundRadius: background.radius hoverEnabled: true @@ -34,16 +31,16 @@ Button { id: background anchors.fill: parent - radius: backGroudRadius color: { if (root.enabled) { - if(root.pressed) { + if (root.pressed) { return pressedColor } return hovered ? hoveredColor : defaultColor } return defaultColor } + radius: 12 Behavior on color { PropertyAnimation { duration: 200 } } diff --git a/client/ui/qml/Controls2/LabelWithButtonType.qml b/client/ui/qml/Controls2/LabelWithButtonType.qml index 7a1489c03..bb051f765 100644 --- a/client/ui/qml/Controls2/LabelWithButtonType.qml +++ b/client/ui/qml/Controls2/LabelWithButtonType.qml @@ -119,6 +119,9 @@ Item { ImageButtonType { id: rightImage + implicitWidth: 40 + implicitHeight: 40 + hoverEnabled: false image: rightImageSource imageColor: rightImageColor diff --git a/client/ui/qml/Controls2/TextFieldWithHeaderType.qml b/client/ui/qml/Controls2/TextFieldWithHeaderType.qml index 3a3f5a1a3..b09ae00d2 100644 --- a/client/ui/qml/Controls2/TextFieldWithHeaderType.qml +++ b/client/ui/qml/Controls2/TextFieldWithHeaderType.qml @@ -167,7 +167,7 @@ Item { } onEntered: { - backgroud.border.color = getBackgroundBorderColor(bgBorderHoveredColor) + backgroud.border.color = getBackgroundBorderColor(bgBorderHoveredColor) } diff --git a/client/ui/qml/Controls2/TextTypes/ButtonTextType.qml b/client/ui/qml/Controls2/TextTypes/ButtonTextType.qml index e3b14e63a..94b480810 100644 --- a/client/ui/qml/Controls2/TextTypes/ButtonTextType.qml +++ b/client/ui/qml/Controls2/TextTypes/ButtonTextType.qml @@ -6,7 +6,7 @@ Text { color: "#D7D8DB" font.pixelSize: 16 - font.weight: 500 + font.weight: 600 font.family: "PT Root UI VF" wrapMode: Text.WordWrap diff --git a/client/ui/qml/Controls2/TopCloseButtonType.qml b/client/ui/qml/Controls2/TopCloseButtonType.qml index ed89b5a6b..4a7382142 100644 --- a/client/ui/qml/Controls2/TopCloseButtonType.qml +++ b/client/ui/qml/Controls2/TopCloseButtonType.qml @@ -23,6 +23,9 @@ Popup { image: "qrc:/images/svg/close_black_24dp.svg" imageColor: "#D7D8DB" + implicitWidth: 40 + implicitHeight: 40 + onClicked: { PageController.goToDrawerRootPage() } diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 016ad3e3b..d395cd225 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -81,6 +81,20 @@ PageType { } } + onEntered: { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor + collapsedButtonHeader.opacity = 0.8 + } + onExited: { + collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 1 + } + onPressedChanged: { + collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor + collapsedButtonHeader.opacity = 0.7 + } + + onClicked: { if (buttonContent.state === "collapsed") { buttonContent.state = "expanded" @@ -202,6 +216,7 @@ PageType { spacing: 0 Header1TextType { + id: collapsedButtonHeader Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo maximumLineCount: 2 @@ -209,15 +224,33 @@ PageType { text: root.defaultServerName horizontalAlignment: Qt.AlignHCenter + + Behavior on opacity { + PropertyAnimation { duration: 200 } + } } - Image { - Layout.preferredWidth: 18 - Layout.preferredHeight: 18 + ImageButtonType { + id: collapsedButtonChevron + + Layout.leftMargin: 8 + + hoverEnabled: false + image: "qrc:/images/controls/chevron-down.svg" + imageColor: "#d7d8db" - Layout.leftMargin: 12 + icon.width: 18 + icon.height: 18 + backgroundRadius: 16 + horizontalPadding: 4 + topPadding: 4 + bottomPadding: 3 - source: "qrc:/images/controls/chevron-down.svg" + onClicked: { + if (buttonContent.state === "collapsed") { + buttonContent.state = "expanded" + } + } } } @@ -279,8 +312,10 @@ PageType { rootButtonImageColor: "#0E0E11" rootButtonBackgroundColor: "#D7D8DB" + rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8) + rootButtonBackgroundPressedColor: Qt.rgba(215, 216, 219, 0.65) rootButtonHoveredBorderColor: "transparent" - rootButtonPressedBorderColor: "transparent" + rootButtonDefaultBorderColor: "transparent" rootButtonTextTopMargin: 8 rootButtonTextBottomMargin: 8 @@ -463,6 +498,8 @@ PageType { DividerType { Layout.fillWidth: true + Layout.leftMargin: 0 + Layout.rightMargin: 0 } } } diff --git a/client/ui/qml/Pages2/PageSetupWizardEasy.qml b/client/ui/qml/Pages2/PageSetupWizardEasy.qml index 4f94e9851..04814c5c0 100644 --- a/client/ui/qml/Pages2/PageSetupWizardEasy.qml +++ b/client/ui/qml/Pages2/PageSetupWizardEasy.qml @@ -62,6 +62,7 @@ PageType { id: header implicitWidth: parent.width + headerTextMaximumLineCount: 10 headerText: qsTr("What is the level of internet control in your region?") } @@ -145,14 +146,13 @@ PageType { Item { implicitWidth: 1 - implicitHeight: 1 + implicitHeight: 54 } BasicButtonType { id: continueButton implicitWidth: parent.width - anchors.topMargin: 24 text: qsTr("Continue") diff --git a/client/ui/qml/Pages2/PageShare.qml b/client/ui/qml/Pages2/PageShare.qml index a03b3717f..00b653107 100644 --- a/client/ui/qml/Pages2/PageShare.qml +++ b/client/ui/qml/Pages2/PageShare.qml @@ -219,13 +219,14 @@ PageType { if (accessTypeSelector.currentIndex !== 0) { shareConnectionDrawer.headerText = qsTr("Accessing ") + serverSelector.text - shareConnectionDrawer.configContentHeaderText = qsTr("File with connection settings to ") + serverSelector.text + shareConnectionDrawer.configContentHeaderText = qsTr("File with accessing settings to ") + serverSelector.text } serverSelector.menuVisible = false } Component.onCompleted: { handler() + serverSelector.severSelectorIndexChanged() } function handler() { @@ -240,12 +241,14 @@ PageType { DropDownType { id: protocolSelector + visible: accessTypeSelector.currentIndex === 0 + Layout.fillWidth: true Layout.topMargin: 16 drawerHeight: 0.5 - descriptionText: qsTr("Protocols") + descriptionText: qsTr("Protocol") headerText: qsTr("Protocol") listView: ListViewWithRadioButtonType {