Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix expire date field in Share settings #5659

Merged
merged 5 commits into from
Jul 20, 2023
Merged

Fix expire date field in Share settings #5659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e84a5dc
Rename "moreMenu" ColumnLayout to "scrollContentsColumn" in ShareView…
claucambra May 8, 2023
aaeaad9
Make sure to imperatively set text for spinbox textfield after user b…
claucambra May 8, 2023
da7d8c1
Ensure the text for the expire date spin box is updated even in situa…
claucambra May 8, 2023
00ec93f
Add ability for NCInputTextField to display red border when invalid i…
claucambra May 8, 2023
d0e8e67
Track invalid input in ShareDetailsPage expireDateSpinBoxTextField
claucambra May 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/gui/filedetails/NCInputTextField.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ TextField {
readonly property color accentColor: Style.ncBlue
readonly property color secondaryColor: palette.dark
readonly property alias submitButton: submitButton
property bool validInput: true

implicitHeight: Style.talkReplyTextFieldPreferredHeight

Expand All @@ -36,7 +37,7 @@ TextField {
id: textFieldBorder
radius: Style.slightlyRoundedButtonRadius
border.width: Style.normalBorderWidth
border.color: root.activeFocus ? root.accentColor : root.secondaryColor
border.color: root.activeFocus ? root.validInput ? root.accentColor : Style.errorBoxBackgroundColor : root.secondaryColor
color: palette.base
}

Expand All @@ -55,7 +56,7 @@ TextField {
icon.source: "image://svgimage-custom-color/confirm.svg" + "/" + root.secondaryColor
icon.color: hovered && enabled ? UserModel.currentUser.accentColor : root.secondaryColor

enabled: root.text !== ""
enabled: root.text !== "" && root.validInput

onClicked: root.accepted()
}
Expand Down
131 changes: 78 additions & 53 deletions src/gui/filedetails/ShareDetailsPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,18 @@ Page {
}

function resetExpireDateField() {
// Expire date changing is handled by the expireDateSpinBox
// Expire date changing is handled through expireDateChanged listening in the expireDateSpinBox.
//
// When the user edits the expire date field they are changing the text, but the expire date
// value is only changed according to updates from the server.
//
// Sometimes the new expire date is the same -- say, because we were on the maximum allowed
// expire date already and we tried to push it beyond this, leading the server to just return
// the maximum allowed expire date.
//
// So to ensure that the text of the spin box is correctly updated, force an update of the
// contents of the expire date text field.
claucambra marked this conversation as resolved.
Show resolved Hide resolved
expireDateSpinBox.updateText();
waitingForExpireDateChange = false;
}

Expand All @@ -131,7 +142,6 @@ Page {
}

function resetMenu() {
moreMenu.close();

resetNoteField();
resetPasswordField();
Expand Down Expand Up @@ -240,7 +250,7 @@ Page {
clip: true

ColumnLayout {
id: moreMenu
id: scrollContentsColumn

readonly property int rowIconWidth: Style.smallIconSize
readonly property int indicatorItemWidth: 20
Expand All @@ -252,21 +262,21 @@ Page {
RowLayout {
Layout.fillWidth: true
height: visible ? implicitHeight : 0
spacing: moreMenu.indicatorSpacing
spacing: scrollContentsColumn.indicatorSpacing

visible: root.isLinkShare

Image {
Layout.preferredWidth: moreMenu.indicatorItemWidth
Layout.preferredWidth: scrollContentsColumn.indicatorItemWidth
Layout.fillHeight: true

verticalAlignment: Image.AlignVCenter
horizontalAlignment: Image.AlignHCenter
fillMode: Image.Pad

source: "image://svgimage-custom-color/edit.svg/" + palette.dark
sourceSize.width: moreMenu.rowIconWidth
sourceSize.height: moreMenu.rowIconWidth
sourceSize.width: scrollContentsColumn.rowIconWidth
sourceSize.height: scrollContentsColumn.rowIconWidth
}

NCInputTextField {
Expand Down Expand Up @@ -323,10 +333,11 @@ Page {
toolTipBase: Style.backgroundColor
toolTipText: Style.ncTextColor
}
spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicator.width: moreMenu.indicatorItemWidth
indicator.height: moreMenu.indicatorItemWidth

spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
indicator.width: scrollContentsColumn.indicatorItemWidth
indicator.height: scrollContentsColumn.indicatorItemWidth

checkable: true
checked: root.editingAllowed
Expand Down Expand Up @@ -364,10 +375,10 @@ Page {
enabled: !root.isSharePermissionChangeInProgress
checked: root.currentPermissionMode === permissionMode
text: qsTr("View only")
indicatorItemWidth: moreMenu.indicatorItemWidth
indicatorItemHeight: moreMenu.indicatorItemWidth
spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicatorItemWidth: scrollContentsColumn.indicatorItemWidth
indicatorItemHeight: scrollContentsColumn.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
onClicked: root.permissionModeChanged(permissionMode)
}

Expand All @@ -378,10 +389,10 @@ Page {
enabled: !root.isSharePermissionChangeInProgress
checked: root.currentPermissionMode === permissionMode
text: qsTr("Allow upload and editing")
indicatorItemWidth: moreMenu.indicatorItemWidth
indicatorItemHeight: moreMenu.indicatorItemWidth
spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicatorItemWidth: scrollContentsColumn.indicatorItemWidth
indicatorItemHeight: scrollContentsColumn.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
onClicked: root.permissionModeChanged(permissionMode)

NCBusyIndicator {
Expand All @@ -399,10 +410,10 @@ Page {
enabled: !root.isSharePermissionChangeInProgress
checked: root.currentPermissionMode === permissionMode
text: qsTr("File drop (upload only)")
indicatorItemWidth: moreMenu.indicatorItemWidth
indicatorItemHeight: moreMenu.indicatorItemWidth
spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicatorItemWidth: scrollContentsColumn.indicatorItemWidth
indicatorItemHeight: scrollContentsColumn.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
onClicked: root.permissionModeChanged(permissionMode)
}
}
Expand Down Expand Up @@ -444,10 +455,11 @@ Page {
toolTipText: Style.ncTextColor
}

spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicator.width: moreMenu.indicatorItemWidth
indicator.height: moreMenu.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
indicator.width: scrollContentsColumn.indicatorItemWidth
indicator.height: scrollContentsColumn.indicatorItemWidth

checked: root.hideDownload
text: qsTr("Hide download")
enabled: !root.isHideDownloadInProgress
Expand Down Expand Up @@ -492,10 +504,10 @@ Page {
toolTipText: Style.ncTextColor
}

spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicator.width: moreMenu.indicatorItemWidth
indicator.height: moreMenu.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
indicator.width: scrollContentsColumn.indicatorItemWidth
indicator.height: scrollContentsColumn.indicatorItemWidth

checkable: true
checked: root.passwordProtectEnabled
Expand All @@ -519,21 +531,21 @@ Page {
Layout.fillWidth: true

height: visible ? implicitHeight : 0
spacing: moreMenu.indicatorSpacing
spacing: scrollContentsColumn.indicatorSpacing

visible: root.passwordProtectEnabled

Image {
Layout.preferredWidth: moreMenu.indicatorItemWidth
Layout.preferredWidth: scrollContentsColumn.indicatorItemWidth
Layout.fillHeight: true

verticalAlignment: Image.AlignVCenter
horizontalAlignment: Image.AlignHCenter
fillMode: Image.Pad

source: "image://svgimage-custom-color/lock-https.svg/" + palette.dark
sourceSize.width: moreMenu.rowIconWidth
sourceSize.height: moreMenu.rowIconWidth
sourceSize.width: scrollContentsColumn.rowIconWidth
sourceSize.height: scrollContentsColumn.rowIconWidth
}

NCInputTextField {
Expand Down Expand Up @@ -621,10 +633,10 @@ Page {
toolTipText: Style.ncTextColor
}

spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicator.width: moreMenu.indicatorItemWidth
indicator.height: moreMenu.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
indicator.width: scrollContentsColumn.indicatorItemWidth
indicator.height: scrollContentsColumn.indicatorItemWidth

checkable: true
checked: root.expireDateEnabled
Expand All @@ -647,21 +659,21 @@ Page {
RowLayout {
Layout.fillWidth: true
height: visible ? implicitHeight : 0
spacing: moreMenu.indicatorSpacing
spacing: scrollContentsColumn.indicatorSpacing

visible: root.expireDateEnabled

Image {
Layout.preferredWidth: moreMenu.indicatorItemWidth
Layout.preferredWidth: scrollContentsColumn.indicatorItemWidth
Layout.fillHeight: true

verticalAlignment: Image.AlignVCenter
horizontalAlignment: Image.AlignHCenter
fillMode: Image.Pad

source: "image://svgimage-custom-color/calendar.svg/" + palette.dark
sourceSize.width: moreMenu.rowIconWidth
sourceSize.height: moreMenu.rowIconWidth
sourceSize.width: scrollContentsColumn.rowIconWidth
sourceSize.height: scrollContentsColumn.rowIconWidth
}

// QML dates are essentially JavaScript dates, which makes them very finicky and unreliable.
Expand All @@ -670,12 +682,19 @@ Page {
SpinBox {
id: expireDateSpinBox

function updateText() {
expireDateSpinBoxTextField.text = textFromValue(value, locale);
}

// Work arounds the limitations of QML's 32 bit integer when handling msecs from epoch
// Instead, we handle everything as days since epoch
readonly property int dayInMSecs: 24 * 60 * 60 * 1000
readonly property int expireDateReduced: Math.floor(root.expireDate / dayInMSecs)
// Reset the model data after binding broken on user interact
onExpireDateReducedChanged: value = expireDateReduced
onExpireDateReducedChanged: {
value = expireDateReduced;
updateText();
}

// We can't use JS's convenient Infinity or Number.MAX_VALUE as
// JS Number type is 64 bits, whereas QML's int type is only 32 bits
Expand Down Expand Up @@ -749,7 +768,6 @@ Page {
Layout.fillWidth: true
height: visible ? implicitHeight : 0


// We want all the internal benefits of the spinbox but don't actually want the
// buttons, so set an empty item as a dummy
up.indicator: Item {}
Expand All @@ -758,6 +776,13 @@ Page {
padding: 0
background: null
contentItem: NCInputTextField {
id: expireDateSpinBoxTextField

validInput: {
const value = expireDateSpinBox.valueFromText(text);
return value >= expireDateSpinBox.from && value <= expireDateSpinBox.to;
}

text: expireDateSpinBox.textFromValue(expireDateSpinBox.value, expireDateSpinBox.locale)
readOnly: !expireDateSpinBox.editable
validator: expireDateSpinBox.validator
Expand Down Expand Up @@ -836,10 +861,10 @@ Page {
toolTipText: Style.ncTextColor
}

spacing: moreMenu.indicatorSpacing
padding: moreMenu.itemPadding
indicator.width: moreMenu.indicatorItemWidth
indicator.height: moreMenu.indicatorItemWidth
spacing: scrollContentsColumn.indicatorSpacing
padding: scrollContentsColumn.itemPadding
indicator.width: scrollContentsColumn.indicatorItemWidth
indicator.height: scrollContentsColumn.indicatorItemWidth

checkable: true
checked: root.noteEnabled
Expand All @@ -862,21 +887,21 @@ Page {
RowLayout {
Layout.fillWidth: true
height: visible ? implicitHeight : 0
spacing: moreMenu.indicatorSpacing
spacing: scrollContentsColumn.indicatorSpacing

visible: root.noteEnabled

Image {
Layout.preferredWidth: moreMenu.indicatorItemWidth
Layout.preferredWidth: scrollContentsColumn.indicatorItemWidth
Layout.fillHeight: true

verticalAlignment: Image.AlignVCenter
horizontalAlignment: Image.AlignHCenter
fillMode: Image.Pad

source: "image://svgimage-custom-color/edit.svg/" + palette.dark
sourceSize.width: moreMenu.rowIconWidth
sourceSize.height: moreMenu.rowIconWidth
sourceSize.width: scrollContentsColumn.rowIconWidth
sourceSize.height: scrollContentsColumn.rowIconWidth
}

NCInputTextEdit {
Expand Down