upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-11 01:30:50 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 79

perf(dashboard): lags on dashboard items drag

Browse source 
- `aria-labelledby` is not needed here, it is a hidden icon
- `visually-hidden` has transformations that have huge performance
impact in combination with other transformations, for example, on
draggable

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
This commit is contained in:
Grigorii K. Shartsev 2023-10-23 13:35:25 +02:00 committed by Andy Scherzinger
parent 4420ca0192
commit 9b9daf3d83
1 changed files with 4 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
apps/dashboard/src/DashboardApp.vue
View file

@ -24,20 +24,10 @@
class="panel">
<div class="panel--header">
<h2>
<img v-if="apiWidgets[panels[panelId].id].icon_url"
:alt="apiWidgets[panels[panelId].id].title + ' icon'"
:src="apiWidgets[panels[panelId].id].icon_url"
aria-hidden="true">
<span v-else
:aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`"
aria-hidden="true"
:class="apiWidgets[panels[panelId].id].icon_class"
role="img" />
<img v-if="apiWidgets[panels[panelId].id].icon_url" :src="apiWidgets[panels[panelId].id].icon_url" alt="">
<span v-else :class="apiWidgets[panels[panelId].id].icon_class" aria-hidden="true" />
{{ apiWidgets[panels[panelId].id].title }}
</h2>
<span :id="`panel-${panels[panelId].id}--header--icon--description`" class="hidden-visually">
{{ t('dashboard', '"{title} icon"', { title: apiWidgets[panels[panelId].id].title }) }}
</span>
</div>
<div class="panel--content">
<ApiDashboardWidget :widget="apiWidgets[panels[panelId].id]"
@ -48,13 +38,9 @@
<div v-else :key="panels[panelId].id" class="panel">
<div class="panel--header">
<h2>
<span :aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`"
aria-hidden="true"
:class="panels[panelId].iconClass"
role="img" />
<span :class="panels[panelId].iconClass" aria-hidden="true" />
{{ panels[panelId].title }}
</h2>
<span :id="`panel-${panels[panelId].id}--header--icon--description`" class="hidden-visually"> {{ t('dashboard', '"{title} icon"', { title: panels[panelId].title }) }} </span>
</div>
<div class="panel--content" :class="{ loading: !panels[panelId].mounted }">
<div :ref="panels[panelId].id" :data-id="panels[panelId].id" />
@ -102,10 +88,7 @@
:checked="isActive(panel)"
@input="updateCheckbox(panel, $event.target.checked)">
<label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }">
<img v-if="panel.iconUrl"
:alt="panel.title + ' icon'"
:src="panel.iconUrl"
aria-hidden="true">
<img v-if="panel.iconUrl" alt="" :src="panel.iconUrl">
<span v-else :class="panel.iconClass" aria-hidden="true" />
{{ panel.title }}
</label>