Skip to content
Snippets Groups Projects
Commit 3d0851ab authored by Thomas Hackl's avatar Thomas Hackl
Browse files

Resolve "Fehlende textuelle Beschreibungen für Icons im Dateibereich" 

    Closes #4037

    Merge request studip/studip!2893
parent 89ac3337
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/stylesheets/scss/tables.scss
+ 13
− 0
View file @ 3d0851ab
...@@ -4,4 +4,17 @@ table.default { ...@@ -4,4 +4,17 @@ table.default {
width: 30px; width: 30px;
} }
} }
th.sortasc {
span[role=img] {
@include icon('after', 'arr_1up', 'clickable');
}
}
th.sortdesc {
span[role=img] {
@include icon('after', 'arr_1down', 'clickable');
}
}
} }
resources/vue/components/FilesTable.vue
+ 110
− 21
View file @ 3d0851ab
...@@ -42,49 +42,124 @@ ...@@ -42,49 +42,124 @@
</colgroup> </colgroup>
<thead> <thead>
<tr class="sortable"> <tr class="sortable">
<th v-if="show_bulk_actions" data-sort="false" :aria-label="$gettext('Ordner und Dateien auswählen')"> <th v-if="show_bulk_actions"
data-sort="false"
:aria-label="$gettext('Ordner und Dateien auswählen')">
<studip-proxy-checkbox <studip-proxy-checkbox
v-model="selectedIds" v-model="selectedIds"
:total="allIds" :total="allIds"
:title="$gettext('Alle Ordner und Dateien auswählen')" :title="$gettext('Alle Ordner und Dateien auswählen')"
></studip-proxy-checkbox> ></studip-proxy-checkbox>
</th> </th>
<th @click="sort('mime_type')" :class="sortClasses('mime_type')">
<a href="#" @click.prevent> <th @click="sort('mime_type')"
:class="sortClasses('mime_type')">
<a href="#"
@click.prevent
:title="$gettext('Nach Typ sortieren')">
{{ $gettext('Typ') }} {{ $gettext('Typ') }}
</a> </a>
<span v-if="sortedBy === 'mime_type'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird abfsteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th @click="sort('name')" :class="sortClasses('name')">
<a href="#" @click.prevent> <th @click="sort('name')"
:class="sortClasses('name')">
<a href="#"
@click.prevent
:title="$gettext('Nach Name sortieren')">
{{ $gettext('Name') }} {{ $gettext('Name') }}
</a> </a>
<span v-if="sortedBy === 'name'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th @click="sort('size')" class="responsive-hidden" :class="sortClasses('size')">
<a href="#" @click.prevent> <th @click="sort('size')"
class="responsive-hidden"
:class="sortClasses('size')">
<a href="#"
@click.prevent
:title="$gettext('Nach Größe sortieren')">
{{ $gettext('Größe') }} {{ $gettext('Größe') }}
</a> </a>
<span v-if="sortedBy === 'size'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th v-if="showdownloads" @click="sort('downloads')" class="responsive-hidden" :class="sortClasses('downloads')">
<a href="#" @click.prevent> <th v-if="showdownloads"
@click="sort('downloads')"
class="responsive-hidden"
:class="sortClasses('downloads')">
<a href="#"
@click.prevent
:title="$gettext('Nach Downloads sortieren')">
{{ $gettext('Downloads') }} {{ $gettext('Downloads') }}
</a> </a>
<span v-if="sortedBy === 'downloads'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th class="responsive-hidden" @click="sort('author_name')" :class="sortClasses('author_name')">
<a href="#" @click.prevent> <th class="responsive-hidden"
@click="sort('author_name')"
:class="sortClasses('author_name')">
<a href="#"
@click.prevent
:title="$gettext('Nach Autor/-in sortieren')">
{{ $gettext('Autor/-in') }} {{ $gettext('Autor/-in') }}
</a> </a>
<span v-if="sortedBy === 'author_name'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th class="responsive-hidden" @click="sort('chdate')" :class="sortClasses('chdate')">
<a href="#" @click.prevent> <th class="responsive-hidden"
@click="sort('chdate')"
:class="sortClasses('chdate')">
<a href="#"
@click.prevent
:title="$gettext('Nach Datum sortieren')">
{{ $gettext('Datum') }} {{ $gettext('Datum') }}
</a> </a>
<span v-if="sortedBy === 'chdate'"
role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'"
:aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')">
</span>
</th> </th>
<th v-for="(name, index) in additionalColumns" <th v-for="(name, index) in additionalColumns"
:key="index" :key="index"
@click="sort(index)" @click="sort(index)"
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses(index)"> :class="sortClasses(index)">
<a href="#" @click.prevent> <a href="#"
@click.prevent
:title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})">
{{name}} {{name}}
</a> </a>
...@@ -120,12 +195,17 @@ ...@@ -120,12 +195,17 @@
></studip-proxied-checkbox> ></studip-proxied-checkbox>
</td> </td>
<td class="document-icon"> <td class="document-icon">
<a :href="folder.url" :id="`folder-${folder.id}`"> <a :href="folder.url"
<studip-icon :shape="folder.icon" role="clickable" size="26" class="text-bottom"></studip-icon> :id="`folder-${folder.id}`"
:title="$gettextInterpolate($gettext('Ordner %{foldername} öffnen'),
{ foldername: folder.name})">
<studip-icon :shape="folder.icon" :size="26" class="text-bottom" alt=""></studip-icon>
</a> </a>
</td> </td>
<td :class="{'filter-match': valueMatchesFilter(folder.name)}"> <td :class="{'filter-match': valueMatchesFilter(folder.name)}">
<a :href="folder.url"> <a :href="folder.url"
:title="$gettextInterpolate($gettext('Ordner %{foldername} öffnen'),
{ foldername: folder.name})">
<span v-html="highlightString(folder.name)"></span> <span v-html="highlightString(folder.name)"></span>
</a> </a>
</td> </td>
...@@ -172,18 +252,27 @@ ...@@ -172,18 +252,27 @@
></studip-proxied-checkbox> ></studip-proxied-checkbox>
</td> </td>
<td class="document-icon"> <td class="document-icon">
<a v-if="file.download_url" :href="file.download_url" target="_blank" rel="noopener noreferrer"> <a v-if="file.download_url"
:href="file.download_url"
target="_blank" rel="noopener noreferrer"
:title="$gettextInterpolate($gettext('Datei %{filename} herunterladen'),
{ filename: file.name })">
<studip-icon :shape="file.icon" role="clickable" size="24" class="text-bottom"></studip-icon> <studip-icon :shape="file.icon" role="clickable" size="24" class="text-bottom"></studip-icon>
</a> </a>
<studip-icon v-else :shape="file.icon" role="clickable" size="24"></studip-icon> <studip-icon v-else :shape="file.icon" role="clickable" size="24"></studip-icon>
<a :href="file.download_url" <a :href="file.download_url"
v-if="file.download_url && file.mime_type.indexOf('image/') === 0" v-if="file.download_url && file.mime_type.indexOf('image/') === 0"
class="lightbox-image" class="lightbox-image"
data-lightbox="gallery"></a> data-lightbox="gallery"
:title="$gettextInterpolate($gettext('Datei %{filename} anzeigen'),
{ filename: file.name })"></a>
</td> </td>
<td :class="{'filter-match': valueMatchesFilter(file.name)}"> <td :class="{'filter-match': valueMatchesFilter(file.name)}">
<a :href="file.details_url" data-dialog :id="`file-${file.id}`"> <a :href="file.details_url"
data-dialog
:id="`file-${file.id}`"
:title="$gettextInterpolate($gettext('Details zur Datei %{filename} anzeigen'),
{ filename: file.name })">
<span v-html="highlightString(file.name)"></span> <span v-html="highlightString(file.name)"></span>
<studip-icon v-if="file.isAccessible" <studip-icon v-if="file.isAccessible"
shape="accessibility" shape="accessibility"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment