From d5f22fbb38c43d9b37df401eff655958a57cb40a Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Thu, 15 Oct 2020 11:07:32 +0000
Subject: [PATCH] revert: use basic input file for episodes audio files instead
of button for better UX
replace platform visible checkbox with switch
---
app/Language/en/Episode.php | 3 +-
app/Language/fr/Episode.php | 3 +-
app/Views/_assets/admin.ts | 2 --
app/Views/_assets/modules/EnclosureInput.ts | 24 -------------
app/Views/_assets/styles/enclosureInput.css | 16 ---------
app/Views/_assets/styles/index.css | 1 -
app/Views/admin/episode/create.php | 34 +++++++++----------
app/Views/admin/episode/edit.php | 27 ++++++++-------
.../admin/podcast/settings/platforms.php | 28 +++++++--------
9 files changed, 48 insertions(+), 90 deletions(-)
delete mode 100644 app/Views/_assets/modules/EnclosureInput.ts
delete mode 100644 app/Views/_assets/styles/enclosureInput.css
diff --git a/app/Language/en/Episode.php b/app/Language/en/Episode.php
index d6a01ac2d0..d2a294c26b 100644
--- a/app/Language/en/Episode.php
+++ b/app/Language/en/Episode.php
@@ -23,7 +23,8 @@ return [
'go_to_page' => 'Go to page',
'create' => 'Add an episode',
'form' => [
- 'enclosure' => 'Choose an .mp3 or .m4a audio file…',
+ 'enclosure' => 'Audio file',
+ 'enclosure_hint' => 'Choose an .mp3 or .m4a audio file.',
'info_section_title' => 'Episode info',
'info_section_subtitle' => '',
'image' => 'Cover image',
diff --git a/app/Language/fr/Episode.php b/app/Language/fr/Episode.php
index 9815d253d0..1471e307cb 100644
--- a/app/Language/fr/Episode.php
+++ b/app/Language/fr/Episode.php
@@ -23,7 +23,8 @@ return [
'go_to_page' => 'Voir',
'create' => 'Ajouter un épisode',
'form' => [
- 'enclosure' => 'Sélectionnez un fichier audio .mp3 ou .m4a…',
+ 'enclosure' => 'Fichier audio',
+ 'enclosure_hint' => 'Sélectionnez un fichier audio .mp3 ou .m4a.',
'info_section_title' => 'Informations épisode',
'info_section_subtitle' => '',
'image' => 'Image de couverture',
diff --git a/app/Views/_assets/admin.ts b/app/Views/_assets/admin.ts
index 7967215c18..4adc1b5b75 100644
--- a/app/Views/_assets/admin.ts
+++ b/app/Views/_assets/admin.ts
@@ -1,5 +1,4 @@
import Dropdown from "./modules/Dropdown";
-import EnclosureInput from "./modules/EnclosureInput";
import MarkdownEditor from "./modules/MarkdownEditor";
import MultiSelect from "./modules/MultiSelect";
import SidebarToggler from "./modules/SidebarToggler";
@@ -12,4 +11,3 @@ MarkdownEditor();
MultiSelect();
Slugify();
SidebarToggler();
-EnclosureInput();
diff --git a/app/Views/_assets/modules/EnclosureInput.ts b/app/Views/_assets/modules/EnclosureInput.ts
deleted file mode 100644
index ef6b95e1bd..0000000000
--- a/app/Views/_assets/modules/EnclosureInput.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const EnclosureInput = (): void => {
- const enclosureInput = document.querySelector(
- ".form-enclosure-input"
- ) as HTMLInputElement;
-
- if (enclosureInput) {
- const label = enclosureInput?.nextElementSibling?.querySelector(
- "span"
- ) as HTMLSpanElement;
- const labelVal = label.innerHTML;
-
- enclosureInput.addEventListener("change", (e: Event) => {
- const fileName = (e.target as HTMLInputElement).value.split("\\").pop();
-
- if (fileName) {
- label.innerHTML = fileName;
- } else {
- label.innerHTML = labelVal;
- }
- });
- }
-};
-
-export default EnclosureInput;
diff --git a/app/Views/_assets/styles/enclosureInput.css b/app/Views/_assets/styles/enclosureInput.css
deleted file mode 100644
index 44ea532923..0000000000
--- a/app/Views/_assets/styles/enclosureInput.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.form-enclosure-input {
- @apply absolute w-0 h-0 opacity-0;
-}
-
-.form-enclosure-input + label {
- @apply inline-flex items-center justify-center w-full py-2 text-lg font-semibold text-green-600 bg-white border-2 border-green-500 rounded-lg shadow cursor-pointer;
-}
-
-.form-enclosure-input:focus + label,
-.form-enclosure-input + label:hover {
- @apply text-green-700 border-green-700 shadow-md;
-}
-
-.form-enclosure-input:focus + label {
- @apply shadow-outline;
-}
diff --git a/app/Views/_assets/styles/index.css b/app/Views/_assets/styles/index.css
index 7398d818de..f7737f4f32 100644
--- a/app/Views/_assets/styles/index.css
+++ b/app/Views/_assets/styles/index.css
@@ -4,5 +4,4 @@
@import "./multiSelect.css";
@import "./radioBtn.css";
@import "./switch.css";
-@import "./enclosureInput.css";
@import "./charts.css";
diff --git a/app/Views/admin/episode/create.php b/app/Views/admin/episode/create.php
index e983158e9d..8f3b5a2f05 100644
--- a/app/Views/admin/episode/create.php
+++ b/app/Views/admin/episode/create.php
@@ -17,24 +17,26 @@
]) ?>
<?= csrf_field() ?>
-<div class="flex w-full mb-6">
- <?= form_input([
- 'id' => 'enclosure',
- 'name' => 'enclosure',
- 'class' => 'form-enclosure-input',
- 'required' => 'required',
- 'type' => 'file',
- 'accept' => '.mp3,.m4a',
- ]) ?>
- <label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
- <span><?= lang('Episode.form.enclosure') ?></span></label>
-</div>
-
<?= form_section(
lang('Episode.form.info_section_title'),
lang('Episode.form.info_section_subtitle')
) ?>
+<?= form_label(
+ lang('Episode.form.enclosure'),
+ 'enclosure',
+ [],
+ lang('Episode.form.enclosure_hint')
+) ?>
+<?= form_input([
+ 'id' => 'enclosure',
+ 'name' => 'enclosure',
+ 'class' => 'form-input mb-4',
+ 'required' => 'required',
+ 'type' => 'file',
+ 'accept' => '.mp3,.m4a',
+]) ?>
+
<?= form_label(
lang('Episode.form.image'),
'image',
@@ -130,11 +132,7 @@
<?= lang('Episode.form.type.trailer') ?>
</label>
<?= form_radio(
- [
- 'id' => 'bonus',
- 'name' => 'type',
- 'class' => 'form-radio-btn',
- ],
+ ['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
'bonus',
old('type') ? old('type') == 'bonus' : false
) ?>
diff --git a/app/Views/admin/episode/edit.php b/app/Views/admin/episode/edit.php
index 3048e1776f..8ef2850a8e 100644
--- a/app/Views/admin/episode/edit.php
+++ b/app/Views/admin/episode/edit.php
@@ -17,23 +17,25 @@
]) ?>
<?= csrf_field() ?>
-<div class="flex w-full mb-6">
- <?= form_input([
- 'id' => 'enclosure',
- 'name' => 'enclosure',
- 'class' => 'form-enclosure-input',
- 'type' => 'file',
- 'accept' => '.mp3,.m4a',
- ]) ?>
- <label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
- <span><?= lang('Episode.form.enclosure') ?></span></label>
-</div>
-
<?= form_section(
lang('Episode.form.info_section_title'),
lang('Episode.form.info_section_subtitle')
) ?>
+<?= form_label(
+ lang('Episode.form.enclosure'),
+ 'enclosure',
+ [],
+ lang('Episode.form.enclosure_hint')
+) ?>
+<?= form_input([
+ 'id' => 'enclosure',
+ 'name' => 'enclosure',
+ 'class' => 'form-input mb-4',
+ 'type' => 'file',
+ 'accept' => '.mp3,.m4a',
+]) ?>
+
<?= form_label(
lang('Episode.form.image'),
'image',
@@ -134,6 +136,7 @@
</label>
<?= form_radio(
['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
+
'bonus',
old('type') ? old('type') === 'bonus' : $episode->type === 'bonus'
) ?>
diff --git a/app/Views/admin/podcast/settings/platforms.php b/app/Views/admin/podcast/settings/platforms.php
index 4cbdc8c08a..ac75df8b95 100644
--- a/app/Views/admin/podcast/settings/platforms.php
+++ b/app/Views/admin/podcast/settings/platforms.php
@@ -72,21 +72,19 @@
'type' => 'url',
'placeholder' => 'https://...',
]) ?>
- <label class="inline-flex items-center mb-4 text-sm">
- <?= form_checkbox(
- [
- 'id' => $platform->name . '_visible',
- 'name' => 'platforms[' . $platform->name . '][visible]',
- 'class' => 'form-checkbox',
- ],
- 'yes',
- old(
- $platform->name . '_visible',
- $platform->visible ? $platform->visible : false
- )
- ) ?>
- <span class="ml-2"><?= lang('Platforms.visible') ?></span>
- </label>
+ <?= form_switch(
+ lang('Platforms.visible'),
+ [
+ 'id' => $platform->name . '_visible',
+ 'name' => 'platforms[' . $platform->name . '][visible]',
+ ],
+ 'yes',
+ old(
+ $platform->name . '_visible',
+ $platform->visible ? $platform->visible : false
+ ),
+ 'text-sm'
+ ) ?>
</div>
</div>
--
GitLab