Applies on 0101c6c3962968905a02c8043d5168c335b62d37
[PATCH] Use disclosure triangles for software groups as suggested by bug #643147
--- src/app/stylesheets/aggregator.scss | 12 +++- src/app/views/templates/_content_selection.haml | 3 +- src/app/views/templates/new.haml | 15 +++++ src/public/images/icons/expander-collapsed.png | Bin 0 -> 239 bytes src/public/images/icons/expander-collapsed.svg | 74 +++++++++++++++++++++++ src/public/images/icons/expander-expanded.png | Bin 0 -> 240 bytes src/public/images/icons/expander-expanded.svg | 74 +++++++++++++++++++++++ 7 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 src/public/images/icons/expander-collapsed.png create mode 100644 src/public/images/icons/expander-collapsed.svg create mode 100644 src/public/images/icons/expander-expanded.png create mode 100644 src/public/images/icons/expander-expanded.svg
diff --git a/src/app/stylesheets/aggregator.scss b/src/app/stylesheets/aggregator.scss index 6711ee6..616581b 100644 --- a/src/app/stylesheets/aggregator.scss +++ b/src/app/stylesheets/aggregator.scss @@ -1127,14 +1127,20 @@ a.iconbutton { height: 600px; overflow: auto; display: block; - @include column-count(4); &>li { display: block; text-transform: uppercase; - margin: 0 0 2em 0; padding: 0; - @include column-break-before(always); + margin: 0 0 2em 0; padding: 0 0 0 20px; + background: url('../../images/icons/expander-collapsed.png') no-repeat 0 0; + &.expanded { + background: url('../../images/icons/expander-expanded.png') no-repeat 0 0; + } + label { + cursor: pointer; + } } .packages { + @include column-count(4); display: block; margin: 1em 0 0 0; &:first-child { diff --git a/src/app/views/templates/_content_selection.haml b/src/app/views/templates/_content_selection.haml index 2372a4a..1acccbd 100644 --- a/src/app/views/templates/_content_selection.haml +++ b/src/app/views/templates/_content_selection.haml @@ -36,7 +36,8 @@ - group_id = group.gsub(/\s/, '_') %li = check_box_tag 'groups[]', group, group_sel, :disabled => group_sel, :id => "group_#{group_id}" - = label_tag "group_#{group_id}", group + %label.disclosure + =group %ul{:class => "packages group_#{group_id}"} - pkgs = @groups[group][:packages] - pkgs.keys.sort.each do |pkg| diff --git a/src/app/views/templates/new.haml b/src/app/views/templates/new.haml index 42fc85d..c502ecc 100644 --- a/src/app/views/templates/new.haml +++ b/src/app/views/templates/new.haml @@ -10,6 +10,7 @@ $(this).hide(); $container.empty().show().addClass('loading'); $container.load(show_all ? list_all_url : list_url, list_data, function() { + var $groups = $('.softwaregroups .disclosure', this); $container.removeClass('loading'); $('#do_add_software').click(function(e) { var url = '#{url_for :action => 'add_software', :ajax => true, :add_selected => true}'; @@ -34,6 +35,7 @@ $container.hide(); $submit.show(); }); + //select all packages in group $(".softwaregroups input[type='checkbox']").click(function() { if ($(this).attr("checked") === true) { $(this).siblings("ul").find("input[type='checkbox']").attr("checked","checked"); @@ -41,6 +43,19 @@ $(this).siblings("ul").find("input[type='checkbox']").removeAttr("checked"); } }); + //disclosure triangles + $(".packages").hide(); + $groups.click(function() { + var $packages = $(this).siblings('.packages'); + var $container = $(this).parent('li'); + if ($packages.filter(':visible').length) { + $packages.hide(200); + $container.removeClass('expanded'); + } else { + $packages.show(200); + $container.addClass('expanded'); + } + }); }); }); }); diff --git a/src/public/images/icons/expander-collapsed.png b/src/public/images/icons/expander-collapsed.png new file mode 100644 index 0000000000000000000000000000000000000000..9032e44f42d0150d462285ab837122df9e913b7c GIT binary patch literal 239 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf<Z~8yL>2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQoWFT^vI! zdY4|_DA-`Y!5UB~ztyWm$Jo_tu6CH;7u_wB8949!ZF{_*kIA4S?a8#_JDa!_6m%8k z?jAV)M$CmFr-SK52jc`m<p6gnhB_&RIp0Hr)DKMWb=aH3@MIIyi>Kdtex!0`Kl>JQ c;`cdz^N(T2UItgH1MOw-boFyt=akR{05vyH{{R30
literal 0 HcmV?d00001
diff --git a/src/public/images/icons/expander-collapsed.svg b/src/public/images/icons/expander-collapsed.svg new file mode 100644 index 0000000..840b241 --- /dev/null +++ b/src/public/images/icons/expander-collapsed.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="16" + height="16" + id="svg2" + version="1.1" + inkscape:version="0.48+devel r9736 custom" + sodipodi:docname="New document 18"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1" + inkscape:cx="10.491506" + inkscape:cy="6.3150636" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="false" + borderlayer="true" + inkscape:showpageshadow="false" + inkscape:window-width="930" + inkscape:window-height="681" + inkscape:window-x="1892" + inkscape:window-y="272" + inkscape:window-maximized="0" + inkscape:snap-nodes="false" + inkscape:snap-bbox="true"> + <inkscape:grid + type="xygrid" + id="grid27329" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" /> + </sodipodi:namedview> + <metadata + id="metadata7"> + rdf:RDF + <cc:Work + rdf:about=""> + dc:formatimage/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + dc:title</dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(0,-1036.3622)"> + <path + style="color:#bebebe;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" + d="m 5.0221267,1037.3335 7.0285593,7.0287 -7.0285922,7.0286 z" + id="rect27331" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccc" /> + </g> +</svg> diff --git a/src/public/images/icons/expander-expanded.png b/src/public/images/icons/expander-expanded.png new file mode 100644 index 0000000000000000000000000000000000000000..c75af486f5894a8862e1bdf8521f9ade03bb4355 GIT binary patch literal 240 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf<Z~8yL>2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQoWGT^vI! zdhcF3$lIX6<8YC`P~P8adfo!z7g47=1LrJ=>zT;F^e`dm{eM;8)h;cwE{1-!Z(v*S z_804wfE(wo<xFPVkS6bV?UIC?wunOc8-|%3!qpB;A0H_QI5rtJR8>EHZRM`x$7K2W cuX-4>dQOFvaK70A3!udep00i_>zopr0I)JpQ~&?~
literal 0 HcmV?d00001
diff --git a/src/public/images/icons/expander-expanded.svg b/src/public/images/icons/expander-expanded.svg new file mode 100644 index 0000000..3956327 --- /dev/null +++ b/src/public/images/icons/expander-expanded.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="16" + height="16" + id="svg2" + version="1.1" + inkscape:version="0.48+devel r9736 custom" + sodipodi:docname="expander-collapsed.svg"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="16" + inkscape:cx="7.3866895" + inkscape:cy="3.6307349" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + borderlayer="true" + inkscape:showpageshadow="false" + inkscape:window-width="930" + inkscape:window-height="681" + inkscape:window-x="1892" + inkscape:window-y="272" + inkscape:window-maximized="0" + inkscape:snap-nodes="false" + inkscape:snap-bbox="true"> + <inkscape:grid + type="xygrid" + id="grid27329" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" /> + </sodipodi:namedview> + <metadata + id="metadata7"> + rdf:RDF + <cc:Work + rdf:about=""> + dc:formatimage/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + dc:title</dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(0,-1036.3622)"> + <path + style="color:#bebebe;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" + d="m 15,1041.3622 -7.0287687,7.0286 -7.02854577,-7.0286 z" + id="rect27331" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccc" /> + </g> +</svg>
On Mon, 2010-10-18 at 20:00 +0200, Jakub Steiner wrote:
src/app/stylesheets/aggregator.scss | 12 +++- src/app/views/templates/_content_selection.haml | 3 +- src/app/views/templates/new.haml | 15 +++++ src/public/images/icons/expander-collapsed.png | Bin 0 -> 239 bytes src/public/images/icons/expander-collapsed.svg | 74 +++++++++++++++++++++++ src/public/images/icons/expander-expanded.png | Bin 0 -> 240 bytes src/public/images/icons/expander-expanded.svg | 74 +++++++++++++++++++++++ 7 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 src/public/images/icons/expander-collapsed.png create mode 100644 src/public/images/icons/expander-collapsed.svg create mode 100644 src/public/images/icons/expander-expanded.png create mode 100644 src/public/images/icons/expander-expanded.svg
diff --git a/src/app/stylesheets/aggregator.scss b/src/app/stylesheets/aggregator.scss index 6711ee6..616581b 100644 --- a/src/app/stylesheets/aggregator.scss +++ b/src/app/stylesheets/aggregator.scss @@ -1127,14 +1127,20 @@ a.iconbutton { height: 600px; overflow: auto; display: block;
- @include column-count(4); &>li { display: block; text-transform: uppercase;
- margin: 0 0 2em 0; padding: 0;
- @include column-break-before(always);
- margin: 0 0 2em 0; padding: 0 0 0 20px;
- background: url('../../images/icons/expander-collapsed.png') no-repeat 0 0;
- &.expanded {
background: url('../../images/icons/expander-expanded.png') no-repeat 0 0;- }
- label {
cursor: pointer;- } } .packages {
- @include column-count(4); display: block; margin: 1em 0 0 0; &:first-child {
diff --git a/src/app/views/templates/_content_selection.haml b/src/app/views/templates/_content_selection.haml index 2372a4a..1acccbd 100644 --- a/src/app/views/templates/_content_selection.haml +++ b/src/app/views/templates/_content_selection.haml @@ -36,7 +36,8 @@ - group_id = group.gsub(/\s/, '_') %li = check_box_tag 'groups[]', group, group_sel, :disabled => group_sel, :id => "group_#{group_id}"
= label_tag "group_#{group_id}", group
%label.disclosure=group %ul{:class => "packages group_#{group_id}"} - pkgs = @groups[group][:packages] - pkgs.keys.sort.each do |pkg|diff --git a/src/app/views/templates/new.haml b/src/app/views/templates/new.haml index 42fc85d..c502ecc 100644 --- a/src/app/views/templates/new.haml +++ b/src/app/views/templates/new.haml @@ -10,6 +10,7 @@ $(this).hide(); $container.empty().show().addClass('loading'); $container.load(show_all ? list_all_url : list_url, list_data, function() {
var $groups = $('.softwaregroups .disclosure', this); $container.removeClass('loading'); $('#do_add_software').click(function(e) { var url = '#{url_for :action => 'add_software', :ajax => true, :add_selected => true}';@@ -34,6 +35,7 @@ $container.hide(); $submit.show(); });
//select all packages in group $(".softwaregroups input[type='checkbox']").click(function() { if ($(this).attr("checked") === true) { $(this).siblings("ul").find("input[type='checkbox']").attr("checked","checked");@@ -41,6 +43,19 @@ $(this).siblings("ul").find("input[type='checkbox']").removeAttr("checked"); } });
//disclosure triangles$(".packages").hide();$groups.click(function() {var $packages = $(this).siblings('.packages');var $container = $(this).parent('li');if ($packages.filter(':visible').length) {$packages.hide(200);$container.removeClass('expanded');} else {$packages.show(200);$container.addClass('expanded');}
ACK, I'll push this momentarily, though I made a small optimization to the js, removing the above if/else block and replacing with: $packages.toggle(200); $container.toggleClass('expanded');
}); });
deltacloud-devel@lists.fedorahosted.org
-
Jakub Steiner -
Jason Guiditta