Menu Refactoring

[jri]

Currently the canvas context menu makes no use of DM GUI Toolkit's menus. As a consequence the canvas context menus do not scroll when not fitting the screen.

Subject of this ticket is:

• Realize the canvas context menu through DM's GUI Toolkit and drop the proprietary canvas context menu code.

-OR-

• Utilize jQuery UI's Menu widget throughout and drop DM GUI Toolkit's menu code (and the canvas context menu code as well). Does anybody know weather the jQuery UI menus support scrolling when not fitting the screen (like DM GUI Toolkit's menus do) as this would be a KO criteria for using jQuery UI menus.

The trigger for this ticket is #529.

[Jörg Richter]

Webclient: refactor menus, pt.1 (#532).

The DM GUI Toolkit's menus rely on the jQuery UI Menu widget now.

See #532.

• Changeset: 127bbb6889dfdfb85118472b55060fa07f562967
• URL: ​https://github.com/jri/deepamehta/commit/127bbb6889dfdfb85118472b55060fa07f562967

[Jörg Richter]

Webclient: refactor menus, pt.2 (#532, #534).

Long menus do scroll.
The scroll wheel can be used.

The main toolbar's menus reveal all their items without scrolling.

See #532.
See #534.

• Changeset: 6d78c022c393fa766d192c5a1932c025d9aae443
• URL: ​https://github.com/jri/deepamehta/commit/6d78c022c393fa766d192c5a1932c025d9aae443

[Jörg Richter]

Webclient: refactor menus, pt.3 (#532).

GUITookit: the Menu's generic parts are factored out into new class BaseMenu?.
This will be the base class for the upcoming context menus as well.

See #532.

• Changeset: 58dbe55c42914bde04f6eee055f3ae3bfadaa853
• URL: ​https://github.com/jri/deepamehta/commit/58dbe55c42914bde04f6eee055f3ae3bfadaa853

[Jörg Richter]

Webclient: refactor menus, pt.4 (#532, #534).

The canvas context menus do scroll when invoked near screen bottom.

DEVELOPER NOTES

DM's GUITookit now supports context menus.

dm4c.ui.context_menu()

All DM menus are now unified and based on GUITookit.
The proprietory canvas context menu code is dropped along with all menu related CSS.
The GUIToolkit menus and context menus rely on the jQuery UI Menu widget.

Menu refactoring is basically done.
Minor issues remain.

BREAKING CHANGE

All menu selection handlers are unified and receive 3 arguments:

menu_item - the selected menu item
x, y - coordinates of the selecting mouse click

This applies to toolbar menus as well as context menus.
If your plugin provides topic/association/canvas commands resp. places commands in the toolbar menus it must be possibly adapted. Check your command handler arguments.

See #532.
See #534.

• Changeset: b926b2a689ff709e9a71575d7d5ad0d59b5b709d
• URL: ​https://github.com/jri/deepamehta/commit/b926b2a689ff709e9a71575d7d5ad0d59b5b709d

[Jörg Richter]

Webclient: fix long menus (#532, #534).

In long menus, when a (vertical) scrollbar appears:

• the menu items are not line wrapped (the menu is wide enough).
• no horizontal scrollbar appears.

=> If one or both is not true for your OS or windowing system please send me an unscaled screenshot of the menu.

Note: you can use the mouse wheel or whatever scrolling gesture to scroll through long menus.
The former upper/lower "scrolling areas" are gone.

See #532.
See #534.

• Changeset: 19492501480a475350b1b4da4fb8f8063b4aaf83
• URL: ​https://github.com/jri/deepamehta/commit/19492501480a475350b1b4da4fb8f8063b4aaf83

[Jörg Richter]

Webclient: refactor menus, pt.1 (#532).

The DM GUI Toolkit's menus rely on the jQuery UI Menu widget now.

See #532.

• Changeset: 127bbb6889dfdfb85118472b55060fa07f562967
• URL: ​https://github.com/jri/deepamehta/commit/127bbb6889dfdfb85118472b55060fa07f562967

[Jörg Richter]

Webclient: refactor menus, pt.2 (#532, #534).

Long menus do scroll.
The scroll wheel can be used.

The main toolbar's menus reveal all their items without scrolling.

See #532.
See #534.

• Changeset: 6d78c022c393fa766d192c5a1932c025d9aae443
• URL: ​https://github.com/jri/deepamehta/commit/6d78c022c393fa766d192c5a1932c025d9aae443

[Jörg Richter]

Webclient: refactor menus, pt.3 (#532).

GUITookit: the Menu's generic parts are factored out into new class BaseMenu?.
This will be the base class for the upcoming context menus as well.

See #532.

• Changeset: 58dbe55c42914bde04f6eee055f3ae3bfadaa853
• URL: ​https://github.com/jri/deepamehta/commit/58dbe55c42914bde04f6eee055f3ae3bfadaa853

[Jörg Richter]

Webclient: refactor menus, pt.4 (#532, #534).

The canvas context menus do scroll when invoked near screen bottom.

DEVELOPER NOTES

DM's GUITookit now supports context menus.

dm4c.ui.context_menu()

All DM menus are now unified and based on GUITookit.
The proprietory canvas context menu code is dropped along with all menu related CSS.
The GUIToolkit menus and context menus rely on the jQuery UI Menu widget.

Menu refactoring is basically done.
Minor issues remain.

BREAKING CHANGE

All menu selection handlers are unified and receive 3 arguments:

menu_item - the selected menu item
x, y - coordinates of the selecting mouse click

This applies to toolbar menus as well as context menus.
If your plugin provides topic/association/canvas commands resp. places commands in the toolbar menus it must be possibly adapted. Check your command handler arguments.

See #532.
See #534.

• Changeset: b926b2a689ff709e9a71575d7d5ad0d59b5b709d
• URL: ​https://github.com/jri/deepamehta/commit/b926b2a689ff709e9a71575d7d5ad0d59b5b709d

[Jörg Richter]

Webclient: fix long menus (#532, #534).

In long menus, when a (vertical) scrollbar appears:

• the menu items are not line wrapped (the menu is wide enough).
• no horizontal scrollbar appears.

=> If one or both is not true for your OS or windowing system please send me an unscaled screenshot of the menu.

Note: you can use the mouse wheel or whatever scrolling gesture to scroll through long menus.
The former upper/lower "scrolling areas" are gone.

See #532.
See #534.

• Changeset: 19492501480a475350b1b4da4fb8f8063b4aaf83
• URL: ​https://github.com/jri/deepamehta/commit/19492501480a475350b1b4da4fb8f8063b4aaf83

[Jörg Richter]

Webclient: refactor menus, pt.1 (#532).

The DM GUI Toolkit's menus rely on the jQuery UI Menu widget now.

See #532.

• Changeset: 127bbb6889dfdfb85118472b55060fa07f562967
• URL: ​https://github.com/jri/deepamehta/commit/127bbb6889dfdfb85118472b55060fa07f562967

[Jörg Richter]

Webclient: refactor menus, pt.2 (#532, #534).

Long menus do scroll.
The scroll wheel can be used.

The main toolbar's menus reveal all their items without scrolling.

See #532.
See #534.

• Changeset: 6d78c022c393fa766d192c5a1932c025d9aae443
• URL: ​https://github.com/jri/deepamehta/commit/6d78c022c393fa766d192c5a1932c025d9aae443

[Jörg Richter]

Webclient: refactor menus, pt.3 (#532).

GUITookit: the Menu's generic parts are factored out into new class BaseMenu?.
This will be the base class for the upcoming context menus as well.

See #532.

• Changeset: 58dbe55c42914bde04f6eee055f3ae3bfadaa853
• URL: ​https://github.com/jri/deepamehta/commit/58dbe55c42914bde04f6eee055f3ae3bfadaa853

[Jörg Richter]

Webclient: refactor menus, pt.4 (#532, #534).

The canvas context menus do scroll when invoked near screen bottom.

DEVELOPER NOTES

DM's GUITookit now supports context menus.

dm4c.ui.context_menu()

All DM menus are now unified and based on GUITookit.
The proprietory canvas context menu code is dropped along with all menu related CSS.
The GUIToolkit menus and context menus rely on the jQuery UI Menu widget.

Menu refactoring is basically done.
Minor issues remain.

BREAKING CHANGE

All menu selection handlers are unified and receive 3 arguments:

menu_item - the selected menu item
x, y - coordinates of the selecting mouse click

This applies to toolbar menus as well as context menus.
If your plugin provides topic/association/canvas commands resp. places commands in the toolbar menus it must be possibly adapted. Check your command handler arguments.

See #532.
See #534.

• Changeset: b926b2a689ff709e9a71575d7d5ad0d59b5b709d
• URL: ​https://github.com/jri/deepamehta/commit/b926b2a689ff709e9a71575d7d5ad0d59b5b709d

[Jörg Richter]

Webclient: fix long menus (#532, #534).

In long menus, when a (vertical) scrollbar appears:

• the menu items are not line wrapped (the menu is wide enough).
• no horizontal scrollbar appears.

=> If one or both is not true for your OS or windowing system please send me an unscaled screenshot of the menu.

Note: you can use the mouse wheel or whatever scrolling gesture to scroll through long menus.
The former upper/lower "scrolling areas" are gone.

See #532.
See #534.

• Changeset: 19492501480a475350b1b4da4fb8f8063b4aaf83
• URL: ​https://github.com/jri/deepamehta/commit/19492501480a475350b1b4da4fb8f8063b4aaf83

[Jörg Richter]

Webclient: fix menu closing (#532, #534).

It does not happen that 2 menus are open at the same time.

See #532.
See #534.

• Changeset: 198284c3a823c0cc8c46bde2a6d3c8ba407247e8
• URL: ​https://github.com/jri/deepamehta/commit/198284c3a823c0cc8c46bde2a6d3c8ba407247e8

[Malte]

Some minor remarks, since I just checked out this brand new stuff:

• In a topics context menus the first and the last menu-item have somehow ugly (top and bottom) paddings
• When using webclient in chromium with a horizontal scrollbar (as reported), the last menu-item is partially hidden, but can be used.
• The gradient deployed by jquery-ui as a hover (over a menu-item) looks ugly to me, I did like the previous (more clean) style better

As an advantage of the new menus: Scrolling the "all types search menu" is much more efficient by now.

And yes, within a menu layout looks good to menu, no horizontal scrollbar appears and no line-break appears, neither in FFox nor in Chromium.

Nice greetings.

[Jörg Richter]

Webclient GUIToolkit: change button API (#532).

BREAKING CHANGE

dm4c.ui.button() takes a single config argument instead of 4. All are optional. Thus the caller must no longer pass useless undefined arguments. Furthermore the button() API is better extendable.

You must transform your plugin code:

dm4c.ui.button(my_handler, "my label", "my icon", false)

becomes

dm4c.ui.button({
    on_click: my_handler,
    label: "my label",
    icon: "my icon",
    is_submit: false
})

In preparation of 1-click menus.

See #532.

• Changeset: b31ef9f8a7c1b5d8f670e720058f2bd745030419
• URL: ​https://github.com/jri/deepamehta/commit/b31ef9f8a7c1b5d8f670e720058f2bd745030419

[Jörg Richter]

Webclient: fix menu closing (#532, #534).

It does not happen that 2 menus are open at the same time.

See #532.
See #534.

• Changeset: 198284c3a823c0cc8c46bde2a6d3c8ba407247e8
• URL: ​https://github.com/jri/deepamehta/commit/198284c3a823c0cc8c46bde2a6d3c8ba407247e8

[Jörg Richter]

Webclient GUIToolkit: change button API (#532).

BREAKING CHANGE

dm4c.ui.button() takes a single config argument instead of 4. All are optional. Thus the caller must no longer pass useless undefined arguments. Furthermore the button() API is better extendable.

You must transform your plugin code:

dm4c.ui.button(my_handler, "my label", "my icon", false)

becomes

dm4c.ui.button({
    on_click: my_handler,
    label: "my label",
    icon: "my icon",
    is_submit: false
})

In preparation of 1-click menus.

See #532.

• Changeset: b31ef9f8a7c1b5d8f670e720058f2bd745030419
• URL: ​https://github.com/jri/deepamehta/commit/b31ef9f8a7c1b5d8f670e720058f2bd745030419

[jri]

Replying to Malte:

Some minor remarks, since I just checked out this brand new stuff:

• In a topics context menus the first and the last menu-item have somehow ugly (top and bottom) paddings

Is this still an issue for you? For me everything looks OK. Can you send me a screenshot illustrating your problem?

• When using webclient in chromium with a horizontal scrollbar (as reported), the last menu-item is partially hidden, but can be used.

Since window scrollbar do not appear anymore (#543), this issue is gone, right?

• The gradient deployed by jquery-ui as a hover (over a menu-item) looks ugly to me, I did like the previous (more clean) style better

I don't like the proliferating gradients either.
I'll customize the jQuery UI theme to remove the gradients.
Thank you, for the suggestion!

As an advantage of the new menus: Scrolling the "all types search menu" is much more efficient by now.

Thank you for feedback!

And yes, within a menu layout looks good to menu, no horizontal scrollbar appears and no line-break appears, neither in FFox nor in Chromium.

Nice to hear :-)

[Jörg Richter]

Webclient: remove gradients from jQuery UI (#532).

Utilize a new jQuery UI custom theme without gradients.

See #532.

• Changeset: 8d9eeeb2136a0ed9d9f5ffc4addab50629dd7386
• URL: ​https://github.com/jri/deepamehta/commit/8d9eeeb2136a0ed9d9f5ffc4addab50629dd7386

[Malte]

Line wrap in "By Type" Menu

[Malte]

See top-padding, it is about 1-2px to narrow compared to bottom padding

[jri]

Oh, there are new attachments! Thanks!
(Trac does not inform me when there are new attachments without a comment.)

Line wrap in "By Type" Menu

I have to check this.

See top-padding, it is about 1-2px to narrow compared to bottom padding.

I think you mean the top/bottom margin of the menu dividers (5px in jQuery default style). Above the first menu item there is no divider line, so it might look "too narrow".

We could reduce the top/bottom divider margin.

[Jörg Richter]

Webclient: menu CSS tweaks (#532).

Menu items have equal margins on all 4 sides when adjacent to a divider line.

Furthermore: menus are *above* the split panel's resizable handle.
So the resize cursor do not appear within an opened menu.

See #532.

• Changeset: dbde5d50b3dc765478be31085348c2cb0a449435
• URL: ​https://github.com/jri/deepamehta/commit/dbde5d50b3dc765478be31085348c2cb0a449435

[jri]

Malte wrote:

Line wrap in "By Type" Menu

Did this happen when the browser window is too small? In this case I consider the wrapping OK. (What whould be the alternative?)

Just to clearify: my original wrapping question (comment:6) was aimed at wrapping as a reaction to a vertical menu scrollbar (not as a reaction to a small browser window):

In long menus, when a (vertical) scrollbar appears:

• the menu items are not line wrapped (the menu is wide enough).
• no horizontal scrollbar appears.

=> If one or both is not true for your OS or windowing system please send me an unscaled screenshot of the menu.

I would consider this ticket as solved.