Skip to Content

Changes for page Administration

Last modified by Leon Poon on 2025/05/12 14:26
From version 3.1
edited by Leon Poon
on 2019/06/16 14:44
Change comment: Install extension [org.xwiki.platform:xwiki-platform-administration-ui/11.4]
To version 9.1
edited by Leon Poon
on 2025/05/12 14:26
Change comment: Install extension [org.xwiki.platform:xwiki-platform-administration-ui/16.10.7]

Summary

Details

Page properties
Content
... ... @@ -9,7 +9,7 @@
9 9  #set ($adminAction = 'admin')
10 10  #set ($crtCategoryId = "$!{request.category}")
11 11  #if ($crtCategoryId != '')
12 - #set ($crtCategoryId = $mathtool.toInteger($crtCategoryId))
12 + #set ($crtCategoryId = $numbertool.toNumber($crtCategoryId).intValue())
13 13  #end
14 14  #set ($crtSectionId = "$!{request.section}")
15 15  
... ... @@ -87,7 +87,7 @@
87 87  #set ($crtCategory = $NULL)
88 88  #foreach ($category in $adminMenu)
89 89   ## "Standard" URLs and icons for categories
90 - #set ($category.url = $xwiki.getURL($currentDoc, $adminAction, "category=${mathtool.sub($velocityCount, 1)}"))
90 + #set ($category.url = $xwiki.getURL($currentDoc, $adminAction, "category=${mathtool.sub($foreach.count, 1)}"))
91 91   #if ($xwiki.getDocument('XWiki.AdminSheet').getAttachment("${category.id}.png"))
92 92   #set ($category.iconReference = "XWiki.AdminSheet@${category.id}.png")
93 93   #else
... ... @@ -96,7 +96,7 @@
96 96   #set ($category.description = $services.localization.render("admin.${category.id}.description").trim())
97 97   #set ($category.cssClass = "${category.id}Icon")
98 98   #set ($category.name = $services.localization.render("admin.${category.id}").trim())
99 - #if ("$!{crtCategoryId}" != '' && $velocityCount == $mathtool.add($crtCategoryId, 1))
99 + #if ("$!{crtCategoryId}" != '' && $foreach.count == $mathtool.add($crtCategoryId, 1))
100 100   #set ($crtCategory = $category)
101 101   #end
102 102   ##
... ... @@ -232,11 +232,14 @@
232 232  
233 233  #macro (verticalNavigation $menu $options)
234 234   {{html clean="false"}}
235 - <div id="$!options.id" class="panel-group $!options.cssClass" role="tablist" aria-multiselectable="true">
235 + <nav id="$!options.id" class="panel-group $!options.cssClass"
236 + aria-label="$escapetool.xml($services.localization.render('administration.menu.label'))">
236 236   <div class="panel xform">
237 237   <label for="adminsearchmenu" class="hidden">$services.localization.render('search')</label>
238 238   <input type="text" class="form-control panel-group-filter" autocomplete="off" id="adminsearchmenu"
239 - placeholder="$escapetool.xml($services.localization.render('administration.menu.search.hint'))" />
240 + placeholder="$escapetool.xml($services.localization.render('administration.menu.search.hint'))"
241 + ## Disable the search input initially until the JavaScript code that handles the search is ready.
242 + disabled="disabled" />
240 240   </div>
241 241   #foreach ($item in $menu)
242 242   #verticalNavigationItem($item $options)
... ... @@ -246,7 +246,7 @@
246 246   $escapetool.xml($services.localization.render('administration.menu.search.noResults'))
247 247   </div>
248 248   </div>
249 - </div>
252 + </nav>
250 250   {{/html}}
251 251  #end
252 252  
... ... @@ -262,11 +262,14 @@
262 262   #set ($children = [])
263 263   #sortCollectionOfMapsByField($item.children, 'order', 99999, 'asc', $children)
264 264   <div class="panel panel-default">
265 - <a class="panel-heading#if (!$isActive) collapsed#end" role="tab" id="panel-heading-$escapedId"
266 - href="$!item.url" data-toggle="collapse"#if ("$!options.id" != '') data-parent="#$options.id" #end
267 - data-target="#panel-body-$escapedId" aria-expanded="$isActive" aria-controls="panel-body-$escapedId"
268 - title="$!escapetool.xml($item.description)">$!services.icon.renderHTML($item.icon)$escapetool.xml($name)</a>
269 - <div class="panel-collapse collapse#if ($isActive) in#end" role="tabpanel" id="panel-body-$escapedId"
268 + <a class="panel-heading#if (!$isActive) collapsed#end" id="panel-heading-$escapedId"
269 + href="$!item.url" data-toggle="collapse"#if ("$!options.id" != '') data-parent="#$options.id" #end
270 + data-target="#panel-body-$escapedId" aria-expanded="$isActive" aria-controls="panel-body-$escapedId"
271 + title="$!escapetool.xml($item.description)">
272 + <span>$!services.icon.renderHTML($item.icon)$escapetool.xml($name)</span>
273 + <div>$services.icon.renderHTML('caret-down')</div>
274 + </a>
275 + <section class="panel-collapse collapse#if ($isActive) in#end" id="panel-body-$escapedId"
270 270   aria-labelledby="panel-heading-$escapedId">
271 271   <div class="list-group">
272 272   #foreach ($child in $children)
... ... @@ -273,7 +273,7 @@
273 273   #verticalNavigationItem($child $options)
274 274   #end
275 275   </div>
276 - </div>
282 + </section>
277 277   </div>
278 278   #else
279 279   <a class="list-group-item#if ($isActive) active#end" data-id="$escapedId"
... ... @@ -288,7 +288,7 @@
288 288  ## Administration Sheet, used to display a common UI for some wiki features (presentation, users,
289 289  ## groups, rights etc.) at global / space level and also for several applications.
290 290  ##**************************************************************************************************
291 -#if($xcontext.action == 'view')
297 +#if($xcontext.action == 'view' && "$!request.viewer" == '')
292 292   $response.sendRedirect($xwiki.getURL($doc.getFullName(), 'admin', $request.getQueryString()))##
293 293  #else
294 294   $xwiki.jsx.use('XWiki.AdminSheet')##
... ... @@ -331,7 +331,7 @@
331 331   #end
332 332  #end
333 333  (% id="document-title" %)(((
334 - = $services.localization.render("administration.sectionTitle$level", [$sectionName]) =
340 + = $services.localization.render("administration.sectionTitle$level", 'xwiki/2.1', [$sectionName]) =
335 335   ## Display the category/section description below the title.
336 336   #set ($categoryOrSectionId = $crtCategory.id)
337 337   #if ("$!crtSection.id" != '')
... ... @@ -365,11 +365,8 @@
365 365   ##------------------------------------------------------------------------------------------------------------
366 366   ## The Administration allows editing other pages from different applications inside the admin context (UI)
367 367   ##------------------------------------------------------------------------------------------------------------
368 - #if ("$!{request.editmode}" == 'inline' && $xwiki.exists($section))
369 - #set ($discard = $xcontext.setDisplayMode('edit'))
370 - {{html clean="false"}}{{include reference="XWiki.AdminInlineSheet" /}}{{/html}}
371 - #elseif ($xwiki.exists("XWiki.Admin${section}Sheet"))
372 - ## Custom XE administration section
374 + #if ($xwiki.exists("XWiki.Admin${section}Sheet"))
375 + ## Handle known XWiki administration sections
373 373   {{include reference="XWiki.Admin${section}Sheet" /}}
374 374   #elseif ($xwiki.exists($section))
375 375   {{html clean="false"}}#includeForm($section){{/html}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -3,6 +3,8 @@
3 3   $(document).on('click', '.admin-menu a.panel-heading', function(event) {
4 4   event.preventDefault();
5 5   });
6 + // Mark the administration menu as ready for user interaction.
7 + $('.admin-menu').attr('data-ready', true);
6 6  });
7 7  
8 8  /**
... ... @@ -24,7 +24,7 @@
24 24   // Filter the categories.
25 25   panelGroup.find('a.panel-heading').each(function() {
26 26   var panel = $(this).closest('.panel');
27 - var hasVisibleSections = panel.find('.list-group-item').not('.hidden').size() > 0;
29 + var hasVisibleSections = panel.find('.list-group-item').not('.hidden').length > 0;
28 28   var matchesFilterQuery = !filterItem.call($(this), text);
29 29   panel.toggle(hasVisibleSections || matchesFilterQuery);
30 30   if (!hasVisibleSections && matchesFilterQuery) {
... ... @@ -48,7 +48,7 @@
48 48   .next('.panel-collapse').addClass('in').css('height', '');
49 49   }
50 50   // Show/Hide the "No results." message.
51 - var hasVisibleCategories = panelGroup.find('a.panel-heading').filter(':visible').size() > 0;
53 + var hasVisibleCategories = panelGroup.find('a.panel-heading').filter(':visible').length > 0;
52 52   panelGroup.find('.noitems').toggleClass('hidden', hasVisibleCategories);
53 53   };
54 54  
... ... @@ -59,6 +59,8 @@
59 59   var panelGroup = $(this).closest('.panel-group');
60 60   var text = $(this).val().toLowerCase();
61 61   // Schedule a new filter operation.
62 - timeoutId = setTimeout($.proxy(filterPanelGroup, panelGroup, text), 500);
63 - });
64 + timeoutId = setTimeout(filterPanelGroup.bind(panelGroup, text), 500);
65 +
66 + // Finally, enable the search input.
67 + }).prop('disabled', false);
64 64  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -13,10 +13,17 @@
13 13   margin-top: 0;
14 14  }
15 15  
16 -#admin-page-content label > input[type="checkbox"],
16 +#admin-page-content label > input[type="checkbox"] {
17 + vertical-align: middle;
18 +}
19 +
17 17  #admin-page-content label > input[type="radio"] {
18 - vertical-align: bottom;
21 + vertical-align: baseline;
19 19  }
23 +
24 +#admin-page-content .usersorgroupsnames label > input[type="radio"] {
25 + vertical-align: unset;
26 +}
20 20  
21 21  /**
22 22   * Category Overview
... ... @@ -57,10 +57,23 @@
57 57  /* Override general table styles. */
58 58  /* TODO: Move to livetable.css */
59 59  
60 -#userstable td, #groupstable td, #usersandgroupstable td, #alldocstable td {
67 +#usersandgroupstable td, #alldocstable td {
61 61   border-color: transparent;
62 62  }
63 63  
71 +#admin-page-content .usersorgroupsnames {
72 + white-space: nowrap;
73 + /* Triple of the value for the .right column. This is useful to make sure the columns are somewhat balanced when
74 + there is only one right (e.g., extension rights with a default flavor).
75 + Keeping them balanced is useful to make sure the filters are displayed properly, which is especially important
76 + on a subwiki where we have to find a place to display the scope selector. */
77 + width: 27%;
78 +}
79 +
80 +#usersandgroupstable-filters-scope {
81 + white-space: nowrap;
82 +}
83 +
64 64  #usersandgroupstable-filters #name {
65 65   width: 65%;
66 66  }
... ... @@ -79,6 +79,10 @@
79 79   vertical-align: top;
80 80  }
81 81  
102 +.xform #usersandgroupstable select {
103 + width: unset;
104 +}
105 +
82 82  /**
83 83   * Bootstrap's Accordion Menu
84 84   */
... ... @@ -89,18 +89,33 @@
89 89  }
90 90  
91 91  .admin-menu .panel-heading.collapsed {
92 - border-bottom-left-radius: 3px;
93 - border-bottom-right-radius: 3px;
116 + border-bottom-left-radius: 5px;
117 + border-bottom-right-radius: 5px;
94 94  }
95 95  
96 96  .admin-menu a.panel-heading {
97 - display: block;
121 + display: flex;
98 98   font-size: 100%;
99 99  }
124 +
125 +.admin-menu a.panel-heading span {
126 + flex-grow: 1;
127 +}
128 +
100 100  .admin-menu a.panel-heading:not(.collapsed) {
101 101   background-color: $theme.menuBackgroundColor;
102 102   color: $theme.menuLinkColor;
103 103  }
133 +
134 +/* Rotate the carret on collapse. */
135 +.admin-menu a.panel-heading.collapsed > *:last-child {
136 + transform: rotate(90deg);
137 +}
138 +
139 +.admin-menu a.panel-heading > *:last-child {
140 + transition: transform 200ms ease-in-out;
141 +}
142 +
104 104  .admin-menu a.panel-heading:active,
105 105  .admin-menu a.panel-heading:focus,
106 106  .admin-menu a.panel-heading:hover {
... ... @@ -107,13 +107,13 @@
107 107   text-decoration: none;
108 108  }
109 109  
110 -.admin-menu .panel-heading > *:first-child {
149 +.admin-menu .panel-heading > span > *:first-child {
111 111   margin-right: .8em;
112 112  }
113 113  
114 114  .admin-menu .panel-collapse > .list-group:last-child .list-group-item.last {
115 - border-bottom-right-radius: 3px;
116 - border-bottom-left-radius: 3px;
154 + border-bottom-right-radius: 5px;
155 + border-bottom-left-radius: 5px;
117 117  }
118 118  
119 119  .admin-menu .panel.noitems > .panel-heading {