pli bone montru menueron kun malfermita submenuo; fermu submenuon ankaŭ klakante al iu supra menuero en la tradukdialogo

Author: wdiestel

jsc/rs/ui_dlg.ts

@@ -11,7 +11,7 @@ import * as x from '../x';
 import { preferoj } from '../a/preferoj';
 
 /// import { xpress } from '../x';
-import { DOM, Dialog, Menu, type Menuero, Grup, Slipar, Buton, Elektil, List, Propon, type Term, Valid, Eraro } from '../ui';
+import { DOM, Dialog, Menu, Menuer, type Menuero, Grup, Slipar, Buton, Elektil, List, Propon, type Term, Valid, Eraro } from '../ui';
 import { XmlRedakt } from '../x';
 
 import * as sbl from './sxablonoj';
@@ -1641,6 +1641,10 @@ function shanghu_trd_lingvon(event: Event, ui: Menuero) {
         const t_dlg = x.TradukDialog.dialog("#traduko_dlg");
         if (t_dlg) t_dlg.plenigu(lng,lingvo_nomo);
     }
+    // fermu evtl. ankoraŭ malfermitan submenuon
+    const menuo = Menuer.menuo(ui.menuero);
+    if (menuo) menuo.fermu_submenuojn();
+
     /// DOM.al_datum("#traduko_dlg","last-focus",'');
 }
 

jsc/ui/menu.ts

@@ -11,14 +11,22 @@ export type Menuero = {menuero: HTMLElement};
 type MenuReago = (event: Event, m_ero: Menuero) => void;
 type MenuOpcioj = { eroj?: string, reago?: MenuReago, eniro?: string|HTMLElement };
 
-class Menuer extends UIElement {
+export class Menuer extends UIElement {
     static menuo(element: HTMLElement|string) {
         const menuer = UIElement.obj(element);
         if (menuer instanceof Menuer) return menuer.menuo;
     }
 
+    //public menuo;
+
+    /**
+     * Kreas menueron de menuo
+     * @param element la HTML-elemento reprezentanta la menueron en la GUI
+     * @param menuo  la menuo al kiu apartenas la menuero
+     */
     constructor(element: HTMLElement|string, public menuo: Menu) {
         super(element,{});
+
         // aldonu klakreagon
         DOM.malreago(element,"click"); // forigu evtl. malnovan
         DOM.reago(element,"click",this._click.bind(this.element));
@@ -59,11 +67,13 @@ class Submenu extends Menuer {
         if (sublst instanceof HTMLElement) {
             if (montru) {
                 this.element.classList.remove(UIStil.submenuo_fermita);
+                this.element.classList.add(UIStil.submenuo_malfermita);
                 DOM.kaŝu(sublst,false); // malkaŝu
                 // metu la submenuon tuj apud la menueron
                 sublst.style.left = ""+(this.element.offsetLeft+this.element.offsetWidth)+"px";
                 sublst.style.top = ""+this.element.offsetTop+"px";
             } else {
+                this.element.classList.remove(UIStil.submenuo_malfermita);
                 this.element.classList.add(UIStil.submenuo_fermita);
                 sublst.classList.add(UIStil.menuo);
                 DOM.kaŝu(sublst);    

jsc/ui/uistil.ts

@@ -24,6 +24,7 @@ export class UIStil {
     static menuo = "ui-menu";
     static menudividilo = "ui-menu-divider";
     static submenuo_fermita = "ui-menu-sub-fermita";
+    static submenuo_malfermita = "ui-menu-sub-malfermita";
 
     // en sliparo
     static langetaro = "ui-tabs-nav";

stl/redaktilo-revaj.css

@@ -459,8 +459,11 @@ nav {
 
 #menu li, #traduko_menuo li {
   box-sizing: border-box;
-  /*width: 100%;*/
+  /*width: 100%;
   border-radius: 0 !important;
+  */
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
   /*border-color: var(--nav-brd-clr);*/
   border: none;
 }

stl/ui.css

@@ -196,6 +196,11 @@ ul.ui-menu {
     border: 1px solid var(--nav-brd-clr);
 }
 
+
+.ui-menu-sub-malfermita {
+    background-color: var(--nav-act-bgr-clr);
+}
+
 .ui-menu-sub-fermita::after {
     content: "\00a0\2bc8";
 }