Skip to Content

Changes for page Attachments

Last modified by Drunk Monkey on 2025-09-01 07:39
From version 19.1
edited by Drunk Monkey
on 2025-07-01 07:23
Change comment: Migrated property [contentOrder] from class [XWiki.WikiMacroClass]
To version 20.1
edited by Drunk Monkey
on 2025-09-01 07:39
Change comment: Install extension [org.xwiki.platform:xwiki-platform-attachment-ui/17.7.0]

Summary

Details

Page properties
Content
... ... @@ -38,7 +38,7 @@
38 38   * @param $targetAttachDocument the document to list/save attachments to
39 39   * @param $options generic picker options
40 40   *#
41 -#macro (attachmentPicker_displayAttachmentGallery $targetDocument, $targetAttachDocument, $options)
41 +#macro (_attachmentPicker_displayAttachmentGallery $targetDocument, $targetAttachDocument, $options)
42 42   #set ($currentValue = $targetDocument.getValue($options.property))
43 43   #if ("$!{targetAttachDocument.getAttachment($currentValue)}" == '')
44 44   #set ($currentValue = "$!{options.defaultValue}")
... ... @@ -45,8 +45,8 @@
45 45   #end
46 46   (% class="gallery" %)(((
47 47   ## Only display the upload form if they have edit permission on targetAttachDocument
48 - #attachmentPicker_displayUploadForm($targetDocument, $targetAttachDocument, $options)
49 - #attachmentPicker_displayAttachmentGalleryEmptyValue($targetDocument, $targetAttachDocument, $options, $currentValue)
48 + #_attachmentPicker_displayUploadForm($targetDocument, $targetAttachDocument, $options)
49 + #_attachmentPicker_displayAttachmentGalleryEmptyValue($targetDocument, $targetAttachDocument, $options, $currentValue)
50 50   #if ("$!services.temporaryAttachments" != '')
51 51   #set ($unsortedAttachments = $services.temporaryAttachments.listAllAttachments($targetAttachDocument))
52 52   #set ($sortedAttachments = $collectiontool.sort($unsortedAttachments, "${options.sortAttachmentsBy}"))
... ... @@ -57,7 +57,7 @@
57 57   #set ($extension = $attachment.getFilename())
58 58   #set ($extension = $extension.substring($mathtool.add($extension.lastIndexOf('.'), 1)).toLowerCase())
59 59   #if ($options.filter.size() == 0 || $options.filter.contains($extension))
60 - #attachmentPicker_displayAttachmentBox($attachment $targetDocument $targetAttachDocument, $options $currentValue)
60 + #_attachmentPicker_displayAttachmentBox($attachment $targetDocument $targetAttachDocument, $options $currentValue)
61 61   #end
62 62   #end
63 63   )))
... ... @@ -71,7 +71,7 @@
71 71   * @param $options generic picker options
72 72   * @param $currentValue the currently selected file, used for determining if the box should be highlighted as the current value
73 73   *#
74 -#macro (attachmentPicker_displayAttachmentBox $attachment $targetDocument $targetAttachDocument, $options $currentValue)
74 +#macro (_attachmentPicker_displayAttachmentBox $attachment $targetDocument $targetAttachDocument, $options $currentValue)
75 75   #set ($hasTemporaryAttachment = "$!services.temporaryAttachments" != '')
76 76   #set ($canEdit = $xwiki.hasAccessLevel('edit', $xcontext.user, ${targetAttachDocument.fullName}))
77 77   #set ($isTemporaryAttachment = false)
... ... @@ -89,8 +89,8 @@
89 89   #if ($isTemporaryAttachment)
90 90   #set ($discard = $cssClasses.add('temporary_attachment'))
91 91   #end
92 - #attachmentPicker_displayStartFrame({'value' : $attachment.filename, 'text' : $attachment.filename, 'cssClass' : "${stringtool.join($cssClasses, ' ')}"} $currentValue)
93 - #attachmentPicker_displayAttachmentDetails($attachment $options)
92 + #_attachmentPicker_displayStartFrame({'value' : $attachment.filename, 'text' : $attachment.filename, 'cssClass' : "${stringtool.join($cssClasses, ' ')}"} $currentValue)
93 + #_attachmentPicker_displayAttachmentDetails($attachment $options)
94 94   #set ($returnURL = $escapetool.url($doc.getURL('view', $request.queryString)))
95 95   #set ($deleteURL = $targetAttachDocument.getAttachmentURL($attachment.filename, 'delattachment', "xredirect=${returnURL}&form_token=$!{services.csrf.getToken()}") )
96 96   #set ($viewURL = $targetAttachDocument.getAttachmentURL($attachment.filename) )##{'name' : 'download', 'url' : $viewURL, 'rel' : '__blank'}
... ... @@ -100,9 +100,9 @@
100 100   })))
101 101   ## Delete action is only proposed for users with the edit right on the document.
102 102   ## If the temporary attachment is available, the delete action is only allowed for non-temporary attachments.
103 - #set ($attachmentActions = [{'name' : 'select', 'url' : $selectURL}])
103 + #set ($attachmentActions = [{'name' : 'select', 'url' : $selectURL, 'icon' : 'check', 'extraCssClass' : 'btn btn-xs btn-success'}])
104 104   #if($canDeleteAttachment)
105 - #set ($discard = $attachmentActions.add({'name' : 'delete', 'url' : $deleteURL}))
105 + #set ($discard = $attachmentActions.add({'name' : 'delete', 'url' : $deleteURL, 'icon' : 'cross', 'extraCssClass' : 'btn btn-xs btn-danger'}))
106 106   #end
107 107   #define($additionalContent)
108 108   #if ($isTemporaryAttachment)
... ... @@ -111,7 +111,7 @@
111 111   (% title="$titleMessage" %)$services.icon.render('clock')(%%)
112 112   #end
113 113   #end
114 - #attachmentPicker_displayEndFrame ($attachmentActions $additionalContent)
114 + #_attachmentPicker_displayEndFrame ($attachmentActions $additionalContent)
115 115  #end
116 116  
117 117  #**
... ... @@ -121,9 +121,10 @@
121 121   * the title to display (boxOptions.text), optional extra CSS classnames to put on the box (boxOptions.cssClass)
122 122   * @param $currentValue the currently selected file, used for determining if this attachment should be highlighted as the current value
123 123   *#
124 -#macro (attachmentPicker_displayStartFrame $boxOptions $currentValue)
124 +#macro (_attachmentPicker_displayStartFrame $boxOptions $currentValue)
125 125   (% class="gallery_attachmentbox $!{boxOptions.cssClass} #if ("$!{boxOptions.value}" == $currentValue) current#{end}" %)(((
126 126   (% class="gallery_attachmenttitle" title="$services.rendering.escape($!{boxOptions.value}, 'xwiki/2.1')" %)(((
127 + #if($!{boxOptions.cssClass} == 'gallery_upload')$services.icon.render('add') #end##
127 127   $services.rendering.escape($boxOptions.text, 'xwiki/2.1')
128 128   )))
129 129   (% class="gallery_attachmentframe" %)(((
... ... @@ -136,7 +136,7 @@
136 136   * @param $attachment the target attachment to display
137 137   * @param $options generic picker options
138 138   *#
139 -#macro (attachmentPicker_displayAttachmentDetails $attachment $options)
140 +#macro (_attachmentPicker_displayAttachmentDetails $attachment $options)
140 140   #if ($attachment)
141 141   ## Compute the attachment reference because there's no getter.
142 142   #set ($attachmentReference = $services.model.createAttachmentReference($attachment.document.documentReference,
... ... @@ -169,12 +169,14 @@
169 169   * </dl>
170 170   * @param $additionalContent optional additional content that does not follow the structure of the actions
171 171   *#
172 -#macro (attachmentPicker_displayEndFrame $actions $additionalContent)
173 +#macro (_attachmentPicker_displayEndFrame $actions $additionalContent)
173 173   )))## attachmentframe
174 174   (% class="gallery_actions" %)(((
175 175   #foreach ($action in $actions)
176 176   #set( $actionname = $services.localization.render("${translationPrefix}.actions.${action.name}") )
177 - [[${actionname}>>path:${action.url}||class="tool ${action.name}" title="${actionname}" #if($action.rel) rel="${action.rel}"#end]]##
178 + [[${services.icon.render($action.icon)}(% class="sr-only"%)${actionname}(%%)>>##
179 + path:${action.url}||class="tool ${action.name} $!{action.extraCssClass}"##
180 + title="${actionname}" #if($action.rel) rel="${action.rel}"#end]]##
178 178   #end
179 179   $!additionalContent
180 180   )))## actions
... ... @@ -188,8 +188,8 @@
188 188   * @param $targetAttachDocument the document to upload the attachment to
189 189   * @param $options generic picker options
190 190   *#
191 -#macro (attachmentPicker_displayUploadForm $targetDocument, $targetAttachDocument, $options)
192 -#attachmentPicker_displayStartFrame({
194 +#macro (_attachmentPicker_displayUploadForm $targetDocument, $targetAttachDocument, $options)
195 +#_attachmentPicker_displayStartFrame({
193 193   'value' : $services.localization.render("${translationPrefix}.upload.title"),
194 194   'text' : $services.localization.render("${translationPrefix}.upload.title"),
195 195   'cssClass' : 'gallery_upload'
... ... @@ -236,7 +236,7 @@
236 236   </div>
237 237  </form>
238 238  {{/html}}
239 -#attachmentPicker_displayEndFrame ([])
242 +#_attachmentPicker_displayEndFrame ([])
240 240  #end
241 241  
242 242  #**
... ... @@ -247,7 +247,7 @@
247 247   * @param $options generic picker options
248 248   * @param $currentValue the currently selected file, used for determining if the empty box should be highlighted as the current value
249 249   *#
250 -#macro (attachmentPicker_displayAttachmentGalleryEmptyValue $targetDocument, $targetAttachDocument, $options, $currentValue)
253 +#macro (_attachmentPicker_displayAttachmentGalleryEmptyValue $targetDocument, $targetAttachDocument, $options, $currentValue)
251 251   #if ("$!{options.get('defaultValue')}" != '')
252 252   #set ($reference = ${options.get('defaultValue')})
253 253   #set ($docNameLimit = $reference.indexOf('@'))
... ... @@ -262,11 +262,11 @@
262 262   #set($dcssClass = 'gallery_image')
263 263   #end
264 264   #end
265 - #attachmentPicker_displayStartFrame({'cssClass' : "gallery_emptyChoice $!{dcssClass}", 'text' : $services.localization.render("${translationPrefix}.default"), 'value' : "${options.defaultValue}"} $currentValue)
266 - #attachmentPicker_displayAttachmentDetails($defaultAttachment $options)
268 + #_attachmentPicker_displayStartFrame({'cssClass' : "gallery_emptyChoice $!{dcssClass}", 'text' : $services.localization.render("${translationPrefix}.default"), 'value' : "${options.defaultValue}"} $currentValue)
269 + #_attachmentPicker_displayAttachmentDetails($defaultAttachment $options)
267 267   #set ($returnURL = $escapetool.url($doc.getURL('view', $request.queryString)))
268 268   #set ($selectURL = $targetDocument.getURL(${options.get('docAction')}, "${options.get('classname')}_${options.get('object')}_${options.get('property')}=&form_token=$!{services.csrf.getToken()}"))
269 - #attachmentPicker_displayEndFrame ([{'name' : 'select', 'url' : $selectURL}])
272 + #_attachmentPicker_displayEndFrame ([{'name' : 'select', 'url' : $selectURL, 'icon' : 'check', 'extraCssClass' : 'btn btn-xs btn-success'}])
270 270  #end
271 271  {{/velocity}}
272 272  
... ... @@ -331,7 +331,7 @@
331 331   'versionSummary': $request.versionSummary.equals('true')
332 332   })
333 333   $!targetDocument.use($targetDocument.getObject($options.classname, $options.object))##
334 - #attachmentPicker_displayAttachmentGallery($targetDocument, $targetAttachDocument, $options)
337 + #_attachmentPicker_displayAttachmentGallery($targetDocument, $targetAttachDocument, $options)
335 335  
336 336   #set ($cancelLinkName = $services.rendering.escape($services.rendering.escape($services.localization.render("${translationPrefix}.cancel"), 'xwiki/2.1'), 'xwiki/2.1'))
337 337   #set ($cancelLinkTarget = $services.rendering.escape($services.model.serialize($targetDocument), 'xwiki/2.1'))
XWiki.StyleSheetExtension[0]
Code
... ... @@ -25,9 +25,12 @@
25 25   margin: 0;
26 26  }
27 27  .gallery_attachmentbox {
28 + display: grid;
29 + gap: .2rem;
28 28   background: $theme.pageContentBackgroundColor;
31 + padding: .2rem;
29 29   border: 1px solid $theme.borderColor;
30 - border-radius: 8px;
33 + border-radius: var(--border-radius-base);
31 31   float: left;
32 32   margin: ${boxMargin}px;
33 33   overflow: hidden;
... ... @@ -36,8 +36,6 @@
36 36  }
37 37  .gallery .current {
38 38   background-color: $theme.highlightColor;
39 - border-width: 3px;
40 - margin: 3px;
41 41  }
42 42  .gallery .current .gallery_attachmenttitle {
43 43   font-weight: bold;
... ... @@ -47,9 +47,7 @@
47 47  }
48 48  
49 49  .gallery_attachmenttitle {
50 - background: $theme.backgroundSecondaryColor;
51 - border-bottom: 1px dotted $theme.borderColor;
52 - border-radius: 8px 8px 0px 0px;
51 + grid-area: 1 / 1 / 2 / 2;
53 53   font-size: 85%;
54 54   padding: 3px ${boxPadding}px;
55 55   overflow: hidden;
... ... @@ -62,7 +62,7 @@
62 62  }
63 63  
64 64  .gallery_attachmentframe {
65 - padding: ${boxPadding}px;
64 + grid-area: 2 / 1 / 3 / 3;
66 66   height: ${imgSize}px;
67 67   overflow: hidden;
68 68   position: relative;
... ... @@ -101,39 +101,16 @@
101 101  }
102 102  
103 103  /* Actions */
104 -.gallery_actions {
105 - width: auto;
106 - position: absolute;
107 - bottom: 0px;
108 - right: ${boxPadding}px;
103 +.gallery_actions p {
104 + grid-area: 1 / 2 / 2 / 3;
105 + display: flex;
106 + justify-content: flex-end;
107 + gap: .2rem;
109 109  }
110 110  .gallery_actions .tool {
111 - background: none no-repeat 50% transparent;
112 112   cursor: pointer;
113 113   display: block;
114 - float: left;
115 - height: ${actionsHeight}px;
116 - padding: 0 !important;
117 - overflow: hidden;
118 - text-indent: -1000em;
119 - opacity: 0.6;
120 - width: ${actionsWidth}px;
121 121  }
122 -.gallery_actions .tool:hover {
123 - opacity: 1;
124 -}
125 -.gallery_actions .select {
126 - background-image: url("$xwiki.getSkinFile('icons/silk/tick.png')");
127 -}
128 -.gallery_actions .delete {
129 - background-image: url("$xwiki.getSkinFile('icons/silk/cross.png')");
130 -}
131 -.gallery_actions .view {
132 - background-image: url("$xwiki.getSkinFile('icons/silk/link.png')");
133 -}
134 -.gallery_actions .download {
135 - background-image: url("$xwiki.getSkinFile('icons/silk/arrow_down.png')");
136 -}
137 137  /*--------------------------------------------------*/
138 138  /* Upload form */
139 139  .gallery_upload {
... ... @@ -144,12 +144,6 @@
144 144   background-color: $theme.backgroundSecondaryColor;
145 145  }
146 146  
147 -.gallery_upload .gallery_attachmenttitle {
148 - background-position: 1px center;
149 - background-image: url("$xwiki.getSkinFile('icons/silk/bullet_add.png')");
150 - background-repeat: no-repeat;
151 - padding-left: 16px;
152 -}
153 153  .gallery_upload .gallery_attachmentframe {
154 154   height: auto;
155 155  }
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -97,7 +97,7 @@
97 97  #set ($propValue = "$!{targetdoc.getObject($classname, $object).getProperty($property).value}")
98 98  ##
99 99  
100 -#macro (attachmentPicker_displayAttachment $name $displayImage $withLink $forceElement)
100 +#macro (_attachmentPicker_displayAttachment $name $displayImage $withLink $forceElement)
101 101   #set ($attachment = $targetdoc.getAttachment("$!{name}"))
102 102   #if ("$!{name}" != '' && "$!{attachment}" != '')
103 103   #set ($attachmentRef = $services.model.createAttachmentReference(${targetdoc.documentReference}, ${name}))
... ... @@ -130,7 +130,7 @@
130 130  ## Display the "Choose an attachment" button if they can:
131 131  ## 1. Edit the current page
132 132  ## 2. View the target attachment page. (can be the same page)
133 -#macro (attachmentPicker_displayButton)
133 +#macro (_attachmentPicker_displayButton)
134 134   #if ($targetPermView)
135 135   #set ($queryString = {
136 136   'docname': $doc.fullName,
... ... @@ -155,13 +155,13 @@
155 155  
156 156  {{velocity}}
157 157  #if ("${savemode}" == 'direct')
158 - (% class="attachment-picker" %)(((#attachmentPicker_displayAttachment($propValue $displayImage $link true) #attachmentPicker_displayButton())))
158 + (% class="attachment-picker" %)(((#_attachmentPicker_displayAttachment($propValue $displayImage $link true) #_attachmentPicker_displayButton())))
159 159  #elseif ($xcontext.action == 'inline' || $xcontext.action == 'edit')
160 160   (% class="attachment-picker" %)(((##
161 - #attachmentPicker_displayAttachment($propValue $displayImage false true) #attachmentPicker_displayButton()##
161 + #_attachmentPicker_displayAttachment($propValue $displayImage false true) #_attachmentPicker_displayButton()##
162 162   {{html}}<input type="hidden" name="$escapetool.xml("${classname}_${object}_${property}")" value="$escapetool.xml("${propValue}")" class="property-reference"/>{{/html}}##
163 163   )))
164 164  #else
165 - #attachmentPicker_displayAttachment($propValue $displayImage $link false)
165 + #_attachmentPicker_displayAttachment($propValue $displayImage $link false)
166 166  #end
167 167  {{/velocity}}