Skip to content

Commit

Permalink
EZP-28545: Design improvements for Content Type create and edit (#190)
Browse files Browse the repository at this point in the history 
* EZP-28545: Design improvements for Content Type create and edit

* Design fixes

* fixup
  • Loading branch information
@mikadamczyk
mikadamczyk authored and Łukasz Serwatka committed Dec 15, 2017
1 parent 06496fb commit af6e78d
Show file tree
Hide file tree
Showing 12 changed files with 464 additions and 162 deletions.
10 changes: 10 additions & 0 deletions src/bundle/Resources/config/services/menu.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,14 @@ services:
tags:
- { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.content_type_group_edit.sidebar_right }

EzSystems\EzPlatformAdminUi\Menu\Admin\ContentType\ContentTypeCreateRightSidebarBuilder:
public: true
tags:
- { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.content_type_create.sidebar_right }

EzSystems\EzPlatformAdminUi\Menu\Admin\ContentType\ContentTypeEditRightSidebarBuilder:
public: true
tags:
- { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.content_type_edit.sidebar_right }


26 changes: 26 additions & 0 deletions src/bundle/Resources/public/scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,30 @@
&__body {
padding: .75rem 1.25rem;
}

&__field-control {
background-color: $ez-white;
border-radius: .5rem;
padding: .3rem;

.form-control {
margin-bottom: 0;
}
}
}

.ez-card--fieldtype-container {
background: $ez-white;

.ez-card__header {
line-height: 40px;
padding: 0 20px;

label {
margin-bottom: 0;
font-weight: 700;
color: $ez-black;
font-size: 17px;
}
}
}
8 changes: 8 additions & 0 deletions src/bundle/Resources/public/scss/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,14 @@
}
}

.ez-card__header {
.ez-icon {
width: 1.2rem;
height: 1.2rem;
fill: $white;
}
}

.ez-btn--extra-actions {
.ez-icon {
pointer-events: none;
Expand Down
28 changes: 24 additions & 4 deletions src/bundle/Resources/translations/content_type.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<note>key: content_type.breadcrumb.create</note>
</trans-unit>
<trans-unit id="7dd9e32add81dba08bfbaefaac9442a7e7dbb6ae" resname="content_type.breadcrumb.edit">
<source>Editing Content Type "%identifier%"</source>
<target state="new">Editing Content Type "%identifier%"</target>
<source>%identifier%</source>
<target state="new">%identifier%</target>
<note>key: content_type.breadcrumb.edit</note>
</trans-unit>
<trans-unit id="5626938e64bdad8be0c090d0018c868960859d0a" resname="content_type.breadcrumb.view">
Expand Down Expand Up @@ -141,14 +141,34 @@
<target state="new">URL alias name pattern</target>
<note>key: content_type.url_alias_schema</note>
</trans-unit>
<trans-unit id="56a9f26e930ab0493fc9cb9609318ea699cf8b76" resname="content_type.view.create.content_field_definitions">
<source>Content field definitions</source>
<target state="new">Content field definitions</target>
<note>key: content_type.view.create.content_field_definitions</note>
</trans-unit>
<trans-unit id="2ce3314c2ca5e24215b0935148a3693ba4fda221" resname="content_type.view.create.global_properties">
<source>Global properties</source>
<target state="new">Global properties</target>
<note>key: content_type.view.create.global_properties</note>
</trans-unit>
<trans-unit id="4f63ade40ae91a9ad39e4be7b9e4f51003f1f4b3" resname="content_type.view.create.title">
<source>Creating a new Content Type</source>
<target state="new">Creating a new Content Type</target>
<note>key: content_type.view.create.title</note>
</trans-unit>
<trans-unit id="94367a951b897bc2964d0c45286b560c59ebb996" resname="content_type.view.edit.content_field_definitions">
<source>Content field definitions</source>
<target state="new">Content field definitions</target>
<note>key: content_type.view.edit.content_field_definitions</note>
</trans-unit>
<trans-unit id="a32a5e3d2d67da43b4c5f0f5574c90520868b36a" resname="content_type.view.edit.global_properties">
<source>Global properties</source>
<target state="new">Global properties</target>
<note>key: content_type.view.edit.global_properties</note>
</trans-unit>
<trans-unit id="7eee653a60490713df6bcf4b847853020b79a1ee" resname="content_type.view.edit.title">
<source>Editing Content Type "%name%"</source>
<target state="new">Editing Content Type "%name%"</target>
<source>Editing Content Type: %name%</source>
<target state="new">Editing Content Type: %name%</target>
<note>key: content_type.view.edit.title</note>
</trans-unit>
<trans-unit id="803a61fc8cf4e7bdfcf27432bb35e379a4971134" resname="content_type.view.list.action.add">
Expand Down
20 changes: 20 additions & 0 deletions src/bundle/Resources/translations/menu.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,26 @@
<target state="new">Save</target>
<note>key: content_edit__sidebar_right__save_draft</note>
</trans-unit>
<trans-unit id="750939fc55f9a3143db99bed66680e8646e029a0" resname="content_type_create__sidebar_right__cancel">
<source>Discard changes</source>
<target state="new">Discard changes</target>
<note>key: content_type_create__sidebar_right__cancel</note>
</trans-unit>
<trans-unit id="5a66806014c6a6ca1f79270a8dd381ae6c0e0d7b" resname="content_type_create__sidebar_right__save">
<source>Create</source>
<target state="new">Create</target>
<note>key: content_type_create__sidebar_right__save</note>
</trans-unit>
<trans-unit id="17d86a1011976758251b804acfbe8092d2860946" resname="content_type_edit__sidebar_right__cancel">
<source>Discard changes</source>
<target state="new">Discard changes</target>
<note>key: content_type_edit__sidebar_right__cancel</note>
</trans-unit>
<trans-unit id="f1ac6aebd0e5474137a997b41677e5ae6c78670b" resname="content_type_edit__sidebar_right__save">
<source>Save</source>
<target state="new">Save</target>
<note>key: content_type_edit__sidebar_right__save</note>
</trans-unit>
<trans-unit id="ccdcdc5c7e006c865c33b29eee9c6b9e232a9308" resname="content_type_group_create__sidebar_right__cancel">
<source>Discard changes</source>
<target state="new">Discard changes</target>
Expand Down
25 changes: 25 additions & 0 deletions src/bundle/Resources/views/admin/base.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{% extends 'EzPlatformAdminUiBundle::layout.html.twig' %}

{% block content %}
<div class="row align-items-stretch ez-main-row">
<div class="col-sm-11 px-0 pb-4">
<div class="ez-header pt-4">
<div class="container">
{% block breadcrumbs_admin %}
{% endblock %}

{% block page_title_admin %}
{% endblock %}
</div>
</div>

<div class="container px-0 pb-4 mt-5">
{% block form %}
{% endblock %}
</div>
</div>
<div class="col-sm-1 pt-4 bg-secondary ez-context-menu">
{% block right_sidebar %}{% endblock %}
</div>
</div>
{% endblock %}
150 changes: 74 additions & 76 deletions src/bundle/Resources/views/admin/content_type/create.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
{% extends "@EzPlatformAdminUi/layout.html.twig" %}
{% extends "@EzPlatformAdminUi/admin/base.html.twig" %}

{% trans_default_domain 'content_type' %}

{% block breadcrumbs %}
{% form_theme form _self %}

{% block _ezrepoforms_contenttype_update_removeFieldDefinition_widget %}
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
<svg class="ez-icon ez-icon-trash">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#trash"></use>
</svg>
</button>
{% endblock %}

{% block breadcrumbs_admin %}
{% include '@EzPlatformAdminUi/parts/breadcrumbs.html.twig' with { items: [
{ value: 'breadcrumb.admin'|trans(domain='messages')|desc('Admin') },
{ url: path('ezplatform.content_type_group.list'), value: 'content_type_group.breadcrumb.list'|trans|desc('Content Types') },
Expand All @@ -11,20 +22,20 @@
]} %}
{% endblock %}

{% block pageTitle %}
{% block page_title_admin %}
{% include '@EzPlatformAdminUi/parts/page_title.html.twig' with {
title: 'content_type.view.create.title'|trans|desc('Creating a new Content Type'),
iconName: 'content-types'
iconName: 'content-type'
} %}
{% endblock %}

{% block content %}
{% block form %}
{{ form_start(form) }}

<section class="container mt-4 px-5">
<div class="card ez-adminsection-edit">
<div class="card-header">
<h2>Global properties</h2>
<div class="card ez-card">
<div class="ez-card__header ez-card__header--secondary">
{{ 'content_type.view.create.global_properties'|trans|desc('Global properties') }}
</div>
<div class="card-body">
{{ form_row(form.name) }}
Expand All @@ -41,91 +52,78 @@
</section>

<section class="container mt-4 px-5">
<div class="card ez-adminsection-edit">
<div class="card-header">
<h2>Field definitions</h2>
<div class="card ez-card">
<div class="ez-card__header ez-card__header--secondary d-flex justify-content-between">
<div class="p-2">
{{ 'content_type.view.create.content_field_definitions'|trans|desc('Content field definitions') }}
</div>
<div class="form-inline">
<div class="ez-card__field-control mr-2">
{{ form_widget(form.fieldTypeSelection, { attr: { class: 'ez-field-selection'}}) }}
{{ form_widget(form.addFieldDefinition, { attr: { class: 'btn btn-primary'}}) }}
</div>
{{ form_widget(form.removeFieldDefinition, { attr: { class: 'btn btn-danger'}}) }}
</div>
</div>
<div class="card-body">
{% set language_code = content_type.mainLanguageCode %}
{% for field_definition in form.fieldDefinitionsData %}
{% set value = field_definition.vars.value %}

<h5 id="field-definition-{{ value.identifier }}">
{{ form_widget(field_definition.selected, {
label: '%s (%s)' | format(value.names[language_code], value.fieldTypeIdentifier)
}) }}
</h5>

<div class="ml-4 mb-4">
{{ form_row(field_definition.name) }}
{{ form_row(field_definition.identifier) }}
{{ form_row(field_definition.position) }}
{{ form_row(field_definition.description) }}
{{ form_row(field_definition.isRequired) }}
{{ form_row(field_definition.isSearchable) }}
{{ form_row(field_definition.isTranslatable) }}
{{ form_row(field_definition.fieldGroup) }}

{# Field type specific fields below #}
{{ ez_render_fielddefinition_edit(value, {
"languageCode": language_code,
"form": field_definition,
"group_class": value.group_class|default("")
}) }}

{# Default rendering #}
{% for child in field_definition %}
{# Iterable children means collections, they are handled in field_types.html.twig #}
{% if not child.rendered and child is not iterable %}
<div{% if group_class is not empty %} class="{{ group_class }}"{% endif %}>
{{- form_label(child) -}}
{{- form_errors(child) -}}
{{- form_widget(child) -}}
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
<div class="card-footer">
<div class="row">
<div class="col">
{{ form_widget(form.removeFieldDefinition, { attr: { class: 'btn btn-danger'}}) }}
</div>
<div class="col col-md-auto">
<div class="form-inline">
<div class="input-group">
{{ form_widget(form.fieldTypeSelection) }}
<span class="input-group-btn">
{{ form_widget(form.addFieldDefinition, { attr: { class: 'btn btn-primary'}}) }}
</span>
</div>
<div class="card ez-card ez-card--fieldtype-container">
<div id="field-definition-{{ value.identifier }}" class="ez-card__header ez-card__header--secondary">
{{ form_widget(field_definition.selected, {
label: '%s (%s)' | format(value.names[language_code], value.fieldTypeIdentifier)
}) }}
</div>
</div>
</div>
</div>
</div>
</section>

<section class="container my-4 px-5">
<div class="btn-toolbar justify-content-between" role="toolbar">
<a href="{{ path('ezplatform.content_type_group.view', { contentTypeGroupId: content_type_group.id }) }}" class="btn btn-default">
{{ "form.cancel"|trans|desc('Cancel') }}
</a>
<div class="ez-card__body">
{{ form_row(field_definition.name) }}
{{ form_row(field_definition.identifier) }}
{{ form_row(field_definition.position) }}
{{ form_row(field_definition.description) }}
{{ form_row(field_definition.isRequired) }}
{{ form_row(field_definition.isSearchable) }}
{{ form_row(field_definition.isTranslatable) }}
{{ form_row(field_definition.fieldGroup) }}

<div class="btn-toolbar justify-content-between" role="toolbar">
<div class="btn-group" role="group">
{{ form_widget(form.saveContentType, { attr: { class: 'btn btn-secondary' }}) }}
{{ form_widget(form.publishContentType, { attr: { class: 'btn btn-primary' }}) }}
</div>
{# Field type specific fields below #}
{{ ez_render_fielddefinition_edit(value, {
"languageCode": language_code,
"form": field_definition,
"group_class": value.group_class|default("")
}) }}

{# Default rendering #}
{% for child in field_definition %}
{# Iterable children means collections, they are handled in field_types.html.twig #}
{% if not child.rendered and child is not iterable %}
<div{% if group_class is not empty %} class="{{ group_class }}"{% endif %}>
{{- form_label(child) -}}
{{- form_errors(child) -}}
{{- form_widget(child) -}}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</section>

{{ form_widget(form.saveContentType, { attr: { hidden: 'hidden' }}) }}
{{ form_widget(form.publishContentType, { attr: { hidden: 'hidden' }}) }}

{{ form_widget(form._token) }}
{{ form_end(form, {'render_rest': false }) }}
{% endblock %}

{% block right_sidebar %}
{% set content_type_create_sidebar_right = knp_menu_get('ezplatform_admin_ui.menu.content_type_create.sidebar_right', [], {'save_id': form.publishContentType.vars.id, 'group': content_type_group}) %}
{{ knp_menu_render(content_type_create_sidebar_right, {'template': '@EzPlatformAdminUi/parts/menu/sidebar_right.html.twig'}) }}
{% endblock %}

{% block javascripts %}
{% javascripts
'@EzPlatformAdminUiBundle/Resources/public/js/scripts/admin.contenttype.selection.js'
Expand Down
Loading

0 comments on commit af6e78d

Please sign in to comment.