Skip to content

Feature/3810 replace language image references with css #3876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JonathanGiles merged 8 commits into from
Aug 17, 2022
Merged

Feature/3810 replace language image references with css #3876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
51be1b4
replace language icon conditionals with CSS classes with background-i…
Vailorium Aug 8, 2022
65ab01f
fix issue with c++ class name
Vailorium Aug 8, 2022
086351c
Review.cshtml replace != null with IsNullOrEmpty
Vailorium Aug 10, 2022
119fe0a
_ReviewsPartial.cshtml replace != null with IsNullOrEmpty
Vailorium Aug 10, 2022
f4772e1
fix build issue with css icons
Vailorium Aug 10, 2022
7492b00
fix c# css reference
Vailorium Aug 11, 2022
2b46a96
add utility method to transform filename unsafe language strings into…
Vailorium Aug 11, 2022
7530e21
Move css safe language name function from static utility to review model
Vailorium Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/dotnet/APIView/APIViewWeb/Client/css/site.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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