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>
This commit is contained in:
John Olheiser
GitHub
parent
e704f7fae7
commit
86fdba177a
112 changed files with 1387 additions and 1122 deletions
|
|
@ -18,8 +18,13 @@ function htmlEncode(text) {
|
|||
return jQuery('<div />').text(text).html();
|
||||
}
|
||||
|
||||
function svg(name, size) {
|
||||
return `<svg class="svg ${name}" width="${size}" height="${size}" aria-hidden="true"><use xlink:href="${staticPrefix}/img/svg/icons.svg#${name}"/></svg>`;
|
||||
}
|
||||
|
||||
let csrf;
|
||||
let suburl;
|
||||
let staticPrefix;
|
||||
let previewFileModes;
|
||||
let simpleMDEditor;
|
||||
const commentMDEditors = {};
|
||||
|
|
@ -377,10 +382,10 @@ function initCommentForm() {
|
|||
// adding/removing labels
|
||||
if ($(this).hasClass('checked')) {
|
||||
$(this).removeClass('checked');
|
||||
$(this).find('.octicon').removeClass('octicon-check');
|
||||
$(this).find('.octicon-check').addClass('invisible');
|
||||
} else {
|
||||
$(this).addClass('checked');
|
||||
$(this).find('.octicon').addClass('octicon-check');
|
||||
$(this).find('.octicon-check').removeClass('invisible');
|
||||
}
|
||||
|
||||
updateIssuesMeta(
|
||||
|
|
@ -395,7 +400,7 @@ function initCommentForm() {
|
|||
|
||||
if ($(this).hasClass('checked')) {
|
||||
$(this).removeClass('checked');
|
||||
$(this).find('.octicon').removeClass('octicon-check');
|
||||
$(this).find('.octicon-check').addClass('invisible');
|
||||
if (hasLabelUpdateAction) {
|
||||
if (!($(this).data('id') in labels)) {
|
||||
labels[$(this).data('id')] = {
|
||||
|
|
@ -409,7 +414,7 @@ function initCommentForm() {
|
|||
}
|
||||
} else {
|
||||
$(this).addClass('checked');
|
||||
$(this).find('.octicon').addClass('octicon-check');
|
||||
$(this).find('.octicon-check').removeClass('invisible');
|
||||
if (hasLabelUpdateAction) {
|
||||
if (!($(this).data('id') in labels)) {
|
||||
labels[$(this).data('id')] = {
|
||||
|
|
@ -452,7 +457,7 @@ function initCommentForm() {
|
|||
|
||||
$(this).parent().find('.item').each(function () {
|
||||
$(this).removeClass('checked');
|
||||
$(this).find('.octicon').removeClass('octicon-check');
|
||||
$(this).find('.octicon').addClass('invisible');
|
||||
});
|
||||
|
||||
$list.find('.item').each(function () {
|
||||
|
|
@ -2361,6 +2366,7 @@ function initTemplateSearch() {
|
|||
$(document).ready(async () => {
|
||||
csrf = $('meta[name=_csrf]').attr('content');
|
||||
suburl = $('meta[name=_suburl]').attr('content');
|
||||
staticPrefix = $('meta[name=_staticprefix]').attr('content');
|
||||
|
||||
// Show exact time
|
||||
$('.time-since').each(function () {
|
||||
|
|
@ -2497,7 +2503,7 @@ $(document).ready(async () => {
|
|||
$(this).find('h1, h2, h3, h4, h5, h6').each(function () {
|
||||
let node = $(this);
|
||||
node = node.wrap('<div class="anchor-wrap"></div>');
|
||||
node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}"><span class="octicon octicon-link"></span></a>`);
|
||||
node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}">${svg('octicon-link', 16)}</a>`);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -2779,6 +2785,7 @@ function initVueComponents() {
|
|||
reposFilter: 'all',
|
||||
searchQuery: '',
|
||||
isLoading: false,
|
||||
staticPrefix,
|
||||
repoTypes: {
|
||||
all: {
|
||||
count: 0,
|
||||
|
|
@ -2881,13 +2888,13 @@ function initVueComponents() {
|
|||
|
||||
repoClass(repo) {
|
||||
if (repo.fork) {
|
||||
return 'octicon octicon-repo-forked';
|
||||
return 'octicon-repo-forked';
|
||||
} if (repo.mirror) {
|
||||
return 'octicon octicon-repo-clone';
|
||||
return 'octicon-repo-clone';
|
||||
} if (repo.private) {
|
||||
return 'octicon octicon-lock';
|
||||
return 'octicon-lock';
|
||||
}
|
||||
return 'octicon octicon-repo';
|
||||
return 'octicon-repo';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -261,11 +261,11 @@ code,
|
|||
z-index: 900;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
&.fitted {
|
||||
margin-right: 0;
|
||||
}
|
||||
.fitted .svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.svg {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
|
|
@ -277,7 +277,7 @@ code,
|
|||
}
|
||||
}
|
||||
|
||||
.text .octicon {
|
||||
.text .svg {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -597,7 +597,7 @@ code,
|
|||
}
|
||||
|
||||
&.status.buttons {
|
||||
.octicon {
|
||||
.svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1136,7 +1136,7 @@ i.icon.centerlock {
|
|||
overflow-y: visible;
|
||||
}
|
||||
|
||||
*:not(.fa):not(.octicon):not(.icon) {
|
||||
*:not(.fa):not(.svg):not(.icon) {
|
||||
font-size: 12px;
|
||||
font-family: @monospaced-fonts, monospace;
|
||||
line-height: 20px;
|
||||
|
|
@ -1167,7 +1167,7 @@ i.icon.centerlock {
|
|||
height: 2.1666em !important;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
&.green {
|
||||
color: #21ba45;
|
||||
}
|
||||
|
|
@ -1192,3 +1192,7 @@ i.icon.centerlock {
|
|||
border: 1px solid #ccc;
|
||||
border-radius: 500em;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
padding: 6px 1.2em;
|
||||
display: block;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
color: #888888;
|
||||
|
||||
&.rear {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
background-color: #fafafa !important;
|
||||
border-width: 1px !important;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
.description {
|
||||
margin-top: 5px;
|
||||
|
||||
.octicon:not(:first-child) {
|
||||
.svg:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
color: #5aa509;
|
||||
font-size: 40px;
|
||||
height: 40px;
|
||||
width: 50px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&.header {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.repository {
|
||||
@mega-octicon-width: 30px;
|
||||
|
||||
padding-top: 15px;
|
||||
|
||||
|
|
@ -12,34 +11,29 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mega-octicon {
|
||||
width: @mega-octicon-width;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.ui.huge.breadcrumb {
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
|
||||
i.mega-octicon {
|
||||
svg {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
i.octicon-lock {
|
||||
svg.octicon-lock {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.fork-flag {
|
||||
margin-left: @mega-octicon-width + 6px;
|
||||
margin-left: 36px;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.octicon.octicon-repo-forked {
|
||||
.svg.octicon-repo-forked {
|
||||
margin-top: -1px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -135,7 +129,7 @@
|
|||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.tabular .octicon {
|
||||
.ui.tabular .svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -147,13 +141,13 @@
|
|||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
float: left;
|
||||
margin: 0 -7px 0 -5px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.labels .octicon {
|
||||
&.labels .svg {
|
||||
margin: -2px -7px 0 -5px;
|
||||
}
|
||||
|
||||
|
|
@ -325,7 +319,7 @@
|
|||
}
|
||||
|
||||
tbody {
|
||||
.octicon {
|
||||
.svg {
|
||||
margin-left: 3px;
|
||||
margin-right: 5px;
|
||||
color: #777777;
|
||||
|
|
@ -456,7 +450,7 @@
|
|||
.sidebar {
|
||||
padding-left: 0;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -476,7 +470,7 @@
|
|||
}
|
||||
|
||||
.tabular.menu {
|
||||
.octicon {
|
||||
.svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -637,7 +631,7 @@
|
|||
&.tabular.menu {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -675,7 +669,7 @@
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
width: 23px;
|
||||
font-size: 23px;
|
||||
margin-top: 0.45em;
|
||||
|
|
@ -896,11 +890,11 @@
|
|||
margin: 15px 0 15px 79px;
|
||||
padding-left: 25px;
|
||||
|
||||
& > .octicon:not(.issue-symbol) {
|
||||
& > .svg:not(.issue-symbol) {
|
||||
text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
|
||||
}
|
||||
|
||||
& > .octicon.issue-symbol {
|
||||
& > .svg.issue-symbol {
|
||||
font-size: 20px;
|
||||
margin-left: -35px;
|
||||
margin-right: -1px;
|
||||
|
|
@ -935,7 +929,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
width: 30px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
|
@ -980,7 +974,7 @@
|
|||
margin-top: 5px;
|
||||
margin-left: 35px;
|
||||
|
||||
.octicon {
|
||||
.svg {
|
||||
&.octicon-git-commit {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
@ -1104,7 +1098,7 @@
|
|||
color: #999999;
|
||||
padding-top: 5px;
|
||||
|
||||
.issue-stats .octicon {
|
||||
.issue-stats .svg {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -1150,7 +1144,7 @@
|
|||
}
|
||||
|
||||
.choose.branch {
|
||||
.octicon {
|
||||
.svg {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1617,7 +1611,7 @@
|
|||
margin-top: 20px;
|
||||
|
||||
> a {
|
||||
.octicon {
|
||||
.svg {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -1730,7 +1724,7 @@
|
|||
padding-top: 70px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.mega-octicon {
|
||||
.svg {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
|
@ -2232,11 +2226,11 @@
|
|||
margin: 15px -1rem -1rem -1rem;
|
||||
}
|
||||
|
||||
> .mega-octicon {
|
||||
> .svg {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
> .mega-octicon + .content {
|
||||
> .svg + .content {
|
||||
display: table-cell;
|
||||
padding: 0 0 0 0.5em;
|
||||
vertical-align: top;
|
||||
|
|
|
|||
9
web_src/less/_svg.less
Normal file
9
web_src/less/_svg.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.svg {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
|
||||
.middle & {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.octicon,
|
||||
.svg,
|
||||
.fa {
|
||||
margin-left: 1px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
&.notification {
|
||||
.octicon {
|
||||
.svg {
|
||||
float: left;
|
||||
font-size: 2em;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import "~highlight.js/styles/github.css";
|
||||
@import "./vendor/gitGraph.css";
|
||||
|
||||
@import "_svg";
|
||||
@import "_tribute";
|
||||
@import "_emojify";
|
||||
@import "_base";
|
||||
|
|
|
|||
|
|
@ -654,11 +654,11 @@ a.ui.basic.green.label:hover {
|
|||
border-top: 1px solid #353944;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .event > .octicon.issue-symbol {
|
||||
.repository.view.issue .comment-list .event > .svg.issue-symbol {
|
||||
background: #3b4954;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .event > .octicon:not(.issue-symbol) {
|
||||
.repository.view.issue .comment-list .event > .svg:not(.issue-symbol) {
|
||||
text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
|
||||
}
|
||||
|
||||
|
|
@ -1065,8 +1065,8 @@ input {
|
|||
color: #668cb1;
|
||||
}
|
||||
|
||||
.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
|
||||
.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
|
||||
color: #7c9b5e;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue