work on episode form
This commit is contained in:
bkfox
@ -3,7 +3,7 @@
|
||||
<span v-if="promise && runIcon">
|
||||
<i :class="runIcon"></i>
|
||||
</span>
|
||||
<span v-else-if="icon" class="icon">
|
||||
<span v-else-if="icon" class="icon is-small">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
<span v-if="$slots.default"><slot name="default"/></span>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="playlist-editor">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="a-playlist-editor">
|
||||
<div class="flex-row">
|
||||
<div class="flex-grow-1">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<div class="float-right field has-addons">
|
||||
<div class="flex-row align-right">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<a :class="['button','p-2', page == Page.Text ? 'is-primary' : 'is-light']"
|
||||
@click="page = Page.Text">
|
||||
@ -28,13 +28,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<slot name="top" :set="set" :columns="columns" :items="items"/>
|
||||
<section class="page" v-show="page == Page.Text">
|
||||
<section v-show="page == Page.Text" class="panel">
|
||||
<textarea ref="textarea" class="is-fullwidth is-size-6" rows="20"
|
||||
@change="updateList"
|
||||
/>
|
||||
|
||||
</section>
|
||||
<section class="page" v-show="page == Page.List">
|
||||
<section v-show="page == Page.List" class="panel">
|
||||
<a-rows :set="set" :columns="columns" :labels="labels"
|
||||
:allow-create="true"
|
||||
:orderable="true" @move="listItemMove" @colmove="columnMove"
|
||||
@ -46,9 +46,9 @@
|
||||
|
||||
<template v-slot:row-tail="data">
|
||||
<slot v-if="$slots['row-tail']" :name="row-tail" v-bind="data"/>
|
||||
<td>
|
||||
<a class="button is-danger is-outlined p-3 is-size-6"
|
||||
@click="items.splice(data.row,1)"
|
||||
<td class="align-right pr-0">
|
||||
<a class="button square"
|
||||
@click.stop="items.splice(data.row,1)"
|
||||
:title="labels.remove_track"
|
||||
:aria-label="labels.remove_track">
|
||||
<span class="icon"><i class="fa fa-trash" /></span>
|
||||
@ -58,62 +58,92 @@
|
||||
</a-rows>
|
||||
</section>
|
||||
|
||||
<div class="mt-2">
|
||||
<div class="float-right">
|
||||
<a class="button is-warning p-2 ml-2"
|
||||
@click="loadData({items: this.initData.items},true)">
|
||||
<span class="icon"><i class="fa fa-rotate" /></span>
|
||||
<span>{{ labels.discard_changes }}</span>
|
||||
</a>
|
||||
<a class="button is-primary p-2 ml-2" t-if="page == page.List"
|
||||
@click="this.set.push(new this.set.model())">
|
||||
<span class="icon"><i class="fa fa-plus"/></span>
|
||||
<span>{{ labels.add_track }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="field is-inline-block is-vcentered mr-3">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
Séparateur</label>
|
||||
<div class="control is-inline-block"
|
||||
style="vertical-align: middle;">
|
||||
<input type="text" ref="sep" class="input is-inline is-text-centered is-small"
|
||||
style="max-width: 5em;"
|
||||
v-model="separator" @change="updateList()"/>
|
||||
<div class="flex-row">
|
||||
<div class="flex-grow-1 flex-row">
|
||||
<div class="field ml-3">
|
||||
<p class="control">
|
||||
<a class="button is-info"
|
||||
@click="$refs.settings.open()">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-cog"></i>
|
||||
</span>
|
||||
<span>Options</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-inline-block is-vcentered mr-3">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
{{ labels.columns }}</label>
|
||||
<table class="table is-bordered is-inline-block"
|
||||
style="vertical-align: middle">
|
||||
<tr>
|
||||
<a-row :columns="columns" :item="labels"
|
||||
@move="formatMove" :orderable="true">
|
||||
<template v-slot:cell-after="{cell}">
|
||||
<td style="cursor:pointer;" v-if="cell.col < columns.length-1">
|
||||
<span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
|
||||
><i class="fa fa-left-right"/>
|
||||
</span>
|
||||
</td>
|
||||
</template>
|
||||
</a-row>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="field is-vcentered is-inline-block"
|
||||
v-if="settingsChanged">
|
||||
<a-action-button icon="fa fa-floppy-disk"
|
||||
class="button control p-3 is-info" run-class="blink"
|
||||
:url="settingsUrl" method="POST"
|
||||
:data="settings"
|
||||
:aria-label="labels.save_settings"
|
||||
@done="settingsSaved()">
|
||||
{{ labels.save_settings }}
|
||||
</a-action-button>
|
||||
<div class="flex-grow-1 align-right">
|
||||
<a class="button square is-warning p-2"
|
||||
@click="loadData({items: this.initData.items},true)"
|
||||
:title="labels.discard_changes"
|
||||
:aria-label="labels.discard_changes"
|
||||
>
|
||||
<span class="icon"><i class="fa fa-rotate" /></span>
|
||||
</a>
|
||||
<a class="button square is-primary p-2" v-if="page == Page.List"
|
||||
@click="this.set.push(new this.set.model())"
|
||||
:title="labels.add_track"
|
||||
:aria-label="labels.add_track"
|
||||
>
|
||||
<span class="icon"><i class="fa fa-plus"/></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal ref="settings" title="Options">
|
||||
<template #default>
|
||||
<div class="field">
|
||||
<label class="label" style="vertical-align: middle">
|
||||
{{ labels.columns }}
|
||||
</label>
|
||||
<table class="table is-bordered"
|
||||
style="vertical-align: middle">
|
||||
<tr>
|
||||
<a-row :columns="columns" :item="labels"
|
||||
@move="formatMove" :orderable="true">
|
||||
<template v-slot:cell-after="{cell}">
|
||||
<td style="cursor:pointer;" v-if="cell.col < columns.length-1">
|
||||
<span class="icon" @click="formatMove({from: cell.col, to: cell.col+1})"
|
||||
><i class="fa fa-left-right"/>
|
||||
</span>
|
||||
</td>
|
||||
</template>
|
||||
</a-row>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="field is-inline-block is-vcentered flex-grow-1">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
Séparateur</label>
|
||||
<div class="control is-inline-block"
|
||||
style="vertical-align: middle;">
|
||||
<input type="text" ref="sep" class="input is-inline is-text-centered is-small"
|
||||
style="max-width: 5em;"
|
||||
v-model="separator" @change="updateList()"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex-row align-right">
|
||||
<a-action-button icon="fa fa-floppy-disk"
|
||||
v-if="settingsChanged"
|
||||
class="button control p-2 mr-3 is-secondary" run-class="blink"
|
||||
:url="settingsUrl" method="POST"
|
||||
:data="settings"
|
||||
:aria-label="labels.save_settings"
|
||||
@done="settingsSaved()">
|
||||
{{ labels.save_settings }}
|
||||
</a-action-button>
|
||||
<button class="button" type="button" @click="$refs.settings.close()">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</a-modal>
|
||||
<slot name="bottom" :set="set" :columns="columns" :items="items"/>
|
||||
</div>
|
||||
</template>
|
||||
@ -123,8 +153,9 @@ import {Set} from '../model'
|
||||
import Track from '../track'
|
||||
|
||||
import AActionButton from './AActionButton'
|
||||
import ARow from './ARow.vue'
|
||||
import ARows from './ARows.vue'
|
||||
import ARow from './ARow'
|
||||
import ARows from './ARows'
|
||||
import AModal from "./AModal"
|
||||
|
||||
/// Page display
|
||||
export const Page = {
|
||||
@ -132,7 +163,7 @@ export const Page = {
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { AActionButton, ARow, ARows },
|
||||
components: { AActionButton, ARow, ARows, AModal },
|
||||
props: {
|
||||
initData: Object,
|
||||
dataPrefix: String,
|
||||
@ -297,6 +328,8 @@ export default {
|
||||
settingsSaved(settings=null) {
|
||||
if(settings !== null)
|
||||
this.settings = settings
|
||||
if(this.$refs.settings)
|
||||
this.$refs.settings.close()
|
||||
this.savedSettings = cloneDeep(this.settings)
|
||||
},
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="a-select-file">
|
||||
<div class="a-select-file-list" ref="list">
|
||||
<div class="flex-column file-preview">
|
||||
<div :class="['a-select-file-list', listClass]" ref="list">
|
||||
<div class="flex-column">
|
||||
<div class="field flex-grow-1" v-if="!uploadFile">
|
||||
<label class="label">{{ uploadLabel }}</label>
|
||||
<input type="file" @change="previewFile"/>
|
||||
@ -51,6 +51,7 @@ import {getCsrf} from "../model"
|
||||
export default {
|
||||
props: {
|
||||
name: { type: String },
|
||||
listClass: {type: String, default: ""},
|
||||
prevLabel: { type: String, default: "Prev" },
|
||||
nextLabel: { type: String, default: "Next" },
|
||||
listUrl: { type: String },
|
||||
@ -88,7 +89,7 @@ export default {
|
||||
formData.append('file', this.uploadFile.file)
|
||||
formData.append('original_filename', this.uploadFile.file.name)
|
||||
formData.append('csrfmiddlewaretoken', getCsrf())
|
||||
fetch(this.listUrl, {
|
||||
fetch(this.uploadUrl, {
|
||||
method: "POST",
|
||||
body: formData
|
||||
}).then(
|
||||
|
||||
@ -4,10 +4,18 @@ import './index.js'
|
||||
import App from './app';
|
||||
import {dashboard as components} from './components'
|
||||
|
||||
const AdminApp = {
|
||||
const DashboardApp = {
|
||||
...App,
|
||||
components: {...App.components, ...components},
|
||||
|
||||
/*
|
||||
data() {
|
||||
return {
|
||||
editPageContent: null,
|
||||
}
|
||||
},
|
||||
*/
|
||||
|
||||
methods: {
|
||||
...App.methods,
|
||||
|
||||
@ -22,7 +30,7 @@ const AdminApp = {
|
||||
},
|
||||
}
|
||||
}
|
||||
export default AdminApp;
|
||||
export default DashboardApp;
|
||||
|
||||
|
||||
window.App = AdminApp
|
||||
window.App = DashboardApp
|
||||
|
||||
@ -162,9 +162,8 @@
|
||||
color: var(--button-fg);
|
||||
background-color: var(--button-bg);
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--button-sec-bg);
|
||||
}
|
||||
&.square { min-width: 2.5rem; }
|
||||
&.secondary { background-color: var(--button-sec-bg); }
|
||||
|
||||
.label, label {
|
||||
cursor: pointer;
|
||||
@ -173,8 +172,8 @@
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
&:not(:only-child) {
|
||||
&:first-child { margin-right: v.$mp-3; }
|
||||
&:last-child { margin-left: v.$mp-3 }
|
||||
&:first-child { margin: 0 v.$mp-3 0 v.$mp-1; }
|
||||
&:last-child { margin: 0 v.$mp-3 0 v.$mp-1; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -710,6 +709,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// ---- playlist editor
|
||||
.a-playlist-editor {
|
||||
.dropdown {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/// ----------------
|
||||
.a-select-file {
|
||||
> *:not(:last-child) {
|
||||
|
||||
@ -3,8 +3,18 @@
|
||||
.text-light { weight: 400; color: var(--text-color-light); }
|
||||
|
||||
// ---- layout
|
||||
.align-left { text-align: left; justify-content: left; }
|
||||
.align-right { text-align: right; justify-content: right; }
|
||||
.align-left {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
|
||||
&.x { padding-left: 0px !important; }
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
justify-content: right;
|
||||
|
||||
&.x { padding-right: 0px !important; }
|
||||
}
|
||||
|
||||
.clear-left { clear: left !important }
|
||||
.clear-right { clear: right !important }
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$screen-small) {
|
||||
textarea {
|
||||
comment.textarea {
|
||||
height: calc( v.$text-size * 7 ) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user