Looking for suggestions on context menus

[sabracrolleton]

A proper context menu opens a window (ideally near where you right clicked on the mouse) with a list of possible selections and then closes as soon as you make a selection. I have not been able to figure out how to make one close as soon as you make a selection (I am using clog-gui).

At the moment I am using a form-dialog with a radio button control as a substitute, but interested in any hints someone might provide.

[mmontone]

I've observed this in menus (they are implemented with dropdowns). Would be nice to make them close as soon as they are clicked.

[mmontone]

Dropdowns in clog are implemented using this: https://www.w3schools.com/w3css/w3css_dropdowns.asp
I think you could use a dropdown for your usecase, and in your click handler you remove w3-show class from the w3-dropdown-content element.

[rabbibotton]

That should work can even use some of the animation classes if want. I have it on my list to do a better menu system.

[sabracrolleton]

Thank you for the suggestions. Using the gui-menu-drop-down with a gui window, this is what I have so far:

• By default, top will be calculated to be the top of the related obj, but you can override

• By default, left will be 150px to the right of position-left of the related obj, but you can override. This was just determined by trial and error looking at my proof of concept app.

• The length will be recalculated and reset at the end to be just larger than the menu items

• The window will close upon clicking a menu item

• It does not close upon hitting escape or clicking anywhere else on the screen, which it should do if I want a "real" context menu

;; We do not need the button that starts the drop down, so we need a new method
;; to create a button-less head for the drop down

(defgeneric create-context-gui-menu-drop-down (clog-gui-menu-bar
                                               &key class html-id)
  (:documentation "Attach a menu bar drop-down to a CLOG-GUI-MENU-BAR but without the button"))

(defmethod create-context-gui-menu-drop-down ((obj clog-gui-menu-bar)
                    &key
                    (class "w3-dropdown-content w3-bar-block w3-card-4")
                    (html-id nil))
  (let* ((hover  (create-div obj :class "w3-dropdown-hover"))
         (div    (create-div hover :class class :html-id html-id)))
    (change-class div 'clog-gui-menu-drop-down)))

;; Sample function that creates a context menu that can be attached to an obj

(defun my-context-menu (obj context-name
                        &key (left nil) (top nil) (height 100) (width 140)
                          (background "w3-teal"))

  (let* ((form-box (create-gui-window obj :left (if left left (+ 150 (position-left obj)))
                                          :top (if top top (position-top obj))
                                          :height height :width width
                                          :keep-on-top t
                                          :title materialized-view-name))
         (menu (create-gui-menu-bar (window-content form-box)
                                    :class (format nil "w3-bar ~a" background)))
         (header (create-context-gui-menu-drop-down
                  menu
                  :content "menu"
                  :class (format nil "w3-bar-block ~a" background)))
         (item1 (create-gui-menu-item header :content "New"
                                             :on-click
                                             (lambda (obj)
                                               (on-dlg-alert obj)
                                               (window-close form-box))))
         (item2 (create-gui-menu-item header :content "Old"
                                             :on-click
                                             (lambda (obj)
                                               (on-dlg-alert obj)
                                               (window-close form-box))))
         (item3 (create-gui-menu-item header :content "Vintage"
                                             :on-click
                                             (lambda (obj)
                                               (on-dlg-alert obj)
                                               (window-close form-box)))))
    (declare (ignore item1 item2 item3))
    (setf (height form-box) (+ 40 (menu-bar-height menu)))))

[sabracrolleton]

If your context menus are long, you may need to recalculate the the necessary top for the form box to ensure part of the context menu does not disappear off the screen, but that is straight-forward.