Skip to content
Snippets Groups Projects
Verified Commit 1a20223c authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Make table scrollables (and improve their resizing)

parent 28aca23d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 231 additions and 205 deletions
front/src/components/ShortcutsModal.vue
+ 1
− 1
View file @ 1a20223c
......@@ -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>
......
front/src/components/audio/track/Row.vue
+ 1
− 1
View file @ 1a20223c
......@@ -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"
......
front/src/components/audio/track/Table.vue
+ 24
− 22
View file @ 1a20223c
<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>
......
front/src/components/auth/Settings.vue
+ 1
− 1
View file @ 1a20223c
......@@ -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>
......
front/src/components/common/ActionTable.vue
+ 132
− 130
View file @ 1a20223c
<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 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>
</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>
<slot name="action-success-footer" :result="actionResult">
</slot>
</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>&nbsp;</label>
</div>
</div>
</th>
</tr>
<tr>
<th v-if="actions.length > 0">
<div class="ui checkbox">
</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>&nbsp;</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>&nbsp;</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>&nbsp;</label>
</td>
<slot name="row-cells" :obj="obj"></slot>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
......
front/src/components/library/FileUpload.vue
+ 35
− 32
View file @ 1a20223c
......@@ -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'}]">
......
front/src/components/playlists/Editor.vue
+ 21
− 18
View file @ 1a20223c
......@@ -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>
......
front/src/style/_main.scss
+ 16
− 0
View file @ 1a20223c
......@@ -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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment