Environment - UI improvements

- changed environment badges - changed style of environment dropdowns - environments are not visible on the dashboard, the consent list and the integration page if the project has just the default environment
68publishers · Oct 12, 2023 · c36c2ab · c36c2ab
1 parent a3be233
commit c36c2ab
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 135 deletions.
diff --git a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/EnvironmentsFormControl.php
@@ -60,7 +60,7 @@ protected function createComponentForm(): Form
                 ->setDefaultValue('#ffffff')
                 ->setHtmlAttribute('placeholder', 'color.placeholder')
                 ->setOption('type', 'color-picker')
-                ->setOption('placement', 'bottom-right')
+                ->setOption('placement', 'bottom-left')
                 ->setRequired('color.required')
                 ->addRule(Form::Pattern, 'color.rule.pattern', '#([a-fA-F0-9]{3}){1,2}\b');
         }, 0);

diff --git a/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte b/src/Web/AdminModule/ApplicationModule/Control/EnvironmentsForm/templates/form.imports.latte
@@ -1,23 +1,23 @@
 {define #container-name-environments}
-    <div class="px-4 sm:px-6">
-        <div class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-4 shadow-sm">
+    <div class="px-4 sm:px-6 sm:items-start sm:border-b sm:border-gray-200 sm:pb-6">
+        <div class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-6 shadow-sm">
             <div class="flex flex-nowrap items-start space-x-3">
                 <div class="flex-1">
                     <input disabled value="{_'//layout.default_environment'}" type="text" class="no-live-validation shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none">
                 </div>
             </div>
         </div>
-        <div n:multiplier="environments" class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-4 shadow-sm">
+        <div n:multiplier="environments" class="border border-gray-200 px-2 sm:px-4 py-2 sm:py-4 rounded mb-6 shadow-sm">
             <div class="flex flex-nowrap items-start space-x-1 sm:space-x-3">
+                <div class="grow-0 shrink-0	basis-auto">
+                    {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('color')}
+                </div>
                 <div class="flex-1">
                     {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('code')}
                 </div>
                 <div class="flex-1">
                     {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('name')}
                 </div>
-                <div class="grow-0 shrink-0	basis-auto">
-                    {include #helpers-override-split, blockNamePrefix => control, control => $formContainer->getComponent('color')}
-                </div>
 
                 {if $formContainer->getComponent(Contributte\FormMultiplier\Multiplier::SUBMIT_REMOVE_NAME, false)}
                     <button

diff --git a/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte b/src/Web/AdminModule/CookieModule/Control/CookieForm/templates/form.imports.latte
@@ -39,23 +39,17 @@
             </div>
             <div class="ml-3 text-sm">
                 {if '' === $k}
-                    <label
-                            n:name="$control:$k"
-                            class="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-black"
-                    >
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
-                {elseif null === $environment}
-                    <label n:name="$control:$k" n:class="
-                        $control->getLabelPrototype()->class,
-                        'font-medium text-gray-700'
-                    ">{=$control->translate($v)}</label>
-                {else}
-                    <label
-                            n:name="$control:$k"
-                            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
-                            style="background: {$environment->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($environment->color->value())|noescape} !important;"
-                    >
+                {elseif null !== $environment}
+                    <label n:name="$control:$k" class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-0.5">
+                        <svg class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$environment->color->value()|noescape}">
+                            <circle cx="3" cy="3" r="3" />
+                        </svg>
                         {=$control->translate($v)}
                     </label>
                 {/if}

diff --git a/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte b/src/Web/AdminModule/CookieModule/Control/CookieList/templates/datagrid.latte
@@ -102,16 +102,20 @@
 {define col-environments}
     <div class="min-w-[150px]">
         {if true === $item->environments}
-            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200 bg-white select-all">
+            <span class="inline-flex items-center gap-x-1.5 rounded-md px-1 py-1 select-all">
+                <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                    <circle cx="3" cy="3" r="3" />
+                </svg>
                 {_all_environments}
             </span>
         {else}
             {var $environments = $item->environments}
             {var $maxBadges = min([2, count($environments)])}
 
-            <div class="whitespace-nowrap">
+            <div class="whitespace-nowrap flex items-center">
                 {for $i = 0; $i < $maxBadges; $i++}
                     {include #environment-badge, environment: array_shift($environments), vertical: false}
+                    <span n:if="$i !== ($maxBadges - 1)">,&nbsp;</span>
                 {/for}
 
                 {if 0 < count($environments)}
@@ -128,7 +132,7 @@
                         'x-tooltip.interactive.theme.light-border.placement.right.html.raw' => $tooltip
                     ]}
 
-                    <span n:attr="$attrs">{_and_more_projects, count($environments)}</span>
+                    <span n:attr="$attrs">&nbsp;{_and_more_projects, count($environments)}</span>
                 {/if}
             </div>
         {/if}
@@ -156,16 +160,26 @@
 
 {define #environment-badge, string|null $environment, bool $vertical = false}
     {if null === $environment}
-        <span n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black select-all'">{_//layout.default_environment}</span>
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {_//layout.default_environment}
+        </span>
     {elseif null !== $_globalEnvironments->getByCode($environment)}
         {var $globalEnvironment = $_globalEnvironments->getByCode($environment)}
-        <span
-            n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md px-2 py-1 text-xs font-medium select-all'"
-            style="background: {$globalEnvironment->color->value()|noescape} !important; color: {App\Web\Utils\Color::resolveFontColor($globalEnvironment->color->value())|noescape} !important;"
-        >
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true" style="fill: {$globalEnvironment->color->value()|noescape}">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
             {$globalEnvironment->name}
         </span>
     {else}
-        <span n:class="$vertical ? 'block text-center my-1.5' : 'inline-flex items-center', 'rounded-md bg-gray-200 px-2 py-1 text-xs font-medium text-black select-all'">{$environment}</span>
+        <span n:class="$vertical ? 'flex my-1.5' : 'inline-flex', 'items-center gap-x-1.5 rounded-md px-1 py-1 select-all'">
+            <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx="3" cy="3" r="3" />
+            </svg>
+            {$environment}
+        </span>
     {/if}
 {/define}
diff --git a/src/Web/AdminModule/Presenter/DashboardPresenter.php b/src/Web/AdminModule/Presenter/DashboardPresenter.php
@@ -47,13 +47,12 @@ protected function beforeRender(): void
             'name' => $project->name->value(),
             'color' => $project->color->value(),
             'fontColor' => Color::resolveFontColor($project->color->value()),
-            'environments' => array_merge(
+            'environments' => 1 < count($projectEnvironments = array_merge(
                 [
                     [
                         'code' => '//default//',
                         'name' => $this->getTranslator()->translate('//layout.default_environment'),
-                        'color' => '#e5e7eb',
-                        'fontColor' => '#000000',
+                        'color' => '#ffffff',
                     ],
                 ],
                 array_values(
@@ -62,15 +61,14 @@ protected function beforeRender(): void
                             'code' => $environment->code,
                             'name' => $environment->name,
                             'color' => $environment->color->value(),
-                            'fontColor' => Color::resolveFontColor($environment->color->value()),
                         ],
                         EnabledEnvironmentsResolver::resolveProjectEnvironments(
                             globalSettingsEnvironments: $globalEnvironments,
                             projectEnvironments: $project->environments,
                         ),
                     ),
                 ),
-            ),
+            )) ? $projectEnvironments : [],
             'links' => [
                 'consents' => $this->getUser()->isAllowed(ProjectConsentResource::class, ProjectConsentResource::READ)
                     ? $this->link(':Admin:Project:Consents:', ['project' => $project->code->value()])

diff --git a/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte b/src/Web/AdminModule/Presenter/templates/Dashboard.default.latte
@@ -79,31 +79,49 @@
                             <div x-show="project.environments.length">
                                 <div x-data="dropdown" x-bind="dropdown" class="relative inline-block text-left">
                                     <div>
-                                        <button x-bind="dropdownButton" type="button" class="inline-flex w-full justify-center">
-                                            <span x-show="null === project.currentEnvironment" class="inline-flex items-center w-full rounded-md px-2 py-2 text-xs font-medium bg-white color-black ring-1 ring-inset ring-gray-200">{{_all_environments}}</span>
+                                        <button x-bind="dropdownButton" type="button" class="inline-flex items-center pl-4 pr-6 py-2 border border-transparent rounded-md text-sm font-medium bg-gray-50 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
+                                            <span
+                                                x-show="null === project.currentEnvironment"
+                                                class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900"
+                                            >
+                                                <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                                    <circle cx="3" cy="3" r="3" />
+                                                </svg>
+                                                {{_all_environments}}
+                                            </span>
+
                                             <span
                                                 x-show="null !== project.currentEnvironment"
-                                                x-text="project.currentEnvironment ? project.currentEnvironment.name : ''"
-                                                :style="{ background: project.currentEnvironment ? project.currentEnvironment.color : '#fff', color: project.currentEnvironment ? project.currentEnvironment.fontColor : '#000' }"
-                                                class="inline-flex items-center w-full rounded-md px-2 py-2 text-xs font-medium"
-                                            ></span>
+                                                class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900"
+                                            >
+                                                <svg :style="{ fill: project.currentEnvironment ? project.currentEnvironment.color : '#ffffff' }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                                    <circle cx="3" cy="3" r="3" />
+                                                </svg>
+                                                <span x-text="project.currentEnvironment ? project.currentEnvironment.name : ''"></span>
+                                            </span>
                                         </button>
                                     </div>
 
-                                    <div x-bind="dropdownPanel" x-cloak class="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
-                                        <div>
-                                            <button @click="changeProjectEnvironment(project.code, null) && close()" class="block w-full p-1 hover:opacity-75" role="menuitem" tabindex="-1">
-                                                <span class="inline-flex items-center w-full rounded-md px-3 py-3 text-xs font-medium bg-white color-black ring-1 ring-inset ring-gray-200">{{_all_environments}}</span>
+                                    <div x-bind="dropdownPanel" x-cloak class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
+                                        <div class="px-1">
+                                            <button @click="changeProjectEnvironment(project.code, null) && close()" type="button" class="flex w-full items-center px-3 py-2 text-sm text-gray-700 rounded hover:bg-gray-100 active:bg-gray-100 focus:bg-gray-100 border-none" role="menuitem" tabindex="-1">
+                                                <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                                    <svg class="h-1.5 w-1.5 fill-white" viewBox="0 0 6 6" aria-hidden="true">
+                                                        <circle cx="3" cy="3" r="3" />
+                                                    </svg>
+                                                    {{_all_environments}}
+                                                </span>
                                             </button>
                                         </div>
                                         <template x-for="environment in project.environments" :key="environment.code" hidden>
-                                            <div>
-                                                <button @click="changeProjectEnvironment(project.code, environment) && close()" class="block w-full p-1 hover:opacity-75" role="menuitem" tabindex="-1">
-                                                    <span
-                                                        x-text="environment.name"
-                                                        :style="{ background: environment.color, color: environment.fontColor }"
-                                                        class="inline-flex items-center w-full rounded-md px-3 py-3 text-xs font-medium"
-                                                    ></span>
+                                            <div class="px-1">
+                                                <button @click="changeProjectEnvironment(project.code, environment) && close()" type="button" class="flex w-full items-center px-3 py-2 text-sm text-gray-700 rounded hover:bg-gray-100 active:bg-gray-100 focus:bg-gray-100 border-none" role="menuitem" tabindex="-1">
+                                                    <span class="flex w-full items-center gap-x-1.5 rounded-md text-xs font-medium text-gray-900">
+                                                        <svg :style="{ fill: environment.color }" class="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
+                                                            <circle cx="3" cy="3" r="3" />
+                                                        </svg>
+                                                        <span x-text="environment.name"></span>
+                                                    </span>
                                                 </button>
                                             </div>
                                         </template>