From b8102cfbd72e3323d35351670c8e5f901cb11c42 Mon Sep 17 00:00:00 2001 From: vladest Date: Fri, 23 Feb 2018 10:06:16 +0100 Subject: [PATCH 1/2] Make sure sort indicator is attached to the right of title --- .../resources/qml/controls-uit/Table.qml | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/interface/resources/qml/controls-uit/Table.qml b/interface/resources/qml/controls-uit/Table.qml index a3e4113d08..c5a605c69e 100644 --- a/interface/resources/qml/controls-uit/Table.qml +++ b/interface/resources/qml/controls-uit/Table.qml @@ -22,6 +22,7 @@ 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 model: ListModel { } @@ -69,20 +70,18 @@ TableView { height: hifi.dimensions.tableHeaderHeight color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark + RalewayRegular { id: titleText + x: centerHeaderText ? parent.width/2 - + (paintedWidth/2 + (sortIndicatorVisible ? titleSort.paintedWidth/12 : 0)) : + 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 { - left: parent.left - leftMargin: hifi.dimensions.tablePadding - right: parent.right - rightMargin: hifi.dimensions.tablePadding - verticalCenter: parent.verticalCenter - } + anchors.verticalCenter: parent.verticalCenter } HiFiGlyphs { @@ -91,13 +90,9 @@ TableView { color: hifi.colors.darkGray opacity: 0.6; size: hifi.fontSizes.tableHeadingIcon - anchors { - left: titleText.right - leftMargin: -hifi.fontSizes.tableHeadingIcon / 3 - (centerHeaderText ? 15 : 10) - right: parent.right - rightMargin: hifi.dimensions.tablePadding - verticalCenter: titleText.verticalCenter - } + anchors.verticalCenter: titleText.verticalCenter + anchors.left: titleText.right + anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 3 + tableView.headerSpacing) visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column } @@ -152,7 +147,7 @@ TableView { color: styleData.selected ? hifi.colors.primaryHighlight : tableView.isLightColorScheme - ? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd) - : (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd) + ? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd) + : (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd) } } From 62f2ba0dadb6acf852966af445a1bd0f2ba04b2c Mon Sep 17 00:00:00 2001 From: vladest Date: Sat, 24 Feb 2018 09:32:08 +0100 Subject: [PATCH 2/2] More intellectual calculation of title positions taking in account actual sort indicator glyph size --- interface/resources/qml/controls-uit/Table.qml | 18 +++++++++++++++--- interface/resources/qml/hifi/Pal.qml | 15 +++++++++++++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/interface/resources/qml/controls-uit/Table.qml b/interface/resources/qml/controls-uit/Table.qml index c5a605c69e..3c1d0fcd3c 100644 --- a/interface/resources/qml/controls-uit/Table.qml +++ b/interface/resources/qml/controls-uit/Table.qml @@ -23,6 +23,9 @@ TableView { 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 { } @@ -73,8 +76,10 @@ TableView { RalewayRegular { id: titleText - x: centerHeaderText ? parent.width/2 - - (paintedWidth/2 + (sortIndicatorVisible ? titleSort.paintedWidth/12 : 0)) : + 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 @@ -84,6 +89,8 @@ TableView { 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 { id: titleSort text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn @@ -92,8 +99,13 @@ TableView { size: hifi.fontSizes.tableHeadingIcon anchors.verticalCenter: titleText.verticalCenter 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 + onXChanged: { + titlePaintedPos[styleData.column] = titleText.x + titleText.paintedWidth + + paintedWidth / 5 + tableView.headerSpacing*2 + titlePaintedPosSignal(styleData.column) + } } Rectangle { diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index bb54ba9e57..8fb27714ee 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/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: "[?]";