Label size, font size for labels

[pwalczysko]

See screenshots below, we have on the same Labels tab in the OMERO.figure two ways to denote the font size, the tooltip says something else for existing Labels and something else for the newly added Height. And the tooltip itself has also different size in the Height case (smaller) and in the Labels case (bigger) - see screenshots below.

Existing Labels functionality, denoted as Font size

The newly added Height denoted as Label size

cc @will-moore

[pwalczysko]

Suggested solution

Let us go for Labels case, this means the tooltip says Font size everywhere (scalebar and labels) and is the same size and style as in the present state in Labels.

[JulianHn]

I was just trying to look into this and I am not really sure why the sizes are different for the two to be honest. Both dropdown menus have the same classes etc. but are displayed differently. Is there some interaction with the parent container classes that I am not aware of?

>> scalebar_from_template.html
<div class="form-group col-sm-1 btn-group" style="padding: 0;">
                <button type="button" class="scalebar_font_size btn btn-default btn-sm dropdown-toggle" title="Font Size"
                data-toggle="dropdown" style="width:33px; <% if (!show_label) print("display:none") %>">
                    <span><%= font_size %></span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
                    print ("<li><a href='#'><span>"+p+"</span></a></li>")
                }); %>
                </ul>
            </div>

>> labels_form_inner_template.html

<div class="btn-group">
        <button type="button" class="font-size btn btn-default btn-sm dropdown-toggle" title="Font Size"
            data-toggle="dropdown" style="width:33px">
            <span><%= l.size %></span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
        <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
            print ("<li><a href='#'><span>"+p+"</span></a></li>")
        }); %>
        </ul>
    </div>

The definitions of the actual dropdown buttons is the same, the only difference is the wrapping container, which is needed in the scalebar case to layout the inputs correctly.

On my firefox on Linux machine @ HomeOffice the behaviour is even more strange for me: While the Labels case is displayed in a speech bubble like object, the Scalebar case is displayed in a standard Linux system overlay label. This label is not even recognized as part of the browser window by Linux (I need to do Fullscreen capturing when screenshotting instead of capturing just the FF window).

Any ideas?

// Julian

[will-moore]

This change will enable the bootstrap tooltips on the scalebar form, calling the .tooltip() jquery plugin for any form element that has a title:

diff --git a/src/js/views/scalebar_form_view.js b/src/js/views/scalebar_form_view.js
index 9cbc585..1fff4b4 100644
--- a/src/js/views/scalebar_form_view.js
+++ b/src/js/views/scalebar_form_view.js
@@ -207,6 +207,7 @@ var ScalebarFormView = Backbone.View.extend({

         var html = this.template(json);
         this.$el.html(html);
+        this.$el.find("[title]").tooltip();

         return this;

It's not needed on the labels form because that stays in place (we don't replace the html each render) so it has the tooltips setup when the page first loads.

@JulianHn - can you add this fix to #504? Thx