diff options
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/js/components/DashboardRepoList.vue | 4 | ||||
| -rw-r--r-- | web_src/js/components/DiffFileList.vue | 4 | ||||
| -rw-r--r-- | web_src/js/components/DiffFileTreeItem.vue | 2 | ||||
| -rw-r--r-- | web_src/js/features/comp/ReactionSelector.js | 2 | ||||
| -rw-r--r-- | web_src/js/modules/aria/dropdown.js | 5 | ||||
| -rw-r--r-- | web_src/js/modules/tippy.js | 20 |
6 files changed, 12 insertions, 25 deletions
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index a97cfb02ba..997a390c18 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -10,7 +10,7 @@ {{ textMyRepos }} <span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span> </div> - <a class="tooltip" :href="subUrl + '/repo/create'" :data-content="textNewRepo" data-position="left center"> + <a :href="subUrl + '/repo/create'" :data-tooltip-content="textNewRepo"> <svg-icon name="octicon-plus"/> <span class="sr-only">{{ textNewRepo }}</span> </a> @@ -119,7 +119,7 @@ {{ textMyOrgs }} <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span> </div> - <a v-if="canCreateOrganization" class="tooltip" :href="subUrl + '/org/create'" :data-content="textNewOrg" data-position="left center"> + <a v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> <svg-icon name="octicon-plus"/> <span class="sr-only">{{ textNewOrg }}</span> </a> diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue index 86444f2b21..780f5e6c28 100644 --- a/web_src/js/components/DiffFileList.vue +++ b/web_src/js/components/DiffFileList.vue @@ -4,12 +4,12 @@ <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 gt-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 gt-mx-3" :data-tooltip-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"> </span> + <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)"> </span> <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a> </li> <li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2"> diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index 4084dee51d..67c22c5153 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -5,7 +5,6 @@ <!-- Files --> <SvgIcon v-if="item.isFile" - data-position="right center" name="octicon-file" class="svg-icon file" /> @@ -16,7 +15,6 @@ >{{ item.name }}</a> <SvgIcon v-if="item.isFile" - data-position="right center" :name="getIconForDiffType(item.file.Type)" :class="['svg-icon', getIconForDiffType(item.file.Type), 'status']" /> diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 26c9af2ff3..33ceb73c7c 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -26,7 +26,7 @@ export function initCompReactionSelector(parent) { url, data: { _csrf: csrfToken, - content: $(this).data('content') + content: $(this).attr('data-reaction-content'), } }).done((resp) => { if (resp && (resp.html || resp.empty)) { diff --git a/web_src/js/modules/aria/dropdown.js b/web_src/js/modules/aria/dropdown.js index 70d524cfe7..e4c881b6af 100644 --- a/web_src/js/modules/aria/dropdown.js +++ b/web_src/js/modules/aria/dropdown.js @@ -102,8 +102,9 @@ function attachStaticElements($dropdown, $focusable, $menu) { }); // use tooltip's content as aria-label if there is no aria-label - if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { - $dropdown.attr('aria-label', $dropdown.attr('data-content')); + const tooltipContent = $dropdown.attr('data-tooltip-content'); + if (tooltipContent && !$dropdown.attr('aria-label')) { + $dropdown.attr('aria-label', tooltipContent); } } diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 1f7a0eaf4f..0d57af4f0f 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -36,7 +36,7 @@ export function createTippy(target, opts = {}) { * @returns {null|tippy} */ function attachTooltip(target, content = null) { - content = content ?? getTooltipContent(target); + content = content ?? target.getAttribute('data-tooltip-content'); if (!content) return null; const props = { @@ -67,30 +67,18 @@ function lazyTooltipOnMouseHover(e) { attachTooltip(this); } -function getTooltipContent(target) { - // prefer to always use the "[data-tooltip-content]" attribute - // for backward compatibility, we also support the ".tooltip[data-content]" attribute - // in next PR, refactor all the ".tooltip[data-content]" to "[data-tooltip-content]" - let content = target.getAttribute('data-tooltip-content'); - if (!content && target.classList.contains('tooltip')) { - content = target.getAttribute('data-content'); - } - return content; -} - /** * Activate the tooltip for all children elements * And if the element has no aria-label, use the tooltip content as aria-label * @param target {HTMLElement} */ function attachChildrenLazyTooltip(target) { - // the selector must match the logic in getTippyTooltipContent - for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) { + for (const el of target.querySelectorAll('[data-tooltip-content]')) { el.addEventListener('mouseover', lazyTooltipOnMouseHover, true); // meanwhile, if the element has no aria-label, use the tooltip content as aria-label if (!el.hasAttribute('aria-label')) { - const content = getTooltipContent(el); + const content = target.getAttribute('data-tooltip-content'); if (content) { el.setAttribute('aria-label', content); } @@ -119,7 +107,7 @@ export function initGlobalTooltips() { observer.observe(document, { subtree: true, childList: true, - attributeFilter: ['data-tooltip-content', 'data-content'], + attributeFilter: ['data-tooltip-content'], }); attachChildrenLazyTooltip(document.documentElement); |