More intellectual calculation of title positions taking in account actual sort indicator glyph size

This commit is contained in:
vladest 2018-02-24 09:32:08 +01:00
parent b8102cfbd7
commit 62f2ba0dad
2 changed files with 28 additions and 5 deletions

View file

@ -23,6 +23,9 @@ TableView {
property bool expandSelectedRow: false property bool expandSelectedRow: false
property bool centerHeaderText: false property bool centerHeaderText: false
readonly property real headerSpacing: 3 //spacing between sort indicator and table header title readonly property real headerSpacing: 3 //spacing between sort indicator and table header title
property var titlePaintedPos: [] // storing extra data position behind painted
// title text and sort indicatorin table's header
signal titlePaintedPosSignal(int column) //signal that extradata position gets changed
model: ListModel { } model: ListModel { }
@ -73,8 +76,10 @@ TableView {
RalewayRegular { RalewayRegular {
id: titleText id: titleText
x: centerHeaderText ? parent.width/2 - x: centerHeaderText ? (parent.width - paintedWidth -
(paintedWidth/2 + (sortIndicatorVisible ? titleSort.paintedWidth/12 : 0)) : ((sortIndicatorVisible &&
sortIndicatorColumn === styleData.column) ?
(titleSort.paintedWidth / 5 + tableView.headerSpacing) : 0)) / 2 :
hifi.dimensions.tablePadding hifi.dimensions.tablePadding
text: styleData.value text: styleData.value
size: hifi.fontSizes.tableHeading size: hifi.fontSizes.tableHeading
@ -84,6 +89,8 @@ TableView {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
//actual image of sort indicator in glyph font only 20% of real font size
//i.e. if the charachter size set to 60 pixels, actual image is 12 pixels
HiFiGlyphs { HiFiGlyphs {
id: titleSort id: titleSort
text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn
@ -92,8 +99,13 @@ TableView {
size: hifi.fontSizes.tableHeadingIcon size: hifi.fontSizes.tableHeadingIcon
anchors.verticalCenter: titleText.verticalCenter anchors.verticalCenter: titleText.verticalCenter
anchors.left: titleText.right anchors.left: titleText.right
anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 3 + tableView.headerSpacing) anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 2.5) + tableView.headerSpacing
visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column
onXChanged: {
titlePaintedPos[styleData.column] = titleText.x + titleText.paintedWidth +
paintedWidth / 5 + tableView.headerSpacing*2
titlePaintedPosSignal(styleData.column)
}
} }
Rectangle { Rectangle {

View file

@ -30,7 +30,7 @@ Rectangle {
property int myCardWidth: width - upperRightInfoContainer.width; property int myCardWidth: width - upperRightInfoContainer.width;
property int myCardHeight: 100; property int myCardHeight: 100;
property int rowHeight: 60; property int rowHeight: 60;
property int actionButtonWidth: 55; property int actionButtonWidth: 65;
property int locationColumnWidth: 170; property int locationColumnWidth: 170;
property int nearbyNameCardWidth: nearbyTable.width - (iAmAdmin ? (actionButtonWidth * 4) : (actionButtonWidth * 2)) - 4 - hifi.dimensions.scrollbarBackgroundWidth; property int nearbyNameCardWidth: nearbyTable.width - (iAmAdmin ? (actionButtonWidth * 4) : (actionButtonWidth * 2)) - 4 - hifi.dimensions.scrollbarBackgroundWidth;
property int connectionsNameCardWidth: connectionsTable.width - locationColumnWidth - actionButtonWidth - 4 - hifi.dimensions.scrollbarBackgroundWidth; property int connectionsNameCardWidth: connectionsTable.width - locationColumnWidth - actionButtonWidth - 4 - hifi.dimensions.scrollbarBackgroundWidth;
@ -415,6 +415,7 @@ Rectangle {
movable: false; movable: false;
resizable: false; resizable: false;
} }
TableViewColumn { TableViewColumn {
role: "ignore"; role: "ignore";
title: "IGNORE"; title: "IGNORE";
@ -599,13 +600,23 @@ Rectangle {
} }
// This Rectangle refers to the [?] popup button next to "NAMES" // This Rectangle refers to the [?] popup button next to "NAMES"
Rectangle { Rectangle {
id: questionRect
color: hifi.colors.tableBackgroundLight; color: hifi.colors.tableBackgroundLight;
width: 20; width: 20;
height: hifi.dimensions.tableHeaderHeight - 2; height: hifi.dimensions.tableHeaderHeight - 2;
anchors.left: nearbyTable.left; anchors.left: nearbyTable.left;
anchors.top: nearbyTable.top; anchors.top: nearbyTable.top;
anchors.topMargin: 1; anchors.topMargin: 1;
anchors.leftMargin: actionButtonWidth + nearbyNameCardWidth/2 + displayNameHeaderMetrics.width/2 + 6;
Connections {
target: nearbyTable
onTitlePaintedPosSignal: {
if (column === 1) { // name column
questionRect.anchors.leftMargin = actionButtonWidth + nearbyTable.titlePaintedPos[column]
}
}
}
RalewayRegular { RalewayRegular {
id: helpText; id: helpText;
text: "[?]"; text: "[?]";