git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Move helpers to be prefixed with gt- (#22879)

Browse source 
As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

I've also added in the `gt-hidden` style that matches the tailwind one
and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton <art27@cantab.net>

---------

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
zeripath 2023-02-13 17:59:59 +00:00 • committed by GitHub
parent 00b18ab42f
commit 51383ec084
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
137 changed files with 901 additions and 900 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web_src/js/components/DiffFileList.vue
View file

@ -1,19 +1,19 @@
<template>
<ol class="diff-detail-box diff-stats m-0" ref="root" v-if="fileListIsVisible">
<ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
<li v-for="file in files" :key="file.NameHash">
<div class="bold df ac pull-right">
<span v-if="file.IsBin" class="ml-1 mr-3">{{ binaryFileMessage }}</span>
<div class="gt-bold gt-df gt-ac pull-right">
<span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
{{ file.IsBin ? '' : file.Addition + file.Deletion }}
<span v-if="!file.IsBin" class="diff-stats-bar tooltip mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
<span v-if="!file.IsBin" class="diff-stats-bar tooltip gt-mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
<div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }" />
</span>
</div>
<!-- todo finish all file status, now modify, add, delete and rename -->
<span :class="['status', diffTypeToString(file.Type), 'tooltip']" :data-content="diffTypeToString(file.Type)" data-position="right center">&nbsp;</span>
<a class="file mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
<a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
</li>
<li v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
<span class="file df ac sb">{{ tooManyFilesMessage }}
<li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
<span class="file gt-df gt-ac gt-sb">{{ tooManyFilesMessage }}
<a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
</span>
</li>

6
web_src/js/components/DiffFileTree.vue
View file

@ -1,14 +1,14 @@
<template>
<div
v-if="fileTreeIsVisible"
class="mr-3 mt-3 diff-detail-box"
class="gt-mr-3 gt-mt-3 diff-detail-box"
>
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<div class="ui list">
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
</div>
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
<span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
<div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
<span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
</div>
</div>
</template>

8
web_src/js/components/DiffFileTreeItem.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-show="show">
<div class="item" :class="item.isFile ? 'filewrapper p-1' : ''">
<div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
<!-- Files -->
<SvgIcon
v-if="item.isFile"
@ -10,7 +10,7 @@
/>
<a
v-if="item.isFile"
class="file ellipsis muted"
class="file gt-ellipsis muted"
:href="item.isFile ? '#diff-' + item.file.NameHash : ''"
>{{ item.name }}</a>
<SvgIcon
@ -21,7 +21,7 @@
/>
<!-- Directories -->
<div v-if="!item.isFile" class="directory p-1" @click.stop="handleClick(item.isFile)">
<div v-if="!item.isFile" class="directory gt-p-1" @click.stop="handleClick(item.isFile)">
<SvgIcon
class="svg-icon"
:name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
@ -30,7 +30,7 @@
class="svg-icon directory"
name="octicon-file-directory-fill"
/>
<span class="ellipsis">{{ item.name }}</span>
<span class="gt-ellipsis">{{ item.name }}</span>
</div>
<div v-show="!collapsed">
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />

6
web_src/js/components/PullRequestMergeForm.vue
View file

@ -47,14 +47,14 @@
{{ mergeForm.textCancel }}
</button>
<div class="ui checkbox ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
<div class="ui checkbox gt-ml-2" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed">
<input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
<label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
</div>
</form>
</div>
<div v-if="!showActionForm" class="df">
<div v-if="!showActionForm" class="gt-df">
<!-- the merge button -->
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)" >
<button class="ui button">
@ -95,7 +95,7 @@
</div>
<!-- the cancel auto merge button -->
<form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="ml-4">
<form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="gt-ml-4">
<input type="hidden" name="_csrf" :value="csrfToken">
<button class="ui button">
{{ mergeForm.textAutoMergeCancelSchedule }}

16
web_src/js/components/RepoActionView.vue
View file

@ -42,15 +42,15 @@
<div class="job-step-container">
<div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
<div class="job-step-summary" @click.stop="toggleStepLogs(i)">
<SvgIcon name="octicon-chevron-down" class="mr-3" v-show="currentJobStepsStates[i].expanded"/>
<SvgIcon name="octicon-chevron-right" class="mr-3" v-show="!currentJobStepsStates[i].expanded"/>
<SvgIcon name="octicon-chevron-down" class="gt-mr-3" v-show="currentJobStepsStates[i].expanded"/>
<SvgIcon name="octicon-chevron-right" class="gt-mr-3" v-show="!currentJobStepsStates[i].expanded"/>
<SvgIcon name="octicon-check-circle-fill" class="green mr-3" v-if="jobStep.status === 'success'"/>
<SvgIcon name="octicon-skip" class="ui text grey mr-3" v-else-if="jobStep.status === 'skipped'"/>
<SvgIcon name="octicon-clock" class="ui text yellow mr-3" v-else-if="jobStep.status === 'waiting'"/>
<SvgIcon name="octicon-blocked" class="ui text yellow mr-3" v-else-if="jobStep.status === 'blocked'"/>
<SvgIcon name="octicon-meter" class="ui text yellow mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
<SvgIcon name="octicon-x-circle-fill" class="red mr-3 " v-else/>
<SvgIcon name="octicon-check-circle-fill" class="green gt-mr-3" v-if="jobStep.status === 'success'"/>
<SvgIcon name="octicon-skip" class="ui text grey gt-mr-3" v-else-if="jobStep.status === 'skipped'"/>
<SvgIcon name="octicon-clock" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'waiting'"/>
<SvgIcon name="octicon-blocked" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'blocked'"/>
<SvgIcon name="octicon-meter" class="ui text yellow gt-mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
<SvgIcon name="octicon-x-circle-fill" class="red gt-mr-3 " v-else/>
<span class="step-summary-msg">{{ jobStep.summary }}</span>
<span class="step-summary-dur">{{ jobStep.duration }}</span>

