Skip to content

Commit

Permalink
Feature/3810 replace language image references with css (#3876)
Browse files Browse the repository at this point in the history 
Replace language icon conditionals with CSS classes with background-image
  • Loading branch information
@Vailorium
Vailorium authored Aug 17, 2022
1 parent 3c68e71 commit a05754b
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 116 deletions.
58 changes: 58 additions & 0 deletions src/dotnet/APIView/APIViewWeb/Client/css/site.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,6 +507,64 @@ code {
height: 16px;
z-index: 1;
}

.icon-language {
width: 34px;
height: 34px;
}

.icon-csharp {
background: url(/icons/csharp-original.svg) center center no-repeat;
}

.icon-javascript {
background: url(/icons/javascript-original.svg) center center no-repeat;
}

.icon-python {
background: url(/icons/python-original.svg) center center no-repeat;
}

.icon-c {
background: url(/icons/c-original.svg) center center no-repeat;
}

.icon-cplusplus {
background: url(/icons/cplusplus-original.svg) center center no-repeat;
}

.icon-go {
background: url(/icons/go-original.svg) center center no-repeat;
}

.icon-java {
background: url(/icons/java-original.svg) center center no-repeat;
}

.icon-java-spring {
background: url(/icons/java-spring-original.svg) center center no-repeat;
}

.icon-java-android {
background: url(/icons/java-android-original.svg) center center no-repeat;
}

.icon-swift {
background: url(/icons/swift-original.svg) center center no-repeat;
}

.icon-kotlin {
background: url(/icons/kotlin-original.svg) center center no-repeat;
}

.icon-json {
background: url(/icons/json-original.svg) center center no-repeat;
}

.icon-swagger {
background: url(/icons/swagger-original.svg) center center no-repeat;
}

/*---------------------------------------------------------------------*/

.info-text {
Expand Down
14 changes: 14 additions & 0 deletions src/dotnet/APIView/APIViewWeb/Models/ReviewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,20 @@ public bool IsUserSubscribed(ClaimsPrincipal user)
public string GetUserEmail(ClaimsPrincipal user) =>
NotificationManager.GetUserEmail(user);

// gets CSS safe language name - such that css classes based on language name would not need any escaped characters
public string GetLanguageCssSafeName()
{
switch (Language.ToLower())
{
case "c#":
return "csharp";
case "c++":
return "cplusplus";
default:
return Language.ToLower();
}
}

[JsonIgnore]
public string DisplayName
{
Expand Down
65 changes: 4 additions & 61 deletions src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Review.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,69 +10,12 @@
<div class="col-lg-12 d-flex px-0">
@if (Model.Review.Language != null)
{
var imageSource = String.Empty;
@switch (Model.Review.Language.ToLower())
string iconClassName = "icon-" + Model.Review.GetLanguageCssSafeName();
@if (!string.IsNullOrEmpty(Model.Review.LanguageVariant) && Model.Review.LanguageVariant.ToLower() != "default")
{
case "c#":
imageSource = "icons/csharp-original.svg";
break;
case "javascript":
imageSource = "icons/javascript-original.svg";
break;
case "python":
imageSource = "icons/python-original.svg";
break;
case "c":
imageSource = "icons/c-original.svg";
break;
case "c++":
imageSource = "icons/cplusplus-original.svg";
break;
case "go":
imageSource = "icons/go-original.svg";
break;
case "java":
if(@Model.Review.LanguageVariant != null)
{
switch(@Model.Review.LanguageVariant.ToLower())
{
case "spring":
imageSource = "icons/java-spring-original.svg";
break;
case "android":
imageSource = "icons/java-android-original.svg";
break;
default:
imageSource = "icons/java-original.svg";
break;
}
}
else
{
imageSource = "icons/java-original.svg";
}
break;
case "swift":
imageSource = "icons/swift-original.svg";
break;
case "kotlin":
imageSource = "icons/kotlin-original.svg";
break;
case "json":
imageSource = "icons/json-original.svg";
break;
case "swagger":
imageSource = "icons/swagger-original.svg";
break;
}
if (String.IsNullOrEmpty(imageSource))
{
<span class="badge badge-info"><em>@Model.Review.Language @Model.Review.LanguageVariant</em></span>
iconClassName += "-" + @Model.Review.LanguageVariant.ToLower();
}
else
{
<span><img class="mr-2 mt-1 p-1 border rounded" src="~/@imageSource" width="34" alt="@Model.Review.Language @Model.Review.LanguageVariant" /></span>
}
<span role="img" class="mr-2 mt-1 p-1 border rounded icon-language @iconClassName" aria-label="@Model.Review.Language @Model.Review.LanguageVariant"></span>
}
<p class="h6 mb-0 mr-auto">
@if (Model.Review.ServiceName != null)
Expand Down
59 changes: 4 additions & 55 deletions src/dotnet/APIView/APIViewWeb/Pages/Shared/_ReviewsPartial.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,63 +25,12 @@
<td class="align-middle pl-4 pt-0 pb-0">
@if (review.Language != null)
{
@switch (review.Language.ToLower())
string iconClassName = "icon-" + review.GetLanguageCssSafeName();
@if (!string.IsNullOrEmpty(review.LanguageVariant) && review.LanguageVariant.ToLower() != "default")
{
case "c#":
<img class="mx-1" src="~/icons/csharp-original.svg" alt="@review.Language">
break;
case "javascript":
<img class="mx-1" src="~/icons/javascript-original.svg" alt="@review.Language">
break;
case "python":
<img class="mx-1" src="~/icons/python-original.svg" alt="@review.Language">
break;
case "c":
<img class="mx-1" src="~/icons/c-original.svg" alt="@review.Language">
break;
case "c++":
<img class="mx-1" src="~/icons/cplusplus-original.svg" alt="@review.Language">
break;
case "go":
<img class="mx-1" src="~/icons/go-original.svg" alt="@review.Language">
break;
case "java":
if(@review.LanguageVariant != null)
{
switch(@review.LanguageVariant.ToLower())
{
case "spring":
<img class="mx-1" src="~/icons/java-spring-original.svg" alt="@review.Language @review.LanguageVariant">
break;
case "android":
<img class="mx-1" src="~/icons/java-android-original.svg" alt="@review.Language @review.LanguageVariant">
break;
default:
<img class="mx-1" src="~/icons/java-original.svg" alt="@review.Language">
break;
}
}
else
{
<img class="mx-1" src="~/icons/java-original.svg" alt="@review.Language">
}
break;
case "swift":
<img class="mx-1" src="~/icons/swift-original.svg" alt="@review.Language">
break;
case "kotlin":
<img class="mx-1" src="~/icons/kotlin-original.svg" alt="@review.Language">
break;
case "json":
<img class="mx-1" src="~/icons/json-original.svg" alt="@review.Language">
break;
case "swagger":
<img class="mx-1" src="~/icons/swagger-original.svg" alt="@review.Language">
break;
default:
<img class="mx-1" src="~/icons/file-code.svg" alt="@review.Language">
break;
iconClassName += "-" + @review.LanguageVariant.ToLower();
}
<span role="img" class="mx-1 icon icon-language @iconClassName" aria-label="@review.Language @review.LanguageVariant"></span>
}
<a class="review-name align-middle" asp-page="./Review" asp-route-id="@review.ReviewId">@review.DisplayName.Substring(0, @truncationIndex)</a>
@if (review.IsApproved == true)
Expand Down

0 comments on commit a05754b

Please sign in to comment.