Skip to content

Media Actions - Better UX #38771

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.

Sign up for GitHub

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
roland-d merged 40 commits into from
Oct 15, 2022
Merged

Media Actions - Better UX #38771

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
1852aee
Media Actions - Better UX
crystalenka Sep 15, 2022
48acdc9
fixing order of properties, hopefully this is correct
crystalenka Sep 15, 2022
f7b3776
fixing order of properties, again.
crystalenka Sep 15, 2022
8af9ace
Removing redundant 'item' from media action language strings
crystalenka Sep 15, 2022
2baf954
Merge branch '4.2-dev' into media-actions-ux
crystalenka Sep 20, 2022
58e363f
Removing redundant 'item' from media action language strings in frontend
crystalenka Sep 20, 2022
31860f2
Spelling error
crystalenka Sep 20, 2022
20c9fb4
CSS display tweaks
crystalenka Sep 20, 2022
ee1bb75
fixing order of properties again....
crystalenka Sep 20, 2022
a97c4a6
Aria-label and title are unnecessary when there is accessible text in…
crystalenka Sep 20, 2022
befefcd
Fixing layering when items are close together.
crystalenka Sep 20, 2022
1b1842e
Adding aria-describedby to buttons to make it clear which item is bei…
crystalenka Sep 20, 2022
74a3dbd
Mobile compatibility
crystalenka Sep 20, 2022
6fc1dfe
Switching to aria-details
crystalenka Sep 20, 2022
fc60a25
fixing css property order
crystalenka Sep 20, 2022
ec9d65c
Merge branch '4.2-dev' into media-actions-ux
crystalenka Sep 21, 2022
d4eaffd
Merge branch '4.2-dev' into media-actions-ux
crystalenka Sep 24, 2022
6a5030a
Merge branch '4.2-dev' into media-actions-ux
crystalenka Sep 26, 2022
ed976e9
Cleaning up aria/a11y attributes and html structure
crystalenka Sep 26, 2022
e7b7eee
cleaning up formatting
crystalenka Sep 26, 2022
24821f2
adding aria-orientation vertical
crystalenka Sep 26, 2022
1bab798
Merge branch '4.2-dev' into media-actions-ux
crystalenka Sep 27, 2022
81e292b
Fix grid item size
crystalenka Sep 27, 2022
219a69e
fixing javascript keybindings
crystalenka Sep 27, 2022
e7f5b59
adding focus style to toggle
crystalenka Sep 27, 2022
522417d
ACTUALLy adding focus styles...
crystalenka Sep 27, 2022
d996a00
Removing transition delay
crystalenka Sep 27, 2022
a188248
making delete hover more clear
crystalenka Sep 27, 2022
96a26af
Thumbnail size tweaks
crystalenka Sep 27, 2022
b2dcca2
Codestyle fixes
crystalenka Sep 27, 2022
72654b9
Capitalizing 'get link'
crystalenka Oct 10, 2022
877432a
Update administrator/components/com_media/resources/scripts/component…
crystalenka Oct 10, 2022
2b4e3d8
Update administrator/components/com_media/resources/scripts/component…
crystalenka Oct 10, 2022
334faed
Removing unnecessary newline
crystalenka Oct 10, 2022
e6dee47
Merge branch '4.2-dev' into media-actions-ux
crystalenka Oct 10, 2022
906f035
Merge branch 'media-actions-ux' of https://github.com/crystalenka/joo…
crystalenka Oct 10, 2022
40f34f2
Switching to new language string for the item actions toggle.
crystalenka Oct 11, 2022
9c434e3
Removing empty block
crystalenka Oct 11, 2022
b4390b6
Adding deprecation notices to language files
crystalenka Oct 12, 2022
38abc65
Merge branch '4.2-dev' into media-actions-ux
roland-d Oct 15, 2022
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
187 changes: 91 additions & 96 deletions ...nents/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,103 +21,95 @@
<div
v-if="showActions"
class="media-browser-actions-list"
role="toolbar"
:aria-label="sprintf('COM_MEDIA_ACTIONS_TOOLBAR_LABEL',(this.$parent.$props.item.name))"
>
<ul>
<li>
<media-browser-action-item-preview
v-if="previewable"
ref="actionPreview"
:on-focused="focused"
:main-action="openPreview"
:closing-action="hideActions"
@keyup.up="$refs.actionDelete.$el.focus()"
@keyup.down="$refs.actionDelete.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>
</li>
<li>
<media-browser-action-item-download
v-if="downloadable"
ref="actionDownload"
:on-focused="focused"
:main-action="download"
:closing-action="hideActions"
@keyup.up="$refs.actionPreview.$el.focus()"
@keyup.down="$refs.actionPreview.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>
</li>
<li>
<media-browser-action-item-rename
v-if="canEdit"
ref="actionRename"
:on-focused="focused"
:main-action="openRenameModal"
:closing-action="hideActions"
@keyup.up="
downloadable
? $refs.actionDownload.$el.focus()
: $refs.actionDownload.$el.previousElementSibling.focus()
"
@keyup.down="
canEdit
? $refs.actionEdit.$el.focus()
: shareable
? $refs.actionShare.$el.focus()
: $refs.actionShare.$el.previousElementSibling.focus()
"
@keyup.esc="hideActions"
/>
</li>
<li>
<media-browser-action-item-edit
v-if="canEdit && canOpenEditView"
ref="actionEdit"
:on-focused="focused"
:main-action="editItem"
:closing-action="hideActions"
@keyup.up="$refs.actionRename.$el.focus()"
@keyup.down="$refs.actionRename.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>
</li>
<li>
<media-browser-action-item-share
v-if="shareable"
ref="actionShare"
:on-focused="focused"
:main-action="openShareUrlModal"
:closing-action="hideActions"
@keyup.up="
canEdit
? $refs.actionEdit.$el.focus()
: $refs.actionEdit.$el.previousElementSibling.focus()
"
@keyup.down="$refs.actionDelete.$el.focus()"
@keyup.esc="hideActions"
/>
</li>
<li>
<media-browser-action-item-delete
v-if="canDelete"
ref="actionDelete"
:on-focused="focused"
:main-action="openConfirmDeleteModal"
:hide-actions="hideActions"
@keyup.up="
shareable
? $refs.actionShare.$el.focus()
: $refs.actionShare.$el.previousElementSibling.focus()
"
@keyup.down="
previewable
? $refs.actionPreview.$el.focus()
: $refs.actionPreview.$el.previousElementSibling.focus()
"
@keyup.esc="hideActions"
/>
</li>
</ul>
<span aria-hidden="true" class="media-browser-actions-item-name">
<strong>{{ this.$parent.$props.item.name }}</strong>
</span>
<media-browser-action-item-preview
v-if="previewable"
ref="actionPreview"
:on-focused="focused"
:main-action="openPreview"
:closing-action="hideActions"
@keyup.up="$refs.actionDelete.$el.focus()"
@keyup.down="$refs.actionDelete.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>
<media-browser-action-item-download
v-if="downloadable"
ref="actionDownload"
:on-focused="focused"
:main-action="download"
:closing-action="hideActions"
@keyup.up="$refs.actionPreview.$el.focus()"
@keyup.down="$refs.actionPreview.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>

<media-browser-action-item-rename
v-if="canEdit"
ref="actionRename"
:on-focused="focused"
:main-action="openRenameModal"
:closing-action="hideActions"
@keyup.up="
downloadable
? $refs.actionDownload.$el.focus()
: $refs.actionDownload.$el.previousElementSibling.focus()
"
@keyup.down="
canEdit
? $refs.actionEdit.$el.focus()
: shareable
? $refs.actionShare.$el.focus()
: $refs.actionShare.$el.previousElementSibling.focus()
"
@keyup.esc="hideActions"
/>
<media-browser-action-item-edit
v-if="canEdit && canOpenEditView"
ref="actionEdit"
:on-focused="focused"
:main-action="editItem"
:closing-action="hideActions"
@keyup.up="$refs.actionRename.$el.focus()"
@keyup.down="$refs.actionRename.$el.previousElementSibling.focus()"
@keyup.esc="hideActions"
/>
<media-browser-action-item-share
v-if="shareable"
ref="actionShare"
:on-focused="focused"
:main-action="openShareUrlModal"
:closing-action="hideActions"
@keyup.up="
canEdit
? $refs.actionEdit.$el.focus()
: $refs.actionEdit.$el.previousElementSibling.focus()
"
@keyup.down="$refs.actionDelete.$el.focus()"
@keyup.esc="hideActions"
/>
<media-browser-action-item-delete
v-if="canDelete"
ref="actionDelete"
:on-focused="focused"
:main-action="openConfirmDeleteModal"
:hide-actions="hideActions"
@keyup.up="
shareable
? $refs.actionShare.$el.focus()
: $refs.actionShare.$el.previousElementSibling.focus()
"
@keyup.down="
previewable
? $refs.actionPreview.$el.focus()
: $refs.actionPreview.$el.previousElementSibling.focus()
"
@keyup.esc="hideActions"
/>
</div>
</div>
</template>
Expand Down Expand Up @@ -170,6 +162,7 @@ export default {
/* Hide actions dropdown */
hideActions() {
this.showActions = false;
this.$parent.$parent.$data.actionsActive = false;
},
/* Preview an item */
openPreview() {
Expand Down Expand Up @@ -200,6 +193,7 @@ export default {
/* Open actions dropdown */
openActions() {
this.showActions = true;
this.$parent.$parent.$data.actionsActive = true;
const buttons = [...this.$el.parentElement.querySelectorAll('.media-browser-actions-list button')];
if (buttons.length) {
buttons[0].focus();
Expand All @@ -208,6 +202,7 @@ export default {
/* Open actions dropdown and focus on last element */
openLastActions() {
this.showActions = true;
this.$parent.$parent.$data.actionsActive = true;
const buttons = [...this.$el.parentElement.querySelectorAll('.media-browser-actions-list button')];
if (buttons.length) {
this.$nextTick(() => buttons[buttons.length - 1].focus());
Expand Down
9 changes: 6 additions & 3 deletions ...istrator/components/com_media/resources/scripts/components/browser/actionItems/delete.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,22 @@
<button
type="button"
class="action-delete"
:aria-label="translate('COM_MEDIA_ACTION_DELETE')"
:title="translate('COM_MEDIA_ACTION_DELETE')"
@keyup.enter="openConfirmDeleteModal()"
@keyup.space="openConfirmDeleteModal()"
@focus="focused(true)"
@blur="focused(false)"
@keyup.esc="hideActions()"
@click.stop="openConfirmDeleteModal()"
>
<span
class="image-browser-action icon-trash"
aria-hidden="true"
@click.stop="openConfirmDeleteModal()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_DELETE') }}
</span>
</button>
</template>

Expand Down
10 changes: 7 additions & 3 deletions ...trator/components/com_media/resources/scripts/components/browser/actionItems/download.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,23 @@
<button
type="button"
class="action-download"
:aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
:title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
@keyup.enter="download()"
@keyup.space="download()"
@click.stop="download()"
@focus="focused(true)"
@blur="focused(false)"
@keyup.esc="hideActions()"
>
<span
class="image-browser-action icon-download"
aria-hidden="true"
@click.stop="download()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_DOWNLOAD') }}
</span>

</button>
</template>

Expand Down
10 changes: 7 additions & 3 deletions administrator/components/com_media/resources/scripts/components/browser/actionItems/edit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,23 @@
<button
type="button"
class="action-edit"
:aria-label="translate('COM_MEDIA_ACTION_EDIT')"
:title="translate('COM_MEDIA_ACTION_EDIT')"
@keyup.enter="editItem()"
@keyup.space="editItem()"
@click.stop="editItem()"
@focus="focused(true)"
@blur="focused(false)"
@keyup.esc="hideActions()"
>
<span
class="image-browser-action icon-pencil-alt"
aria-hidden="true"
@click.stop="editItem()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_EDIT') }}
</span>

</button>
</template>

Expand Down
9 changes: 6 additions & 3 deletions ...strator/components/com_media/resources/scripts/components/browser/actionItems/preview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
<button
type="button"
class="action-preview"
:aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
:title="translate('COM_MEDIA_ACTION_PREVIEW')"
@click.stop="openPreview()"
@keyup.enter="openPreview()"
@keyup.space="openPreview()"
@focus="focused(true)"
Expand All @@ -13,8 +12,12 @@
<span
class="image-browser-action icon-search-plus"
aria-hidden="true"
@click.stop="openPreview()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_PREVIEW') }}
</span>
</button>
</template>

Expand Down
11 changes: 7 additions & 4 deletions ...istrator/components/com_media/resources/scripts/components/browser/actionItems/rename.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@
ref="actionRenameButton"
type="button"
class="action-rename"
:aria-label="translate('COM_MEDIA_ACTION_RENAME')"
:title="translate('COM_MEDIA_ACTION_RENAME')"
@click.stop="openRenameModal()"
@keyup.enter="openRenameModal()"
@keyup.space="openRenameModal()"
@focus="focused(true)"
@blur="focused(false)"
@keyup.esc="hideActions()"
>
<span
class="image-browser-action icon-text-width"
class="image-browser-action fa fa-i-cursor"
aria-hidden="true"
@click.stop="openRenameModal()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_RENAME') }}
</span>
</button>
</template>

Expand Down
10 changes: 7 additions & 3 deletions ...nistrator/components/com_media/resources/scripts/components/browser/actionItems/share.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
<button
type="button"
class="action-url"
:aria-label="translate('COM_MEDIA_ACTION_SHARE')"
:title="translate('COM_MEDIA_ACTION_SHARE')"
@click.stop="openShareUrlModal()"
@keyup.enter="openShareUrlModal()"
@keyup.space="openShareUrlModal()"
@focus="focused(true)"
Expand All @@ -13,8 +12,13 @@
<span
class="image-browser-action icon-link"
aria-hidden="true"
@click.stop="openShareUrlModal()"
/>
<span
class="action-text"
>
{{ translate('COM_MEDIA_ACTION_SHARE') }}
</span>

</button>
</template>

Expand Down
5 changes: 2 additions & 3 deletions ...istrator/components/com_media/resources/scripts/components/browser/actionItems/toggle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
<button
type="button"
class="action-toggle"
tabindex="0"
:aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
:title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
:aria-label="sprintf('COM_MEDIA_OPEN_ITEM_ACTIONS',(this.$parent.$props.item.name))"
:title="sprintf('COM_MEDIA_OPEN_ITEM_ACTIONS',(this.$parent.$props.item.name))"
@keyup.enter="openActions()"
@focus="focused(true)"
@blur="focused(false)"
Expand Down
Loading