mirror of
https://github.com/coollabsio/coolify.git
synced 2026-03-11 08:55:47 +00:00
feat: color-coolify: store and set color on projects
This commit is contained in:
Nick
parent
a2fa98deb7
commit
6e32919d36
5 changed files with 86 additions and 3 deletions
|
|
@ -14,17 +14,25 @@ class Edit extends Component
|
|||
|
||||
public ?string $description = null;
|
||||
|
||||
public ?string $color = null;
|
||||
|
||||
protected function rules(): array
|
||||
{
|
||||
return [
|
||||
'name' => ValidationPatterns::nameRules(),
|
||||
'description' => ValidationPatterns::descriptionRules(),
|
||||
'color' => ['nullable', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/'],
|
||||
];
|
||||
}
|
||||
|
||||
protected function messages(): array
|
||||
{
|
||||
return ValidationPatterns::combinedMessages();
|
||||
return array_merge(
|
||||
ValidationPatterns::combinedMessages(),
|
||||
[
|
||||
'color.regex' => 'The color must be a valid hex color code (e.g., #FF5733).',
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
public function mount(string $project_uuid)
|
||||
|
|
@ -44,10 +52,12 @@ class Edit extends Component
|
|||
$this->project->update([
|
||||
'name' => $this->name,
|
||||
'description' => $this->description,
|
||||
'color' => $this->color,
|
||||
]);
|
||||
} else {
|
||||
$this->name = $this->project->name;
|
||||
$this->description = $this->project->description;
|
||||
$this->color = $this->project->color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
if (! Schema::hasColumn('projects', 'color')) {
|
||||
Schema::table('projects', function (Blueprint $table) {
|
||||
$table->string('color', 7)->nullable()->after('description');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
if (Schema::hasColumn('projects', 'color')) {
|
||||
Schema::table('projects', function (Blueprint $table) {
|
||||
$table->dropColumn('color');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -35,7 +35,10 @@
|
|||
@if ($projects->count() > 0)
|
||||
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
@foreach ($projects as $project)
|
||||
<div class="relative gap-2 cursor-pointer coolbox group">
|
||||
<div @class([
|
||||
'relative gap-2 cursor-pointer coolbox group',
|
||||
'border-l-4' => $project->color,
|
||||
]) @if($project->color) style="border-left-color: {{ $project->color }}" @endif>
|
||||
<a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
|
||||
<div class="flex flex-1 mx-6">
|
||||
<div class="flex flex-col justify-center flex-1">
|
||||
|
|
|
|||
|
|
@ -14,6 +14,41 @@
|
|||
<div class="flex gap-2">
|
||||
<x-forms.input label="Name" id="name" />
|
||||
<x-forms.input label="Description" id="description" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="flex items-center gap-1 text-sm font-medium">
|
||||
Color
|
||||
<x-helper helper="Choose a color to visually distinguish this project" />
|
||||
</label>
|
||||
<div class="flex items-center gap-2" x-data="{ showPicker: false }">
|
||||
<input
|
||||
type="color"
|
||||
wire:model="color"
|
||||
id="colorPicker"
|
||||
class="sr-only"
|
||||
x-show="showPicker"
|
||||
@change="showPicker = false">
|
||||
<button
|
||||
type="button"
|
||||
@click="showPicker = true; $nextTick(() => document.getElementById('colorPicker').click())"
|
||||
class="flex items-center justify-center w-20 h-8 text-xs font-medium border rounded cursor-pointer border-coolgray-300 dark:border-coolgray-500 hover:border-coolgray-400 dark:hover:border-coolgray-400"
|
||||
:style="$wire.color ? 'background-color: ' + $wire.color : ''">
|
||||
<span :class="$wire.color ? 'text-white mix-blend-difference' : 'dark:text-white'">
|
||||
Select
|
||||
</span>
|
||||
</button>
|
||||
@if($color)
|
||||
<button
|
||||
type="button"
|
||||
wire:click="$set('color', null)"
|
||||
class="flex items-center justify-center size-8 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300"
|
||||
title="Clear color">
|
||||
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -13,7 +13,10 @@
|
|||
<div class="subtitle">All your projects are here.</div>
|
||||
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1">
|
||||
@foreach ($projects as $project)
|
||||
<div class="relative gap-2 cursor-pointer coolbox group">
|
||||
<div @class([
|
||||
'relative gap-2 cursor-pointer coolbox group',
|
||||
'border-l-4' => $project->color,
|
||||
]) @if($project->color) style="border-left-color: {{ $project->color }}" @endif>
|
||||
<a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
|
||||
<div class="flex flex-1 mx-6">
|
||||
<div class="flex flex-col justify-center flex-1">
|
||||
|
|
|
|||
Loading…
Reference in a new issue