Ticket #532 (closed Task: fixed)

Opened 7 years ago

Last modified 7 years ago

Menu Refactoring

Reported by: jri Owned by: jri
Priority: Major Milestone: Release 4.1.3
Component: DeepaMehta Standard Distribution Version: 4.1.2
Keywords: Cc: dgf, Malte, JuergeN, ziegi
Complexity: 5 Area:
Module: deepamehta-webclient

Description

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.

Attachments

text_wrap.png (42.3 KB) - added by Malte 7 years ago.
Line wrap in "By Type" Menu
top_menu_item.png (3.1 KB) - added by Malte 7 years ago.
See top-padding, it is about 1-2px to narrow compared to bottom padding

Change History

comment:1 Changed 7 years ago by jri

  • Status changed from new to accepted

comment:2 Changed 7 years ago by 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.

comment:3 Changed 7 years ago by 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.

comment:4 Changed 7 years ago by 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.

comment:5 Changed 7 years ago by 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.

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by 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.

comment:8 Changed 7 years ago by 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.

comment:9 Changed 7 years ago by 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.

comment:10 Changed 7 years ago by 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.

comment:11 Changed 7 years ago by 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.

comment:12 Changed 7 years ago by 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.

comment:13 Changed 7 years ago by 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.

comment:14 Changed 7 years ago by 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.

comment:15 Changed 7 years ago by 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.

comment:16 Changed 7 years ago by 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.

comment:17 Changed 7 years ago by 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.

comment:18 follow-ups: ↓ 22 ↓ 23 Changed 7 years ago by 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.

comment:19 Changed 7 years ago by 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.

comment:20 Changed 7 years ago by 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.

comment:21 Changed 7 years ago by 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.

comment:22 in reply to: ↑ 18 Changed 7 years ago by jri

  • Cc JuergeN, ziegi added

comment:23 in reply to: ↑ 18 Changed 7 years ago by 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 :-)

comment:24 Changed 7 years ago by Jörg Richter

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

Utilize a new jQuery UI custom theme without gradients.

See #532.

Changed 7 years ago by Malte

Line wrap in "By Type" Menu

Changed 7 years ago by Malte

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

comment:25 Changed 7 years ago by 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.

comment:26 Changed 7 years ago by 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.

comment:27 Changed 7 years ago by 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.

Last edited 7 years ago by jri (previous) (diff)

comment:28 Changed 7 years ago by jri

  • Status changed from accepted to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.