2
web_src/js/features/common-global.js
View file

@ -172,7 +172,7 @@ export function initGlobalDropzone() {
// Create a "Copy Link" element, to conveniently copy the image
// or file link as Markdown to the clipboard
const copyLinkElement = document.createElement('div');
copyLinkElement.className = 'tc';
copyLinkElement.className = 'gt-tc';
// The a element has a hardcoded cursor: pointer because the default is overridden by .dropzone
copyLinkElement.innerHTML = `<a href="#" style="cursor: pointer;">${svg('octicon-copy', 14, 'copy link')} Copy link</a>`;
copyLinkElement.addEventListener('click', (e) => {

6
web_src/js/features/notification.js
View file

@ -29,7 +29,7 @@ async function receiveUpdateCount(event) {
const data = JSON.parse(event.data);
for (const count of document.querySelectorAll('.notification_count')) {
count.classList.toggle('hidden', data.Count === 0);
count.classList.toggle('gt-hidden', data.Count === 0);
count.textContent = `${data.Count}`;
}
await updateNotificationTable();
@ -165,9 +165,9 @@ async function updateNotificationCount() {
const notificationCount = $('.notification_count');
if (data.new === 0) {
notificationCount.addClass('hidden');
notificationCount.addClass('gt-hidden');
} else {
notificationCount.removeClass('hidden');
notificationCount.removeClass('gt-hidden');
}
notificationCount.text(`${data.new}`);

4
web_src/js/features/repo-common.js
View file

@ -54,8 +54,8 @@ export function initRepoCloneLink() {
// restore animation after first init
setTimeout(() => {
$repoCloneSsh.removeClass('no-transition');
$repoCloneHttps.removeClass('no-transition');
$repoCloneSsh.removeClass('gt-no-transition');
$repoCloneHttps.removeClass('gt-no-transition');
}, 100);
$repoCloneSsh.on('click', () => {

2
web_src/js/features/repo-findfile.js
View file

@ -88,7 +88,7 @@ function filterRepoFiles(filter) {
const $row = $(tmplRow);
const $a = $row.find('a');
$a.attr('href', `${treeLink}/${escapePath(r.matchResult.join(''))}`);
const $octiconFile = $(svg('octicon-file')).addClass('mr-3');
const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3');
$a.append($octiconFile);
// if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
// the matchResult[odd] is matched and highlighted to red.

8
web_src/js/features/repo-issue-content.js
View file

@ -14,16 +14,16 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
$dialog = $(`
<div class="ui modal content-history-detail-dialog">
${svg('octicon-x', 16, 'close icon inside')}
<div class="header df ac sb">
<div class="header gt-df gt-ac gt-sb">
<div>${itemTitleHtml}</div>
<div class="ui dropdown dialog-header-options df ac mr-5 hide">
<div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
<div class="menu">
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
</div>
</div>
</div>
<div class="comment-diff-data tl p-3 is-loading"></div>
<div class="comment-diff-data gt-tl gt-p-3 is-loading"></div>
</div>`);
$dialog.appendTo($('body'));
$dialog.find('.dialog-header-options').dropdown({
@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
const $headerLeft = $item.find('.comment-header-left');
const menuHtml = `
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
&bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon ml-1 mt-1')}</a>
&bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
<div class="menu">
</div>
</div>`;

6
web_src/js/features/repo-legacy.js
View file

@ -219,11 +219,11 @@ export function initRepoCommentForm() {
let icon = '';
if (input_id === '#milestone_id') {
icon = svg('octicon-milestone', 18, 'mr-3');
icon = svg('octicon-milestone', 18, 'gt-mr-3');
} else if (input_id === '#project_id') {
icon = svg('octicon-project', 18, 'mr-3');
icon = svg('octicon-project', 18, 'gt-mr-3');
} else if (input_id === '#assignee_id') {
icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`;
icon = `<img class="ui avatar image gt-mr-3" src=${$(this).data('avatar')}>`;
}
$list.find('.selected').html(`

4
web_src/js/features/stopwatch.js
View file

@ -125,7 +125,7 @@ function updateStopwatchData(data) {
const btnEl = $('.active-stopwatch-trigger');
if (!watch) {
clearStopwatchTimer();
btnEl.addClass('hidden');
btnEl.addClass('gt-hidden');
} else {
const {repo_owner_name, repo_name, issue_index, seconds} = watch;
const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`;
@ -134,7 +134,7 @@ function updateStopwatchData(data) {
$('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`);
$('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`);
updateStopwatchTime(seconds);
btnEl.removeClass('hidden');
btnEl.removeClass('gt-hidden');
}
return Boolean(data.length);
}

2
web_src/js/markup/math.js
View file

@ -2,7 +2,7 @@ function displayError(el, err) {
const target = targetElement(el);
target.classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markup-block-error mono');
errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
errorNode.textContent = err.str || err.message || String(err);
target.before(errorNode);
}

2
web_src/js/markup/mermaid.js
View file

@ -12,7 +12,7 @@ const iframeCss = `
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markup-block-error mono');
errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode);
}