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.

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

TimePicker widget #5087

Closed
FloVanGH opened this issue Apr 17, 2024 · 2 comments · Fixed by #5251
Closed

TimePicker widget #5087

FloVanGH opened this issue Apr 17, 2024 · 2 comments · Fixed by #5251
Labels
a:platform-android Android platform integration (mO,bS) a:widgets Implementation of widgets (from std-widgets.slint) and their styles (mF,bS)

Comments

@FloVanGH
Copy link
Member

FloVanGH commented Apr 17, 2024

This task is part of #46 (Initial Android support).

image

Base requirements

  • provided as dedicated widget that can be used inside of a component or a PopupWindow
  • provided also as ready to use component already wrapped in a Dialog /PopupWindow
  • clear and easy to use api / model
  • localizable
  • provided in all styles (main priority material style)

References

@FloVanGH FloVanGH added a:widgets Implementation of widgets (from std-widgets.slint) and their styles (mF,bS) a:platform-android Android platform integration (mO,bS) labels Apr 17, 2024
@FloVanGH
Copy link
Member Author

FloVanGH commented Apr 17, 2024

API draft

This is the collection of some ideas how the TimePicker could looks like from API side and should be used as base for discussions.

export component TimePicker {
      in-out property <date-time> current-time;
      in property <string> local: "en_US";
}

Use as component and inside of a PopupWindow

import { Button, TimePicker } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      time-picker-popup := PopupWindow {
          width: 200px;
          height: 200px;
          
          TimePicker {}
      }
      
      VerticalLayout {
          time-picker := TimePicker {}
          Text {
              text: time-picker.current-time;
          }
          
          Button {
                text: "Open TimePicker Popup";
                clicked => {
                    time-picker-popup.show();
                }
          }
      }
      
}

Ready to use dialog

export component TimePickerPopup {
      in-out property <date-time> current-time;
      in property <string> local: "en_US";
      
      public function show() -> date-time {
            //...
      }
}
import { TimePickerPopup } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      time-picker-popup := TimePickerPopup {
            width: 200px;
            height: 200px;
      }
      
        Button {
                text: "Open TimePicker Popup";
                clicked => {
                    debug(time-picker-popup.show());
                }
          }
}

Use with LineEdit

The idea is that if input-type of LineEdit is set and it gets focus a time picker popup open automatically. As alternative a more explicit method that give more flexibility when the popup should be open could be possible.

import { LineEdit } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      LineEdit {
            input-type:  InputType.time;
      }
}

@WilstonOreo
Copy link
Contributor

Regarding the date-time type, I added a separate issue to track this: #5122

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a:platform-android Android platform integration (mO,bS) a:widgets Implementation of widgets (from std-widgets.slint) and their styles (mF,bS)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants