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

Make all breadcrumbs consistent

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Won't Fix
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Web
    • Estimate:
      Hours
    • Edition:
      Community

      Description

      Too many breadcrumbs patterns coexist in the current project’s space.

      Solution:

      By definition a breadcrumb is a pattern that ease navigation. In the context of the "Measure page" & "Code page", the breadcrumb allows users to explore/navigate the project folders and files. On the issue page its goal is different as its first purpose is to indicate the location of issues. For this reason 2 different breadcrumb designs are necessary.

      Icons are attached if needed.

      Issue page

      • In this context, the bread crumb is not clickable.
      • When the name of a project is too long and leaves no space for the breadcrumb, it should be truncated. The path is the most important information for users and should always be visible without requiring an additional action.
      • When the path is too long the first 2 folders and last 2 folders + file name should be visible first. To make this possible, the middle part of the path will be hidden under the "..." (Hover state color: #8A8A8A)

        

      Measure page and Code page

      • In the context of those 2 pages the breadcrumb serves 2 purposes. Indicate the location of a folder/file and ease navigation.
      • Since the current design leaves a limited space for the breadcrumb we should make sure that the first and last folders are always visible. The space issue should be improved by SONAR-12082
      • On both pages the breadcrumb should use as much space as available.
      • Change the color of the folder icon to #4B9FD6

      Code page

      • When folders are empty and grouped together we indicate to the users what's going on with a tooltip.

       

        Attachments

        1. Code_folder_page.png
          Code_folder_page.png
          88 kB
        2. Code_root_page.png
          Code_root_page.png
          97 kB
        3. code - code viewer.png
          code - code viewer.png
          229 kB
        4. code drilldown.png
          code drilldown.png
          176 kB
        5. folder_icon_blue_version.svg
          3 kB
        6. folder_icon_white_version.svg
          3 kB
        7. Header_Code_Page.png
          Header_Code_Page.png
          197 kB
        8. issue usable.png
          issue usable.png
          218 kB
        9. measures page.png
          measures page.png
          223 kB
        10. measures page folder drilldown.png
          measures page folder drilldown.png
          203 kB
        11. more_path_icon.svg
          2 kB
        12. Screen Shot 2017-02-17 at 18.03.16.png
          Screen Shot 2017-02-17 at 18.03.16.png
          6 kB
        13. Screen Shot 2017-02-17 at 18.03.23.png
          Screen Shot 2017-02-17 at 18.03.23.png
          8 kB
        14. Screen Shot 2017-02-17 at 18.03.32.png
          Screen Shot 2017-02-17 at 18.03.32.png
          12 kB

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            laura.wacrenier Laura Wacrenier
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: