frontend updates for media treeview

Resources/public/css/styles.css

@@ -306,6 +306,18 @@ form.sonata-filter-form.form-stacked {
     padding-left: 0;
 }
 
+.filter_container .form-group {
+    margin: 5px 0 5px 0;
+}
+
+.filter_container .control-label {
+    padding-top: 3px;
+}
+
+.filter_container .form-control {
+    max-height: 25px;
+}
+
 /* Overrides */
 
 /* x-editable */
@@ -345,45 +357,70 @@ div.mosaic-box {
     border-radius: 3px;
 }
 
-div.mosaic-inner-box:hover {
-    background: #ffffff;
-    opacity: 0.8;
+
+div.mosaic-inner-box {
+    position: relative;
 }
 
-div.mosaic-inner-box:hover > div.mosaic-inner-box-default {
-    display: none;
+div.mosaic-inner-box-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 4px 4px 0 0;
+    background-color: rgba(255, 255, 255, .8);
+    transition: .25s opacity;
+    padding: 5px 10px;
 }
 
 div.mosaic-inner-box:hover > div.mosaic-inner-box-hover {
-    display: block;
+    opacity: 1;
 }
 
-div.mosaic-inner-box > div.mosaic-inner-box-default {
-    display: block;
+div.mosaic-inner-box > div.mosaic-inner-box-hover {
+    opacity: 0;
 }
 
-div.mosaic-inner-box > div.mosaic-inner-box-hover {
-    display: none;
+div.mosaic-inner-box img {
+    width: 100%;
+    height: auto;
+    border-radius: 4px 4px 0 0;
 }
 
 div.mosaic-box-outter {
     background-size: 100% auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #fff;
 }
 
 div.mosaic-inner-box {
-    border: 1px solid #ddd;
-    padding: 5px;
-    min-height: 100px;
+    height: 100px;
     border-bottom: none;
-    border-radius: 5px 5px 0 0;
+    overflow: hidden;
 }
 
 div.mosaic-inner-text {
     background: white;
-    border: 1px solid #ddd;
     border-top: none;
     padding: 3px;
     border-radius: 0 0 5px 5px;
+    z-index: 2;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mosaic-inner-link {
+    vertical-align: middle;
+}
+
+.mosaic-box-label {
+    position: absolute;
+    top: 10px;
+    right: 10px;
 }
 
 div.mosaic-box.sonata-ba-list-row-selected > div.mosaic-inner-box {

Resources/public/css/tree.css

@@ -20,6 +20,7 @@
     position: relative;
     margin-bottom: 5px;
     color: #444;
+    background: #fff;
 }
 .sonata-tree__item .label {
     font-size: 12px;
@@ -31,8 +32,8 @@
 }
 .sonata-tree__item .fa-caret-right {
     position: absolute;
-    top: 9px;
-    left: -22px;
+    top: 10px;
+    left: -20px;
     color: #3c8dbc;
 }
 .sonata-tree__item:hover {
@@ -88,15 +89,23 @@
 /**
  * Toggleable tree
  */
+.sonata-tree--toggleable {
+    margin-left: 0;
+}
+
 .sonata-tree--toggleable li > ul {
     display: none;
 }
 .sonata-tree--toggleable .sonata-tree__item {
-    margin-left: 25px;
+    margin-left: 20px;
 }
 .sonata-tree--toggleable .sonata-tree__item .fa-caret-right {
     cursor: pointer;
 }
+.sonata-tree--toggleable .sonata-tree__item:last-child .fa-caret-right {
+    display: none;
+}
+
 .sonata-tree--toggleable .sonata-tree__item .fa-caret-right:after {
     content: '';
     position: absolute;
@@ -104,4 +113,19 @@
     bottom: -5px;
     left: -10px;
     right: -10px;
+}
+
+/**
+ * Smaller tree
+ */
+.sonata-tree--small .sonata-tree__item__edit {
+    font-size: 12px;
+}
+
+.sonata-tree--small .sonata-tree__item {
+    padding: 3px 15px 4px 5px;
+}
+
+.sonata-tree--small .sonata-tree__item .fa-caret-right {
+    top: 7px;
 }

Resources/public/treeview.js

@@ -15,7 +15,9 @@
         defaultRegistry = '.js-treeview',
         defaults = {
             togglersAttribute: '[data-treeview-toggler]',
-            toggledState: 'is-toggled'
+            toggledState: 'is-toggled',
+            activeState: 'is-active',
+            instanceAttribute: 'data-treeview-instance'
         };
 
     function TreeView( element, options ) {
@@ -34,6 +36,8 @@
         init: function() {
             this.setElements();
             this.setEvents();
+            this.setAttributes();
+            this.showActiveElement();
         },
 
         /**
@@ -44,6 +48,13 @@
             this.$togglers = this.$element.find(this.options.togglersAttribute);
         },
 
+        /**
+         * Set some attrs
+         */
+        setAttributes: function() {
+            this.$element.attr(this.options.instanceAttribute, true);
+        },
+
         /**
          * Set events and delegates
          */
@@ -59,6 +70,17 @@
                 $parent = $target.parent();
             $parent.toggleClass(this.options.toggledState);
             $parent.next('ul').slideToggle();
+        },
+
+        /**
+         * Show active element
+         */
+        showActiveElement: function() {
+            var parents = '[' + this.options.instanceAttribute + '] ul, [' + this.options.instanceAttribute + ']';
+            var $activeElement = this.$element.find('.' + this.options.activeState);
+            var $parents = $activeElement.parents(parents);
+            $parents.show();
+            $parents.prev().addClass(this.options.toggledState);
         }
 
     };

Resources/views/CRUD/base_list.html.twig

@@ -248,7 +248,7 @@ file that was distributed with this source code.
                     <form class="sonata-filter-form form-horizontal {{ admin.isChild and 1 == admin.datagrid.filters|length ? 'hide' : '' }}" action="{{ admin.generateUrl('list') }}" method="GET" role="form">
                         {{ form_errors(form) }}
 
-                        <div class="row">
+                        <div class="clearfix">
                             <div class="col-md-9">
                                 <div class="filter_container">
                                     {% for filter in admin.datagrid.filters %}
@@ -268,7 +268,7 @@ file that was distributed with this source code.
                                     {% endfor %}
                                 </div>
                             </div>
-                            <div class="col-md-3">
+                            <div class="pull-right">
                                 <input type="hidden" name="filter[_page]" id="filter__page" value="1">
 
                                 {% set foo = form.children['_page'].setRendered() %}

Resources/views/CRUD/list_outer_rows_mosaic.html.twig

@@ -24,14 +24,18 @@ This template can be customized to match your needs. You should only extends the
 
                 <div class="col-xs-6 col-sm-3 mosaic-box sonata-ba-list-field-batch sonata-ba-list-field" objectId="{{ admin.id(object) }}">
 
-                    <div class="mosaic-box-outter" style="background: url({% block sonata_mosaic_background %}{{ meta.image }}{% endblock %}) white no-repeat center center; background-size: 100% auto">
+                    <div class="mosaic-box-outter">
                         <div class="mosaic-inner-box">
                             {#
                                 This box will be display when the mouse is not on the box
                             #}
+
                             <div class="mosaic-inner-box-default">
+                                {% block sonata_mosaic_background %}
+                                    <img src="{{ meta.image }}" alt="" />
+                                {% endblock %}
                                 {% block sonata_mosaic_default_view %}
-                                    <span class="label label-primary pull-right">#{{ admin.id(object) }}</span>
+                                    <span class="mosaic-box-label label label-primary pull-right">#{{ admin.id(object) }}</span>
                                 {% endblock %}
                             </div>
 
@@ -41,8 +45,7 @@ This template can be customized to match your needs. You should only extends the
                             #}
                             <div class="mosaic-inner-box-hover">
                                 {% block sonata_mosaic_hover_view %}
-                                    <span class="label label-primary pull-right">#{{ admin.id(object) }}</span>
-
+                                    <span class="mosaic-box-label label label-primary pull-right">#{{ admin.id(object) }}</span>
                                     {{ meta.description }}
                                 {% endblock %}
                             </div>
@@ -52,9 +55,9 @@ This template can be customized to match your needs. You should only extends the
 
                             {% block sonata_mosaic_description %}
                                 {% if admin.isGranted('EDIT', object) and admin.hasRoute('edit') %}
-                                    <a href="{{ admin.generateUrl('edit', {'id' : object|sonata_urlsafeid }) }}">{{ meta.title|truncate(40) }}</a>
+                                    <a class="mosaic-inner-link" href="{{ admin.generateUrl('edit', {'id' : object|sonata_urlsafeid }) }}">{{ meta.title|truncate(40) }}</a>
                                 {% elseif admin.isGranted('SHOW', object) and admin.hasRoute('show') %}
-                                    <a href="{{ admin.generateUrl('show', {'id' : object|sonata_urlsafeid }) }}">{{ meta.title|truncate(40) }}</a>
+                                    <a class="mosaic-inner-link" href="{{ admin.generateUrl('show', {'id' : object|sonata_urlsafeid }) }}">{{ meta.title|truncate(40) }}</a>
                                 {% else %}
                                     {{ meta.title|truncate(40) }}
                                 {% endif %}