Skip to content

Commit

Permalink
Usability improvements for toolbar clipper
Browse files Browse the repository at this point in the history
  • Loading branch information
@flack
flack committed Dec 4, 2011
1 parent 65b3689 commit c1e9ba9
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 52 deletions.
4 changes: 4 additions & 0 deletions lib/org/openpsa/widgets/locale/default.de.txt
View file
Expand Up @@ -6,6 +6,10 @@
Laden
---STRINGEND

---STRING more
mehr
---STRINGEND

---STRING no person
Keine Person
---STRINGEND
Expand Down
4 changes: 4 additions & 0 deletions lib/org/openpsa/widgets/locale/default.en.txt
View file
Expand Up @@ -6,6 +6,10 @@
Loading
---STRINGEND

---STRING more
more
---STRINGEND

---STRING no person
No person
---STRINGEND
Expand Down
100 changes: 67 additions & 33 deletions static/org.openpsa.widgets/ui.js
View file
Expand Up @@ -64,50 +64,84 @@ var org_openpsa_layout =
{
clip_toolbar: function()
{
var dropdown = '',
positionLast = $('#org_openpsa_toolbar .view_toolbar li:last-child').position(),
toolbarWidth = $('#org_openpsa_toolbar').width(),
over = false;

if (positionLast && positionLast.left > toolbarWidth)
{
var container = $('<div></div>')
.attr('id', 'toolbar_dropdown')
.mouseover(function()
var container = $('#toolbar_dropdown').length > 0 ? $('#toolbar_dropdown') : $('<li class="enabled submenu"><a><img src="' + MIDCOM_STATIC_URL + '/stock-icons/16x16/preferences-desktop.png"/> <span class="toolbar_label">' + TOOLBAR_MORE_LABEL + '</span></a><ul class="midcom_toolbar"></ul></li>')
.attr('id', 'toolbar_dropdown')
.data('event_attached', false)
.mouseover(function()
{
var self = $(this);
if (self.data('timeout'))
{
var self = $(this);
if (self.data('timeout'))
{
clearTimeout(self.data('timeout'));
self.removeData('timeout');
return;
}
self.addClass('expanded');
})
.mouseout(function()
clearTimeout(self.data('timeout'));
self.removeData('timeout');
return;
}
self.addClass('expanded');
})
.mouseout(function()
{
var self = $(this);
self.data('timeout', setTimeout(function()
{
var self = $(this);
self.data('timeout', setTimeout(function()
{
self.removeClass('expanded');
self.removeData('timeout');
}, 500));
})
.appendTo('#org_openpsa_toolbar');
dropdown = $('<ul></ul>').addClass('midcom_toolbar').appendTo(container);
}
self.removeClass('expanded');
self.removeData('timeout');
}, 500));
})
.css('display', 'none')
.appendTo('#org_openpsa_toolbar > ul.view_toolbar'),
dropdown = container.find('ul.midcom_toolbar'),
toolbarWidth = $('#org_openpsa_toolbar').width(),
lastchild = $('#org_openpsa_toolbar .view_toolbar li:last-child'),
positionLast = lastchild.length > 0 ? (lastchild.position().left + lastchild.width()) : 0,
over = false;

$('#org_openpsa_toolbar .view_toolbar li').each(function(index)
$('#org_openpsa_toolbar > .view_toolbar > li:not(#toolbar_dropdown)').each(function()
{
if (!over && $(this).position().left + $(this).width() > toolbarWidth)
if (!over && ($(this).position().left + $(this).width() + container.width()) > toolbarWidth)
{
over = true;
}
if (over)
{
$(this).detach().appendTo(dropdown);
dropdown.prepend($(this).detach());
}
});
if (!over)
{
dropdown.children('li:not(#toolbar_dropdown)').each(function()
{
var item = $(this)
.clone()
.css('visibility', 'hidden')
.insertBefore(container);
positionLast = $('#org_openpsa_toolbar .view_toolbar li:last-child').position().left + $('#org_openpsa_toolbar .view_toolbar li:last-child').width();

if (positionLast < toolbarWidth)
{
$(this).remove();
item.css('visibility', 'visible');
}
else
{
item.remove();
return false;
}
});
}

if (dropdown.children('li').length > 0)
{
container.css('display', 'inline-block');
}
else
{
container.css('display', 'none');
}
if (!container.data('event_attached'))
{
$(window).resize(function(){org_openpsa_layout.clip_toolbar();});
container.data('event_attached', true);
}
},

resize_content: function(containment, margin_bottom)
Expand Down
30 changes: 12 additions & 18 deletions themes/OpenPsa2/static/style.css
View file
Expand Up @@ -247,7 +247,6 @@ a:hover
text-align: right;
}


#content-menu input.submit
{
background-color: #d3d7cf;
Expand Down Expand Up @@ -538,22 +537,11 @@ input#org_openpsa_search_query
border: none;
}

.org_openpsa_toolbar #toolbar_dropdown
{
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
background-image:url('../stock-icons/16x16/preferences-desktop.png');
background-repeat: no-repeat;
background-position: top right;
}

.org_openpsa_toolbar #toolbar_dropdown.expanded
.org_openpsa_toolbar #toolbar_dropdown.expanded ul
{
position: absolute;
min-width: 200px;
right: 0;
top: 6px;
width: auto;
height: auto;
z-index: 10;
Expand All @@ -573,7 +561,8 @@ input#org_openpsa_search_query
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border: 1px solid #aaa;
border-top: 0px
border-top: 0px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4)
}

.org_openpsa_toolbar #toolbar_dropdown.expanded ul,
Expand All @@ -582,8 +571,13 @@ input#org_openpsa_search_query
display: block;
}

.org_openpsa_toolbar #toolbar_dropdown li a,
.org_openpsa_toolbar #toolbar_dropdown li button
.org_openpsa_toolbar #toolbar_dropdown li
{
border: none;
}

.org_openpsa_toolbar ul.midcom_toolbar #toolbar_dropdown li > a,
.org_openpsa_toolbar ul.midcom_toolbar #toolbar_dropdown li > button
{
display: block
}
Expand Down
2 changes: 1 addition & 1 deletion themes/OpenPsa2/style/ROOT.php
View file
Expand Up @@ -38,7 +38,7 @@
$_MIDCOM->add_jsfile(MIDCOM_JQUERY_UI_URL . '/ui/jquery.ui.draggable.min.js');
org_openpsa_widgets_ui::add_head_elements();
$_MIDCOM->add_jscript("var MIDGARD_ROOT = '" . midcom_connection::get_url('self') . "';");

$_MIDCOM->add_jscript("var TOOLBAR_MORE_LABEL = '" . midcom::get('i18n')->get_l10n('org.openpsa.widgets')->get('more') . "';");
$_MIDCOM->print_head_elements();

if ($pref_found)
Expand Down

0 comments on commit c1e9ba9

Please sign in to comment.