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

Restyle tables and tabs

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Resolved (View Workflow)
    • Priority: Minor
    • Resolution: Fixed
    • Component/s: core
    • Labels:
      None
    • Similar Issues:
    • Epic Link:
    • Released As:
      Jenkins 2.248

      Description

      Goals of this task

      • Revamp tables and tab styles according to the discovery work performed by the UX SIG.
      • Add a proper suite of CSS variables to improve the themeability of the tabs and tables.

      Design brief

      The design documents are attached to this issue

       

        Attachments

          Issue Links

            Activity

            fqueiruga Félix Queiruga Balado created issue -
            fqueiruga Félix Queiruga Balado made changes -
            Field Original Value New Value
            Epic Link JENKINS-60919 [ 204316 ]
            fqueiruga Félix Queiruga Balado made changes -
            Attachment Table anatomy.jpg [ 51870 ]
            Attachment Table tab anatomy.jpg [ 51871 ]
            Attachment Tabs and table—Jenkins home—Desktop.jpg [ 51872 ]
            Attachment Tabs and table—Plugin manager—Desktop.jpg [ 51873 ]
            Attachment Tabs and tables—interactive states.jpg [ 51874 ]
            fqueiruga Félix Queiruga Balado made changes -
            Description h3. Goals of this task

            * Revamp tables and tab styles according to the discovery work performed by the UX SIG.
            * Add a proper suite of CSS variables to improve the themeability of the tabs and tables.

            h3. Design brief

            TBD
            h3. Goals of this task
             * Revamp tables and tab styles according to the discovery work performed by the UX SIG.
             * Add a proper suite of CSS variables to improve the themeability of the tabs and tables.

            h3. Design brief

            !Table anatomy.jpg!
            fqueiruga Félix Queiruga Balado made changes -
            Description h3. Goals of this task
             * Revamp tables and tab styles according to the discovery work performed by the UX SIG.
             * Add a proper suite of CSS variables to improve the themeability of the tabs and tables.

            h3. Design brief

            !Table anatomy.jpg!
            h3. Goals of this task
             * Revamp tables and tab styles according to the discovery work performed by the UX SIG.
             * Add a proper suite of CSS variables to improve the themeability of the tabs and tables.

            h3. Design brief

            The design documents are attached to this issue

             
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            The PR has been merged. I have created 2 follow up PRs to improve the looks:

            Show
            fqueiruga Félix Queiruga Balado added a comment - The PR has been merged. I have created 2 follow up PRs to improve the looks: Add a compact variant for the tables  https://github.com/jenkinsci/jenkins/pull/4855 Restyle sortable headers  https://github.com/jenkinsci/jenkins/pull/4853
            Hide
            oleg_nenashev Oleg Nenashev added a comment -

            Released in Jenkins 2.248

            Show
            oleg_nenashev Oleg Nenashev added a comment - Released in Jenkins 2.248
            oleg_nenashev Oleg Nenashev made changes -
            Released As Jenkins 2.248
            Resolution Fixed [ 1 ]
            Status Open [ 1 ] Resolved [ 5 ]
            bcoveny Bruce Coveny made changes -
            Attachment image-2020-07-22-16-11-03-656.png [ 51969 ]
            Hide
            bcoveny Bruce Coveny added a comment -

            The new layout for tabs does not look very good.  With longer tab names in our system they change the height of every tab.  With large number of tabs it adds a scroll bar under the tabs so now to get to a later tab you have to scroll over and do not get to see all tabs when loading the UI.

             

            Show
            bcoveny Bruce Coveny added a comment - The new layout for tabs does not look very good.  With longer tab names in our system they change the height of every tab.  With large number of tabs it adds a scroll bar under the tabs so now to get to a later tab you have to scroll over and do not get to see all tabs when loading the UI.  
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            Bruce Coveny can you please raise a bug so it can be backported if needed? 

            The height change looks weird. About the scrollbar, what was the previous behaviour? 

            Show
            fqueiruga Félix Queiruga Balado added a comment - Bruce Coveny can you please raise a bug so it can be backported if needed?  The height change looks weird. About the scrollbar, what was the previous behaviour? 
            fqueiruga Félix Queiruga Balado made changes -
            fqueiruga Félix Queiruga Balado made changes -
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            Playing around with this a bit this would be the easiest solution:

             

            This is also consistent with what Bootstrap does:

            Would this solution be similar to the previous behaviour?

            Show
            fqueiruga Félix Queiruga Balado added a comment - Playing around with this a bit this would be the easiest solution:   This is also consistent with what Bootstrap does: Would this solution be similar to the previous behaviour?
            bcoveny Bruce Coveny made changes -
            Attachment image-2020-07-23-07-39-08-516.png [ 51980 ]
            bcoveny Bruce Coveny made changes -
            Attachment image-2020-07-23-07-41-15-550.png [ 51981 ]
            Hide
            bcoveny Bruce Coveny added a comment -

            Félix Queiruga Balado

            Yes the previous look was like you showed.

             

            That would look better for the image that you displayed and be consistent with the feel that Jenkins has been at.

            Do you still want me to create a new Jira issue?

             

             

            Show
            bcoveny Bruce Coveny added a comment - Félix Queiruga Balado Yes the previous look was like you showed.   That would look better for the image that you displayed and be consistent with the feel that Jenkins has been at. Do you still want me to create a new Jira issue?    
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            Great. Yes, please create the Jira bug and link it to this one. The reason is that it will be needed for the fix to be backported into a stable release.

            Show
            fqueiruga Félix Queiruga Balado added a comment - Great. Yes, please create the Jira bug and link it to this one. The reason is that it will be needed for the fix to be backported into a stable release.
            bcoveny Bruce Coveny made changes -
            Link This issue causes JENKINS-63180 [ JENKINS-63180 ]
            Hide
            bcoveny Bruce Coveny added a comment -

            Félix Queiruga Balado I have created and linked JENKINS-63180, let me know if anything further necessary.  THANKS!!

            Show
            bcoveny Bruce Coveny added a comment - Félix Queiruga Balado I have created and linked JENKINS-63180 , let me know if anything further necessary.  THANKS!!
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            No problem, we'll look at it!

            Show
            fqueiruga Félix Queiruga Balado added a comment - No problem, we'll look at it!

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              fqueiruga Félix Queiruga Balado
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: