Make table scrollables (and improve their resizing)
This commit is contained in:
Eliot Berriot
parent
28aca23d8d
commit
1a20223c38
|
|
@ -5,7 +5,7 @@
|
|||
</header>
|
||||
<section class="scrolling content">
|
||||
<table
|
||||
class="ui compact collapsing basic fixed single line table"
|
||||
class="ui compact collapsing basic table"
|
||||
v-for="section in sections"
|
||||
:key="section.title">
|
||||
<caption>{{ section.title }}</caption>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<td colspan="4" v-else>
|
||||
<translate :translate-context="'*/*/*'">N/A</translate>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<td colspan="2" class="align right">
|
||||
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
|
||||
<track-playlist-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<template>
|
||||
<table class="ui compact very basic fixed single line unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<track-row
|
||||
:playable="playable"
|
||||
:display-position="displayPosition"
|
||||
:track="track"
|
||||
:artist="artist"
|
||||
:key="index + '-' + track.id"
|
||||
v-for="(track, index) in tracks"></track-row>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-wrapper">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
|
||||
<th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<track-row
|
||||
:playable="playable"
|
||||
:display-position="displayPosition"
|
||||
:track="track"
|
||||
:artist="artist"
|
||||
:key="index + '-' + track.id"
|
||||
v-for="(track, index) in tracks"></track-row>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
<h3 class="ui header">
|
||||
<translate>Hidden artists</translate>
|
||||
</h3>
|
||||
<table class="ui compact very basic fixed single line unstackable table">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th>
|
||||
|
|
|
|||
|
|
@ -1,142 +1,144 @@
|
|||
<template>
|
||||
<table class="ui compact very basic single line unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1000">
|
||||
<div v-if="refreshable" class="right floated">
|
||||
<span v-if="needsRefresh">
|
||||
<translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('refresh')"
|
||||
class="ui basic icon button"
|
||||
:title="labels.refresh"
|
||||
:aria-label="labels.refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1000">
|
||||
<div v-if="refreshable" class="right floated">
|
||||
<span v-if="needsRefresh">
|
||||
<translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('refresh')"
|
||||
class="ui basic icon button"
|
||||
:title="labels.refresh"
|
||||
:aria-label="labels.refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
|
||||
<div class="ui inline fields">
|
||||
<div class="field">
|
||||
<label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
|
||||
<select class="ui dropdown" v-model="currentActionName">
|
||||
<option v-for="action in actions" :value="action.name">
|
||||
{{ action.label }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
|
||||
<div class="ui inline fields">
|
||||
<div class="field">
|
||||
<label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
|
||||
<select class="ui dropdown" v-model="currentActionName">
|
||||
<option v-for="action in actions" :value="action.name">
|
||||
{{ action.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<dangerous-button
|
||||
v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
|
||||
confirm-color="green"
|
||||
color=""
|
||||
@confirm="launchAction">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
|
||||
<p slot="modal-header">
|
||||
<translate :translate-context="'Modal/*/Title'"
|
||||
key="1"
|
||||
:translate-n="affectedObjectsCount"
|
||||
:translate-params="{count: affectedObjectsCount, action: currentActionName}"
|
||||
translate-plural="Do you want to launch %{ action } on %{ count } elements?">
|
||||
Do you want to launch %{ action } on %{ count } element?
|
||||
</translate>
|
||||
</p>
|
||||
<p slot="modal-content">
|
||||
<translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
|
||||
</p>
|
||||
<div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
|
||||
</dangerous-button>
|
||||
<div
|
||||
v-else
|
||||
@click="launchAction"
|
||||
:disabled="checked.length === 0"
|
||||
:class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
|
||||
</div>
|
||||
<div class="count field">
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-if="selectAll"
|
||||
key="1"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{count: objectsData.count, total: objectsData.count}"
|
||||
translate-plural="All %{ count } elements selected">
|
||||
All %{ count } element selected
|
||||
</translate>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-else
|
||||
key="2"
|
||||
:translate-n="checked.length"
|
||||
:translate-params="{count: checked.length, total: objectsData.count}"
|
||||
translate-plural="%{ count } on %{ total } selected">
|
||||
%{ count } on %{ total } selected
|
||||
</translate>
|
||||
<template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
|
||||
<a @click="selectAll = true" v-if="!selectAll">
|
||||
<translate :translate-context="'Content/*/Link/Verb'"
|
||||
key="3"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{total: objectsData.count}"
|
||||
translate-plural="Select all %{ total } elements">
|
||||
Select all %{ total } elements
|
||||
</translate>
|
||||
</a>
|
||||
<a @click="selectAll = false" v-else>
|
||||
<translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<dangerous-button
|
||||
v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
|
||||
confirm-color="green"
|
||||
color=""
|
||||
@confirm="launchAction">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
|
||||
<p slot="modal-header">
|
||||
<translate :translate-context="'Modal/*/Title'"
|
||||
key="1"
|
||||
:translate-n="affectedObjectsCount"
|
||||
:translate-params="{count: affectedObjectsCount, action: currentActionName}"
|
||||
translate-plural="Do you want to launch %{ action } on %{ count } elements?">
|
||||
Do you want to launch %{ action } on %{ count } element?
|
||||
</translate>
|
||||
</p>
|
||||
<p slot="modal-content">
|
||||
<translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
|
||||
</p>
|
||||
<div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
|
||||
</dangerous-button>
|
||||
<div
|
||||
v-else
|
||||
@click="launchAction"
|
||||
:disabled="checked.length === 0"
|
||||
:class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
|
||||
<translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
|
||||
<div v-if="actionErrors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
|
||||
<ul class="list">
|
||||
<li v-for="error in actionErrors">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="count field">
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-if="selectAll"
|
||||
key="1"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{count: objectsData.count, total: objectsData.count}"
|
||||
translate-plural="All %{ count } elements selected">
|
||||
All %{ count } element selected
|
||||
</translate>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
tag="span"
|
||||
v-else
|
||||
key="2"
|
||||
:translate-n="checked.length"
|
||||
:translate-params="{count: checked.length, total: objectsData.count}"
|
||||
translate-plural="%{ count } on %{ total } selected">
|
||||
%{ count } on %{ total } selected
|
||||
</translate>
|
||||
<template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
|
||||
<a @click="selectAll = true" v-if="!selectAll">
|
||||
<translate :translate-context="'Content/*/Link/Verb'"
|
||||
key="3"
|
||||
:translate-n="objectsData.count"
|
||||
:translate-params="{total: objectsData.count}"
|
||||
translate-plural="Select all %{ total } elements">
|
||||
Select all %{ total } elements
|
||||
</translate>
|
||||
</a>
|
||||
<a @click="selectAll = false" v-else>
|
||||
<translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="actionErrors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
|
||||
<ul class="list">
|
||||
<li v-for="error in actionErrors">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="actionResult" class="ui positive message">
|
||||
<p>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
:translate-n="actionResult.updated"
|
||||
:translate-params="{count: actionResult.updated, action: actionResult.action}"
|
||||
translate-plural="Action %{ action } was launched successfully on %{ count } elements">
|
||||
Action %{ action } was launched successfully on %{ count } element
|
||||
</translate>
|
||||
</p>
|
||||
<div v-if="actionResult" class="ui positive message">
|
||||
<p>
|
||||
<translate :translate-context="'Content/*/Paragraph'"
|
||||
:translate-n="actionResult.updated"
|
||||
:translate-params="{count: actionResult.updated, action: actionResult.action}"
|
||||
translate-plural="Action %{ action } was launched successfully on %{ count } elements">
|
||||
Action %{ action } was launched successfully on %{ count } element
|
||||
</translate>
|
||||
</p>
|
||||
|
||||
<slot name="action-success-footer" :result="actionResult">
|
||||
</slot>
|
||||
<slot name="action-success-footer" :result="actionResult">
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th v-if="actions.length > 0">
|
||||
<div class="ui checkbox">
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th v-if="actions.length > 0">
|
||||
<div class="ui checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="toggleCheckAll"
|
||||
:disabled="checkable.length === 0"
|
||||
:checked="checkable.length > 0 && checked.length === checkable.length"><label> </label>
|
||||
</div>
|
||||
</th>
|
||||
<slot name="header-cells"></slot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="objectsData.count > 0">
|
||||
<tr v-for="(obj, index) in objects">
|
||||
<td v-if="actions.length > 0" class="collapsing">
|
||||
<input
|
||||
type="checkbox"
|
||||
@change="toggleCheckAll"
|
||||
:disabled="checkable.length === 0"
|
||||
:checked="checkable.length > 0 && checked.length === checkable.length"><label> </label>
|
||||
</div>
|
||||
</th>
|
||||
<slot name="header-cells"></slot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="objectsData.count > 0">
|
||||
<tr v-for="(obj, index) in objects">
|
||||
<td v-if="actions.length > 0" class="collapsing">
|
||||
<input
|
||||
type="checkbox"
|
||||
:disabled="checkable.indexOf(getId(obj)) === -1"
|
||||
@click="toggleCheck($event, getId(obj), index)"
|
||||
:checked="checked.indexOf(getId(obj)) > -1"><label> </label>
|
||||
</td>
|
||||
<slot name="row-cells" :obj="obj"></slot>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
:disabled="checkable.indexOf(getId(obj)) === -1"
|
||||
@click="toggleCheck($event, getId(obj), index)"
|
||||
:checked="checked.indexOf(getId(obj)) > -1"><label> </label>
|
||||
</td>
|
||||
<slot name="row-cells" :obj="obj"></slot>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
|
|
|||
|
|
@ -79,39 +79,42 @@
|
|||
<i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
|
||||
</file-upload-widget>
|
||||
</div>
|
||||
<table v-if="files.length > 0" class="ui single line table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(file, index) in sortedFiles" :key="file.id">
|
||||
<td :title="file.name">{{ file.name | truncate(60) }}</td>
|
||||
<td>{{ file.size | humanSize }}</td>
|
||||
<td>
|
||||
<span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
|
||||
<span class="ui red icon label">
|
||||
<i class="question circle outline icon" /> {{ file.error }}
|
||||
<div v-if="files.length > 0" class="table-wrapper">
|
||||
<div class="ui hidden divider"></div>
|
||||
<table class="ui unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
|
||||
<th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(file, index) in sortedFiles" :key="file.id">
|
||||
<td :title="file.name">{{ file.name | truncate(60) }}</td>
|
||||
<td>{{ file.size | humanSize }}</td>
|
||||
<td>
|
||||
<span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
|
||||
<span class="ui red icon label">
|
||||
<i class="question circle outline icon" /> {{ file.error }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else-if="file.success" class="ui green label">
|
||||
<translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
|
||||
</span>
|
||||
<span v-else-if="file.active" class="ui yellow label">
|
||||
<translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
|
||||
({{ parseInt(file.progress) }}%)
|
||||
</span>
|
||||
<template v-else>
|
||||
<span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
|
||||
<button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span v-else-if="file.success" class="ui green label">
|
||||
<translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
|
||||
</span>
|
||||
<span v-else-if="file.active" class="ui yellow label">
|
||||
<translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
|
||||
({{ parseInt(file.progress) }}%)
|
||||
</span>
|
||||
<template v-else>
|
||||
<span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
|
||||
<button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">
|
||||
|
|
|
|||
|
|
@ -48,24 +48,27 @@
|
|||
<div class="ui hidden divider"></div>
|
||||
<template v-if="plts.length > 0">
|
||||
<p><translate :translate-context="'Content/Playlist/Paragraph/Call to action'">Drag and drop rows to reorder tracks in the playlist</translate></p>
|
||||
<table class="ui compact very basic fixed single line unstackable table">
|
||||
<draggable v-model="plts" element="tbody" @update="reorder">
|
||||
<tr v-for="(plt, index) in plts" :key="plt.id">
|
||||
<td class="left aligned">{{ plt.index + 1}}</td>
|
||||
<td class="center aligned">
|
||||
<img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
|
||||
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<strong>{{ plt.track.title }}</strong><br />
|
||||
{{ plt.track.artist.name }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<i @click.stop="removePlt(index)" class="circular red trash icon"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</table>
|
||||
<div class="table-wrapper">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<draggable v-model="plts" element="tbody" @update="reorder">
|
||||
<tr v-for="(plt, index) in plts" :key="plt.id">
|
||||
<td class="left aligned">{{ plt.index + 1}}</td>
|
||||
<td class="center aligned">
|
||||
<img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
|
||||
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<strong>{{ plt.track.title }}</strong><br />
|
||||
{{ plt.track.artist.name }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<i @click.stop="removePlt(index)" class="circular red trash icon"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -285,3 +285,19 @@ span.diff.added {
|
|||
span.diff.removed {
|
||||
background-color: rgba(255, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
td.align.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.pagination.menu {
|
||||
margin-top: 1em;
|
||||
+ span {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue