New default package img, textare padding, reserved icon (#10029)

* New default package img, textare padding, reserved icon * [Dark Theme] Accessibility and UI fixes * Sort by select * default package icon
NuGet · Jun 21, 2024 · 528ea3a · 528ea3a
1 parent d347a8e
commit 528ea3a
Show file tree

Hide file tree

Showing 18 changed files with 91 additions and 35 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/forms.less b/src/Bootstrap/less/forms.less
@@ -424,6 +424,7 @@ output {
   border-radius: 4px;
   border: 1px solid var(--neutralStroke1Rest);
   border-bottom: 2px solid var(--neutralStrokeAccessibleRest);
+  padding: 6px 12px !important;
 
   outline: none !important;
   box-shadow: none !important;

diff --git a/src/Bootstrap/less/theme/common-list-packages.less b/src/Bootstrap/less/theme/common-list-packages.less
@@ -1,4 +1,7 @@
 .list-packages {
+  .package-default-icon {
+    content: var(--default-package-icon, url(../img/default-package-icon-256x256.png));
+  }
 
   .package {
     .break-word;
@@ -34,11 +37,13 @@
         margin-left: 3px;
         vertical-align: top;
         width: 20px;
+        color: var(--brandBackground1Rest);
       }
 
       .edit-button {
         vertical-align: text-bottom;
         margin-left: 10px;
+        display: inline-flex;
       }
 
       .package-by {

diff --git a/src/Bootstrap/less/theme/common-user-package-list.less b/src/Bootstrap/less/theme/common-user-package-list.less
@@ -27,6 +27,10 @@
         white-space: nowrap;
       }
     }
+
+    .package-default-icon {
+      content: var(--default-package-icon, url(../img/default-package-icon-256x256.png));
+    }
   }
 
   .table {

diff --git a/src/Bootstrap/less/theme/page-display-package.less b/src/Bootstrap/less/theme/page-display-package.less
@@ -1,4 +1,8 @@
 .page-package-details {
+  .package-default-icon {
+    content: var(--default-package-icon, url(../img/default-package-icon-256x256.png));
+  }
+
   .no-border {
     border: 0;
   }
@@ -177,6 +181,8 @@
       padding-left: 0;
       padding-right: 0;
       text-align: right;
+      display: flex;
+      justify-content: center;
     }
   }
 

diff --git a/src/Bootstrap/less/theme/page-list-packages.less b/src/Bootstrap/less/theme/page-list-packages.less
@@ -38,8 +38,12 @@
 
   .sortby {
     margin-top: 47px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
 
     label {
+      white-space: nowrap;
       font-weight: 500;
       font-size: large;
     }
@@ -296,6 +300,12 @@
   .tooltip-target {
     position: relative;
     text-decoration: none;
+    color: var(--brandForegroundLinkRest);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--brandForegroundLinkHover);
+    }
   }
 
   .tooltip-wrapper.popover {

diff --git a/src/Bootstrap/less/theme/page-manage-packages.less b/src/Bootstrap/less/theme/page-manage-packages.less
@@ -41,6 +41,10 @@
     }
   }
 
+  .package-default-icon {
+    content: var(--default-package-icon, url(../img/default-package-icon-256x256.png));
+  }
+
   .panel {
     margin-top: 5px;
   }

diff --git a/src/Bootstrap/less/theme/themes.less b/src/Bootstrap/less/theme/themes.less
@@ -5,6 +5,7 @@
     --circuit-board-background-image: url('../img/circuit-board-light-theme.svg');
     --git-background-image: url('../img/git.svg');
     --nuget-logo-background-image: url('../img/nuget-lockup-dark-fill.svg');
+    --default-package-icon: url('../img/default-package-icon.svg');
     --body-background-color: linear-gradient(341deg, rgba(250, 250, 250, 0.00) 15.1%, rgba(11, 108, 255, 0.20) 105.92%), var(--neutralBackground2Rest);
 
     /* Brand colors */
@@ -414,6 +415,7 @@
     --circuit-board-background-image: url('../img/circuit-board-dark-theme.svg');
     --git-background-image: url('../img/git-white.svg');
     --nuget-logo-background-image: url('../img/nuget-lockup-white-fill.svg');
+    --default-package-icon: url('../img/default-package-icon-white.png');
 
     /* Brand colors */
     /* brand tokens have been swapped to use blues from the .NET brand colors */

diff --git a/src/NuGetGallery/Content/gallery/css/bootstrap.min.css b/src/NuGetGallery/Content/gallery/css/bootstrap.min.css
diff --git a/src/NuGetGallery/Content/gallery/img/default-package-icon-white.png b/src/NuGetGallery/Content/gallery/img/default-package-icon-white.png
diff --git a/src/NuGetGallery/Strings.Designer.cs b/src/NuGetGallery/Strings.Designer.cs
diff --git a/src/NuGetGallery/Strings.resx b/src/NuGetGallery/Strings.resx
@@ -1261,6 +1261,6 @@ The {1} Team</value>
     <value>This package is compatible with all versions of {0}.</value>
   </data>
   <data name="FrameworkFilters_Tooltip" xml:space="preserve">
-    <value>Filters packages based on the target frameworks they are compatible with. Click here to learn more.</value>
+    <value>Filters packages based on the target frameworks they are compatible with.</value>
   </data>
 </root>
diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
@@ -269,9 +269,8 @@
                     <div class="package-title">
                         <h1>
                             <span class="pull-left">
-                                <img class="package-icon img-responsive" aria-hidden="true" alt=""
-                                     src="@(PackageHelper.ShouldRenderUrl(Model.IconUrl) && Model.ShowDetailsAndLinks ? Model.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
-                                     @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/default-package-icon-256x256.png")) />
+                                <img class="package-icon img-responsive @(PackageHelper.ShouldRenderUrl(Model.IconUrl) && Model.ShowDetailsAndLinks ? null : "package-default-icon")" aria-hidden="true" alt=""
+                                     src="@(PackageHelper.ShouldRenderUrl(Model.IconUrl) && Model.ShowDetailsAndLinks ? Model.IconUrl : null)" />
                             </span>
                             <span class="title">
                                 @Html.BreakWord(Model.Id)
@@ -974,7 +973,7 @@
                                             else
                                             {
                                                 <td tabindex="0" class="package-icon-cell package-warning-icon" aria-label="@packageVersion.PackageWarningIconTitle">
-                                                    <i class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></i>
+                                                    <i tabindex="0" class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></i>
                                                 </td>
                                             }
                                         </tr>

diff --git a/src/NuGetGallery/Views/Shared/ListPackages.cshtml b/src/NuGetGallery/Views/Shared/ListPackages.cshtml
@@ -94,23 +94,24 @@
                                     <legend style="display: flex; gap: 6px;">
                                         <a href="@(Model.FrameworksFilteringInformationLink)" class="frameworkfilters-info"
                                            data-content="@NuGetGallery.Strings.FrameworkFilters_Tooltip"
-                                           aria-label="@NuGetGallery.Strings.FrameworkFilters_Tooltip">
+                                           aria-label="@NuGetGallery.Strings.FrameworkFilters_Tooltip"
+                                           id="frameworksfiltersid">
                                             Frameworks
                                         </a>
-                                        <a class="tooltip-target" href="javascript:void(0)">
+                                        <span class="tooltip-target" href="javascript:void(0)">
                                             <span>
-                                            <i class="framework-filter-info-icon ms-Icon ms-Icon--Info"></i>
-
+                                                <i class="framework-filter-info-icon ms-Icon ms-Icon--Info"></i>
                                             </span>
-                                            <span class="tooltip-block" role="tooltip">
+                                            <span class="tooltip-block" role="tooltip" aria-labelledby="frameworksfiltersid">
                                                 <span class="tooltip-wrapper tooltip-with-icon popover right">
                                                     <span class="arrow"></span>
                                                     <span class="popover-content">
                                                         @NuGetGallery.Strings.FrameworkFilters_Tooltip
+                                                        <a href="@(Model.FrameworksFilteringInformationLink)">Click here to learn more.</a>
                                                     </span>
                                                 </span>
                                             </span>
-                                        </a>
+                                        </span>
                                     </legend>
                                     @if (Model.IsAdvancedFrameworkFilteringEnabled)
                                     {
@@ -124,19 +125,19 @@
                                             <input type="hidden" id="includeComputedFrameworks" name="includeComputedFrameworks" value="@Model.IncludeComputedFrameworks.ToString().ToLower()">
                                         </div>
                                         <div class="framework-filter-mode-option">
-                                            <p>
+                                            <p id="frameworkfiltermodeid">
                                                 Framework Filter Mode
-                                                <a class="tooltip-target" href="javascript:void(0)">
+                                                <span class="tooltip-target" href="javascript:void(0)">
                                                     <i class="frameworkfiltermode-info ms-Icon ms-Icon--Info"></i>
-                                                    <span class="tooltip-block" role="tooltip">
+                                                    <span class="tooltip-block" role="tooltip" aria-labelledby="frameworkfiltermodeid">
                                                         <span class="tooltip-wrapper tooltip-with-icon popover right">
                                                             <span class="arrow"></span>
                                                             <span class="popover-content">
                                                                 Decides whether to show packages matching ALL of the selected Target Frameworks (TFMs), or ANY of them.
                                                             </span>
                                                         </span>
                                                     </span>
-                                                </a>
+                                                </span>
                                             </p>
                                             <div class="toggle-switch-control">
                                                 <input type="radio" id="all-selector" name="frameworkFilterMode" value="all" tabindex="0" @(Model.FrameworkFilterMode == "any" ? "" : "checked") />
@@ -198,7 +199,7 @@
             </div>
             <div class="@(Model.IsAdvancedSearchFlightEnabled ? "col-md-9" : "col-md-12")" id="results-column">
                 <div class="row">
-                    <div class="col-md-9">
+                    <div class="col-md-8">
                         <h1 tabindex="0">
                             @if (String.IsNullOrWhiteSpace(Model.SearchTerm))
                             {
@@ -228,15 +229,13 @@
                     </div>
                     @if (Model.IsAdvancedSearchFlightEnabled)
                     {
-                        <div class="sortby col-md-3">
-                            <div class="row">
-                                <label for="sortby">Sort by</label>
-                                <select name="sortby" id="sortby" form="search-form" aria-label="sort package search results by" class="select-brand">
+                        <div class="sortby col-md-4">
+                                <label for="sortby" class="">Sort by</label>
+                                <select name="sortby" id="sortby" form="search-form" aria-label="sort package search results by" class="form-control select-brand">
                                     <option value="relevance" aria-label="Sort By: Relevance" @(Model.SortBy == "relevance" ? "selected" : "")>Relevance</option>
                                     <option value="totalDownloads-desc" aria-label="Sort By: Downloads" @(Model.SortBy == "totalDownloads-desc" ? "selected" : "")>Downloads</option>
                                     <option value="created-desc" aria-label="Sort By: Recently updated" @(Model.SortBy == "created-desc" ? "selected" : "")>Recently updated</option>
                                 </select>
-                            </div>
                         </div>
                     }
                     else

diff --git a/src/NuGetGallery/Views/Shared/_ListPackage.cshtml b/src/NuGetGallery/Views/Shared/_ListPackage.cshtml
@@ -30,9 +30,8 @@
 
     <div class="row">
         <div class="col-sm-1 hidden-xs hidden-sm col-package-icon">
-            <img class="package-icon img-responsive" aria-hidden="true" alt=""
-                 src="@(PackageHelper.ShouldRenderUrl(Model.IconUrl) ? Model.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
-                 @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/default-package-icon-256x256.png")) />
+            <img class="package-icon img-responsive @(!PackageHelper.ShouldRenderUrl(Model.IconUrl) ? "package-default-icon" : null)" aria-hidden="true" alt=""
+                 src="@(PackageHelper.ShouldRenderUrl(Model.IconUrl) ? Model.IconUrl : null)" />
         </div>
         <div class="col-sm-11">
             <div class="package-header">
@@ -50,10 +49,8 @@
 
                 @if (Model.IsVerified.HasValue && Model.IsVerified.Value)
                 {
-                    <img class="reserved-indicator"
-                         src="~/Content/gallery/img/reserved-indicator.svg"
-                         @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-20x20.png"))
-                         data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0" alt="@Strings.ReservedNamespace_ReservedIndicatorTooltip"/>
+                    <i class="ms-Icon ms-Icon--SkypeCircleCheck reserved-indicator"
+                        data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0" alt="@Strings.ReservedNamespace_ReservedIndicatorTooltip"/>
                 }
 
                 @if (showEditButton && (Model.CanEdit || Model.CanManageOwners || Model.CanUnlistOrRelist))