domma-cms 1.16.1 → 1.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/admin/js/lib/context-menu-action-help.js +1 -0
- package/admin/js/lib/menu-item-help.js +1 -0
- package/admin/js/templates/context-menu-editor.html +20 -16
- package/admin/js/templates/menu-editor.html +95 -53
- package/admin/js/views/context-menu-editor.js +17 -13
- package/admin/js/views/menu-editor.js +23 -22
- package/admin/js/views/menu-locations.js +3 -2
- package/docs/screenshots/context-menu-action-help.png +0 -0
- package/docs/screenshots/context-menu-help-mobile.png +0 -0
- package/docs/screenshots/menu-option-help.png +0 -0
- package/package.json +1 -1
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
<div class="tab-content">
|
|
24
24
|
<div class="tab-panel active" id="me-items" data-panel="me-items">
|
|
25
25
|
<div class="toolbar mex-toolbar">
|
|
26
|
-
<button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button>
|
|
27
|
-
<button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button>
|
|
28
|
-
<button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button>
|
|
29
|
-
<button type="button" class="btn btn-sm btn-ghost" id="me-add-switcher" data-on-click="addSwitcher" title="The site's theme dots, among the links"><span data-icon="palette"></span> Add theme switcher</button>
|
|
26
|
+
<button type="button" class="btn btn-sm btn-secondary" id="me-add-item" data-on-click="addItem"><span data-icon="plus"></span> Add item</button><span data-help-title="Add item" data-help="Add a new navigation link at the top level, then edit its label, destination, icon, access and appearance. To add a nested link below a particular item, use that row Actions menu. Applying item changes updates the editor; Save keeps the menu."></span>
|
|
27
|
+
<button type="button" class="btn btn-sm btn-ghost" id="me-add-separator" data-on-click="addSeparator"><span data-icon="minus"></span> Add separator</button><span data-help-title="Add separator" data-help="Insert a non-clickable dividing line to separate groups of links. Separators have no destination or children. Drag one to the desired place, or use row actions to move or remove it. Save the menu to keep the change."></span>
|
|
28
|
+
<button type="button" class="btn btn-sm btn-ghost" id="me-add-spacer" data-on-click="addSpacer"><span data-icon="move"></span> Add spacer</button><span data-help-title="Add spacer" data-help="Insert empty space between navigation items. The size picker on its row offers fixed sizes from xs to xl, or flexible to absorb the leftover room. Spacers are structural items without a link or children. They are useful for separating groups or pushing actions apart in a row."></span>
|
|
29
|
+
<button type="button" class="btn btn-sm btn-ghost" id="me-add-switcher" data-on-click="addSwitcher" title="The site's theme dots, among the links"><span data-icon="palette"></span> Add theme switcher</button><span data-help-title="Add theme switcher" data-help="Insert the site theme-switcher dots among the menu links. The themes offered are selected under Theme > Theme switcher; this row chooses their position in the menu. It has no destination or nested links. Save the menu to keep its placement."></span>
|
|
30
30
|
<span class="mex-spacer"></span>
|
|
31
31
|
<small class="mex-note"><span data-bind-text="itemCount.value"></span> items</small>
|
|
32
32
|
<span data-help-title="Items" data-help="Click an item to edit its label, link, icon, who sees it, badge and look. Right-click it (or ⋮, or Shift+F10) to add an item or a sub-item below it, move, indent, duplicate, hide or remove it. Drag the grip to move it, or drop it onto another item to nest it. With an item focused: Enter edits, Alt+Up / Down moves, Alt+Right / Left indents, Delete removes. Changes are kept only when you Save."></span>
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<div class="grid grid-cols-2 dm-pe-grid">
|
|
42
42
|
<div class="form-group">
|
|
43
43
|
<label for="me-variant">Variant
|
|
44
|
-
<span data-help="
|
|
44
|
+
<span data-help-title="Variant" data-help="Choose the colour scheme for this menu. Transparent lets the page show behind the bar; Dark and Light choose a contrasting surface; Default follows the theme. Leaving the choice unset uses the normal menu default. Check the links against your page background, particularly over hero images. This also affects the admin sidebar when editing its menu."></span></label>
|
|
45
45
|
<select id="me-variant" name="variant" class="form-input">
|
|
46
46
|
<option value="">- default -</option>
|
|
47
47
|
<option value="transparent">Transparent</option>
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
</div>
|
|
53
53
|
<div class="form-group">
|
|
54
54
|
<label for="me-position">Position
|
|
55
|
-
<span data-help-title="Position" data-help="Sticky
|
|
55
|
+
<span data-help-title="Position" data-help="Sticky keeps the public navbar at the top once scrolling reaches it. Fixed pins it to the viewport from the start. Static lets it scroll away with the page. Floating creates a separate panel with its own anchor, size and behaviour options below. Position does not move the admin sidebar; its place is controlled by the admin shell."></span></label>
|
|
56
56
|
<select id="me-position" name="position" class="form-input">
|
|
57
57
|
<option value="">- default -</option>
|
|
58
58
|
<option value="sticky">Sticky</option>
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
<div class="form-group">
|
|
65
65
|
<label for="me-orientation">Orientation
|
|
66
|
-
<span data-help="Horizontal
|
|
66
|
+
<span data-help-title="Orientation" data-help="Horizontal arranges links across a row. Vertical stacks them into a column and, in the public navbar slot, creates a side rail with extra side and width controls. The mobile navbar uses its drawer layout instead. Choose the orientation first, then adjust the options that appear for that layout."></span></label>
|
|
67
67
|
<select id="me-orientation" name="orientation" class="form-input">
|
|
68
68
|
<option value="">- default (horizontal) -</option>
|
|
69
69
|
<option value="horizontal">Horizontal</option>
|
|
@@ -72,7 +72,8 @@
|
|
|
72
72
|
<small class="form-hint">Vertical stacks the items into a column - a docked side rail in the navbar slot, an indented list for <code>[menu]</code> and floating panels. Below 993px the navbar always falls back to the mobile drawer.</small>
|
|
73
73
|
</div>
|
|
74
74
|
<div class="form-group">
|
|
75
|
-
<label for="me-align">Alignment
|
|
75
|
+
<label for="me-align">Alignment
|
|
76
|
+
<span data-help-title="Alignment" data-help="Place links at the left, centre or right of a horizontal menu, or spread them evenly across its width. The public navbar centres against the whole bar by default, rather than just the space beside the brand. A menu shortcode in page content defaults to the left. Vertical menus and the mobile drawer ignore this setting."></span></label>
|
|
76
77
|
<select id="me-align" name="align" class="form-input">
|
|
77
78
|
<option value="">- default -</option>
|
|
78
79
|
<option value="left">Left</option>
|
|
@@ -84,8 +85,10 @@
|
|
|
84
85
|
</div>
|
|
85
86
|
<div class="form-group">
|
|
86
87
|
<label>Mobile navbar</label>
|
|
87
|
-
<label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-hamburger" name="mobileHamburgerOnly" style="width:auto;margin:0"> Hamburger only (hide the top bar)
|
|
88
|
-
|
|
88
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-hamburger" name="mobileHamburgerOnly" style="width:auto;margin:0"> Hamburger only (hide the top bar)
|
|
89
|
+
<span data-help-title="Hamburger only (hide the top bar)" data-help="Below 993px, hide the navbar strip and its action icons, leaving a floating hamburger button that opens the navigation drawer. The brand remains unless Hide branding on mobile is also enabled. Search can still be opened with Ctrl+K or Cmd+K. This applies when the menu fills the public navbar slot; it does not change the desktop bar."></span></label>
|
|
90
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-mobile-brand" name="mobileHideBrand" style="width:auto;margin:0"> Hide branding on mobile
|
|
91
|
+
<span data-help-title="Hide branding on mobile" data-help="Hide the public navbar logo and site name below 993px, independently of the hamburger-only option. The saved brand is kept and desktop branding is unaffected. Use this when a small screen needs more room or the page already includes a prominent logo. The site-wide branding switch can hide the brand at every size."></span></label>
|
|
89
92
|
<small class="form-hint">Applies below 993px when this menu fills the navbar slot. Hamburger only leaves a floating menu button and hides the bar and its action icons. Branding stays visible unless hidden separately. Search remains available through Ctrl+K or Cmd+K.</small>
|
|
90
93
|
</div>
|
|
91
94
|
<div class="form-group dm-look-field">
|
|
@@ -99,11 +102,12 @@
|
|
|
99
102
|
<option value="dock">Dock</option>
|
|
100
103
|
<option value="neon">Neon</option>
|
|
101
104
|
</select>
|
|
102
|
-
<label class="flex items-center gap-2" style="margin-top:.4rem"><input type="checkbox" id="me-look-shrink" name="lookShrink" style="width:auto;margin:0"> Shrink when the page scrolls
|
|
105
|
+
<label class="flex items-center gap-2" style="margin-top:.4rem"><input type="checkbox" id="me-look-shrink" name="lookShrink" style="width:auto;margin:0"> Shrink when the page scrolls
|
|
106
|
+
<span data-help-title="Shrink when the page scrolls" data-help="Reduce the desktop navbar size after the visitor starts scrolling, leaving more room for page content. This belongs to the horizontal navbar bar shape settings; it does not shrink a vertical rail, the admin sidebar or the mobile drawer. Visitors who request reduced motion receive the calmer presentation."></span></label>
|
|
103
107
|
</div>
|
|
104
108
|
<div class="form-group dm-look-field">
|
|
105
109
|
<label for="me-look-brand">Branding shape
|
|
106
|
-
<span data-help-title="Branding shape" data-help="
|
|
110
|
+
<span data-help-title="Branding shape" data-help="Choose Standard for the normal logo and name presentation, or Pill to put the brand inside its own rounded capsule. The pill can match a pill navigation bar, but is configured separately. This applies to a horizontal desktop navbar. It does not switch branding off; use Site Settings > Branding for that."></span></label>
|
|
107
111
|
<select id="me-look-brand" name="lookBrand" class="form-input">
|
|
108
112
|
<option value="">Standard</option>
|
|
109
113
|
<option value="pill">Pill</option>
|
|
@@ -127,7 +131,8 @@
|
|
|
127
131
|
</select>
|
|
128
132
|
</div>
|
|
129
133
|
<div class="form-group dm-look-cards-field" style="display:none">
|
|
130
|
-
<label for="me-look-tiles">Icon tiles
|
|
134
|
+
<label for="me-look-tiles">Icon tiles
|
|
135
|
+
<span data-help-title="Icon tiles" data-help="Choose the backgrounds behind icons in card dropdowns. Rainbow assigns successive colours to items; Theme colour uses the site accent; Neutral uses a subdued surface; No tiles shows plain icons. An item with its own Tile colour overrides this menu-wide choice. These options appear when Dropdown style is Cards."></span></label>
|
|
131
136
|
<select id="me-look-tiles" name="lookTiles" class="form-input">
|
|
132
137
|
<option value="">Rainbow - each item the next colour</option>
|
|
133
138
|
<option value="accent">Theme colour</option>
|
|
@@ -138,11 +143,13 @@
|
|
|
138
143
|
</div>
|
|
139
144
|
<div class="form-group dm-look-cards-field" style="display:none">
|
|
140
145
|
<label>Card movement</label>
|
|
141
|
-
<label class="flex items-center gap-2"><input type="checkbox" id="me-look-morph" name="lookMorph" style="width:auto;margin:0"> Slide from one card to the next
|
|
146
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-look-morph" name="lookMorph" style="width:auto;margin:0"> Slide from one card to the next
|
|
147
|
+
<span data-help-title="Slide from one card to the next" data-help="When moving between card dropdowns, animate the next card from the previous card instead of closing one and opening another. This works well with dropdowns that open on hover. Turn it off for a simpler change between panels. It applies to card dropdowns, and is disabled for visitors who request reduced motion."></span></label>
|
|
142
148
|
<small class="form-hint">Moving between dropdowns grows the next card out of the last one instead of closing one and opening another. Pairs well with <strong>Open dropdowns on hover</strong>. Off for visitors who ask for reduced motion.</small>
|
|
143
149
|
</div>
|
|
144
150
|
<div class="form-group dm-vertical-field" style="display:none">
|
|
145
|
-
<label for="me-side">Rail side
|
|
151
|
+
<label for="me-side">Rail side
|
|
152
|
+
<span data-help-title="Rail side" data-help="Dock a vertical public navbar to the left or right edge of the desktop viewport. Its rail reserves space on that side so page content remains beside it. This has no effect on a horizontal bar, a floating panel or the mobile drawer. Use Orientation to choose Vertical before setting the rail side."></span></label>
|
|
146
153
|
<select id="me-side" name="side" class="form-input">
|
|
147
154
|
<option value="left">Left</option>
|
|
148
155
|
<option value="right">Right</option>
|
|
@@ -150,24 +157,30 @@
|
|
|
150
157
|
<small class="form-hint">Which edge a vertical navbar docks to.</small>
|
|
151
158
|
</div>
|
|
152
159
|
<div class="form-group dm-dock-rail-field" style="display:none">
|
|
153
|
-
<label for="me-dock-width">Rail width (px)
|
|
160
|
+
<label for="me-dock-width">Rail width (px)
|
|
161
|
+
<span data-help-title="Rail width (px)" data-help="Set the expanded desktop rail width in pixels, from 160 to 480. A wider rail gives long labels more room and takes more width from the page. The page gutter follows the expanded rail width. Leaving it empty uses 240px. This is for a docked vertical navbar, not a floating panel."></span></label>
|
|
154
162
|
<input type="number" id="me-dock-width" name="dockWidth" class="form-input" min="160" max="480" step="10" placeholder="240">
|
|
155
163
|
<small class="form-hint">How wide the docked rail is, 160 to 480. The page's gutter follows it.</small>
|
|
156
164
|
</div>
|
|
157
165
|
<div class="form-group dm-dock-rail-field" style="display:none">
|
|
158
166
|
<label>Rail behaviour</label>
|
|
159
|
-
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-collapsible" name="dockCollapsible" style="width:auto;margin:0"> Collapsible to icons
|
|
160
|
-
|
|
161
|
-
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-
|
|
167
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-collapsible" name="dockCollapsible" style="width:auto;margin:0"> Collapsible to icons
|
|
168
|
+
<span data-help-title="Collapsible to icons" data-help="Add a control that switches the desktop rail between full labels and a narrow strip of icons. In the collapsed rail, labels remain available as tooltips. Each visitor retains their own choice in their browser. Give items clear icons before enabling this. Below 993px the navbar uses the usual mobile drawer."></span></label>
|
|
169
|
+
<label class="flex items-center gap-2 dm-dock-collapsed-field"><input type="checkbox" id="me-dock-collapsed" name="dockCollapsed" style="width:auto;margin:0"> Start collapsed
|
|
170
|
+
<span data-help-title="Start collapsed" data-help="Start a collapsible desktop rail in its narrow icon-only state for a visitor with no saved preference. Visitors can expand it with the rail control, and their own saved choice takes precedence on later visits. Enable Collapsible to icons first. This does not set the initial state of the mobile drawer."></span></label>
|
|
171
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-autohide" name="dockAutohide" style="width:auto;margin:0"> Autohide off-screen
|
|
172
|
+
<span data-help-title="Autohide off-screen" data-help="Slide the desktop rail off its edge when it is not in use, leaving a small strip to reveal it. Moving the pointer to the edge, tapping the strip or focusing a control in the rail brings it back. The page uses the released width. This is separate from collapsing to icons, and does not replace the mobile drawer."></span></label>
|
|
162
173
|
<small class="form-hint"><strong>Collapsible</strong> adds a toggle that shrinks the rail to its icons (labels become tooltips); each visitor's choice is remembered. <strong>Autohide</strong> slides the rail off its edge, leaving a strip - it comes back when the pointer reaches that edge, on a tap, or when focus moves into it - and the page takes the full width. Desktop only: below 993px the menu is the usual drawer.</small>
|
|
163
174
|
</div>
|
|
164
175
|
<div class="form-group dm-dock-bar-field" style="display:none">
|
|
165
176
|
<label>Bar behaviour</label>
|
|
166
|
-
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-hideOnScroll" name="dockHideOnScroll" style="width:auto;margin:0"> Hide on scroll
|
|
177
|
+
<label class="flex items-center gap-2"><input type="checkbox" id="me-dock-hideOnScroll" name="dockHideOnScroll" style="width:auto;margin:0"> Hide on scroll
|
|
178
|
+
<span data-help-title="Hide on scroll" data-help="Hide the horizontal navbar while the visitor scrolls down and reveal it as soon as they scroll up. This gives reading space while keeping navigation easy to recover. It works best with Sticky positioning. It controls the public bar, rather than a vertical rail, floating panel or the admin sidebar."></span></label>
|
|
167
179
|
<small class="form-hint">The bar slides away while the page scrolls down and comes back as soon as it scrolls up. Best with Position <strong>Sticky</strong>.</small>
|
|
168
180
|
</div>
|
|
169
181
|
<div class="form-group dm-float-field" style="display:none">
|
|
170
|
-
<label for="me-float-anchor">Float anchor
|
|
182
|
+
<label for="me-float-anchor">Float anchor
|
|
183
|
+
<span data-help-title="Float anchor" data-help="Choose the viewport corner or side that the floating menu starts from. Top and bottom corners anchor both directions; the left and right edge options centre the panel vertically. The X and Y offsets add space from that anchor. These are starting values: a movable panel can retain a visitor-selected position."></span></label>
|
|
171
184
|
<select id="me-float-anchor" name="floatAnchor" class="form-input">
|
|
172
185
|
<option value="TL">Top left</option>
|
|
173
186
|
<option value="TR">Top right</option>
|
|
@@ -178,23 +191,28 @@
|
|
|
178
191
|
</select>
|
|
179
192
|
</div>
|
|
180
193
|
<div class="form-group dm-float-field" style="display:none">
|
|
181
|
-
<label for="me-float-offsetX">Float offset X (px)
|
|
194
|
+
<label for="me-float-offsetX">Float offset X (px)
|
|
195
|
+
<span data-help-title="Float offset X (px)" data-help="Set the horizontal distance in pixels between the floating panel and its selected viewport edge. For a right anchor the gap is measured from the right; for a left anchor it is measured from the left. Leaving it empty uses 16px. A visitor who has already moved the panel may see their remembered position instead."></span></label>
|
|
182
196
|
<input type="number" id="me-float-offsetX" name="floatOffsetX" class="form-input" placeholder="16" min="0" max="4000">
|
|
183
197
|
</div>
|
|
184
198
|
<div class="form-group dm-float-field" style="display:none">
|
|
185
|
-
<label for="me-float-offsetY">Float offset Y (px)
|
|
199
|
+
<label for="me-float-offsetY">Float offset Y (px)
|
|
200
|
+
<span data-help-title="Float offset Y (px)" data-help="Set the vertical gap in pixels for the floating panel relative to its anchor. Top anchors measure from the top and bottom anchors from the bottom; side-centred anchors start around the vertical centre. Leaving it empty uses 16px. Treat this as the initial position when visitors are allowed to move the panel."></span></label>
|
|
186
201
|
<input type="number" id="me-float-offsetY" name="floatOffsetY" class="form-input" placeholder="16" min="0" max="4000">
|
|
187
202
|
</div>
|
|
188
203
|
<div class="form-group dm-float-field" style="display:none">
|
|
189
|
-
<label for="me-float-width">Float width (px)
|
|
204
|
+
<label for="me-float-width">Float width (px)
|
|
205
|
+
<span data-help-title="Float width (px)" data-help="Set the initial floating panel width in pixels, from 120 to 600. Leaving it empty lets the layout choose its width. Allow space for labels and nested items. If resizing is enabled, a returning visitor may see their remembered size. Below 768px the panel returns to the page flow instead of floating."></span></label>
|
|
190
206
|
<input type="number" id="me-float-width" name="floatWidth" class="form-input" placeholder="auto" min="120" max="600">
|
|
191
207
|
</div>
|
|
192
208
|
<div class="form-group dm-float-field" style="display:none">
|
|
193
|
-
<label for="me-float-radius">Corner rounding (px)
|
|
209
|
+
<label for="me-float-radius">Corner rounding (px)
|
|
210
|
+
<span data-help-title="Corner rounding (px)" data-help="Set the rounding of the floating panel corners in pixels. Use 0 for square corners, a modest value for a soft rectangle, or a larger value for a more rounded panel. This changes the panel outline, not each link. Leave it empty to use the component default."></span></label>
|
|
194
211
|
<input type="number" id="me-float-radius" name="floatRadius" class="form-input" placeholder="theme default" min="0" max="48">
|
|
195
212
|
</div>
|
|
196
213
|
<div class="form-group dm-float-field" style="display:none">
|
|
197
|
-
<label for="me-float-shadow">Shadow
|
|
214
|
+
<label for="me-float-shadow">Shadow
|
|
215
|
+
<span data-help-title="Shadow" data-help="Choose how strongly the floating panel stands away from the page. None removes the shadow; larger choices create a more pronounced edge and depth. This affects the panel rather than individual items. Leave it on the default to follow the normal component styling, and check it against both light and dark page backgrounds."></span></label>
|
|
198
216
|
<select id="me-float-shadow" name="floatShadow" class="form-input">
|
|
199
217
|
<option value="">- theme default -</option>
|
|
200
218
|
<option value="none">None</option>
|
|
@@ -205,7 +223,8 @@
|
|
|
205
223
|
</select>
|
|
206
224
|
</div>
|
|
207
225
|
<div class="form-group dm-float-field" style="display:none">
|
|
208
|
-
<label for="me-float-accent">Accent colour
|
|
226
|
+
<label for="me-float-accent">Accent colour
|
|
227
|
+
<span data-help-title="Accent colour" data-help="Choose the accent used on the floating panel border and the stripe along its leading edge. Theme colours follow the active theme; Custom lets you choose a hex colour. Leaving it unset keeps the normal styling. This is separate from link text, badges and the menu highlight colour."></span></label>
|
|
209
228
|
<div class="me-colour-control">
|
|
210
229
|
<select id="me-float-accent" name="floatAccent" class="form-input">
|
|
211
230
|
<option value="">- none -</option>
|
|
@@ -222,12 +241,14 @@
|
|
|
222
241
|
<small class="form-hint">Tints the panel border and draws a stripe down its leading edge.</small>
|
|
223
242
|
</div>
|
|
224
243
|
<div class="form-group dm-float-field" style="display:none">
|
|
225
|
-
<label for="me-float-opacity">Panel opacity (%)
|
|
244
|
+
<label for="me-float-opacity">Panel opacity (%)
|
|
245
|
+
<span data-help-title="Panel opacity (%)" data-help="Set the floating panel surface opacity from 20 to 100 percent. At 100 the surface is solid. Lower values let the page show through with a blurred backdrop; labels remain fully opaque. Busy backgrounds can reduce readability, so check the result over real content. Leaving the field empty uses 100 percent."></span></label>
|
|
226
246
|
<input type="number" id="me-float-opacity" name="floatOpacity" class="form-input" placeholder="100" min="20" max="100">
|
|
227
247
|
<small class="form-hint">Below 100 the panel surface goes translucent with a blur behind it. Text stays fully opaque.</small>
|
|
228
248
|
</div>
|
|
229
249
|
<div class="form-group dm-float-field" style="display:none">
|
|
230
|
-
<label for="me-float-title">Panel title
|
|
250
|
+
<label for="me-float-title">Panel title
|
|
251
|
+
<span data-help-title="Panel title" data-help="Set the text in the floating panel bar beside its drag handle and collapse control. Leaving it blank uses the menu name. Keep it short enough to fit a narrow panel. This is a visible panel title, whereas the menu Description is administrative metadata. It does not rename the menu or its slug."></span></label>
|
|
231
252
|
<input type="text" id="me-float-title" name="floatTitle" class="form-input" placeholder="menu name" maxlength="60">
|
|
232
253
|
<small class="form-hint">Shown in the panel's bar, next to the drag handle and hamburger. Blank uses the menu's own name.</small>
|
|
233
254
|
</div>
|
|
@@ -236,19 +257,23 @@
|
|
|
236
257
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
|
|
237
258
|
<input type="checkbox" id="me-float-collapsible" name="floatCollapsible" style="width:auto;margin:0">
|
|
238
259
|
Collapsible - a hamburger button folds the panel away and back
|
|
239
|
-
|
|
260
|
+
|
|
261
|
+
<span data-help-title="Collapsible - a hamburger button folds the panel away and back" data-help="Add a hamburger control that folds the floating menu content away and opens it again. Each visitor keeps their own collapsed state in their browser. Start collapsed supplies the initial choice for new visitors. On screens below 768px, the panel returns to the page flow but collapsing is still available."></span></label>
|
|
240
262
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer;margin-left:1.5rem" class="dm-float-collapsed-field">
|
|
241
263
|
<input type="checkbox" id="me-float-collapsed" name="floatCollapsed" style="width:auto;margin:0">
|
|
242
264
|
Start collapsed
|
|
243
|
-
|
|
265
|
+
|
|
266
|
+
<span data-help-title="Start collapsed" data-help="Start a collapsible floating panel folded away for a visitor who has not made a choice yet. The visitor can open it with the panel hamburger control, and a previously saved visitor choice takes precedence. This setting requires Collapsible and does not delete or disable any menu items."></span></label>
|
|
244
267
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
|
|
245
268
|
<input type="checkbox" id="me-float-movable" name="floatMovable" style="width:auto;margin:0">
|
|
246
269
|
Movable - visitors drag the panel by its bar
|
|
247
|
-
|
|
270
|
+
|
|
271
|
+
<span data-help-title="Movable - visitors drag the panel by its bar" data-help="Let visitors drag the floating panel by its top bar to a position that suits their page view. Their position is saved in their own browser; it does not change these site defaults for anyone else. Double-clicking the bar resets the panel. Below 768px the panel returns to normal page flow."></span></label>
|
|
248
272
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
|
|
249
273
|
<input type="checkbox" id="me-float-resizable" name="floatResizable" style="width:auto;margin:0">
|
|
250
274
|
Resizable - visitors drag the panel's bottom-right corner
|
|
251
|
-
|
|
275
|
+
|
|
276
|
+
<span data-help-title="Resizable - visitors drag the panel's bottom-right corner" data-help="Let visitors drag the floating panel bottom-right corner to change its size. Their chosen size is remembered in their own browser, while these settings remain the starting values for other visitors. Double-clicking the panel bar resets it. Resizing does not apply when the panel returns to page flow below 768px."></span></label>
|
|
252
277
|
<small class="form-hint">Each visitor's own position, size and collapsed state are remembered in their browser; the settings above stay the starting point. Double-clicking the bar resets a panel. Below 768px panels return to the page flow, so only collapsing applies there.</small>
|
|
253
278
|
</div>
|
|
254
279
|
<div class="form-group">
|
|
@@ -256,24 +281,27 @@
|
|
|
256
281
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
|
|
257
282
|
<input type="checkbox" id="me-appearOnHover" name="appearOnHover" style="width:auto;margin:0">
|
|
258
283
|
Reveal dropdowns on hover (desktop navbar; click still works)
|
|
259
|
-
|
|
284
|
+
|
|
285
|
+
<span data-help-title="Reveal dropdowns on hover (desktop navbar; click still works)" data-help="Open desktop navbar dropdowns when the pointer moves over their parent items. Clicking still works, and touch users continue to use tap controls. This can make a large navigation menu faster to browse, especially with card dropdowns. Leave it off when you want opening a dropdown to require an explicit click."></span></label>
|
|
260
286
|
</div>
|
|
261
287
|
<div class="form-group">
|
|
262
288
|
<label for="me-highlight-hover">Hover effect
|
|
263
|
-
<span data-help-title="
|
|
289
|
+
<span data-help-title="Hover effect" data-help="Choose how links react when the pointer moves over them. None removes the hover effect; the other choices add the named visual treatment. This menu-wide default applies wherever the menu is drawn, including navbar, footer, shortcode and admin sidebar. An individual item can override it. When selected controls the current-page marker separately. Colour change tints the text; Underline and Overline add a line below or above it; Background tint adds a coloured wash; Darkened darkens the item; Uppercase changes letter case; Grow enlarges it; Breathe pulses its scale; Glow adds a soft glow. None leaves it still."></span></label>
|
|
264
290
|
<!-- Options are filled from HIGHLIGHT_HOVER in menu-decor.mjs on mount,
|
|
265
291
|
so this list and the per-item editor's always match. -->
|
|
266
292
|
<select id="me-highlight-hover" name="highlightHover" class="form-input"></select>
|
|
267
293
|
<small class="form-hint">What an item does under the pointer. Applies wherever this menu is drawn - navbar, footer, <code>[menu]</code> and the admin sidebar. Any single item can override this in its own editor, under Highlighting.</small>
|
|
268
294
|
</div>
|
|
269
295
|
<div class="form-group">
|
|
270
|
-
<label for="me-highlight-active">When selected
|
|
296
|
+
<label for="me-highlight-active">When selected
|
|
297
|
+
<span data-help-title="When selected" data-help="Choose how the link to the page currently being viewed is marked. This lets visitors recognise their place in the navigation. Leaving the choice unset uses the normal default; None explicitly removes the selected effect. An individual item can override this setting in its editor. This is separate from the effect shown while hovering. Bold increases text weight; Underline and Overline add a line; Background tint adds a wash; Darkened darkens the link; Filled pill encloses it in a rounded surface. None removes the selected marker."></span></label>
|
|
271
298
|
<!-- Filled from HIGHLIGHT_ACTIVE in menu-decor.mjs on mount. -->
|
|
272
299
|
<select id="me-highlight-active" name="highlightActive" class="form-input"></select>
|
|
273
300
|
<small class="form-hint">How the item pointing at the page you are on is marked out. Any single item can override this in its own editor, under Highlighting.</small>
|
|
274
301
|
</div>
|
|
275
302
|
<div class="form-group">
|
|
276
|
-
<label for="me-highlight-accent">Highlight colour
|
|
303
|
+
<label for="me-highlight-accent">Highlight colour
|
|
304
|
+
<span data-help-title="Highlight colour" data-help="Choose the colour used by hover and selected-item effects throughout this menu. A theme colour follows the theme; Custom supplies a fixed hex colour. Leaving it empty uses the normal accent. An item can override the colour in its own editor. This does not set the floating panel accent or the badge colour."></span></label>
|
|
277
305
|
<div class="me-colour-control">
|
|
278
306
|
<select id="me-highlight-accent" name="highlightAccent" class="form-input">
|
|
279
307
|
<option value="">- theme primary -</option>
|
|
@@ -295,46 +323,55 @@
|
|
|
295
323
|
<label style="display:flex;align-items:center;gap:.5rem;font-weight:400;cursor:pointer">
|
|
296
324
|
<input type="checkbox" id="me-entrance-enabled" name="entranceEnabled" style="width:auto;margin:0">
|
|
297
325
|
Bring the items in one after another
|
|
298
|
-
|
|
326
|
+
|
|
327
|
+
<span data-help-title="Bring the items in one after another" data-help="Reveal menu items one after another instead of presenting the whole list at once. Set the animation, spacing between starts and duration below. Dropdowns and footer groups reveal their own items when shown. Visitors who request reduced motion see items immediately, regardless of this setting."></span></label>
|
|
299
328
|
<small class="form-hint">Applies wherever this menu is drawn on the site - navbar, footer, <code>[menu]</code> and floating panels.</small>
|
|
300
329
|
</div>
|
|
301
330
|
<div class="form-group dm-entrance-field" style="display:none">
|
|
302
|
-
<label for="me-entrance-animation">Entrance animation
|
|
331
|
+
<label for="me-entrance-animation">Entrance animation
|
|
332
|
+
<span data-help-title="Entrance animation" data-help="Choose the movement used as each menu item first appears. This controls entrance only, rather than hover or the selected-page highlight. Use the delay and duration fields to set its pacing. Reduced-motion visitors see the items immediately. The setting is available when staggered entrance is enabled. Fade changes opacity; Slide up and Slide down move vertically; the left and right choices enter from the named side; Zoom grows into place; Pop adds a bounce; Flip rotates down; Blur sharpens into focus."></span></label>
|
|
303
333
|
<!-- Filled from ENTRANCE_ANIMATIONS in menu-decor.mjs on mount. -->
|
|
304
334
|
<select id="me-entrance-animation" name="entranceAnimation" class="form-input"></select>
|
|
305
335
|
</div>
|
|
306
336
|
<div class="form-group dm-entrance-field" style="display:none">
|
|
307
|
-
<label for="me-entrance-stagger">Delay between items (ms)
|
|
337
|
+
<label for="me-entrance-stagger">Delay between items (ms)
|
|
338
|
+
<span data-help-title="Delay between items (ms)" data-help="Set the delay in milliseconds between the start of one item entrance and the next. Smaller values make a long menu appear sooner; larger values make the sequence more noticeable. This is the gap between starts, not the animation duration. Visitors requesting reduced motion do not wait for the sequence. The accepted range is 0 to 1000ms, and the default is 60ms. At 0, items begin together."></span></label>
|
|
308
339
|
<input type="number" id="me-entrance-stagger" name="entranceStagger" class="form-input" placeholder="60" min="0" max="1000" step="10">
|
|
309
340
|
</div>
|
|
310
341
|
<div class="form-group dm-entrance-field" style="display:none">
|
|
311
|
-
<label for="me-entrance-duration">Each item's animation (ms)
|
|
342
|
+
<label for="me-entrance-duration">Each item's animation (ms)
|
|
343
|
+
<span data-help-title="Each item's animation (ms)" data-help="Set how long each item entrance animation takes, in milliseconds. This is independent of the delay between item starts, so animations may overlap. Shorter values feel quicker; longer values create a more gradual reveal. This only applies when staggered entrance is enabled and the visitor has not requested reduced motion. The accepted range is 50 to 3000ms, and the default is 400ms."></span></label>
|
|
312
344
|
<input type="number" id="me-entrance-duration" name="entranceDuration" class="form-input" placeholder="400" min="50" max="3000" step="50">
|
|
313
345
|
</div>
|
|
314
346
|
<div class="form-group">
|
|
315
347
|
<label for="me-class">CSS classes
|
|
316
|
-
<span data-help-title="CSS classes" data-help="
|
|
348
|
+
<span data-help-title="CSS classes" data-help="Add your own CSS class names, separated by spaces, to this menu outer element: the navbar, footer column or menu shortcode navigation. Enter names without leading dots, then write rules in Custom CSS. Each item can also have classes in its own editor. Classes add styling hooks; they do not supply styles by themselves."></span></label>
|
|
317
349
|
<input type="text" id="me-class" name="class" class="form-input" placeholder="site-nav is-compact" autocomplete="off" spellcheck="false">
|
|
318
350
|
<small class="form-hint">Letters, digits, hyphens and underscores; no dots. For styling in Custom CSS.</small>
|
|
319
351
|
</div>
|
|
320
352
|
<div class="form-group">
|
|
321
|
-
<label for="me-fontFamily">Font family
|
|
353
|
+
<label for="me-fontFamily">Font family
|
|
354
|
+
<span data-help-title="Font family" data-help="Set a CSS font family for menu labels, such as Arial, sans-serif. This field selects from fonts already available to the page; it does not download a font. Leave it blank to inherit the site typography. The style applies to the menu, including the admin sidebar when this is its menu."></span></label>
|
|
322
355
|
<input type="text" id="me-fontFamily" name="fontFamily" class="form-input" placeholder="Inter">
|
|
323
356
|
</div>
|
|
324
357
|
<div class="form-group">
|
|
325
|
-
<label for="me-fontSize">Font size
|
|
358
|
+
<label for="me-fontSize">Font size
|
|
359
|
+
<span data-help-title="Font size" data-help="Set the menu label size using a CSS value such as 16px or 1rem. A rem value follows the root text size; pixels give a fixed size. Leave it blank to inherit the normal menu typography. Check long labels and mobile navigation after changing this; icon size is controlled separately."></span></label>
|
|
326
360
|
<input type="text" id="me-fontSize" name="fontSize" class="form-input" placeholder="14 (px assumed) or 1rem">
|
|
327
361
|
</div>
|
|
328
362
|
<div class="form-group">
|
|
329
|
-
<label for="me-fontWeight">Font weight
|
|
363
|
+
<label for="me-fontWeight">Font weight
|
|
364
|
+
<span data-help-title="Font weight" data-help="Set the thickness of menu label text using a CSS weight such as 400 for regular, 600 for semibold or 700 for bold. The chosen font must provide the weight to render it accurately. Leave it blank to inherit the normal menu weight. This does not change icon stroke thickness."></span></label>
|
|
330
365
|
<input type="text" id="me-fontWeight" name="fontWeight" class="form-input" placeholder="500">
|
|
331
366
|
</div>
|
|
332
367
|
<div class="form-group">
|
|
333
|
-
<label for="me-letterSpacing">Letter spacing
|
|
368
|
+
<label for="me-letterSpacing">Letter spacing
|
|
369
|
+
<span data-help-title="Letter spacing" data-help="Adjust the space between letters using a CSS value such as 0.02em or 1px. An em value scales with the menu text size. Small positive values can help short uppercase labels; large values make longer labels harder to fit. Leave it blank to inherit the normal spacing."></span></label>
|
|
334
370
|
<input type="text" id="me-letterSpacing" name="letterSpacing" class="form-input" placeholder="0.01 (em assumed) or 1px">
|
|
335
371
|
</div>
|
|
336
372
|
<div class="form-group">
|
|
337
|
-
<label for="me-iconSize">Icon size
|
|
373
|
+
<label for="me-iconSize">Icon size
|
|
374
|
+
<span data-help-title="Icon size" data-help="Set the size of menu icons using a CSS size such as 18px. This is independent of the label font size. Keep icons large enough to recognise, especially when a rail can collapse to icons. Leave it blank to use the menu default. It does not choose the icon assigned to each item."></span></label>
|
|
338
375
|
<input type="text" id="me-iconSize" name="iconSize" class="form-input" placeholder="15 (px assumed) or 1.25em">
|
|
339
376
|
</div>
|
|
340
377
|
</div>
|
|
@@ -357,12 +394,14 @@
|
|
|
357
394
|
<small class="form-hint">Leave unset for no binding - this menu then only renders where it is mapped or where a <code>[menu]</code> shortcode places it.</small>
|
|
358
395
|
</div>
|
|
359
396
|
<div class="form-group">
|
|
360
|
-
<label for="me-bind-projects">Projects
|
|
397
|
+
<label for="me-bind-projects">Projects
|
|
398
|
+
<span data-help-title="Projects" data-help="Choose the projects whose pages should use this menu in the selected slot. Use Ctrl-click or Cmd-click to select multiple projects. The menu must also have a Slot selected for this binding to take effect. Page patterns can supply additional matches. This controls where the menu appears, rather than who is allowed to see each item."></span></label>
|
|
361
399
|
<select id="me-bind-projects" name="bindProjects" class="form-input" multiple size="5"></select>
|
|
362
400
|
<small class="form-hint">Applies on every page belonging to the selected projects. Ctrl/Cmd-click to select more than one.</small>
|
|
363
401
|
</div>
|
|
364
402
|
<div class="form-group col-span-2">
|
|
365
|
-
<label for="me-bind-pages">Pages
|
|
403
|
+
<label for="me-bind-pages">Pages
|
|
404
|
+
<span data-help-title="Pages" data-help="Enter one URL path or path pattern per line, for example /about or /docs/*. The trailing wildcard matches pages beneath that path. Use the picker and Add to insert an existing page, then edit patterns here if needed. Together with the selected Slot, these rules override the usual menu location on matching pages."></span></label>
|
|
366
405
|
<div class="me-pages-picker">
|
|
367
406
|
<select id="me-bind-page-pick" class="form-input"></select>
|
|
368
407
|
<button type="button" class="btn btn-sm btn-secondary" id="me-bind-page-add"><span data-icon="plus"></span> Add</button>
|
|
@@ -380,20 +419,23 @@
|
|
|
380
419
|
<div class="grid grid-cols-2 dm-pe-grid">
|
|
381
420
|
<div class="form-group">
|
|
382
421
|
<label for="me-slug">Slug <span class="required">*</span>
|
|
383
|
-
<span data-help="The
|
|
422
|
+
<span data-help-title="Slug *" data-help="The unique ID used for the menu filename and in a [menu slug="..."] shortcode. Use a stable, descriptive name. Renaming it moves the menu record and rewrites mapped menu locations, but check any hand-authored shortcodes that name the old slug. The Name field is a separate human-readable label."></span></label>
|
|
384
423
|
<input type="text" id="me-slug" name="slug" class="form-input" required>
|
|
385
424
|
<small class="form-hint">Lowercase alphanumeric + hyphen - affects file name</small>
|
|
386
425
|
</div>
|
|
387
426
|
<div class="form-group">
|
|
388
|
-
<label for="me-name">Name <span class="required">*</span
|
|
427
|
+
<label for="me-name">Name <span class="required">*</span>
|
|
428
|
+
<span data-help-title="Name" data-help="Give this menu a recognisable name for the admin list and editor. The name does not change its slug, URL destinations or location mapping. A floating panel uses it as its title when Panel title is empty. Choose a name that describes its purpose, such as Main navigation or Members sidebar."></span></label>
|
|
389
429
|
<input type="text" id="me-name" name="name" class="form-input" required>
|
|
390
430
|
</div>
|
|
391
431
|
<div class="form-group col-span-2">
|
|
392
|
-
<label for="me-description">Description
|
|
432
|
+
<label for="me-description">Description
|
|
433
|
+
<span data-help-title="Description" data-help="Add an administrative note explaining what the menu is for or where it is used. This helps distinguish similar menus in the admin. It is separate from an item description, which can appear inside a card dropdown. Changing this does not alter the menu links, slug or placement."></span></label>
|
|
393
434
|
<textarea id="me-description" name="description" class="form-input" rows="2"></textarea>
|
|
394
435
|
</div>
|
|
395
436
|
<div class="form-group col-span-2">
|
|
396
|
-
<label for="me-project">Project
|
|
437
|
+
<label for="me-project">Project
|
|
438
|
+
<span data-help-title="Project" data-help="Associate this menu with a project for organisation in the admin. This metadata is separate from Binding: selecting a project here does not by itself place the menu on that project pages. Use the Binding tab to choose a slot and the page or project rules that decide where it appears."></span></label>
|
|
397
439
|
<select id="me-project" name="project" class="form-input"></select>
|
|
398
440
|
<small class="form-hint">Tag this menu to a project so it appears under that project's sidebar entry</small>
|
|
399
441
|
</div>
|