Skip to content

Commit

Permalink
frontend updates for media treeview
Browse files Browse the repository at this point in the history
  • Loading branch information
@juherpin
juherpin committed Sep 23, 2014
1 parent 3460895 commit 3ef2950
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 27 deletions.
67 changes: 52 additions & 15 deletions Resources/public/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand Down
30 changes: 27 additions & 3 deletions Resources/public/css/tree.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
position: relative;
margin-bottom: 5px;
color: #444;
background: #fff;
}
.sonata-tree__item .label {
font-size: 12px;
Expand All @@ -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 {
Expand Down Expand Up @@ -88,20 +89,43 @@
/**
* 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;
top: -5px;
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;
}
24 changes: 23 additions & 1 deletion Resources/public/treeview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -34,6 +36,8 @@
init: function() {
this.setElements();
this.setEvents();
this.setAttributes();
this.showActiveElement();
},

/**
Expand All @@ -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
*/
Expand All @@ -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);
}

};
Expand Down
4 changes: 2 additions & 2 deletions Resources/views/CRUD/base_list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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() %}
Expand Down
15 changes: 9 additions & 6 deletions Resources/views/CRUD/list_outer_rows_mosaic.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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 %}
Expand Down

0 comments on commit 3ef2950

Please sign in to comment.