Added arrow icons for details sections.

New arrow icons have been added to replace the plus/minus sign icons
for expanding/collapsing details sections.

Ticket #1422
This commit is contained in:
Endi S. Dewata 2011-07-01 13:37:43 -05:00 committed by Adam Young
parent 7a25523d63
commit 3894a4f13d
4 changed files with 25 additions and 30 deletions

BIN
install/ui/arrow_collapsed.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
install/ui/arrow_expanded.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -26,8 +26,8 @@
/* REQUIRES: ipa.js */
IPA.expand_icon = 'ui-icon-minus';
IPA.collapse_icon = 'ui-icon-plus';
IPA.expanded_icon = 'ui-icon-expanded';
IPA.collapsed_icon = 'ui-icon-collapsed';
IPA.details_section = function(spec) {
@ -440,7 +440,7 @@ IPA.details_facet = function(spec) {
var icon = $('<span/>', {
name: 'icon',
'class': 'ui-icon section-expand '+IPA.expand_icon
'class': 'ui-icon section-expand '+IPA.expanded_icon
}).appendTo(header);
header.append(' ');
@ -497,8 +497,8 @@ IPA.details_facet = function(spec) {
var header = $('h2[name='+section.name+']', that.container);
var icon = $('span[name=icon]', header);
icon.toggleClass(IPA.expand_icon, visible);
icon.toggleClass(IPA.collapse_icon, !visible);
icon.toggleClass(IPA.expanded_icon, visible);
icon.toggleClass(IPA.collapsed_icon, !visible);
var div = section.container;

View File

@ -721,15 +721,6 @@ h3 {
}
.section-expand{
float:left;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
background-color: -moz-linear-gradient(top, #959595, #5e5e5e);
background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
border: 1px solid #b8b8b8;
color: #fff;
margin-right: 0.5em;
margin-top: -0.2em;
}
hr {
@ -909,12 +900,22 @@ span.attrhint {
padding:0;
}
#the positions for these are in the large icon image,
#and need to be specified in pixels.
/*
the positions for these are in the large icon image,
and need to be specified in pixels.
*/
.ui-icon {
/* background-image: url("ui-icons_222222_256x240.png"); */
background-color: #e2e2e2;
display: inline-block;
}
.ui-icon-expanded {
background: url(arrow_expanded.png);
}
.ui-icon-minus {
background-position: -48px -129px;
.ui-icon-collapsed {
background: url(arrow_collapsed.png);
}
.ui-icon-plus {
@ -925,12 +926,6 @@ span.attrhint {
background-position: -176px -97px;
}
.ui-icon {
/* background-image: url("ui-icons_222222_256x240.png"); */
background-color: #e2e2e2;
display: inline-block;
}
.ui-widget-content {
}