From 59962286226c991c71282b071fb274a290dd53c0 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Mon, 19 Dec 2016 13:06:48 -0800 Subject: [PATCH] Starting off strong. --- interface/resources/qml/hifi/NameCard.qml | 16 +- interface/resources/qml/hifi/Pal.qml | 217 +++++++++++++--------- 2 files changed, 138 insertions(+), 95 deletions(-) diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml index ffb42d2fff..48f0f61d03 100644 --- a/interface/resources/qml/hifi/NameCard.qml +++ b/interface/resources/qml/hifi/NameCard.qml @@ -20,17 +20,27 @@ Column { property int displayTextHeight: 18; property int usernameTextHeight: 12; + RalewaySemiBold { + // Properties text: parent.displayName; - size: parent.displayTextHeight; elide: Text.ElideRight; + // Size width: parent.width; + // Text Size + size: parent.displayTextHeight; + // Text Positioning + verticalAlignment: Text.AlignVCenter; } RalewayLight { - visible: parent.displayName; + // Properties text: parent.userName; - size: parent.usernameTextHeight; elide: Text.ElideRight; + visible: parent.displayName; + // Size + size: parent.usernameTextHeight; width: parent.width; + // Text Positioning + verticalAlignment: Text.AlignVCenter; } } diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 7a8dc4722e..060a14b1dd 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -31,13 +31,133 @@ import QtQuick.Controls 1.4 Rectangle { id: pal; - property int keepFromHorizontalScroll: 1; - width: parent.width - keepFromHorizontalScroll; + // Size + width: parent.width; height: parent.height; - - property int nameWidth: width/2; - property int actionWidth: nameWidth / (table.columnCount - 1); + // Properties + property int myCardHeight: 75; property int rowHeight: 50; + property int nameCardWidth: width*3/5; + property int separatorColWidth: 30; + property int actionWidth: (width - nameCardWidth - separatorColWidth) / (table.columnCount - 2); // "-2" for Name and Separator cols + + Column { + // This NameCard refers to the current user's NameCard (the one above the table) + NameCard { + id: myCard; + // Properties + displayName: myData.displayName; + userName: myData.userName; + // Size + width: nameCardWidth; + height: myCardHeight; + // Positioning + anchors.top: pal.top; + anchors.left: parent.left; + // Margins + anchors.leftMargin: 10; + } + // This TableView refers to the table (below the current user's NameCard) + TableView { + id: table; + // Size + height: pal.height - myCard.height; + width: pal.width; + // Positioning + anchors.top: myCard.bottom; + // Properties + frameVisible: false; + sortIndicatorVisible: true; + onSortIndicatorColumnChanged: sortModel(); + onSortIndicatorOrderChanged: sortModel(); + + TableViewColumn { + role: "displayName"; + title: "Name"; + width: nameCardWidth + } + TableViewColumn { + role: "ignore"; + title: "Ignore" + width: actionWidth + } + TableViewColumn { + title: ""; + width: separatorColWidth + } + TableViewColumn { + visible: iAmAdmin; + role: "mute"; + title: "Mute"; + width: actionWidth + } + TableViewColumn { + visible: iAmAdmin; + role: "kick"; + title: "Ban" + width: actionWidth + } + model: userModel; + + // This Rectangle refers to each Row in the table. + rowDelegate: Rectangle { // The only way I know to specify a row height. + height: rowHeight; + // The rest of this is cargo-culted to restore the default styling + SystemPalette { + id: myPalette; + colorGroup: SystemPalette.Active + } + color: { + var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base + return styleData.selected?myPalette.highlight:baseColor + } + } + + // This Item refers to the contents of each Cell + itemDelegate: Item { + id: itemCell; + property bool isCheckBox: typeof(styleData.value) === 'boolean'; + // This NameCard refers to the cell that contains an avatar's + // DisplayName and UserName + NameCard { + id: nameCard; + // Properties + displayName: styleData.value; + userName: model.userName; + visible: !isCheckBox; + // Size + width: nameCardWidth; + // Positioning + anchors.left: parent.left; + anchors.verticalCenter: parent.verticalCenter; + // Margins + anchors.leftMargin: 10; + } + // This Rectangle refers to the cells that contain the action buttons + Rectangle { + radius: itemCell.height / 4; + visible: isCheckBox; + color: styleData.value ? "green" : "red"; + anchors.fill: parent; + MouseArea { + anchors.fill: parent; + acceptedButtons: Qt.LeftButton; + hoverEnabled: true; + onClicked: { + var newValue = !model[styleData.role]; + var datum = userData[model.userIndex]; + datum[styleData.role] = model[styleData.role] = newValue; + Users[styleData.role](model.sessionId); + // Just for now, while we cannot undo things: + userData.splice(model.userIndex, 1); + sortModel(); + } + } + } + } + } + } + property var userData: []; property var myData: ({displayName: "", userName: ""}); // valid dummy until set property bool iAmAdmin: false; @@ -135,91 +255,4 @@ Rectangle { target: table.selection onSelectionChanged: pal.noticeSelection() } - - Column { - NameCard { - id: myCard; - width: nameWidth; - displayName: myData.displayName; - userName: myData.userName; - } - TableView { - id: table; - TableViewColumn { - role: "displayName"; - title: "Name"; - width: nameWidth - } - TableViewColumn { - role: "ignore"; - title: "Ignore" - width: actionWidth - } - TableViewColumn { - title: ""; - width: actionWidth - } - TableViewColumn { - visible: iAmAdmin; - role: "mute"; - title: "Mute"; - width: actionWidth - } - TableViewColumn { - visible: iAmAdmin; - role: "kick"; - title: "Ban" - width: actionWidth - } - model: userModel; - rowDelegate: Rectangle { // The only way I know to specify a row height. - height: rowHeight; - // The rest of this is cargo-culted to restore the default styling - SystemPalette { - id: myPalette; - colorGroup: SystemPalette.Active - } - color: { - var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base - return styleData.selected?myPalette.highlight:baseColor - } - } - itemDelegate: Item { - id: itemCell; - property bool isCheckBox: typeof(styleData.value) === 'boolean'; - NameCard { - id: nameCard; - visible: !isCheckBox; - width: nameWidth; - displayName: styleData.value; - userName: model.userName; - } - Rectangle { - radius: itemCell.height / 4; - visible: isCheckBox; - color: styleData.value ? "green" : "red"; - anchors.fill: parent; - MouseArea { - anchors.fill: parent; - acceptedButtons: Qt.LeftButton; - hoverEnabled: true; - onClicked: { - var newValue = !model[styleData.role]; - var datum = userData[model.userIndex]; - datum[styleData.role] = model[styleData.role] = newValue; - Users[styleData.role](model.sessionId); - // Just for now, while we cannot undo things: - userData.splice(model.userIndex, 1); - sortModel(); - } - } - } - } - height: pal.height - myCard.height; - width: pal.width; - sortIndicatorVisible: true; - onSortIndicatorColumnChanged: sortModel(); - onSortIndicatorOrderChanged: sortModel(); - } - } }