Merge pull request #12489 from vladest/fix_table_sort_indicator

Make sure sort indicator is attached to the right of title

interface/resources/qml/controls-uit/Table.qml

@@ -22,6 +22,10 @@ TableView {
     readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
     property bool expandSelectedRow: false
     property bool centerHeaderText: false
+    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 { }
 
@@ -69,36 +73,39 @@ TableView {
         height: hifi.dimensions.tableHeaderHeight
         color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
 
+
         RalewayRegular {
             id: titleText
+            x: centerHeaderText ? (parent.width - paintedWidth -
+                                  ((sortIndicatorVisible &&
+                                    sortIndicatorColumn === styleData.column) ?
+                                       (titleSort.paintedWidth / 5 + tableView.headerSpacing) : 0)) / 2 :
+                                  hifi.dimensions.tablePadding
             text: styleData.value
             size: hifi.fontSizes.tableHeading
             font.capitalization: Font.AllUppercase
             color: hifi.colors.baseGrayHighlight
             horizontalAlignment: (centerHeaderText ? Text.AlignHCenter : Text.AlignLeft)
-            anchors {
+            anchors.verticalCenter: parent.verticalCenter
-                left: parent.left
-                leftMargin: hifi.dimensions.tablePadding
-                right: parent.right
-                rightMargin: hifi.dimensions.tablePadding
-                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 {
             id: titleSort
             text:  sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn
             color: hifi.colors.darkGray
             opacity: 0.6;
             size: hifi.fontSizes.tableHeadingIcon
-            anchors {
+            anchors.verticalCenter: titleText.verticalCenter
-                left: titleText.right
+            anchors.left: titleText.right
-                leftMargin: -hifi.fontSizes.tableHeadingIcon / 3 - (centerHeaderText ? 15 : 10)
+            anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 2.5) + tableView.headerSpacing
-                right: parent.right
-                rightMargin: hifi.dimensions.tablePadding
-                verticalCenter: titleText.verticalCenter
-            }
             visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column
+            onXChanged: {
+                titlePaintedPos[styleData.column] = titleText.x + titleText.paintedWidth +
+                        paintedWidth / 5 + tableView.headerSpacing*2
+                titlePaintedPosSignal(styleData.column)
+            }
         }
 
         Rectangle {
@@ -152,7 +159,7 @@ TableView {
         color: styleData.selected
                ? hifi.colors.primaryHighlight
                : tableView.isLightColorScheme
-                   ? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
+                 ? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
-                   : (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
+                 : (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
     }
 }

interface/resources/qml/hifi/Pal.qml

@@ -30,7 +30,7 @@ Rectangle {
     property int myCardWidth: width - upperRightInfoContainer.width;
     property int myCardHeight: 100;
     property int rowHeight: 60;
-    property int actionButtonWidth: 55;
+    property int actionButtonWidth: 65;
     property int locationColumnWidth: 170;
     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;
@@ -415,6 +415,7 @@ Rectangle {
                 movable: false;
                 resizable: false;
             }
+
             TableViewColumn {
                 role: "ignore";
                 title: "IGNORE";
@@ -599,13 +600,23 @@ Rectangle {
         }
         // This Rectangle refers to the [?] popup button next to "NAMES"
         Rectangle {
+            id: questionRect
             color: hifi.colors.tableBackgroundLight;
             width: 20;
             height: hifi.dimensions.tableHeaderHeight - 2;
             anchors.left: nearbyTable.left;
             anchors.top: nearbyTable.top;
             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 {
                 id: helpText;
                 text: "[?]";