This task is part of <a class="issue-link js-issue-link" data-error-text="Failed to lo

TimePicker widget about slint HOT 2 OPEN

FloVanGH commented on May 27, 2024

TimePicker widget

from slint.

Comments (2)

FloVanGH commented on May 27, 2024 1

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;
      }
}