-
Notifications
You must be signed in to change notification settings - Fork 537
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.
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
Added TimePicker widget #5251
Added TimePicker widget #5251
Conversation
c71778d
to
ded8c67
Compare
Hi there, I'm not an expert in in Slint, but I wanted to give the proposed widget a try. I implemented it into my project, and I'm pleased to say that it works very well. Great job, @FloVanGH! I have a question regarding the use of the selected time in programming languages like Rust, C++, or JavaScript. For instance, with a line edit, you would typically use a callback with a string and react to it in Rust with something like How should "Time" be used as a callback in this context? Thank you in advance for your help! |
Hi @develcooking , thank you :-). Here some example code that hopefully helps you: import { Button, TimePicker, Time } from "std-widgets.slint";
export component AppWindow inherits Window {
in-out property <Time> current-time;
callback update-current-time(Time);
pure callback time-to-string(Time) -> string;
width: 600px;
height: 400px;
HorizontalLayout {
time-label := Text {
text: root.time-to-string(root.current-time);
}
Button {
text: "Open TP";
clicked => {
time-picker.show();
}
}
}
time-picker := PopupWindow {
x: (root.width - 340px) / 2;
y: (root.height - 500px) / 2;
width: 340px;
height: 500px;
TimePicker {
time: root.current-time;
twenty-four-hour: true;
canceled => {
time-picker.close();
}
accepted(time) => {
root.current-time = time;
time-picker.close();
}
}
}
} slint::include_modules!();
use slint::*;
pub fn main() {
let app_window = AppWindow::new().unwrap();
main_window.on_time_to_string(|time: Time| {
SharedString::from(/* use e.g. the chrono crate to get the time as string*/)
});
app_window.run().unwrap();
} That is just a small example. There is an ongoing work on property changed callbacks. After it is official released it can helps you to e.g. check if |
fb71edc
to
c756233
Compare
f80f197
to
34212bb
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks overall good to me, the API is tidy. My main issue is the 24-hour format selection.
|
||
### Properties | ||
|
||
- **`twenty-four-hour`**: (_in_ _bool_): Sets to true to enable 24 hour selection otherwise it is displayed in AM/PM mode. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Web browsers use the system default for <input type="time">
with regards to 12-hour format vs. 24-hour format. I think we should do the same.
If we can't determine the system default, I think we should default to 24-hours.
We could offer an optional API to override that, and then I'd call it in property <bool> use-24-hour-format: true;
(note the default).
In reality, I'd use in property <bool> use-24-hour-format: SlintInternals.system-time-24-hour-format;
and default to true there.
The documentation should explain what the default is here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's ok for me.
Update internal/compiler/widgets/qt/time-picker.slint Update internal/compiler/widgets/material-base/time-picker.slint Update internal/compiler/widgets/fluent-base/time-picker.slint Update internal/compiler/widgets/cupertino-base/time-picker.slint Update tests/cases/widgets/timepicker.slint Update internal/compiler/widgets/cosmic-base/time-picker.slint Co-Authored-By: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
d36ccda
to
3d8f9f0
Compare
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…e picker's property Just the C++ bit was missing.
The icons are the same as in the other styles.
Fixes #5087