@ -4,6 +4,8 @@ import QtQuick.Controls 2.12
import QtQuick . Layouts 1.12
import QtGraphicalEffects 1.12 / / C o l o r O v e r l a y
import FontAwesome 1.0
import "../components" as NeroshopComponents
Page {
@ -11,25 +13,53 @@ Page {
background: Rectangle {
color: "transparent"
}
property var sellerModel: null / / a c c o u n t M o d e l
property var listingModel: null
property var ratingsModel: null
property var userModel: Backend . getUser ( productModel . seller_id ) / / a c c o u n t M o d e l
property var productModel: null / / < - t h e p r o d u c t l i s t i n g t h a t r e d i r e c t e d u s e r t o t h i s p r o f i l e p a g e
property var ratingsModel: Backend . getSellerRatings ( productModel . seller_id )
property var listingsModel: null / /Backend.getListingsBySearchTerm(productModel.seller_id)/ / or Backend . getInventory ( productModel . seller_id )
ColumnLayout {
width: parent . width
spacing: 0 / / 1 0 - t o p M a r g i n a l r e a d y s e t f o r p r o f i l e P i c t u r e R e c t
RowLayout {
spacing: 24
Column {
/ / B a c k b u t t o n
Button {
id: backButton
Layout.alignment: Qt . AlignTop | Qt . AlignLeft
Layout.leftMargin: 24 ; Layout.topMargin: 20
implicitWidth: contentItem . contentWidth + 40 ; implicitHeight: contentItem . contentHeight + 20
text: qsTr ( "← Back" ) / / " ⇦ B a c k " )
hoverEnabled: true
contentItem: Text {
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
text: backButton . text
color: "#ffffff"
}
background: Rectangle {
radius: 5
color: backButton . hovered ? NeroshopComponents.Style.neroshopPurpleColor : "#50446f"
}
onClicked: {
pageLoader . setSource ( "qrc:/qml/pages/ProductPage.qml" , { "model" : productModel } )
}
MouseArea {
anchors.fill: parent
onPressed: mouse . accepted = false
cursorShape: Qt . PointingHandCursor
}
}
ColumnLayout {
Layout.alignment: Qt . AlignTop | Qt . AlignLeft
Layout.leftMargin: 24 ; Layout.topMargin: 20
Layout.leftMargin: 24 ; Layout.rightMargin: Layout . leftMargin
Layout.topMargin: 20
Layout.fillWidth: true
Rectangle {
id: profileCard
width: 400 / /Layout.fillWidth: true/ / width: parent . width
height: 500 / / L a y o u t . p r e f e r r e d H e i g h t : 2 0 0
Layout.fillWidth: true / /width: parent.width/ / width: 400 / /
Layout.preferredHeight: 300 / /height: 500/ /
color: ( bannerImage . status != Image . Ready ) ? "royalblue" : "transparent"
radius: 7
@ -80,17 +110,19 @@ Page {
width: 128 / / L a y o u t . p r e f e r r e d W i d t h : 1 2 8
height: width / / L a y o u t . p r e f e r r e d H e i g h t : L a y o u t . p r e f e r r e d W i d t h
color: infoRect . color / / o r i g i n a l l y n o c o l o r w a s s e t f o r t h i s s o t h e d e f a u l t w a s w h i t e
radius: 5
border.width: 7
border.color: NeroshopComponents . Style . getColorsFromTheme ( ) [ 1 ] / /"#343434"/ / "#808080" / /"#0e0e11"/ / "#000000" / / " # f f f f f f "
Image {
id: profilePicture
source: "file:///" + "/home/sid/Downloads/monero-geometric-logo-800x800.png" / / " p a t h / t o / p r o f i l e _ p i c t u r e . j p g "
source: ! userModel . hasOwnProperty ( "avatar" ) ? "qrc:/assets/images/appicons/LogoLight250x250.png" : "image://avatar?id=%1&image_id=%2" . arg ( userModel . key ) . arg ( userModel . avatar . name )
anchors.centerIn: parent
width: parent . width - profilePictureRect . border . width ; height: width
width: parent . width - ( profilePictureRect . border . width * 2 ) ; height: width
fillMode: Image . PreserveAspectFit
mipmap: true
asynchronous: true
/ / A p p l y r o u n d e d r e c t a n g l e m a s k ( r a d i u s )
layer.enabled: true
layer.effect: OpacityMask {
@ -103,28 +135,79 @@ Page {
id: nameIdColumn
anchors.top: profilePictureRect . bottom
anchors.left: profilePictureRect . left
anchors.leftMargin: 3
/ / a n c h o r s . h o r i z o n t a l C e n t e r : p r o f i l e P i c t u r e R e c t . h o r i z o n t a l C e n t e r
/ / a n c h o r s . t o p : p a r e n t . t o p ; a n c h o r s . t o p M a r g i n : 1 0 / / 2 0 / / a n c h o r s . v e r t i c a l C e n t e r : p a r e n t . v e r t i c a l C e n t e r
anchors.leftMargin: profilePictureRect . border . width
/ / d i s p l a y n a m e
Text {
text: "layter" / / R e p l a c e w i t h a c t u a l u s e r n a m e
text: userModel . hasOwnProperty ( "display_name" ) ? userModel.display_name : ""
font.pixelSize: 16 / / 3 2
/ / f o n t . b o l d : t r u
font.bold: tru
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
/ / u s e r i d
TextArea {
text: "5AWjbNUBf2EbbCw2v6ChrJUCdeRjfpcH5Y63wpWz37X6ZEiU9gvGeFqQpZczeVtZnd479FE4SDvKy7yF8ozj99QTRzcTY3a" / / R e p l a c e w i t h a c t u a l u s e r I D
text: userModel . monero_address
font.pixelSize: 16
/ / f o n t . b o l d : t r u e
color: "dimgray
color: ( NeroshopComponents . Style . darkTheme ) ? "#d0d0d0" : "#464646
readOnly: true
wrapMode: Text . Wrap / / T e x t . W r a p m o v e s t e x t t o t h e n e w l i n e w h e n i t r e a c h e s t h e w i d t h
selectByMouse: true
/ / b a c k g r o u n d : R e c t a n g l e { c o l o r : " t r a n s p a r e n t " }
padding: 0 ; leftPadding: 0
width: 200
width: Math . min ( infoRect . width , mainWindow . minimumWidth ) / / 2 0 0
}
}
/ / b u t t o n s R o w
Row {
id: buttonsRow
layoutDirection: Qt . RightToLeft
anchors.right: parent . right ; anchors.rightMargin: 24
anchors.top: profilePictureRect . top
anchors.topMargin: profilePicture . height / 3
spacing: 10
property real buttonRadius: 6
property string buttonColor: infoRect . color / / N e r o s h o p C o m p o n e n t s . S t y l e . n e r o s h o p P u r p l e C o l o r
Button {
width: contentItem . contentWidth + 30 ; height: contentItem . contentHeight + 20
text: qsTr ( "Message" )
background: Rectangle {
color: buttonsRow . buttonColor
radius: buttonsRow . buttonRadius
}
contentItem: Text {
text: parent . text
color: "#ffffff"
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
}
onClicked: { }
MouseArea {
anchors.fill: parent
onPressed: mouse . accepted = false
cursorShape: Qt . PointingHandCursor
}
}
Button {
width: contentItem . contentWidth + 30 ; height: contentItem . contentHeight + 20
text: qsTr ( "Rate" )
background: Rectangle {
color: buttonsRow . buttonColor
radius: buttonsRow . buttonRadius
}
contentItem: Text {
text: parent . text
color: "#ffffff"
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
}
onClicked: { }
MouseArea {
anchors.fill: parent
onPressed: mouse . accepted = false
cursorShape: Qt . PointingHandCursor
}
}
}
/ / s t a t s c o l u m n
@ -133,34 +216,45 @@ Page {
anchors.top: nameIdColumn . bottom
anchors.topMargin: 10
anchors.left: profilePictureRect . left
anchors.leftMargin: 1
anchors.leftMargin: profilePictureRect . border . width
property int textIconSpacing: 5
property real iconSize: 24
width: profileCard . width
/ / s t a t s r o w
Row {
id: statsRowActual
spacing: 100
/ / r e p u t a t i o n
Column {
spacing: statsRow . textIconSpacing
Text {
/ / D e p r e c a t e d / R e p l a c e d w i t h h i n t ( t o o l t i p ) . R e m o v e t h i s s o o n !
/ * T e x t {
text: "Reputation"
font.pixelSize: 16 / / 3 2
/ / f o n t . b o l d : t r u e
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
} * /
Row { / / p l a c e t h u m b s i n t h i s r o w
spacing: 5
Rectangle {
/ / a n c h o r s . v e r t i c a l C e n t e r : p a r e n t . v e r t i c a l C e n t e r
/ / a n c h o r s . l e f t : p a r e n t . l e f t ; a n c h o r s . l e f t M a r g i n : w i d t h / 2
width: 100 ; height: 26
id: reputationRect
width: 100 ; height: 32
color: "transparent"
border.color: "#ffffff"
radius: 3
property bool hovered: false
Row {
anchors. fill : parent
anchors. centerIn : parent
spacing: 5
Item {
id: ratingIconRect
anchors.verticalCenter: parent . verticalCenter
width: childrenRect . width
height: childrenRect . height
Image {
id: ratingIcon
source: "qrc:/assets/images/rating.png"
@ -177,147 +271,258 @@ Page {
}
Text {
text: "97%"
anchors.verticalCenter: parent . verticalCenter
text: Backend . getSellerReputation ( ratingsModel ) + "%"
font.pixelSize: 16
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
}
NeroshopComponents . Hint {
visible: parent . hovered
height: contentHeight + 20 ; width: contentWidth + 20
text: qsTr ( "Reputation" )
pointer.visible: false ; / / d e l a y : 0
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: parent . hovered = true
onExited: parent . hovered = false
}
}
}
/ / p r o d u c t s
Column {
spacing: statsRow . textIconSpacing
Text {
text: "Products" / / R e p l a c e w i t h a c t u a l u s e r n a m e
font.pixelSize: 16 / / 3 2
/ / f o n t . b o l d : t r u e
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
Rectangle {
/ / a n c h o r s . v e r t i c a l C e n t e r : p a r e n t . v e r t i c a l C e n t e r
/ / a n c h o r s . l e f t : p a r e n t . l e f t ; a n c h o r s . l e f t M a r g i n : w i d t h / 2
width: 64 ; height: 26
color: "transparent"
border.color: "#ffffff"
radius: 3
/ / t h u m b s u p / t h u m b s d o w n
Rectangle {
anchors.top: parent . children [ 0 ] . top
width: 50 + thumbsUpCountText . contentWidth ; height: reputationRect . height
color: "transparent"
border.color: "#ffffff"
radius: 3
Row {
anchors.centerIn: parent
spacing: 5
Item {
id: thumbsUpImageItem
anchors.verticalCenter: parent . verticalCenter
width: childrenRect . width / / s t a t s R o w . i c o n S i z e
height: childrenRect . height
visible: ( thumbsUpImage . status === Image . Ready )
Image {
id: productIcon
source: "qrc:/assets/images/ open_parcel .png"
id: thumbsUpImage
source: "qrc:/assets/images/ thumbs_up .png"
width: statsRow . iconSize ; height: width
mipmap: tru
/ / m i p m a p : t r u
}
ColorOverlay {
anchors.fill: productIcon
source: productIcon
color: "#4169e1"
visible: productIcon . visible
id: thumbsUpImageOverlayer
anchors.fill: thumbsUpImage
source: thumbsUpImage
color: "green" / / " # 5 0 6 a 1 a "
visible: thumbsUpImage . visible
}
}
Text {
id: fallbackThumbsUpIcon
anchors.verticalCenter: parent . verticalCenter
text: qsTr ( FontAwesome . thumbsUp )
visible: ! thumbsUpImageItem . visible
font.bold: true
color: thumbsUpImageOverlayer . color
}
Text {
id: thumbsUpCountText
anchors.verticalCenter: parent . verticalCenter
text: Backend . getSellerGoodRatings ( ratingsModel )
font.pixelSize: 16
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
}
}
}
}
/ * C o l u m n {
Row {
/ / / / a n c h o r s . v e r t i c a l C e n t e r : p a r e n t . v e r t i c a l C e n t e r
anchors.left: parent . left ; anchors.leftMargin: width / 2
/ / w i d t h : 3 2 ; h e i g h t : 3 2
/ / c o l o r : " # f f f b e 5 "
/ / r a d i u s : 3 / / 5 0
} / / t h u m b s U p R e c t
/ / t h u m b s d o w n r e c t
Rectangle {
anchors.top: parent . children [ 0 ] . top
width: 50 + thumbsDownCountText . contentWidth ; height: reputationRect . height
color: "transparent"
border.color: "#ffffff"
radius: 3
Row {
anchors.centerIn: parent
spacing: 5
Item {
id: thumbsDownImageItem
anchors.verticalCenter: parent . verticalCenter
width: childrenRect . width / / s t a t s R o w . i c o n S i z e
height: childrenRect . height
visible: ( thumbsDownImage . status === Image . Ready )
Image {
id: ratingIcon
source: "qrc:/assets/images/rating.png"
width: 32 ; height: 32
anchors.centerIn: parent
id: thumbsDownImage
source: "qrc:/assets/images/ thumbs_down .png"
width: statsRow . iconSize + 2 ; height: width
/ / m i p m a p : t r u e
}
ColorOverlay {
anchors.fill: ratingIcon
source: ratingIcon
color: "#ffd700" / / " # e 6 c 2 0 0 "
visible: ratingIcon . visible
id: thumbsDownImageOverlayer
anchors.fill: thumbsDownImage
source: thumbsDownImage
color: "red" / / " f i r e b r i c k "
visible: thumbsDownImage . visible
}
}
} * /
/ / / / }
}
Text {
id: fallbackThumbsDownIcon
anchors.verticalCenter: parent . verticalCenter
text: qsTr ( FontAwesome . thumbsDown )
visible: ! thumbsDownImageItem . visible
font.bold: true
color: thumbsDownImageOverlayer . color
}
Text {
id: thumbsDownCountText
anchors.verticalCenter: parent . verticalCenter
text: Backend . getSellerBadRatings ( ratingsModel )
font.pixelSize: 16
color: ( NeroshopComponents . Style . darkTheme ) ? "#ffffff" : "#000000"
}
}
} / / t h u m b s D o w n R e c t
} / / r o w c o n t a i n i n g b o t h t h u m b s a n d r e p u t a t i o n
} / / c o l u m n f o r r e p u t a t i o n t e x t / r e p u t a t i o n s t a t s ( c a n b e s a f e l y r e m o v e d )
} / / e n d o f s t a t s R o w
} / / e n d o f s t a t s C o l
/ * R o w {
layoutDirection: Qt . RightToLeft
anchors.right: parent . right ; anchors.rightMargin: 30
anchors.verticalCenter: parent . verticalCenter / / T O D O : m a k e t h i s b o t t o m / b o t t o m P a d d i n g
Button {
width: contentItem . contentWidth + 20 ; height: contentItem . contentHeight + 20
text: qsTr ( "Message" )
background: Rectangle {
color: NeroshopComponents . Style . neroshopPurpleColor
radius: 3
}
contentItem: Text {
text: parent . text
color: "#ffffff"
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
font.bold: true
}
onClicked: { }
}
} * / / / Row 2
/ / T O D O : s h o w s t a t s a n d r e p u t a t i o n l i k e g o o d r a t i n g s ( t h u m b s u p ) , b a d r a t i n g s ( t h u m b s d o w n )
/ / M a i l l e t t e r i c o n f o r e m a i l , l o c a t i o n i c o n f o r l o c a t i o n , L i n k i c o n f o r w e b s i t e
} / / R e c t a n g l e
} / / C o l u m n
/ / T O D O : s h o w m a i l l e t t e r i c o n f o r e m a i l , l o c a t i o n i c o n f o r l o c a t i o n , L i n k i c o n f o r w e b s i t e
} / / p r o f i l e C a r d ( R e c t a n g l e )
} / / C o l u m n L a y o u t
/ / T a b s
Rectangle {
id: tabsRect
Layout.alignment: Qt . AlignTop | Qt . AlignRight
Layout.topMargin: 20 ; Layout.rightMargin: 24 ;
Layout.topMargin: 20 ;
Layout.leftMargin: 24 ; Layout.rightMargin: Layout . leftMargin
Layout.fillWidth: true
Layout.preferredHeight: 50
color: " #343434"
radius: profileCard . radiu
color: "royalblue" / /NeroshopComponents.Style.neroshopPurpleColor/ / infoRect . color
radius: 0 / / p r o f i l e C a r d . r a d i u s
Row {
anchors.verticalCenter: parent . verticalCenter
id: tabButtonRow
anchors.bottom: parent . bottom / / a n c h o r s . v e r t i c a l C e n t e r : p a r e n t . v e r t i c a l C e n t e r
anchors.left: parent . left ; anchors.leftMargin: 10
spacing: 15
spacing: 0 / / / / 1 5
property real buttonRadius: 5
property string buttonCheckedColor: NeroshopComponents . Style . getColorsFromTheme ( ) [ 0 ] / /"transparent"/ / TODO: this should be the same color as the stacklayout / tabpage
property string buttonUncheckedColor: tabsRect . color
Button {
width: contentItem . contentWidth + 20 ; height: contentItem . contentHeight + 20
text: qsTr ( "Listing" )
id: listingsTabButton
width: ( tabsRect . width / tabButtonRow . children . length ) - tabButtonRow . anchors . leftMargin /*!listingsCountRect.visible ? 100 : 100 + listingsCountText.contentWidth*/ ; height: 40
text: qsTr ( "Listings" )
autoExclusive: true
checkable: true
checked: true / / d e f a u l t
background: Rectangle {
color: NeroshopComponents . Style . neroshopPurpleColor
radius: 3
color: parent . checked ? tabButtonRow.buttonCheckedColor : tabButtonRow . buttonUncheckedColor
radius: tabButtonRow . buttonRadius
/ / T o h i d e b o t t o m r a d i u s
Rectangle {
anchors.left: parent . left
anchors.bottom: parent . bottom
width: parent . width
height: 5
color: parent . color / /"pink"/ / < - for testing
}
}
contentItem: Text {
text: parent . text
color: "#ffffff"
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
font.bold: true
contentItem: Item {
anchors.fill: parent
Row {
anchors.centerIn: parent
spacing: 10
Text {
text: listingsTabButton . text
color: "#ffffff"
anchors.verticalCenter: parent . verticalCenter
font.bold: true
}
Rectangle {
id: listingsCountRect
anchors.verticalCenter: parent . verticalCenter
width: listingsCountText . contentWidth + 15 ; height: 20
color: "#101010"
radius: 3
visible: Number ( listingsCountText . text ) > 0 && ! listingsTabButton . checked
Text {
id: listingsCountText
anchors.horizontalCenter: parent . horizontalCenter
anchors.verticalCenter: parent . verticalCenter
text: "0"
color: "#ffffff"
font.pixelSize: 12
}
}
}
}
onClicked: { }
}
Button {
width: contentItem . contentWidth + 20 ; height: contentItem . contentHeight + 20
id: ratingsTabButton
width: ( tabsRect . width / tabButtonRow . children . length ) - tabButtonRow . anchors . leftMargin /*!ratingsCountRect.visible ? 100 : 100 + ratingsCountText.contentWidth*/ ; height: 40
text: qsTr ( "Ratings" )
autoExclusive: true
checkable: true
background: Rectangle {
color: NeroshopComponents . Style . neroshopPurpleColor
radius: 3
color: parent . checked ? tabButtonRow.buttonCheckedColor : tabButtonRow . buttonUncheckedColor
radius: tabButtonRow . buttonRadius
/ / T o h i d e b o t t o m r a d i u s
Rectangle {
anchors.left: parent . left
anchors.bottom: parent . bottom
width: parent . width
height: 5
color: parent . color
}
}
contentItem: Text {
text: parent . text
color: "#ffffff"
horizontalAlignment: Text . AlignHCenter
verticalAlignment: Text . AlignVCenter
font.bold: true
contentItem: Item {
anchors.fill: parent
Row {
anchors.centerIn: parent
spacing: 10
Text {
text: ratingsTabButton . text
color: "#ffffff"
anchors.verticalCenter: parent . verticalCenter
font.bold: true
}
Rectangle {
id: ratingsCountRect
anchors.verticalCenter: parent . verticalCenter
width: ratingsCountText . contentWidth + 15 ; height: 20
color: "#101010"
radius: 3
visible: Number ( ratingsCountText . text ) > 0 && ! ratingsTabButton . checked
Text {
id: ratingsCountText
anchors.horizontalCenter: parent . horizontalCenter
anchors.verticalCenter: parent . verticalCenter
text: Backend . getSellerRatingsCount ( ratingsModel )
color: "#ffffff"
font.pixelSize: 12
}
}
}
}
onClicked: { }
}
}
}
} / / R o w L a y o u t
/ * N e r o s h o p C o m p o n e n t s . T a b B a r {
id: tabBar
