From 8dd27c7cbcf49916654084e1e5140845fe2fe46b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Sat, 18 Feb 2023 15:24:39 +0800 Subject: Rounded avatar and fix the margins --- InstructorEditProfile.ui.qml | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/InstructorEditProfile.ui.qml b/InstructorEditProfile.ui.qml index 135e839..3eb9070 100644 --- a/InstructorEditProfile.ui.qml +++ b/InstructorEditProfile.ui.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 Flickable { property bool doesntEmbed: Qt.platform.os === "android" @@ -78,15 +79,15 @@ Flickable { } ColumnLayout { - Layout.topMargin: 41.6 - Layout.leftMargin: 32.8 - Layout.rightMargin: 32.8 + Layout.topMargin: 16 + Layout.leftMargin: 20 + Layout.rightMargin: 20 Layout.bottomMargin: 16 Label { Layout.fillWidth: true + Layout.bottomMargin: 9 text: qsTr("Profile picture") - padding: 16 color: "#747579" font { @@ -97,9 +98,27 @@ Flickable { RowLayout { - Image { - source: "https://eduport.webestica.com/assets/images/avatar/07.jpg" - fillMode: Image.PreserveAspectFit + Item { + Layout.rightMargin: 25.6 + implicitWidth: 82 + implicitHeight: 82 + + Image { + id: avatar + source: "https://eduport.webestica.com/assets/images/avatar/07.jpg" + sourceSize { + width: 82 + height: 82 + } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: 82 + height: 82 + radius: 82 + } + } + } } Button { -- cgit v1.2.3