Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-62437

Change Jenkins configuration UI from tables to divs

    XMLWordPrintable

Details

    • Accessibility-Config-UI-tables-to-div

    Description

      We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently the Jenkins's UI includes a lot of tables on configuration pages. These tables are very mobile hostile. The UI is also not in line with modern UIs.

      Testing

      Examples

      Here's one example from Windows 10's settings:

      Note that the label for a field is above the field – not to the left of the field.

      Here's a much older UI from Windows:

      Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

       

      Attachments

        Issue Links

          Activity

            oleg_nenashev Oleg Nenashev created issue -
            oleg_nenashev Oleg Nenashev made changes -
            Field Original Value New Value
            Link This issue relates to JENKINS-55787 [ JENKINS-55787 ]
            oleg_nenashev Oleg Nenashev made changes -
            Assignee Josh Soref [ jsoref ]
            oleg_nenashev Oleg Nenashev made changes -
            Summary CLONE - Change Jenkins configuration UI from tables to divs Change Jenkins configuration UI from tables to divs
            oleg_nenashev Oleg Nenashev made changes -
            Labels accessibility ux ux-sig accessibility roadmap ux ux-sig
            oleg_nenashev Oleg Nenashev made changes -
            Issue Type Story [ 10002 ] Epic [ 10001 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Name Accessibility-Config-UI-tables-to-div
            oleg_nenashev Oleg Nenashev made changes -
            Description Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts.

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            oleg_nenashev Oleg Nenashev made changes -
            Epic Child JENKINS-56109 [ 197541 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62464 [ 206465 ]
            megathaum megathaum made changes -
            Epic Child JENKINS-62500 [ 206511 ]
            megathaum megathaum made changes -
            Epic Child JENKINS-62518 [ 206531 ]
            markewaite Mark Waite made changes -
            Epic Child JENKINS-62589 [ 206630 ]
            oleg_nenashev Oleg Nenashev made changes -
            Description We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts.

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently the Jenkins's UI includes a lot of tables on configuration pages. These tables are very mobile hostile. The UI is also not in line with modern UIs.
            h2. Testing
             * Quick-start: [https://github.com/oleg-nenashev/jenkins-tabs-to-divs-config-migration-testenv]
             * Manual setup: {{docker run --rm -ti -p 8080:8080 -e ID=3895 jenkins/core-pr-tester}}

            h2. Examples

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=372,height=453!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=369,height=375!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=349,height=243!

             
            oleg_nenashev Oleg Nenashev made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            oleg_nenashev Oleg Nenashev made changes -
            Labels accessibility roadmap ux ux-sig accessibility roa roadmap ux ux-sig
            oleg_nenashev Oleg Nenashev made changes -
            Labels accessibility roa roadmap ux ux-sig accessibility roadmap ux ux-sig
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62787 [ 207002 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62788 [ 207003 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62789 [ 207004 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62799 [ 207016 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62800 [ 207017 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62801 [ 207018 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62803 [ 207020 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62804 [ 207021 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62805 [ 207023 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62806 [ 207024 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62807 [ 207025 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62808 [ 207027 ]
            fqueiruga Félix Queiruga Balado made changes -
            Status In Progress [ 3 ] Open [ 1 ]
            fqueiruga Félix Queiruga Balado made changes -
            Priority Major [ 3 ] Minor [ 4 ]
            fqueiruga Félix Queiruga Balado made changes -
            Priority Minor [ 4 ] Major [ 3 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62809 [ 207028 ]
            jglick Jesse Glick made changes -
            Epic Child JENKINS-62813 [ 207036 ]
            jglick Jesse Glick made changes -
            Epic Child JENKINS-62817 [ 207040 ]
            ealvarez Esther Álvarez Feijoo made changes -
            Epic Child JENKINS-62822 [ 207046 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62824 [ 207048 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62825 [ 207049 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62826 [ 207050 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62827 [ 207051 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62828 [ 207052 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62829 [ 207053 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62845 [ 207071 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62846 [ 207072 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62847 [ 207073 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62848 [ 207074 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62849 [ 207075 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62850 [ 207076 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62851 [ 207077 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62852 [ 207078 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62853 [ 207079 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62854 [ 207080 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62855 [ 207081 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62856 [ 207082 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62857 [ 207083 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62858 [ 207084 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62859 [ 207085 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62860 [ 207086 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62861 [ 207087 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62862 [ 207088 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62863 [ 207089 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62864 [ 207090 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62865 [ 207091 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62866 [ 207092 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62867 [ 207093 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62868 [ 207094 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62869 [ 207095 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62870 [ 207096 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62871 [ 207097 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62859 [ 207085 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62860 [ 207086 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62861 [ 207087 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62862 [ 207088 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62863 [ 207089 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62864 [ 207090 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62858 [ 207084 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62857 [ 207083 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62856 [ 207082 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62855 [ 207081 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62854 [ 207080 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62853 [ 207079 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62852 [ 207078 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62895 [ 207218 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62897 [ 207220 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62898 [ 207221 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62899 [ 207222 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62900 [ 207223 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62901 [ 207224 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62902 [ 207225 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62903 [ 207226 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62904 [ 207227 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62905 [ 207228 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62906 [ 207229 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62907 [ 207230 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62908 [ 207231 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62909 [ 207232 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62910 [ 207233 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62911 [ 207234 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62912 [ 207235 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62913 [ 207236 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62914 [ 207237 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62916 [ 207240 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62917 [ 207241 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62918 [ 207242 ]
            timja Tim Jacomb made changes -
            Epic Child JENKINS-62867 [ 207093 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-62869 [ 207095 ]
            timja Tim Jacomb made changes -
            Epic Child JENKINS-62822 [ 207046 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Child JENKINS-64081 [ 209079 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Child JENKINS-64054 [ 209041 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Child JENKINS-64142 [ 209166 ]
            larsskj Lars Skjærlund made changes -
            Epic Child JENKINS-64195 [ 209234 ]
            jsoref Josh Soref made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            jimklimov Jim Klimov made changes -
            Epic Child JENKINS-64385 [ 209483 ]
            jimklimov Jim Klimov made changes -
            Epic Child JENKINS-64386 [ 209484 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Child JENKINS-64072 [ 209063 ]
            fqueiruga Félix Queiruga Balado made changes -
            Epic Child JENKINS-64639 [ 209895 ]
            mcardenasblanco Manuel Cardenas made changes -
            Epic Child JENKINS-65193 [ 210620 ]
            jimklimov Jim Klimov made changes -
            Epic Child JENKINS-65644 [ 211367 ]
            klinikaborsikuret klinik made changes -
            Epic Child JENKINS-65778 [ 211535 ]
            klinikaborsikuret klinik made changes -
            Epic Child JENKINS-65782 [ 211539 ]
            klinikaborsikuret klinik made changes -
            Epic Child JENKINS-65784 [ 211541 ]
            klinikaborsikuret klinik made changes -
            Epic Child JENKINS-65787 [ 211544 ]
            mwinter69 Markus Winter made changes -
            Epic Child JENKINS-65787 [ 211544 ]
            jglick Jesse Glick made changes -
            Epic Child JENKINS-66742 [ 212750 ]
            liangbinstudy liang bin made changes -
            Epic Child JENKINS-66869 [ 213081 ]

            People

              Unassigned Unassigned
              oleg_nenashev Oleg Nenashev
              Votes:
              3 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated: