style/global menu: improve the full screen / zoom buttons, refactor

apps/client/src/stylesheets/style.css

@@ -415,7 +415,7 @@ body.desktop .tabulator-popup-container {
 }
 
 .dropdown-menu a:hover:not(.disabled),
-.dropdown-item:hover:not(.disabled, .dropdown-item-container),
+.dropdown-item:hover:not(.disabled, .dropdown-container-item),
 .tabulator-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
@@ -423,9 +423,9 @@ body.desktop .tabulator-popup-container {
     cursor: pointer;
 }
 
-.dropdown-item-container,
+.dropdown-container-item,
-.dropdown-item-container:hover,
+.dropdown-item.dropdown-container-item:hover,
-.dropdown-item-container:active {
+.dropdown-container-item:active {
     background: transparent;
     cursor: default;
 }

apps/client/src/stylesheets/theme-next/base.css

@@ -295,6 +295,20 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
     transform: rotate(270deg);
 }
 
+/* Dropdown item button (used in zoom buttons in global menu) */
+
+li.dropdown-item a.dropdown-item-button {
+    border: unset;
+}
+
+li.dropdown-item a.dropdown-item-button.bx {
+    color: var(--menu-text-color) !important;
+}
+
+li.dropdown-item a.dropdown-item-button:focus-visible {
+    outline: 2px solid var(--input-focus-outline-color) !important;
+}
+
 /*
  * TOASTS
  */

apps/client/src/stylesheets/theme-next/shell.css

@@ -304,18 +304,6 @@ body.layout-horizontal > .horizontal {
     color: var(--tooltip-foreground-color) !important;
 }
 
-/*
- * Global menu
- */
-
- .global-menu div.zoom-buttons a {
-    border: unset;
-}
-
-.global-menu div.zoom-buttons a.bx {
-    color: var(--menu-text-color) !important;
-}
-
 /*
  * Calendar
  */

apps/client/src/widgets/buttons/global_menu.tsx

@@ -161,12 +161,13 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
         return (
             <a
                 ref={linkRef}
+                tabIndex={0}
                 onClick={(e) => {
                     parentComponent?.triggerCommand(command);
                     setTimeout(() => updateZoomState(), 300)
                     e.stopPropagation();
                 }}
-                className={icon}
+                className={`dropdown-item-button ${icon}`}
             >{children}</a>
         )
     }
@@ -174,6 +175,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
     return isElectron() ? (
         <FormListItem
             icon="bx bx-empty"
+            container
             className="zoom-container"
         >
             {t("global_menu.zoom")}

apps/client/src/widgets/react/FormList.tsx

@@ -84,6 +84,7 @@ interface FormListItemOpts {
     disabled?: boolean;
     checked?: boolean | null;
     selected?: boolean;
+    container?: boolean;
     onClick?: (e: MouseEvent) => void;
     triggerCommand?: CommandNames;
     description?: string;
@@ -96,7 +97,7 @@ const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
     fallbackPlacements: [ "right" ]
 }
 
-export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
+export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
     const itemRef = useRef<HTMLLIElement>(null);
 
     if (checked) {
@@ -108,9 +109,9 @@ export function FormListItem({ className, icon, value, title, active, disabled,
     return (
         <li
             ref={itemRef}
-            class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`}
+            class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${container ? "dropdown-container-item": ""} ${className ?? ""}`}
             data-value={value} title={title}
-            tabIndex={0}
+            tabIndex={container ? -1 : 0}
             onClick={onClick}
             data-trigger-command={triggerCommand}
             dir={rtl ? "rtl" : undefined}