From 86fdba177ad82f3dcdfc237631fef4588042b9d6 Mon Sep 17 00:00:00 2001
From: John Olheiser <42128690+jolheiser@users.noreply.github.com>
Date: Tue, 11 Feb 2020 11:02:41 -0600
Subject: Add Octicon SVG spritemap (#10107)

* Add octicon SVG sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Static prefix

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* SVG for all repo icons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make vendor

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap out octicons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move octicons to top of less imports

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix JS

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Definitely not a search/replace

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed regex

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move to more generic calls and webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make svg -> make webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg-sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed a test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg from makefile

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Suggestions

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Attempt to fix test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert timetracking test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap .octicon for .svg in less

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add aria-hidden

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Replace mega-octicon

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix webpack globbing on Windows

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert

Co-Authored-By: silverwind <me@silverwind.io>

* Fix octions from upstream

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix Vue and missed JS function

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add JS helper and PWA

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Preload SVG

Signed-off-by: jolheiser <john.olheiser@gmail.com>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <matti@mdranta.net>
---
 templates/org/header.tmpl            |  4 ++--
 templates/org/home.tmpl              | 12 ++++++------
 templates/org/member/members.tmpl    | 10 ++++++++--
 templates/org/settings/delete.tmpl   |  2 +-
 templates/org/team/navbar.tmpl       |  6 +++---
 templates/org/team/repositories.tmpl | 10 +++++++++-
 templates/org/team/sidebar.tmpl      |  2 +-
 templates/org/team/teams.tmpl        |  2 +-
 8 files changed, 31 insertions(+), 17 deletions(-)

(limited to 'templates/org')

diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
index 806682aca9..2dc93dbf8d 100644
--- a/templates/org/header.tmpl
+++ b/templates/org/header.tmpl
@@ -9,11 +9,11 @@
 					<div class="ui right">
 						<div class="ui menu">
 							<a class="{{if $.PageIsOrgMembers}}active{{end}} item" href="{{$.OrgLink}}/members">
-								<i class="octicon octicon-organization"></i>&nbsp;{{$.i18n.Tr "org.people"}}
+								{{svg "octicon-organization" 16}}&nbsp;{{$.i18n.Tr "org.people"}}
 								<div class="floating ui black label">{{.NumMembers}}</div>
 							</a>
 							<a class="{{if $.PageIsOrgTeams}}active{{end}} item" href="{{$.OrgLink}}/teams">
-								<i class="octicon octicon-jersey"></i>&nbsp;{{$.i18n.Tr "org.teams"}}
+								{{svg "octicon-jersey" 16}}&nbsp;{{$.i18n.Tr "org.teams"}}
 								<div class="floating ui black label">{{.NumTeams}}</div>
 							</a>
 						</div>
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 0aa575707a..46c590342b 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -7,12 +7,12 @@
 		<div id="org-info">
 			<div class="ui header">
 				{{.Org.DisplayName}}
-				{{if .IsOrganizationOwner}}<a class="text grey" href="{{.OrgLink}}/settings"><span class="octicon octicon-gear"></span></a>{{end}}
+				{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16}}</a>{{end}}
 			</div>
 			{{if .Org.Description}}<p class="desc">{{.Org.Description}}</p>{{end}}
 			<div class="text grey meta">
-				{{if .Org.Location}}<div class="item"><span class="octicon octicon-location"></span> <span>{{.Org.Location}}</span></div>{{end}}
-				{{if .Org.Website}}<div class="item"><span class="octicon octicon-link"></span> <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
+				{{if .Org.Location}}<div class="item">{{svg "octicon-location" 16}} <span>{{.Org.Location}}</span></div>{{end}}
+				{{if .Org.Website}}<div class="item">{{svg "octicon-link" 16}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
 			</div>
 		</div>
 	</div>
@@ -24,7 +24,7 @@
 			<div class="ui eleven wide column">
 				{{if .CanCreateOrgRepo}}
 					<div class="text right">
-						<a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.ID}}"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
+						<a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.ID}}">{{svg "octicon-repo-create" 16}} {{.i18n.Tr "new_repo"}}</a>
 					</div>
 					<div class="ui divider"></div>
 				{{end}}
@@ -38,7 +38,7 @@
 					<strong>{{.i18n.Tr "org.people"}}</strong>
 					{{if .IsOrganizationMember}}
 						<div class="ui right">
-							<a class="text grey" href="{{.OrgLink}}/members">{{.Org.NumMembers}} <span class="octicon octicon-chevron-right"></span></a>
+							<a class="text grey" href="{{.OrgLink}}/members">{{.Org.NumMembers}} {{svg "octicon-chevron-right" 16}}</a>
 						</div>
 					{{end}}
 				</h4>
@@ -55,7 +55,7 @@
 					<div class="ui top attached header">
 						<strong>{{.i18n.Tr "org.teams"}}</strong>
 						<div class="ui right">
-							<a class="text grey" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> <span class="octicon octicon-chevron-right"></span></a>
+							<a class="text grey" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right" 16}}</a>
 						</div>
 					</div>
 					<div class="ui attached table segment teams">
diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
index 03aadf97b8..81cfcf51e6 100644
--- a/templates/org/member/members.tmpl
+++ b/templates/org/member/members.tmpl
@@ -34,7 +34,7 @@
 							{{$.i18n.Tr "org.members.member_role"}}
 						</div>
 						<div class="meta">
-							<strong>{{if index $.MembersIsUserOrgOwner .ID}}<span class="octicon octicon-shield"></span> {{$.i18n.Tr "org.members.owner"}}{{else}}{{$.i18n.Tr "org.members.member"}}{{end}}</strong>
+							<strong>{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock" 16}} {{$.i18n.Tr "org.members.owner"}}{{else}}{{$.i18n.Tr "org.members.member"}}{{end}}</strong>
 						</div>
 					</div>
 					<div class="ui one wide column center">
@@ -42,7 +42,13 @@
 							2FA
 						</div>
 						<div class="meta">
-							<strong><span class="octicon {{if index $.MembersTwoFaStatus .ID}}octicon-check text green{{else}}octicon-x{{end}}"></span></strong>
+							<strong>
+								{{if index $.MembersTwoFaStatus .ID}}
+									<span class="text green">{{svg "octicon-check" 16}}</span>
+								{{else}}
+									{{svg "octicon-x" 16}}
+								{{end}}
+							</strong>
 						</div>
 					</div>
 					<div class="ui four wide column">
diff --git a/templates/org/settings/delete.tmpl b/templates/org/settings/delete.tmpl
index 3b0ee09b17..729126b7b9 100644
--- a/templates/org/settings/delete.tmpl
+++ b/templates/org/settings/delete.tmpl
@@ -11,7 +11,7 @@
 				</h4>
 				<div class="ui attached warning segment">
 					<div class="ui red message">
-						<p class="text left"><i class="octicon octicon-alert"></i> {{.i18n.Tr "org.settings.delete_prompt" | Str2html}}</p>
+						<p class="text left">{{svg "octicon-alert" 16}} {{.i18n.Tr "org.settings.delete_prompt" | Str2html}}</p>
 					</div>
 					<form class="ui form ignore-dirty" id="delete-form" action="{{.Link}}" method="post">
 						{{.CsrfTokenHtml}}
diff --git a/templates/org/team/navbar.tmpl b/templates/org/team/navbar.tmpl
index 1a8f108331..95329a2be3 100644
--- a/templates/org/team/navbar.tmpl
+++ b/templates/org/team/navbar.tmpl
@@ -1,4 +1,4 @@
 <div class="ui top attached tabular menu">
-  <a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}"><span class="octicon octicon-person"></span> <strong>{{.Team.NumMembers}}</strong>&nbsp; {{$.i18n.Tr "org.lower_members"}}</a>
-  <a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories"><span class="octicon octicon-repo"></span> <strong>{{.Team.NumRepos}}</strong>&nbsp; {{$.i18n.Tr "org.lower_repositories"}}</a>
-</div>
\ No newline at end of file
+  <a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}">{{svg "octicon-person" 16}} <strong>{{.Team.NumMembers}}</strong>&nbsp; {{$.i18n.Tr "org.lower_members"}}</a>
+  <a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories">{{svg "octicon-repo" 16}} <strong>{{.Team.NumRepos}}</strong>&nbsp; {{$.i18n.Tr "org.lower_repositories"}}</a>
+</div>
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index 66af5195b0..e81ff889eb 100644
--- a/templates/org/team/repositories.tmpl
+++ b/templates/org/team/repositories.tmpl
@@ -38,7 +38,15 @@
 								<a class="ui red small button right" href="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/remove?repoid={{.ID}}">{{$.i18n.Tr "remove"}}</a>
 							{{end}}
 							<a class="member" href="{{AppSubUrl}}/{{$.Org.Name}}/{{.Name}}">
-								<i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+								{{if .IsPrivate}}
+									{{svg "octicon-lock" 16}}
+								{{else if .IsFork}}
+									{{svg "octicon-repo-forked" 16}}
+								{{else if .IsMirror}}
+									{{svg "octicon-repo-clone" 16}}
+								{{else}}
+									{{svg "octicon-repo" 16}}
+								{{end}}
 								<strong>{{$.Org.Name}}/{{.Name}}</strong>
 							</a>
 						</div>
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index 75c5ce756d..ee612069b5 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -47,7 +47,7 @@
 	</div>
 	{{if .IsOrganizationOwner}}
 		<div class="ui bottom attached segment">
-			<a class="ui teal small button" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/edit"><span class="octicon octicon-gear"></span> {{$.i18n.Tr "org.teams.settings"}}</a>
+			<a class="ui teal small button" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/edit">{{svg "octicon-gear" 16}} {{$.i18n.Tr "org.teams.settings"}}</a>
 		</div>
 	{{end}}
 </div>
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index 8714181140..9d4a469028 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -5,7 +5,7 @@
 		{{template "base/alert" .}}
 		{{if .IsOrganizationOwner}}
 			<div class="text right">
-				<a class="ui green button" href="{{.OrgLink}}/teams/new"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "org.create_new_team"}}</a>
+				<a class="ui green button" href="{{.OrgLink}}/teams/new">{{svg "octicon-plus" 16}} {{.i18n.Tr "org.create_new_team"}}</a>
 			</div>
 			<div class="ui divider"></div>
 		{{end}}
-- 
cgit v1.2.3