[dw-free] provide half-size option for icon browser

[fu]

[commit: http://hg.dwscoalition.org/dw-free/rev/354655a2ca78]

http://bugs.dwscoalition.org/show_bug.cgi?id=4385

Provide a "small images" toggle for the new icon browser. (and welcome,
dunvi!)

Patch by dunvi.

Files modified:

• htdocs/js/jquery.iconselector.js
• htdocs/stc/jquery.iconselector.css

--------------------------------------------------------------------------------
diff -r 42ac929d97b3 -r 354655a2ca78 htdocs/js/jquery.iconselector.js
--- a/htdocs/js/jquery.iconselector.js	Sun Jul 01 17:59:23 2012 +0800
+++ b/htdocs/js/jquery.iconselector.js	Sun Jul 01 19:24:05 2012 +0800
@@ -39,9 +39,9 @@
           Search: <input type='search' id='iconselector_search'>\
           </span>\
         <span class='image-text-toggle' id='iconselector_image_text_toggle'>\
-          <span class='toggle-image-only'><a href='#' class='image_only'>Images only</a> / Show meta text</span>\
-          <span class='toggle-no-meta'>Images only / <a href='#' class='show_text'>Show meta text</a></span>\
-        </span>\
+          <span class='toggle-off-half-image'>Small images / <a href='#' class='full_image'>Large images</a> / <a href='#' class='meta_image'>Image and meta text</a></span>\
+          <span class='toggle-off-full-image'><a href='#' class='half_image'>Small images</a> / Large images / <a href='#' class='meta_image'>Image and meta text</a></span>\
+          <span class='toggle-off-meta-info'><a href='#' class='half_image'>Small images</a> / <a href='#' class='full_image'>Large images</a> / Image and meta text</span>\
         <div class='kwmenu'>\
           <label for='iconselector_kwmenu'>Keywords of selected icon:</label>\
           <div class='keywords'></div>\
@@ -170,15 +170,21 @@
              } )
             .keydown(_selectByEnter);
 
+
             $("#iconselector_image_text_toggle a").click(function() {
-                if ( $(this).hasClass("image_only") ) {
+                if ($(this).hasClass("half_image") ) {
+                    $("#iconselector_icons, #iconselector_image_text_toggle, #iconselector_icons_list").addClass("half_icons");
+                    $("#iconselector_icons, #iconselector_image_text_toggle").addClass("no_meta");
+                } else if ($(this).hasClass("full_image") ) {
+                    $("#iconselector_icons, #iconselector_image_text_toggle, #iconselector_icons_list").removeClass("half_icons");
                     $("#iconselector_icons, #iconselector_image_text_toggle").addClass("no_meta");
                 } else {
+                    $("#iconselector_icons, #iconselector_image_text_toggle, #iconselector_icons_list").removeClass("half_icons");
                     $("#iconselector_icons, #iconselector_image_text_toggle").removeClass("no_meta");
                 }
 
-                // refocus, because we just hid the link we just clicked on
-                $("#iconselector_image_text_toggle a").focus();
+                // refocus because we just hid the link we clicked on
+                $("#iconselector_image_text_toggle a:visible:first").focus();
 
                 return false;
             });
diff -r 42ac929d97b3 -r 354655a2ca78 htdocs/stc/jquery.iconselector.css
--- a/htdocs/stc/jquery.iconselector.css	Sun Jul 01 17:59:23 2012 +0800
+++ b/htdocs/stc/jquery.iconselector.css	Sun Jul 01 19:24:05 2012 +0800
@@ -26,6 +26,15 @@
     overflow:hidden;
 }
 
+.half_icons #iconselector_icons_list li {
+    width:60px;
+}
+
+.half_icons #iconselector_icons_list img {
+    width:50px;
+    height:50px;
+}
+
 #iconselector_icons_list li:hover {
     border-width:1px;
     border-style:solid;
@@ -38,6 +47,11 @@
     width:100px;
 }
 
+.half_icons .icon_image {
+    height:50px;
+    width:50px;
+    overflow:hidden;
+}
 
 .meta_wrapper {
     height: 5em;
@@ -49,11 +63,18 @@
     display: none;
 }
 
-.image-text-toggle .toggle-image-only, .image-text-toggle.no_meta .toggle-no-meta {
+.image-text-toggle.half_icons.no_meta .toggle-off-half-image,
+.image-text-toggle.no_meta .toggle-off-full-image,
+.image-text-toggle .toggle-off-meta-info {
     display: inline;
 }
 
-.image-text-toggle.no_meta .toggle-image-only, .image-text-toggle .toggle-no-meta {
+.image-text-toggle .toggle-off-half-image,
+.image-text-toggle.no_meta .toggle-off-half-image,
+.image-text-toggle .toggle-off-full-image,
+.image-text-toggle.half_icons.no_meta .toggle-off-full-image,
+.image-text-toggle.no_meta .toggle-off-meta-info,
+.image-text-toggle.half_icons.no_meta .toggle-off-meta-info {
     display: none;
 }
 
--------------------------------------------------------------------------------

Comments

[ninetydegrees]

Noting that using CSS like this distorts non-square images and blows up small images. (I don't know if we wanna fix this; I'm just saying it now in case it comes up later)

[dunvi]

It didn't occur to me to check non-square images. I can take a look at that in a day or two. (I also want to try and implement the small images + text option, so I'll probably check both at the same time.)

[ninetydegrees]

AFAIK the only way to prevent distortion is to use HTML attributes instead. That's the way we did it in styles. I don't know if that's possible here.

[dunvi]

Do you know if non square images got distorted in the jquery browser before this change? Even if they did, I'll still see if I can figure out how to fix it, but I'll stress about it a little less :)

[ninetydegrees]

I don't know what you call the old browser but if I disable beta-testing images display fine in all three sizes available in the icon selector.