forge-joniko/ldc-loue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix slider issues + text position on sliders

Browse source
This commit is contained in:
Jérémy Munsch 2022-06-29 17:05:02 +02:00
parent 8c0b1fbacb
commit 75396b99c6
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
10 changed files with 132 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Enums/Sliders/SliderPosition.php → app/Enums/Sliders/SliderElementPosition.php
View file

@ -9,7 +9,7 @@ use Kwaadpepper\Enum\BaseEnum;
* @method static self center()
* @method static self right()
*/
final class SliderPosition extends BaseEnum
final class SliderElementPosition extends BaseEnum
{
/**
* Enum values

2
app/Http/Middleware/Authenticate.php
View file

@ -31,7 +31,7 @@ class Authenticate extends Middleware
}
}
}
return route('login');
return collect($logins)->first() ?? '/';
}
abort(401);
}

19
app/Http/Requests/Bo/Sliders/StoreSliderRequest.php
View file

@ -2,7 +2,7 @@
namespace App\Http\Requests\Bo\Sliders;
use App\Enums\Sliders\SliderPosition;
use App\Enums\Sliders\SliderElementPosition;
use App\Enums\Sliders\SliderType;
use App\Traits\Requests\HasPicture;
use Illuminate\Foundation\Http\FormRequest;
@ -45,15 +45,15 @@ class StoreSliderRequest extends FormRequest
*/
public function rules()
{
return \array_merge([
$rules = [
'title' => 'required|min:3|max:255',
'title_color' => 'nullable|color_rgba',
'title_color_bg' => 'nullable|color_rgba',
'subtitle' => 'required|min:3|max:255',
'subtitle_color' => 'nullable|color_rgba',
'subtitle_color_bg' => 'nullable|color_rgba',
'type' => ['required', new EnumIsValidRule(SliderType::class)],
'position' => ['required', new EnumIsValidRule(SliderPosition::class)],
'text_position_desktop' => ['required', new EnumIsValidRule(SliderElementPosition::class)],
'picture_position_mobile' => ['required', new EnumIsValidRule(SliderElementPosition::class)],
'link' => 'required|url',
'link_title' => 'required|min:3|max:255',
'link_color' => 'nullable|color_rgba',
@ -64,7 +64,12 @@ class StoreSliderRequest extends FormRequest
'status' => 'required|boolean',
'publish_at' => 'nullable|date_format:Y-m-d H:i',
'unpublish_at' => 'nullable|date_format:Y-m-d H:i',
], $this->pictureRules(1400, 630, 1400, 630));
];
if (!$this->slider) {
$rules['type'] = ['required', new EnumIsValidRule(SliderType::class)];
}
return \array_merge($rules, $this->pictureRules(1400, 630, 1400, 630));
}
/**
@ -78,13 +83,15 @@ class StoreSliderRequest extends FormRequest
'title' => trans('title'),
'title_color' => trans('couleur de titre'),
'title_color_bg' => trans('couleur de fond du titre'),
'position' => trans('position de centrage de l\'image'),
'picture_position_mobile' => trans('position de centrage de l\'image en mobile'),
'text_position_desktop' => trans('position de centrage du texte en desktop'),
'link' => trans('lien'),
'link_title' => trans('titre du lien'),
'link_color' => trans('couleur du lien'),
'link_color_bg' => trans('couleur de fond du lien'),
'link_new_tab' => trans('nouvel onglet'),
'status' => trans('publication'),
'picture' => trans('image'),
];
}
}

9
app/Models/Slider.php
View file

@ -3,7 +3,7 @@
namespace App\Models;
use App\Casts\RgbaColorNullable;
use App\Enums\Sliders\SliderPosition;
use App\Enums\Sliders\SliderElementPosition;
use App\Enums\Sliders\SliderType;
use App\Lib\ToolboxHelper;
use Illuminate\Database\Eloquent\Factories\HasFactory;
@ -28,8 +28,8 @@ class Slider extends Model
'subtitle',
'subtitle_color',
'subtitle_color_bg',
'position',
'type',
'text_position_desktop',
'picture_position_mobile',
'picture',
'link',
'link_title',
@ -50,7 +50,8 @@ class Slider extends Model
* @var array
*/
protected $enumCasts = [
'position' => SliderPosition::class,
'text_position_desktop' => SliderElementPosition::class,
'picture_position_mobile' => SliderElementPosition::class,
'type' => SliderType::class
];

5
database/factories/SliderFactory.php
View file

@ -2,7 +2,7 @@
namespace Database\Factories;
use App\Enums\Sliders\SliderPosition;
use App\Enums\Sliders\SliderElementPosition;
use App\Enums\Sliders\SliderType;
use App\Models\Slider;
use Illuminate\Database\Eloquent\Factories\Factory;
@ -34,7 +34,8 @@ class SliderFactory extends Factory
$subtitle = $this->faker->unique()->words(rand(8, 10), true);
return [
'type' => Collect(SliderType::toArray())->random(),
'position' => Collect(SliderPosition::toArray())->random(),
'text_position_desktop' => Collect(SliderElementPosition::toArray())->random(),
'picture_position_mobile' => Collect(SliderElementPosition::toArray())->random(),
'title' => $title,
'title_color' => $this->faker->hexColor(),
'title_color_bg' => $this->faker->hexColor(),

6
database/migrations/2022_06_02_163424_create_sliders_table.php
View file

@ -1,6 +1,6 @@
<?php
use App\Enums\Sliders\SliderPosition;
use App\Enums\Sliders\SliderElementPosition;
use App\Enums\Sliders\SliderType;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
@ -20,8 +20,8 @@ class CreateSlidersTable extends Migration
$table->unsignedTinyInteger('type')->default(SliderType::home())
->comment('Enums\\SliderType type de slider');
$table->unsignedTinyInteger('position')->default(SliderPosition::center())
->comment('Enums\\SliderPosition slider centrage du slider en responsive');
$table->unsignedTinyInteger('position')->default(SliderElementPosition::center())
->comment('Enums\\SliderElementPosition slider centrage du slider en responsive');
$table->string('title')->comment('Titre du slider');
$table->unsignedInteger('title_color')->comment('Couleur du titre');

4
database/migrations/2022_06_28_105128_set_colors_nullable_to_sliders.php
View file

@ -19,7 +19,11 @@ class SetColorsNullableToSliders extends Migration
$table->unsignedInteger('subtitle_color')->nullable()->comment('Couleur du soustitre')->change();
$table->unsignedInteger('subtitle_color_bg')->nullable()->comment('Couleur de fond du soustitre')->change();
$table->unsignedInteger('link_color')->nullable()->comment('Couleur du lien')->change();
$table->unsignedInteger('link_color_hover')->nullable()
->comment('Couleur de fond du lien (au survol)')->change();
$table->unsignedInteger('link_color_bg')->nullable()->comment('Couleur de fond du lien')->change();
$table->unsignedInteger('link_color_bg_hover')->nullable()
->comment('Couleur de fond du lien (au survol)')->change();
});
}

