Skip to Content

Changes for page Icon Picker

Last modified by Jan Bürger on 2025/05/06 12:29
From version 5.1
edited by Jan Bürger
on 2025/05/06 12:29
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/17.3.0]
To version 4.1
edited by Benjamin Fischer
on 2025/02/03 11:44
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/17.0.0]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.JanBurger
1 +XWiki.fischer
XWiki.StyleSheetExtension[0]
Code
... ... @@ -10,14 +10,11 @@
10 10  }
11 11  
12 12  .xwikiIconPickerList {
13 - display: grid;
14 - max-width: 100%;
15 - height: 240px;
16 16   overflow-y: scroll;
14 + height: 240px;
15 + display: flex;
16 + flex-wrap: wrap;
17 17   gap: .3em;
18 - padding: .3em;
19 - /* 4 columns, each a fraction of the whole width */
20 - grid-template-columns: repeat(4, 1fr);
21 21  }
22 22  
23 23  /* Avoid stretching on the Loader element. */
... ... @@ -26,21 +26,17 @@
26 26  }
27 27  
28 28  .xwikiIconPickerIcon {
29 - display: flex;
30 - flex-direction: column;
31 - margin: 0;
32 - padding: 0;
26 + height: 80px;
27 + width: 100px;
33 33   text-align: center;
34 34   border-radius: 7px;
35 35   vertical-align: middle;
31 + overflow: hidden;
32 + padding: 10px;
36 36   cursor: pointer;
37 37   background-color: transparent;
38 38  }
39 39  
40 -.xwikiIconPickerIcon * {
41 - padding: 0;
42 -}
43 -
44 44  .xwikiIconPickerIcon:hover {
45 45   background-color: $theme.highlightColor;
46 46  }
... ... @@ -56,6 +56,12 @@
56 56  }
57 57  
58 58  .xwikiIconPickerIcon .xwikiIconPickerIconName {
52 + /* We want to limit the number of lines in the name so that it always fit inside the standard button size.
53 + The value below is just about twice the line-height. */
54 + max-height: 2.9em;
55 + /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */
56 + overflow-y: scroll;
57 + overflow-x: hidden;
59 59   /* Make sure the name wraps onto multiple lines instead of overflowing. */
60 60   white-space: pre-wrap;
61 61   word-break: break-word;