Relabel and slightly refactor the image dialog size selector

The rationale here is that CSS values are easier to understand than having to do a bunch of mental math with the 'modifier' values. Also, this provides a little more UI help text display the label of the thumbnail in the box, and having the raw pixel values in the tooltip.
resolve · Jun 20, 2010 · 04607d9 · 04607d9
1 parent b994681
commit 04607d9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/public/stylesheets/refinery/refinery.css b/public/stylesheets/refinery/refinery.css
@@ -786,19 +786,30 @@ body.dialog form {
   float: left;
   list-style: none;
   margin: 0px 18px 0px 0px;
-  padding: 0px;
+  text-align:center;
 }
 .dialog #existing_image_size_area ul li.selected {
   margin-right: 16px;
 }
 .dialog #existing_image_size_area ul li a {
   display: block;
   border: 1px solid #999999;
+  font-size: 10px;
+  /* The following default values are overridden below */
+	height: 90px;
+	width: 90px;
+	line-height: 90px;
+	margin-top:-20px
 }
 .dialog #existing_image_size_area ul li.selected a {
-  margin-top: -1px;
   border: 2px solid #22A7F2;
 }
+.dialog #existing_image_size_area #image_dialog_size_0 a { height: 30px; width: 30px; line-height: 30px; margin-top: 10px}
+.dialog #existing_image_size_area #image_dialog_size_1 a { height: 50px; width: 50px; line-height: 50px; margin-top:  0px}
+.dialog #existing_image_size_area #image_dialog_size_2 a { height: 70px; width: 70px; line-height: 70px; margin-top:-10px}
+.dialog #existing_image_size_area #image_dialog_size_3 a { height: 90px; width: 90px; line-height: 90px; margin-top:-20px}
+
+
 /*
 #dialog_main {
   position: relative;

diff --git a/vendor/plugins/images/app/views/admin/images/_existing_image.erb b/vendor/plugins/images/app/views/admin/images/_existing_image.erb
@@ -19,14 +19,13 @@
           thumbnail_sizes = RefinerySetting.find_or_set(:image_thumbnails, {})
           (sizes = RefinerySetting.find_or_set(:image_dialogue_sizes, [:small, :medium, :large])).each_with_index do |size, index|
             if thumbnail_sizes.keys.include?(size) and (pixels = thumbnail_sizes[size]).present?
-              modifier = ((index + 1) * 10) + 10
+              pixels.to_s.gsub!(/[<>=]/, '')
         -%>
-              <li<%= " class='selected'" if size == :medium %> style="padding-top: <%= (((sizes.length * 10) - modifier) / 2) + 10 %>px">
-                <%= link_to "&nbsp;", "##{size}",
+              <li id="image_dialog_size_<%= index %>" class="image_dialog_size <%= 'selected' if size == :medium %>">
+                <%= link_to size.to_s, "##{size}",
                             :rel => size.to_s,
-                            :title => "#{size} image",
-                            :tooltip => "#{size} image",
-                            :style => "width: #{modifier}px; height: #{modifier}px;" %>
+                            :title   => "#{size} image (#{pixels} px)",
+                            :tooltip => "#{size} image (#{pixels} px)" %>
               </li>
         <%  end
           end -%>