This commit is contained in:
Zach Fox 2016-12-19 14:05:55 -08:00
parent 5996228622
commit 46c787512e
2 changed files with 103 additions and 96 deletions

View file

@ -15,11 +15,11 @@ import "../styles-uit"
Column { Column {
// Properties
property string displayName: ""; property string displayName: "";
property string userName: ""; property string userName: "";
property int displayTextHeight: 18; property int displayTextHeight: 18;
property int usernameTextHeight: 12; property int usernameTextHeight: 12
RalewaySemiBold { RalewaySemiBold {
// Properties // Properties

View file

@ -41,7 +41,15 @@ Rectangle {
property int separatorColWidth: 30; property int separatorColWidth: 30;
property int actionWidth: (width - nameCardWidth - separatorColWidth) / (table.columnCount - 2); // "-2" for Name and Separator cols property int actionWidth: (width - nameCardWidth - separatorColWidth) / (table.columnCount - 2); // "-2" for Name and Separator cols
Column { // This contains the current user's NameCard and will contain other information in the future
Item {
id: myInfo;
// Size
width: pal.width;
height: myCardHeight;
// Positioning
anchors.top: pal.top;
anchors.left: pal.left;
// This NameCard refers to the current user's NameCard (the one above the table) // This NameCard refers to the current user's NameCard (the one above the table)
NameCard { NameCard {
id: myCard; id: myCard;
@ -49,109 +57,108 @@ Rectangle {
displayName: myData.displayName; displayName: myData.displayName;
userName: myData.userName; userName: myData.userName;
// Size // Size
width: nameCardWidth; width: nameCardWidth - anchors.leftMargin;
height: myCardHeight;
// Positioning // Positioning
anchors.top: pal.top;
anchors.left: parent.left; anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
// Margins // Margins
anchors.leftMargin: 10; anchors.leftMargin: 10;
} }
// This TableView refers to the table (below the current user's NameCard) }
TableView { // This TableView refers to the table (below the current user's NameCard)
id: table; TableView {
// Size id: table;
height: pal.height - myCard.height; // Size
width: pal.width; height: pal.height - myInfo.height;
// Positioning width: pal.width;
anchors.top: myCard.bottom; // Positioning
// Properties anchors.top: myInfo.bottom;
frameVisible: false; // Properties
sortIndicatorVisible: true; frameVisible: false;
onSortIndicatorColumnChanged: sortModel(); sortIndicatorVisible: true;
onSortIndicatorOrderChanged: sortModel(); onSortIndicatorColumnChanged: sortModel();
onSortIndicatorOrderChanged: sortModel();
TableViewColumn { TableViewColumn {
role: "displayName"; role: "displayName";
title: "Name"; title: "Name";
width: nameCardWidth width: nameCardWidth
} }
TableViewColumn { TableViewColumn {
role: "ignore"; role: "ignore";
title: "Ignore" title: "Ignore"
width: actionWidth width: actionWidth
} }
TableViewColumn { TableViewColumn {
title: ""; title: "";
width: separatorColWidth width: separatorColWidth
} }
TableViewColumn { TableViewColumn {
visible: iAmAdmin; visible: iAmAdmin;
role: "mute"; role: "mute";
title: "Mute"; title: "Mute";
width: actionWidth width: actionWidth
} }
TableViewColumn { TableViewColumn {
visible: iAmAdmin; visible: iAmAdmin;
role: "kick"; role: "kick";
title: "Ban" title: "Ban"
width: actionWidth width: actionWidth
} }
model: userModel; model: userModel;
// This Rectangle refers to each Row in the table. // This Rectangle refers to each Row in the table.
rowDelegate: Rectangle { // The only way I know to specify a row height. rowDelegate: Rectangle { // The only way I know to specify a row height.
height: rowHeight; height: rowHeight;
// The rest of this is cargo-culted to restore the default styling // The rest of this is cargo-culted to restore the default styling
SystemPalette { SystemPalette {
id: myPalette; id: myPalette;
colorGroup: SystemPalette.Active colorGroup: SystemPalette.Active
}
color: {
var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base
return styleData.selected?myPalette.highlight:baseColor
}
} }
color: {
var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base
return styleData.selected?myPalette.highlight:baseColor
}
}
// This Item refers to the contents of each Cell // This Item refers to the contents of each Cell
itemDelegate: Item { itemDelegate: Item {
id: itemCell; id: itemCell;
property bool isCheckBox: typeof(styleData.value) === 'boolean'; property bool isCheckBox: typeof(styleData.value) === 'boolean';
// This NameCard refers to the cell that contains an avatar's // This NameCard refers to the cell that contains an avatar's
// DisplayName and UserName // DisplayName and UserName
NameCard { NameCard {
id: nameCard; id: nameCard;
// Properties // Properties
displayName: styleData.value; displayName: styleData.value;
userName: model.userName; userName: model.userName;
visible: !isCheckBox; visible: !isCheckBox;
// Size // Size
width: nameCardWidth; width: nameCardWidth - anchors.leftMargin;
// Positioning // Positioning
anchors.left: parent.left; anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
// Margins // Margins
anchors.leftMargin: 10; anchors.leftMargin: 10;
} }
// This Rectangle refers to the cells that contain the action buttons // This Rectangle refers to the cells that contain the action buttons
Rectangle { Rectangle {
radius: itemCell.height / 4; radius: itemCell.height / 4;
visible: isCheckBox; visible: isCheckBox;
color: styleData.value ? "green" : "red"; color: styleData.value ? "green" : "red";
anchors.fill: parent;
MouseArea {
anchors.fill: parent; anchors.fill: parent;
MouseArea { acceptedButtons: Qt.LeftButton;
anchors.fill: parent; hoverEnabled: true;
acceptedButtons: Qt.LeftButton; onClicked: {
hoverEnabled: true; var newValue = !model[styleData.role];
onClicked: { var datum = userData[model.userIndex];
var newValue = !model[styleData.role]; datum[styleData.role] = model[styleData.role] = newValue;
var datum = userData[model.userIndex]; Users[styleData.role](model.sessionId);
datum[styleData.role] = model[styleData.role] = newValue; // Just for now, while we cannot undo things:
Users[styleData.role](model.sessionId); userData.splice(model.userIndex, 1);
// Just for now, while we cannot undo things: sortModel();
userData.splice(model.userIndex, 1);
sortModel();
}
} }
} }
} }