Echo Web Framework

In the DropDownMenu the font is not set for the selection text. This should be done in Sync.Menu.js after the row 1218, where I added the following:

            var font = this.component.render("menuFont");
            if (font) {
                Echo.Sync.Font.render(font, this._contentDiv);
            }

Another problem with the current implementation is that it always set a background color, so it is not possible to have a transparent DropDownMenu. Therefore I removed the default-background setting (on row 1174-1175).
I also added the possibility to set a rollover foreground color for the selection text. This change made the row 1166 to 1226 in Sync.Menu.js looks like this:

    _processRolloverEnter: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return;
        }

        Echo.Sync.Color.render(this._rolloverForeground, this._dropDownDiv, "color");
        return true;
    },

    _processRolloverExit: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return;
        }

        Echo.Sync.Color.render(this._foreground, this._dropDownDiv, "color");
        return true;
    },

    _dropDownDiv: null,
    _foreground: null,
    _rolloverForeground: null,
    
    /** @see Extras.Sync.Menu#renderMain */
    renderMain: function() {
        this._dropDownDiv = document.createElement("div");
        this._dropDownDiv.id = this.component.renderId;
        this._dropDownDiv.style.cssText = "overflow:hidden;cursor:pointer;";
        
        Echo.Sync.LayoutDirection.render(this.component.getLayoutDirection(), this._dropDownDiv);
        this._foreground = this.component.render("foreground", Extras.Sync.Menu.DEFAULTS.foreground);
        Echo.Sync.Color.render(this._foreground, this._dropDownDiv, "color");
        Echo.Sync.Color.render(this.component.render("background"), this._dropDownDiv, "backgroundColor");
        this._rolloverForeground = this.component.render("rolloverForeground");
        if (this._rolloverForeground) {
            Core.Web.Event.add(this._dropDownDiv,
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseenter" : "mouseover",
                    Core.method(this, this._processRolloverEnter), true);
            Core.Web.Event.add(this._dropDownDiv,
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseleave" : "mouseout",
                    Core.method(this, this._processRolloverExit), true);
        }

        Echo.Sync.FillImage.render(this.component.render("backgroundImage"), this._dropDownDiv);
        Echo.Sync.Border.render(this.component.render("border", Extras.Sync.Menu.DEFAULTS.border), this._dropDownDiv);
        Echo.Sync.Extent.render(this.component.render("width"), this._dropDownDiv, "width", true, true);
        Echo.Sync.Extent.render(this.component.render("height"), this._dropDownDiv, "height", false, true);

        var relativeDiv = document.createElement("div");
        relativeDiv.style.cssText = "float:right;position:relative;";
        this._dropDownDiv.appendChild(relativeDiv);

        var expandDiv = document.createElement("div");
        expandDiv.style.cssText = "position:absolute;top:2px;right:2px;";
        var expandIcon = this.component.render("expandIcon", this.client.getResourceUrl("Extras", "image/menu/ArrowDown.gif"));
        var img = document.createElement("img");
        Echo.Sync.ImageReference.renderImg(expandIcon, img);
        expandDiv.appendChild(img);
        relativeDiv.appendChild(expandDiv);
  
        this._contentDiv = document.createElement("div");
        this._contentDiv.style.cssText = "float:left;white-space:nowrap;";
        Echo.Sync.Insets.render(this.component.render("insets", "2px 5px"), this._contentDiv, "padding");
        this._dropDownDiv.appendChild(this._contentDiv);
        
        var clearDiv = document.createElement("div");
        clearDiv.style.cssText = "clear:both;";
        this._dropDownDiv.appendChild(clearDiv);

        Core.Web.Event.add(this._dropDownDiv, "click", Core.method(this, this._processClick), false);
        Core.Web.Event.Selection.disable(this._dropDownDiv);

        if (this.component.render("selectionEnabled")) {
            var selection = this.component.render("selection");
            if (selection) {
                this._selectedItem = this.menuModel.getItemModelFromPositions(selection.split("."));
            }
        } else {
            this._selectedItem = null;
        }
        
        if (this._selectedItem) {
            this._contentDiv.appendChild(this._createSelectionContent(this._selectedItem));
        } else {
            var contentText = this.component.render("selectionText");
            this._contentDiv.appendChild(document.createTextNode(contentText ? contentText : "\u00a0"));
            var font = this.component.render("menuFont");
            if (font) {
                Echo.Sync.Font.render(font, this._contentDiv);
            }
        }
        
        if (!this.component.render("height")) {
            var contentBounds = new Core.Web.Measure.Bounds(this._contentDiv);
            relativeDiv.style.height = contentBounds.height + "px";
        }

        return this._dropDownDiv;

And in DropDownMenu.java I added:

    public Color getRolloverForeground() {
        return (Color) get(PROPERTY_ROLLOVER_FOREGROUND);
    }

    /**
     * Sets the rollover foreground of the selection text
     * @param newValue
     */
    public void setRolloverForeground(Color newValue) {
        set(PROPERTY_ROLLOVER_FOREGROUND, newValue);
    }

and

public static final String PROPERTY_ROLLOVER_FOREGROUND = "rolloverForeground";

Maybe it would be a good idea if the rollover foreground color also is set for the MenuItems changed in the method: _processRollover.

/ Hans Holmlund