[PATCH] Make the wysiwyg-toolbar look a little nicer

[anonymous]

I had this running (an older version of the plugin) with Trac 0.12, and with Trac 1.4.2 the text is a bit bigger, so the toolbar gets a bit mixed up. I also noticed the toolbar has trouble with the width when changing the browser zoom (below 100%) -- the toolbar icons would overflow the toolbar.

I made changes to wysiwyg.css to help with these items. See the comments in the changes below.

.wysiwyg-toolbar {
    display: table-cell;/* added to make the toolbar area perfectly wide */
    border: solid #d7d7d7;
    border-width: 1px 1px 1px 0;
    height: 18px;
    /* width: 400px; removed */
    float: left;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.wysiwyg-toolbar li :link, .wysiwyg-toolbar li :visited {
    background: transparent url(toolbar.png) no-repeat;
    border: 1px solid #fff;
    border-left-color: #d7d7d7;
    cursor: default;
    display: block;
    width: 20px;
    height: 16px;
    color: #777;
    overflow-y: hidden; /* added just in case the text is too high */
}

.wysiwyg-toolbar li a#wt-style {
    width: 80px; /* changed from 62 to get text fully in toolbar */
    font-size: 90%; /* added to make text smaller to fit on toolbar better */
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    padding-left: 2px;
    padding-right: 2px;
    background-image: url(../common/desc.png);
    background-position: right bottom;
}

[Dan]

Updated style suggestions, patch format.

[Dan]

I'm hardly a CSS wiz, but I came up with some mods to my original ideas. See the attached patch.

[Dan]

The look of the toolbar with the previous patch.

[Dan]

The look of the toolbar without the previous patch.

[Dan]

So, here's what it looks like before the patch. The selection area has an up-arrow that doesn't really do anything, and the text doesn't fit, so you can't really read it.

[Jun Omae]

In 18482:

TracWysiwygPlugin: use absolute length for font-size to fit toolbar height because font-size of root element is too large (closes #13873)

[Dan]

Thanks!