38
database/migrations/2022_06_29_150122_text_position_on_sliders.php Normal file
View file

@ -0,0 +1,38 @@
<?php
use App\Enums\Sliders\SliderElementPosition;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class TextPositionOnSliders extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('sliders', function (Blueprint $table) {
$table->renameColumn('position', 'picture_position_mobile');
$table->unsignedTinyInteger('text_position_desktop')
->after('subtitle_color_bg')
->default(SliderElementPosition::right())
->comment('Enums\\SliderElementPosition postionnement du texte en desktop');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('sliders', function (Blueprint $table) {
$table->renameColumn('picture_position_mobile', 'position');
$table->dropColumn('text_position_desktop');
});
}
}

50
resources/ts/components/bo/ColorPickerComponent.vue
View file

@ -36,6 +36,7 @@
type="checkbox"
data-bs-toggle="tooltip"
:title="__('Rendre la couleur transparente ?')"
:checked="_value === null ? true : false"
v-on:change="updateValue"
/>
<label class="form-check-label user-select-none mt-3" :for="`checkbox${_id}`">
@ -50,7 +51,7 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
// @ts-ignore
import { Chrome } from "@ckpack/vue-color";
import trans from "../../modules/trans";
@ -69,7 +70,7 @@ export default defineComponent({
const json = String(this.$attrs.json ?? "{}"),
data = JSON.parse(json);
this._id = this.id ? String(this.id) : data.id;
this._id = this.id ? this.id : data.id;
this._name = this.name ? this.name : data.name;
this._value = this.value ? this.value : data.value;
this._title = this.title ? this.title : data.title;
@ -80,7 +81,15 @@ export default defineComponent({
this._nullable = this.nullable ? this.nullable : data.nullable ? true : false;
this._rgbaMode = this.rgbaMode ? this.rgbaMode : data.rgbaMode ? true : false;
this._internalValue = this._value;
if (!this._nullable) {
this._internalValue = this._value
? this._value
: this._rgbaMode
? "rgba(0,0,0,0)"
: "#000000";
} else {
this._internalValue = this._value ?? "";
}
this.$nextTick(() => {
this._internalHex = this.__picker.$data.val.hex;
});
@ -89,36 +98,37 @@ export default defineComponent({
},
props: {
id: {
type: String,
type: String as PropType<string | null>,
default: null,
},
name: {
type: String,
type: String as PropType<string | undefined>,
},
value: {
type: String,
type: String as PropType<string | null>,
default: null,
},
title: {
type: String,
type: String as PropType<string | undefined>,
},
label: {
type: String,
type: String as PropType<string | undefined>,
},
nullable: {
type: Boolean,
type: Boolean as PropType<boolean | undefined>,
},
rgbaMode: {
type: Boolean,
type: Boolean as PropType<boolean>,
default: false,
},
ariaDescribedby: {
type: String,
type: String as PropType<string | undefined>,
},
},
data(): {
_id: string;
_name: string;
_value: string;
_value: string | null;
_title: string;
_label: string;
_nullable: boolean;
@ -178,11 +188,21 @@ export default defineComponent({
}
const isNull = this.__nullableInput?.checked ? true : false;
if (this._rgbaMode) {
const rgba = this._internalValue.rgba;
this._value = !isNull ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : "";
const rgba = this._internalValue?.rgba;
this._value =
!isNull && rgba
? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
: this._nullable
? null
: "";
return;
}
this._value = !isNull ? this._internalValue.hex : "";
this._value =
!isNull && this._internalValue
? this._internalValue.hex
: this._nullable
? null
: "";
},
showPicker() {
document.addEventListener("click", this.documentClick);

44
resources/views/back/sliders/form.blade.php
View file

@ -1,4 +1,4 @@
@if(!isset($slider) and count(App\Enums\Sliders\SliderType::toArray()) > 1)
@if(!isset($slider))
<div class="row">
<div class="col">
<fieldset class="border p-3 mb-3">
@ -41,7 +41,7 @@
$data = [
'id' => 'sliderTitleColor',
'name' => 'title_color',
'value' => old('title_color', $slider->title_color ?? ''),
'value' => old('title_color', optional($slider ?? null)->title_color),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur du titre'),
'rgbaMode' => true,
@ -59,7 +59,7 @@
$data = [
'id' => 'sliderTitleBgColor',
'name' => 'title_color_bg',
'value' => old('title_color_bg', $slider->title_color_bg ?? ''),
'value' => old('title_color_bg', optional($slider ?? null)->title_color_bg),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur de fond du titre'),
'rgbaMode' => true,
@ -77,7 +77,7 @@
<div class="form-group">
<label for="sliderSubTitle"><b>{{ __('Sous-titre') }}</b></label>
<div class="word-counter" data-json='@json(['id' => 'sliderSubTitle'])'></div>
<input name="subtitle" type="text" value="{{ old('subtitle', $slider->subtitle ?? '') }}" class="form-control"
<input name="subtitle" type="text" value="{{ old('subtitle', optional($slider ?? null)->subtitle ?? '') }}" class="form-control"
id="sliderSubTitle" aria-describedby="sliderSubTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
@include('back.modules.input-error', [
'inputName' => 'subtitle', 'helperId' => 'sliderSubTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
@ -90,7 +90,7 @@
$data = [
'id' => 'sliderSubTitleColor',
'name' => 'subtitle_color',
'value' => old('subtitle_color', $slider->subtitle_color ?? ''),
'value' => old('subtitle_color', optional($slider ?? null)->subtitle_color),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur du sous-titre'),
'rgbaMode' => true,
@ -108,7 +108,7 @@
$data = [
'id' => 'sliderSubTitleBgColor',
'name' => 'subtitle_color_bg',
'value' => old('subtitle_color_bg', $slider->subtitle_color_bg ?? ''),
'value' => old('subtitle_color_bg', optional($slider ?? null)->subtitle_color_bg),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur de fond du sous-titre'),
'rgbaMode' => true,
@ -121,6 +121,20 @@
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-6 form-group">
<label for="sliderTextPosition" class="col-form-label"><b>{{ __('Position des textes') }}</b></label>
<select id="sliderTextPosition" class="form-select" name="text_position_desktop" aria-describedby="sliderTextPositionHelp" required>
<option value="" @if(is_null(old('text_position_desktop', $slider->text_position_desktop ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
@foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
<option value="{{ $status->value }}" @if(old('text_position_desktop', optional($slider->text_position_desktop ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
@endforeach
</select>
@include('back.modules.input-error', [
'inputName' => 'text_position_desktop', 'helperId' => 'sliderTextPositionHelp' , 'helper' => __('Positionnement du titre/sous-titre et bouton sur l\'image (en desktop)')
])
</div>
</div>
</fieldset>
</div>
</div>
@ -169,14 +183,14 @@
<div class="row mb-3">
<div class="col-12 col-md-6 form-group">
<label for="sliderPicturePosition" class="col-form-label"><b>{{ __('Position de centrage') }}</b></label>
<select id="sliderPicturePosition" class="form-select" name="position" aria-describedby="sliderPicturePositionHelp" required>
<option value="" @if(is_null(old('position', $slider->position ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
@foreach(App\Enums\Sliders\SliderPosition::toArray() as $status)
<option value="{{ $status->value }}" @if(old('published', optional($slider->position ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
<select id="sliderPicturePosition" class="form-select" name="picture_position_mobile" aria-describedby="sliderPicturePositionHelp" required>
<option value="" @if(is_null(old('picture_position_mobile', $slider->picture_position_mobile ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
@foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
<option value="{{ $status->value }}" @if(old('picture_position_mobile', optional($slider->picture_position_mobile ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
@endforeach
</select>
@include('back.modules.input-error', [
'inputName' => 'published', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
'inputName' => 'picture_position_mobile', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
])
</div>
@ -234,7 +248,7 @@
$data = [
'id' => 'sliderLinkColor',
'name' => 'link_color',
'value' => old('link_color', $slider->link_color ?? ''),
'value' => old('link_color', optional($slider ?? null)->link_color),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur du lien'),
'rgbaMode' => true,
@ -252,7 +266,7 @@
$data = [
'id' => 'sliderLinkBGColor',
'name' => 'link_color_bg',
'value' => old('link_color_bg', $slider->link_color_bg ?? ''),
'value' => old('link_color_bg', optional($slider ?? null)->link_color_bg),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur de fond du lien'),
'rgbaMode' => true,
@ -270,7 +284,7 @@
$data = [
'id' => 'sliderLinkHoverColor',
'name' => 'link_color_hover',
'value' => old('link_color_hover', $slider->link_color_hover ?? ''),
'value' => old('link_color_hover', optional($slider ?? null)->link_color_hover),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur du lien (au survol)'),
'rgbaMode' => true,
@ -288,7 +302,7 @@
$data = [
'id' => 'sliderLinkBGHoverColor',
'name' => 'link_color_bg_hover',
'value' => old('link_color_bg_hover', $slider->link_color_bg_hover ?? ''),
'value' => old('link_color_bg_hover', optional($slider ?? null)->link_color_bg_hover),
'title' => __('Choisi ta couleur'),
'label' => __('Couleur de fond du lien (au survol)'),
'rgbaMode' => true,