Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-9338

Make all date pickers consistent

    XMLWordPrintable

    Details

      Description

      Problem

      Today we have many different styles for the date picker:

      • In the Background Tasks page
      • In the Rules page
      • In the Issues page
      • In the Issues tab of a project
      • In Administration > Projects > Background tasks

      Moreover this component has some flaws

      • The predefined time ranges take a lot of space in the facets and are not very noticeable
      • When opening the selector, then navigating to another page, the calendar picker remains visible, floating in the middle of nowhere.

      Solution

      The date picker in its default state looks like a single input field with a calendar icon.



      Selecting a time range

      Clicking on the input field opens the widget. For custom ranges, the start date is preselected as you open the widget.

      Clicking on one of the numbers of the calendar will select it as the start date. End date will be automatically selected. "Apply" button remains disabled until a valid range is defined. Numbers prior to the selected start date will turn grey and be impossible to select as an End date.

      Clicking on another number will then select the End date. "Apply" button is made available.

      After applying, the input field is filled with the selected dates.

      If the user has selected one of the predefined ranges on the right, it will immediately close the widget and fill the input field with the corresponding dates. Clicking on the input field again will show the widget with the predefined range highlighted.

      Selecting a single date

      The widget is much simpler, no predefined ranges and no "Apply" button. As soon as the user clicks on a number of the calendar, the widget closes and the input field is filled with the corresponding date.

      See Date pickers section ( https://xtranet.sonarsource.com/display/PLAT/b.+Components#b.Components-Datepickers ) in our design guidelines

        Attachments

        1. Date-picker-01.png
          Date-picker-01.png
          141 kB
        2. Date-picker-02.png
          Date-picker-02.png
          238 kB
        3. Date-picker-03.png
          Date-picker-03.png
          203 kB
        4. Date-picker-04.png
          Date-picker-04.png
          146 kB
        5. Date-picker-05.png
          Date-picker-05.png
          146 kB
        6. Date-picker-06.png
          Date-picker-06.png
          150 kB
        7. Date-picker-07.png
          Date-picker-07.png
          142 kB
        8. Date-picker-08.png
          Date-picker-08.png
          146 kB
        9. Date-picker-09.png
          Date-picker-09.png
          205 kB
        10. Screen Shot 2017-05-29 at 11.57.51.png
          Screen Shot 2017-05-29 at 11.57.51.png
          21 kB
        11. Screen Shot 2017-05-29 at 11.57.58.png
          Screen Shot 2017-05-29 at 11.57.58.png
          18 kB
        12. Screen Shot 2017-05-29 at 11.58.36.png
          Screen Shot 2017-05-29 at 11.58.36.png
          12 kB
        13. Screen Shot 2017-05-29 at 11.59.03.png
          Screen Shot 2017-05-29 at 11.59.03.png
          10 kB
        14. Screen Shot 2017-05-29 at 12.03.42.png
          Screen Shot 2017-05-29 at 12.03.42.png
          46 kB
        15. Screen Shot 2018-04-04 at 09.18.21.png
          Screen Shot 2018-04-04 at 09.18.21.png
          28 kB
        16. Screen Shot 2018-04-04 at 09.18.31.png
          Screen Shot 2018-04-04 at 09.18.31.png
          28 kB

          Activity

            People

            Assignee:
            stas.vilchik Stas Vilchik (Inactive)
            Reporter:
            laura.wacrenier Laura Wacrenier
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Due:
              Created:
              Updated:
              Resolved: