Skip to content

SVG Octicon fixes #10237

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.

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
merged 9 commits into from
Feb 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ rules:
default-case: [0]
func-names: [0]
import/extensions: [0]
import/prefer-default-export: [0]
max-len: [0]
newline-per-chained-call: [0]
no-alert: [0]
Expand Down
4 changes: 2 additions & 2 deletions templates/base/head.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@
<meta name="keywords" content="{{MetaKeywords}}">
<meta name="referrer" content="no-referrer" />
<meta name="_csrf" content="{{.CsrfToken}}" />
<meta name="_suburl" content="{{AppSubUrl}}" />
<meta name="_staticprefix" content="{{StaticUrlPrefix}}" />
{{if .IsSigned}}
<meta name="_uid" content="{{.SignedUser.ID}}" />
{{end}}
Expand Down Expand Up @@ -86,6 +84,8 @@
</script>
<script>
window.config = {
AppSubUrl: '{{AppSubUrl}}',
StaticUrlPrefix: '{{StaticUrlPrefix}}',
Datetimepicker: {{if .RequireDatetimepicker}}true{{else}}false{{end}},
Dropzone: {{if .RequireDropzone}}true{{else}}false{{end}},
HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_title.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
{{end}}
</div>
{{if .HasMerged}}
<div class="ui purple large label">{{svg "octicon-gt-pull-request" 16}} {{.i18n.Tr "repo.pulls.merged"}}</div>
<div class="ui purple large label">{{svg "octicon-git-pull-request" 16}} {{.i18n.Tr "repo.pulls.merged"}}</div>
{{else if .Issue.IsClosed}}
<div class="ui red large label">{{svg "octicon-issue-closed" 16}} {{.i18n.Tr "repo.issues.closed_title"}}</div>
{{else if .Issue.IsPull}}
Expand Down
31 changes: 20 additions & 11 deletions web_src/js/features/contextPopup.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
export default function initContextPopups(suburl) {
import { svg } from '../utils.js';

const { AppSubUrl } = window.config;

export default function initContextPopups() {
const refIssues = $('.ref-issue');
if (!refIssues.length) return;

refIssues.each(function () {
const [index, _issues, repo, owner] = $(this).attr('href').replace(/[#?].*$/, '').split('/').reverse();
issuePopup(suburl, owner, repo, index, $(this));
issuePopup(owner, repo, index, $(this));
});
}

function issuePopup(suburl, owner, repo, index, $element) {
$.get(`${suburl}/api/v1/repos/${owner}/${repo}/issues/${index}`, (issue) => {
function issuePopup(owner, repo, index, $element) {
$.get(`${AppSubUrl}/api/v1/repos/${owner}/${repo}/issues/${index}`, (issue) => {
const createdAt = new Date(issue.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });

let body = issue.body.replace(/\n+/g, ' ');
Expand All @@ -34,19 +38,24 @@ function issuePopup(suburl, owner, repo, index, $element) {
labels = `<p>${labels}</p>`;
}

let octicon;
let octicon, color;
if (issue.pull_request !== null) {
if (issue.state === 'open') {
octicon = 'green octicon-git-pull-request'; // Open PR
color = 'green';
octicon = 'octicon-git-pull-request'; // Open PR
} else if (issue.pull_request.merged === true) {
octicon = 'purple octicon-git-merge'; // Merged PR
color = 'purple';
octicon = 'octicon-git-merge'; // Merged PR
} else {
octicon = 'red octicon-git-pull-request'; // Closed PR
color = 'red';
octicon = 'octicon-git-pull-request'; // Closed PR
}
} else if (issue.state === 'open') {
octicon = 'green octicon-issue-opened'; // Open Issue
color = 'green';
octicon = 'octicon-issue-opened'; // Open Issue
} else {
octicon = 'red octicon-issue-closed'; // Closed Issue
color = 'red';
octicon = 'octicon-issue-closed'; // Closed Issue
}

$element.popup({
Expand All @@ -57,7 +66,7 @@ function issuePopup(suburl, owner, repo, index, $element) {
html: `
<div>
<p><small>${issue.repository.full_name} on ${createdAt}</small></p>
<p><i class="octicon ${octicon}"></i> <strong>${issue.title}</strong> #${index}</p>
<p><span class="${color}">${svg(octicon, 16)}</span> <strong>${issue.title}</strong> #${index}</p>
<p>${body}</p>
${labels}
</div>
Expand Down
57 changes: 27 additions & 30 deletions web_src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'jquery.are-you-sure';
import './publicPath.js';
import './polyfills.js';
import './vendor/semanticDropdown.js';
import { svg } from './utils.js';

import initContextPopups from './features/contextPopup.js';
import initHighlight from './features/highlight.js';
Expand All @@ -14,17 +15,13 @@ import initClipboard from './features/clipboard.js';

import ActivityTopAuthors from './components/ActivityTopAuthors.vue';

const { AppSubUrl, StaticUrlPrefix } = window.config;

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 = {};
Expand Down Expand Up @@ -157,7 +154,7 @@ function initRepoStatusChecker() {
}
$.ajax({
type: 'GET',
url: `${suburl}/${repo_name}/status`,
url: `${AppSubUrl}/${repo_name}/status`,
data: {
_csrf: csrf,
},
Expand Down Expand Up @@ -293,7 +290,7 @@ function uploadFile(file, callback) {
}
};

xhr.open('post', `${suburl}/attachments`, true);
xhr.open('post', `${AppSubUrl}/attachments`, true);
xhr.setRequestHeader('X-Csrf-Token', csrf);
const formData = new FormData();
formData.append('file', file, file.name);
Expand All @@ -313,7 +310,7 @@ function initImagePaste(target) {
insertAtCursor(field, `![${name}]()`);
uploadFile(img, (res) => {
const data = JSON.parse(res);
replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${suburl}/attachments/${data.uuid})`);
replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
$('.files').append(input);
});
Expand All @@ -329,7 +326,7 @@ function initSimpleMDEImagePaste(simplemde, files) {
uploadFile(img, (res) => {
const data = JSON.parse(res);
const pos = simplemde.codemirror.getCursor();
simplemde.codemirror.replaceRange(`![${name}](${suburl}/attachments/${data.uuid})`, pos);
simplemde.codemirror.replaceRange(`![${name}](${AppSubUrl}/attachments/${data.uuid})`, pos);
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
files.append(input);
});
Expand Down Expand Up @@ -2059,7 +2056,7 @@ function searchUsers() {
$searchUserBox.search({
minCharacters: 2,
apiSettings: {
url: `${suburl}/api/v1/users/search?q={query}`,
url: `${AppSubUrl}/api/v1/users/search?q={query}`,
onResponse(response) {
const items = [];
$.each(response.data, (_i, item) => {
Expand All @@ -2086,7 +2083,7 @@ function searchTeams() {
$searchTeamBox.search({
minCharacters: 2,
apiSettings: {
url: `${suburl}/api/v1/orgs/${$searchTeamBox.data('org')}/teams/search?q={query}`,
url: `${AppSubUrl}/api/v1/orgs/${$searchTeamBox.data('org')}/teams/search?q={query}`,
headers: { 'X-Csrf-Token': csrf },
onResponse(response) {
const items = [];
Expand All @@ -2110,7 +2107,7 @@ function searchRepositories() {
$searchRepoBox.search({
minCharacters: 2,
apiSettings: {
url: `${suburl}/api/v1/repos/search?q={query}&uid=${$searchRepoBox.data('uid')}`,
url: `${AppSubUrl}/api/v1/repos/search?q={query}&uid=${$searchRepoBox.data('uid')}`,
onResponse(response) {
const items = [];
$.each(response.data, (_i, item) => {
Expand Down Expand Up @@ -2180,7 +2177,7 @@ function initU2FAuth() {
}
u2fApi.ensureSupport()
.then(() => {
$.getJSON(`${suburl}/user/u2f/challenge`).success((req) => {
$.getJSON(`${AppSubUrl}/user/u2f/challenge`).success((req) => {
u2fApi.sign(req.appId, req.challenge, req.registeredKeys, 30)
.then(u2fSigned)
.catch((err) => {
Expand All @@ -2193,12 +2190,12 @@ function initU2FAuth() {
});
}).catch(() => {
// Fallback in case browser do not support U2F
window.location.href = `${suburl}/user/two_factor`;
window.location.href = `${AppSubUrl}/user/two_factor`;
});
}
function u2fSigned(resp) {
$.ajax({
url: `${suburl}/user/u2f/sign`,
url: `${AppSubUrl}/user/u2f/sign`,
type: 'POST',
headers: { 'X-Csrf-Token': csrf },
data: JSON.stringify(resp),
Expand All @@ -2215,7 +2212,7 @@ function u2fRegistered(resp) {
return;
}
$.ajax({
url: `${suburl}/user/settings/security/u2f/register`,
url: `${AppSubUrl}/user/settings/security/u2f/register`,
type: 'POST',
headers: { 'X-Csrf-Token': csrf },
data: JSON.stringify(resp),
Expand Down Expand Up @@ -2274,7 +2271,7 @@ function initU2FRegister() {
}

function u2fRegisterRequest() {
$.post(`${suburl}/user/settings/security/u2f/request_register`, {
$.post(`${AppSubUrl}/user/settings/security/u2f/request_register`, {
_csrf: csrf,
name: $('#nickname').val()
}).success((req) => {
Expand Down Expand Up @@ -2337,7 +2334,7 @@ function initTemplateSearch() {
$('#repo_template_search')
.dropdown({
apiSettings: {
url: `${suburl}/api/v1/repos/search?q={query}&template=true&priority_owner_id=${$('#uid').val()}`,
url: `${AppSubUrl}/api/v1/repos/search?q={query}&template=true&priority_owner_id=${$('#uid').val()}`,
onResponse(response) {
const filteredResponse = { success: true, results: [] };
filteredResponse.results.push({
Expand Down Expand Up @@ -2365,8 +2362,6 @@ 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 () {
Expand Down Expand Up @@ -2455,7 +2450,7 @@ $(document).ready(async () => {

// Emojify
emojify.setConfig({
img_dir: `${suburl}/vendor/plugins/emojify/images`,
img_dir: `${AppSubUrl}/vendor/plugins/emojify/images`,
ignore_emoticons: true
});
const hasEmoji = document.getElementsByClassName('has-emoji');
Expand Down Expand Up @@ -2575,7 +2570,7 @@ $(document).ready(async () => {
initPullRequestReview();
initRepoStatusChecker();
initTemplateSearch();
initContextPopups(suburl);
initContextPopups();

// Repo clone url.
if ($('#repo-clone-url').length > 0) {
Expand Down Expand Up @@ -2785,7 +2780,7 @@ function initVueComponents() {
reposFilter: 'all',
searchQuery: '',
isLoading: false,
staticPrefix,
staticPrefix: StaticUrlPrefix,
repoTypes: {
all: {
count: 0,
Expand Down Expand Up @@ -2891,6 +2886,8 @@ function initVueComponents() {
return 'octicon-repo-forked';
} if (repo.mirror) {
return 'octicon-repo-clone';
} if (repo.template) {
return `octicon-repo-template${repo.private ? '-private' : ''}`;
} if (repo.private) {
return 'octicon-lock';
}
Expand Down Expand Up @@ -2921,7 +2918,7 @@ function initVueApp() {
el,
data: {
searchLimit: (document.querySelector('meta[name=_search_limit]') || {}).content,
suburl: document.querySelector('meta[name=_suburl]').content,
suburl: AppSubUrl,
uid: Number((document.querySelector('meta[name=_context_uid]') || {}).content),
activityTopAuthors: window.ActivityTopAuthors || [],
},
Expand Down Expand Up @@ -3037,7 +3034,7 @@ window.initHeatmap = function (appElementId, heatmapUser, locale) {
el,

data: {
suburl: document.querySelector('meta[name=_suburl]').content,
suburl: AppSubUrl,
heatmapUser,
locale
},
Expand Down Expand Up @@ -3283,7 +3280,7 @@ function initTopicbar() {
const last = viewDiv.children('a').last();
for (let i = 0; i < topicArray.length; i++) {
const link = $('<a class="ui repo-topic small label topic"></a>');
link.attr('href', `${suburl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
link.attr('href', `${AppSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
link.text(topicArray[i]);
link.insertBefore(last);
}
Expand Down Expand Up @@ -3331,7 +3328,7 @@ function initTopicbar() {
label: 'ui small label'
},
apiSettings: {
url: `${suburl}/api/v1/topics/search?q={query}`,
url: `${AppSubUrl}/api/v1/topics/search?q={query}`,
throttle: 500,
cache: false,
onResponse(res) {
Expand Down Expand Up @@ -3488,9 +3485,9 @@ function initIssueList() {
const repoId = $('#repoId').val();
const crossRepoSearch = $('#crossRepoSearch').val();
const tp = $('#type').val();
let issueSearchUrl = `${suburl}/api/v1/repos/${repolink}/issues?q={query}&type=${tp}`;
let issueSearchUrl = `${AppSubUrl}/api/v1/repos/${repolink}/issues?q={query}&type=${tp}`;
if (crossRepoSearch === 'true') {
issueSearchUrl = `${suburl}/api/v1/repos/issues/search?q={query}&priority_repo_id=${repoId}&type=${tp}`;
issueSearchUrl = `${AppSubUrl}/api/v1/repos/issues/search?q={query}&priority_repo_id=${repoId}&type=${tp}`;
}
$('#new-dependency-drop-list')
.dropdown({
Expand Down
5 changes: 5 additions & 0 deletions web_src/js/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const { StaticUrlPrefix } = window.config;

export function svg(name, size) {
return `<svg class="svg ${name}" width="${size}" height="${size}" aria-hidden="true"><use xlink:href="${StaticUrlPrefix}/img/svg/icons.svg#${name}"/></svg>`;
}
6 changes: 3 additions & 3 deletions web_src/less/_base.less
Original file line number Diff line number Diff line change
Expand Up @@ -1168,13 +1168,13 @@ i.icon.centerlock {
}

.svg {
&.green {
span.green & {
color: #21ba45;
}
&.red {
span.red & {
color: #db2828;
}
&.purple {
span.purple & {
color: #a333c8;
}
}
Expand Down
Loading