diff --git a/Controller/AdminController.php b/Controller/AdminController.php index 4d2257ca93..d3a18a9013 100644 --- a/Controller/AdminController.php +++ b/Controller/AdminController.php @@ -540,6 +540,7 @@ public function renderCssAction(Request $request) { $cssContent = $this->renderView('@EasyAdmin/css/admin.css.twig', array( 'brand_color' => $request->query->get('brand_color'), + 'color_scheme' => $request->query->get('color_scheme'), )); $response = new Response($cssContent, Response::HTTP_OK, array('Content-Type' => 'text/css')); diff --git a/DependencyInjection/Configuration.php b/DependencyInjection/Configuration.php index b41298d0fb..b828eace13 100644 --- a/DependencyInjection/Configuration.php +++ b/DependencyInjection/Configuration.php @@ -208,10 +208,17 @@ private function addDesignSection(ArrayNodeDefinition $rootNode) ->end() ->end() + ->enumNode('color_scheme') + ->values(array('dark', 'light')) + ->info('The color scheme applied to the backend design (values: "dark" or "light").') + ->defaultValue('dark') + ->treatNullLike('dark') + ->end() + ->scalarNode('brand_color') ->info('The color used in the backend design to highlight important elements.') - ->defaultValue('#D47843') - ->treatNullLike('#D47843') + ->defaultValue('#E67E22') + ->treatNullLike('#E67E22') ->validate() // if present, remove the trailing ';' to avoid CSS issues ->ifTrue(function ($v) { return ';' === substr(trim($v), -1); }) diff --git a/Resources/doc/10-customizing-design.md b/Resources/doc/10-customizing-design.md index dfdc975f59..597609c612 100644 --- a/Resources/doc/10-customizing-design.md +++ b/Resources/doc/10-customizing-design.md @@ -26,6 +26,67 @@ easy_admin: # ... ``` +Customizing the Main Backend Color +---------------------------------- + +The default backend visual design uses a dark orange shade as the main color. +Use the `brand_color` design option to change it: + +```yaml +easy_admin: + design: + # this backend uses turquoise as its main color + brand_color: '#1ABC9C' + # ... +``` + +This simple configuration option allows you to easily match the backend design +to your project identity: + +![Using a custom brand color in the backend](images/easyadmin-design-brand-color.png) + +The value of the `brand_color` option is directly passed to the `color` and +`background-color` CSS properties, so you can define the color using any valid +CSS format: + +```yaml +easy_admin: + design: + brand_color: 'rgb(26, 188, 156)' + # ... +``` + +This flexibility allows you to use semi-transparent colors: + +```yaml +easy_admin: + design: + brand_color: 'rgba(26, 188, 156, 0.85)' + # ... +``` + +Selecting the Color Scheme +-------------------------- + +The default theme provides two different color schemes: `dark` and `light`. The +`dark` scheme is the default one because it's the most common alternative when +designing backends. The `light` scheme is a cleaner and much more white design +alternative: + +```yaml +easy_admin: + design: + color_scheme: 'light' + # ... +``` + +![The default backend homepage using the light color scheme](images/easyadmin-design-color-scheme-light.png) + +Combine the `light` color scheme with the `brand_color` option to get a myriad +of new backend designs: + +![Combining the light color scheme with a colorful palette](images/easyadmin-design-brand-color-light-theme.png) + Customizing Form Design ----------------------- @@ -110,44 +171,6 @@ easy_admin: # ... ``` -Customizing Backend Colors --------------------------- - -The default backend visual design uses a dark orange shade as the accent color. -Use the `brand_color` design option to change this accent color: - -```yaml -easy_admin: - design: - brand_color: '#1ABC9C' - # ... -``` - -Applying the above configuration, the backend will now display a beautiful -turquoise shade: - -![Using a custom brand color in the backend](images/easyadmin-design-brand-color.png) - -The value of the `brand_color` option is directly passed to the `color` and -`background-color` CSS properties, so you can define the color using any valid -CSS format: - -```yaml -easy_admin: - design: - brand_color: 'rgb(26, 188, 156)' - # ... -``` - -This flexibility allows you to use semi-transparent colors: - -```yaml -easy_admin: - design: - brand_color: 'rgba(26, 188, 156, 0.85)' - # ... -``` - Adding Custom Web Assets ------------------------ diff --git a/Resources/doc/2-first-backend.md b/Resources/doc/2-first-backend.md index 4f009e58a2..2363fc85f1 100644 --- a/Resources/doc/2-first-backend.md +++ b/Resources/doc/2-first-backend.md @@ -22,7 +22,7 @@ easy_admin: Browse the `/admin` URL in your Symfony application and you'll get access to the admin backend: -![Default listing interface](images/easyadmin-customer-listing.png) +![Default listing interface](images/easyadmin-list-view.png) Creating a backend is that simple because EasyAdmin doesn't generate any code, not even for the templates. All resources are served on-the-fly to ensure an diff --git a/Resources/doc/images/easyadmin-customer-listing.png b/Resources/doc/images/easyadmin-customer-listing.png deleted file mode 100644 index 1c0633c63d..0000000000 Binary files a/Resources/doc/images/easyadmin-customer-listing.png and /dev/null differ diff --git a/Resources/doc/images/easyadmin-design-brand-color-light-theme.png b/Resources/doc/images/easyadmin-design-brand-color-light-theme.png new file mode 100644 index 0000000000..bd2520ff62 Binary files /dev/null and b/Resources/doc/images/easyadmin-design-brand-color-light-theme.png differ diff --git a/Resources/doc/images/easyadmin-design-brand-color.png b/Resources/doc/images/easyadmin-design-brand-color.png index ee680a36b8..5433a0646f 100644 Binary files a/Resources/doc/images/easyadmin-design-brand-color.png and b/Resources/doc/images/easyadmin-design-brand-color.png differ diff --git a/Resources/doc/images/easyadmin-design-color-scheme-light.png b/Resources/doc/images/easyadmin-design-color-scheme-light.png new file mode 100644 index 0000000000..ea346a353f Binary files /dev/null and b/Resources/doc/images/easyadmin-design-color-scheme-light.png differ diff --git a/Resources/doc/images/easyadmin-edit-view.png b/Resources/doc/images/easyadmin-edit-view.png index 45498caf83..6ad19ead4c 100644 Binary files a/Resources/doc/images/easyadmin-edit-view.png and b/Resources/doc/images/easyadmin-edit-view.png differ diff --git a/Resources/doc/images/easyadmin-form-horizontal.png b/Resources/doc/images/easyadmin-form-horizontal.png index 261f98982b..5de2683e73 100644 Binary files a/Resources/doc/images/easyadmin-form-horizontal.png and b/Resources/doc/images/easyadmin-form-horizontal.png differ diff --git a/Resources/doc/images/easyadmin-form-multi-column.png b/Resources/doc/images/easyadmin-form-multi-column.png index 07f0bac297..d2fbaeb200 100644 Binary files a/Resources/doc/images/easyadmin-form-multi-column.png and b/Resources/doc/images/easyadmin-form-multi-column.png differ diff --git a/Resources/doc/images/easyadmin-form-vertical.png b/Resources/doc/images/easyadmin-form-vertical.png index 43868f773f..7e5a2e84ba 100644 Binary files a/Resources/doc/images/easyadmin-form-vertical.png and b/Resources/doc/images/easyadmin-form-vertical.png differ diff --git a/Resources/doc/images/easyadmin-list-view-actions.png b/Resources/doc/images/easyadmin-list-view-actions.png index 926f249db6..9d16661d69 100644 Binary files a/Resources/doc/images/easyadmin-list-view-actions.png and b/Resources/doc/images/easyadmin-list-view-actions.png differ diff --git a/Resources/doc/images/easyadmin-list-view.png b/Resources/doc/images/easyadmin-list-view.png index 9872eeed84..04165be395 100644 Binary files a/Resources/doc/images/easyadmin-list-view.png and b/Resources/doc/images/easyadmin-list-view.png differ diff --git a/Resources/doc/images/easyadmin-search-view.png b/Resources/doc/images/easyadmin-search-view.png index 90099e2598..d68e514f49 100644 Binary files a/Resources/doc/images/easyadmin-search-view.png and b/Resources/doc/images/easyadmin-search-view.png differ diff --git a/Resources/doc/images/easyadmin-show-view.png b/Resources/doc/images/easyadmin-show-view.png index 2dded03920..dbbedbe0c9 100644 Binary files a/Resources/doc/images/easyadmin-show-view.png and b/Resources/doc/images/easyadmin-show-view.png differ diff --git a/Resources/views/_list_paginator.html.twig b/Resources/views/_list_paginator.html.twig index 4e19ceb41a..3e50002cf5 100644 --- a/Resources/views/_list_paginator.html.twig +++ b/Resources/views/_list_paginator.html.twig @@ -7,7 +7,7 @@
-
diff --git a/Resources/views/form/bootstrap_3_layout.html.twig b/Resources/views/form/bootstrap_3_layout.html.twig index e2bd295874..916bab04c8 100644 --- a/Resources/views/form/bootstrap_3_layout.html.twig +++ b/Resources/views/form/bootstrap_3_layout.html.twig @@ -183,8 +183,8 @@ {{- form_widget(form) -}} {{- form_errors(form) -}} - {% if form.vars.attr.field_help is defined %} - {{ form.vars.attr.field_help }} + {% if form.vars.attr.field_help|default('') != '' %} + {{ form.vars.attr.field_help }} {% endif %} {%- endblock form_row %} diff --git a/Resources/views/layout.html.twig b/Resources/views/layout.html.twig index 25026713e7..76b26d57c4 100644 --- a/Resources/views/layout.html.twig +++ b/Resources/views/layout.html.twig @@ -13,7 +13,7 @@ {% block head_stylesheets %} - + {% endblock %} {% for css_asset in easyadmin_config('design.assets.css') %} @@ -30,7 +30,10 @@