Polish dialog behavior and spacing

This commit is contained in:
Zander Otavka 2016-07-15 16:39:35 -07:00
parent 71f62c02fc
commit c27e1d6fdb
4 changed files with 90 additions and 32 deletions

View file

@ -65,6 +65,7 @@ Original.CheckBox {
colorScheme: checkBox.colorScheme
x: checkBox.boxSize / 2
wrapMode: Text.Wrap
enabled: checkBox.enabled
}
}
}

View file

@ -16,5 +16,6 @@ RalewaySemiBold {
property int colorScheme: hifi.colorSchemes.light
size: hifi.fontSizes.inputLabel
color: colorScheme == hifi.colorSchemes.light ? hifi.colors.lightGray : hifi.colors.lightGrayText
color: enabled ? (colorScheme == hifi.colorSchemes.light ? hifi.colors.lightGray : hifi.colors.lightGrayText)
: (colorScheme == hifi.colorSchemes.light ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight);
}

View file

@ -35,14 +35,10 @@ ModalWindow {
property var comboBox;
property var checkBox;
property var warning: "";
property var result;
property alias current: textField.text;
// For text boxes
property alias placeholderText: textField.placeholderText;
// For combo boxes
property bool editable: true;
property var implicitCheckState: null;
property int titleWidth: 0;
onTitleWidthChanged: d.resize();
@ -54,6 +50,34 @@ ModalWindow {
iconText = hifi.glyphForIcon(root.icon);
}
function updateCheckbox() {
if (checkBox.disableForItems) {
var currentTextInDisableList = false;
for (var i in checkBox.disableForItems) {
if (comboBoxField.currentText === checkBox.disableForItems[i]) {
currentTextInDisableList = true;
break;
}
}
if (currentTextInDisableList) {
checkBoxField.enabled = false;
if (checkBox.checkStateOnDisable !== null && checkBox.checkStateOnDisable !== undefined) {
root.implicitCheckState = checkBoxField.checked;
checkBoxField.checked = checkBox.checkStateOnDisable;
}
root.warning = checkBox.warningOnDisable;
} else {
checkBoxField.enabled = true;
if (root.implicitCheckState !== null) {
checkBoxField.checked = root.implicitCheckState;
root.implicitCheckState = null;
}
root.warning = "";
}
}
}
Item {
clip: true;
width: pane.width;
@ -70,18 +94,11 @@ ModalWindow {
function resize() {
var targetWidth = Math.max(titleWidth, pane.width);
var targetHeight = (textInput ? textField.controlHeight : 0) + extraInputs.height +
(6 * hifi.dimensions.contentSpacing.y) + buttons.height;
// var targetHeight = 720;
print("CQD extraInputs.height = " + extraInputs.height);
print("CQD textField.controlHeight = " + textField.controlHeight);
print("CQD buttons.height = " + buttons.height);
print("CQD targetHeight = " + targetHeight);
(5 * hifi.dimensions.contentSpacing.y) + buttons.height;
root.width = (targetWidth < d.minWidth) ? d.minWidth : ((targetWidth > d.maxWdith) ? d.maxWidth : targetWidth);
root.height = (targetHeight < d.minHeight) ? d.minHeight: ((targetHeight > d.maxHeight) ?
d.maxHeight : targetHeight);
print("CQD comboBoxField.visible = " + comboBoxField.visible);
if (comboBoxField.visible) {
print("CQD parent = " + parent);
comboBoxField.width = extraInputs.width / 2;
}
}
@ -94,7 +111,7 @@ ModalWindow {
left: parent.left;
right: parent.right;
margins: 0;
bottomMargin: 2 * hifi.dimensions.contentSpacing.y;
bottomMargin: hifi.dimensions.contentSpacing.y;
}
// FIXME make a text field type that can be bound to a history for autocompletion
@ -132,6 +149,7 @@ ModalWindow {
anchors {
left: parent.left;
bottom: parent.bottom;
leftMargin: 6; // Magic number to align with warning icon
}
}
@ -145,6 +163,7 @@ ModalWindow {
bottom: parent.bottom;
}
model: root.comboBox ? root.comboBox.items : [];
onCurrentTextChanged: updateCheckbox();
}
}
@ -152,8 +171,13 @@ ModalWindow {
id: buttons;
focus: true;
spacing: hifi.dimensions.contentSpacing.x;
layoutDirection: Qt.RightToLeft;
onHeightChanged: d.resize();
onWidthChanged: d.resize();
onWidthChanged: {
d.resize();
resizeWarningText();
}
anchors {
bottom: parent.bottom;
left: parent.left;
@ -161,6 +185,23 @@ ModalWindow {
bottomMargin: hifi.dimensions.contentSpacing.y;
}
function resizeWarningText() {
var rowWidth = buttons.width;
var buttonsWidth = acceptButton.width + cancelButton.width + hifi.dimensions.contentSpacing.x * 2;
var warningIconWidth = warningIcon.width + hifi.dimensions.contentSpacing.x;
warningText.width = rowWidth - buttonsWidth - warningIconWidth;
}
Button {
id: cancelButton;
action: cancelAction;
// anchors {
// bottom: parent.bottom;
// right: parent.right;
// leftMargin: hifi.dimensions.contentSpacing.x;
// }
}
Button {
id: acceptButton;
action: acceptAction;
@ -171,14 +212,20 @@ ModalWindow {
// }
}
Button {
id: cancelButton;
action: cancelAction;
// anchors {
// bottom: parent.bottom;
// right: parent.right;
// leftMargin: hifi.dimensions.contentSpacing.x;
// }
Text {
id: warningText;
visible: Boolean(root.warning);
text: root.warning;
wrapMode: Text.WordWrap;
font.italic: true;
maximumLineCount: 2;
}
HiFiGlyphs {
id: warningIcon;
visible: Boolean(root.warning);
text: hifi.glyphs.alert;
size: hifi.dimensions.controlLineHeight;
}
}
@ -198,11 +245,18 @@ ModalWindow {
text: qsTr("Add");
shortcut: Qt.Key_Return;
onTriggered: {
root.result = {
textInput: textField.text,
comboBox: comboBoxField.currentText,
checkBox: checkBoxField.checked
};
var result = {};
if (textInput) {
result.textInput = textField.text;
}
if (comboBox) {
result.comboBox = comboBoxField.currentText;
result.comboBoxIndex = comboBoxField.currentIndex;
}
if (checkBox) {
result.checkBox = checkBoxField.enabled ? checkBoxField.checked : null;
}
root.result = result;
root.selected(root.result);
root.destroy();
}

View file

@ -354,8 +354,10 @@ QVariant OffscreenUi::getCustomInfo(const Icon icon, const QString& title, const
}
// Casts from QJSValue to QVariantMap (not sure how, just copied from http://lists.qt-project.org/pipermail/development/2014-September/018513.html)
Q_ASSERT(result.userType() == qMetaTypeId<QJSValue>());
result = qvariant_cast<QJSValue>(result).toVariant();
Q_ASSERT(!result.isValid() || result.userType() == qMetaTypeId<QJSValue>());
if (result.userType() == qMetaTypeId<QJSValue>()) {
result = qvariant_cast<QJSValue>(result).toVariant();
}
return result;
}