• Icon: Story Story
    • Resolution: Fixed
    • Icon: Minor Minor
    • core
    • None
    • Jenkins 2.248

      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

       

          [JENKINS-63002] Restyle tables and tabs

          Félix Queiruga Balado created issue -
          Félix Queiruga Balado made changes -
          Epic Link New: JENKINS-60919 [ 204316 ]
          Félix Queiruga Balado made changes -
          Attachment New: Table anatomy.jpg [ 51870 ]
          Attachment New: Table tab anatomy.jpg [ 51871 ]
          Attachment New: Tabs and table—Jenkins home—Desktop.jpg [ 51872 ]
          Attachment New: Tabs and table—Plugin manager—Desktop.jpg [ 51873 ]
          Attachment New: Tabs and tables—interactive states.jpg [ 51874 ]
          Félix Queiruga Balado made changes -
          Description Original: 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
          New: 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!
          Félix Queiruga Balado made changes -
          Description Original: 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!
          New: 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

           

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

          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

          Oleg Nenashev added a comment -

          Released in Jenkins 2.248

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

          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.

           

          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.  

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

              Created:
              Updated:
              Resolved: