There are 2 comments.
 
 
Favorites Application / cid:jira-generated-image-avatar-0b3bbf31-79a0-4baa-9ca7-0a6d3337d167 XFAV-15 Open

Add bullets to improve readability of Favourited pages

 
View issue   ยท   Add comment
 

2 comments

 
cid:jira-generated-image-avatar-3525ac82-1fbc-439b-830d-d8ef2e08f6f9 Julia Gilmore on 09/Sep/24 15:45
 

Update! 

I edited the velocity script for the application to specify that each item in the ordered list <li> should have a bullet point. I did this by editing the HTML to assign an ordered list style - see addition to code in red. 

{{velocity}}
#macro(displayFavoritesList $favoritesList $FavoritesSourceDoc)
<ul>
#set ($itemsNumberToDisplay = 5)
#foreach ($favoritesDocFullName in $favoritesList)
  #set ($favoritesDocRef = $services.model.resolveDocument($favoritesDocFullName, $FavoritesSourceDoc.documentReference))
  #if ($xwiki.exists($favoritesDocRef))
    #set ($favoritesDoc = $xwiki.getDocument($favoritesDocRef))
    <li style="list-style-type: disc;" #if($foreach.index >= $itemsNumberToDisplay)class="hidden" #end>
        <a href="$!escapetool.xml($favoritesDoc.URL)">$favoritesDoc.displayTitle</a>
    </ul>
  #end
#end
#if ($favoritesList.size() > $itemsNumberToDisplay)
  #set ($moreNumber = $mathtool.sub($favoritesList.size(),$itemsNumberToDisplay))
  <li class="more">
    <a href="#">$services.localization.render('favorites.panel.more', [$moreNumber])</a>
  </li>
#end
</li>
#end
## get the favorites panel document reference, to contextualize everything to this 
#set ($favoritesPanelDocRef = $paneldoc.documentReference)
#set ($discard = $services.localization.use('document', "${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.Translations"))
#panelheader($services.localization.render('favorites.panel.title'))
##
#set ($discard = $xwiki.jsfx.use('uicomponents/suggest/suggestPropertyValues.js', {'forceSkinAction': true, 'language': $xcontext.locale}))
#set ($discard = $xwiki.linkx.use($services.webjars.url('selectize.js', 'css/selectize.bootstrap3.css'),
    {'type': 'text/css', 'rel': 'stylesheet'}))
#set ($discard = $xwiki.ssfx.use('uicomponents/suggest/xwiki.selectize.css', true))
#set ($discard = $xwiki.ssx.use("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.FavoritesSheet"))
#set ($discard = $xwiki.jsx.use("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.FavoritesSheet"))
#set ($userDoc = $xwiki.getDocument($xcontext.user))
#set ($FavoritesObj = $userDoc.getObject("Favorites.Code.FavoritesClass"))
#set ($FavoritesSourceDoc = $userDoc)
#set ($FavoritesObj = $FavoritesSourceDoc.getObject("Favorites.Code.FavoritesClass"))
{{html}}
#if ("$!FavoritesObj" != '')
  #if ($FavoritesObj.getProperty("pinnedPages").value.size() > 0)
    #displayFavoritesList($FavoritesObj.getProperty("pinnedPages").value, $FavoritesSourceDoc)
    #if ($FavoritesObj.getProperty("pages").value.size() > 0)
      <hr/>
    #else
      <div class="wikimodel-emptyline"></div>
    #end
  #end
  #if ($FavoritesObj.getProperty("pages").value.size() > 0)
  #displayFavoritesList($FavoritesObj.getProperty("pages").value, $FavoritesSourceDoc)
  <div class="wikimodel-emptyline"></div>
  #end
#end
<button class="btn btn-default" id="addFavorite" data-doc="$doc.documentReference" data-user="$xcontext.userReference">
  <span class="glyphicon glyphicon-plus"></span>
  $services.localization.render('favorites.user.addCurrentPage')
</button>
<a href="javascript:;" class="btn btn-default editFavorites isUser">
  <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
  $!services.localization.render('favorites.user.actions_edit')
</a>
<div>
#*
<a href="$xwiki.getURL('Favorites.WebHome')" class="btn btn-primary">
  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
  $!services.localization.render('favorites.user.tools_access')
</a>
*#
</div>
## Save the URLs that are used to add/edit FavoritesClass object of the current user in the DOM instead of generating them on the js extension to avoid cache issues.
#set ($editUserFavoritesURL = $xwiki.getURL($xcontext.user, 'get', 'sheet=Favorites.Code.FavoritesSheet'))
#set ($newUserFavoritesObjectURL = $xwiki.getURL($xcontext.user, 'edit', 'xpage=editobject&xaction=addObject&className=Favorites.Code.FavoritesClass'))
#set ($addFavoriteURL = $xwiki.getURL("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.AddRemoveFavoriteService", 'get', 'outputSyntax=plain'))
<input type="hidden" id="editUserFavoritesURL" value="$escapetool.xml($editUserFavoritesURL)"/>
<input type="hidden" id="newUserFavoritesObjectURL" value="$escapetool.xml($newUserFavoritesObjectURL)"/>
<input type="hidden" id="addFavoriteURL" value="$escapetool.xml($addFavoriteURL)"/>
##
{{/html}}
##
#panelfooter()
{{/velocity}} 

If this is an acceptable solution, would it be possible to add this to future versions of the Favorites Application so its applied by default? 

 

Thanks! 

 

Julia

 
cid:jira-generated-image-avatar-3525ac82-1fbc-439b-830d-d8ef2e08f6f9 Julia Gilmore on 09/Sep/24 15:46
 
Update! 

I edited the velocity script for the application to specify that each item in the ordered list <li> should have a bullet point. I did this by editing the HTML to assign an ordered list style
: style={color:#FF0000}"list - see addition to code in red.  style-type: disc;"{color}
{code:java}
{{velocity}}
#macro(displayFavoritesList $favoritesList $FavoritesSourceDoc)
<ul>
#set ($itemsNumberToDisplay = 5)
#foreach ($favoritesDocFullName in $favoritesList)
  #set ($favoritesDocRef = $services.model.resolveDocument($favoritesDocFullName, $FavoritesSourceDoc.documentReference))
  #if ($xwiki.exists($favoritesDocRef))
    #set ($favoritesDoc = $xwiki.getDocument($favoritesDocRef))
    <li style="list-style-type: disc;" #if($foreach.index >= $itemsNumberToDisplay)class="hidden" #end>
        <a href="$!escapetool.xml($favoritesDoc.URL)">$favoritesDoc.displayTitle</a>
    </ul>
  #end
#end
#if ($favoritesList.size() > $itemsNumberToDisplay)
  #set ($moreNumber = $mathtool.sub($favoritesList.size(),$itemsNumberToDisplay))
  <li class="more">
    <a href="#">$services.localization.render('favorites.panel.more', [$moreNumber])</a>
  </li>
#end
</li>
#end
## get the favorites panel document reference, to contextualize everything to this 
#set ($favoritesPanelDocRef = $paneldoc.documentReference)
#set ($discard = $services.localization.use('document', "${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.Translations"))
#panelheader($services.localization.render('favorites.panel.title'))
##
#set ($discard = $xwiki.jsfx.use('uicomponents/suggest/suggestPropertyValues.js', {'forceSkinAction': true, 'language': $xcontext.locale}))
#set ($discard = $xwiki.linkx.use($services.webjars.url('selectize.js', 'css/selectize.bootstrap3.css'),
    {'type': 'text/css', 'rel': 'stylesheet'}))
#set ($discard = $xwiki.ssfx.use('uicomponents/suggest/xwiki.selectize.css', true))
#set ($discard = $xwiki.ssx.use("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.FavoritesSheet"))
#set ($discard = $xwiki.jsx.use("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.FavoritesSheet"))
#set ($userDoc = $xwiki.getDocument($xcontext.user))
#set ($FavoritesObj = $userDoc.getObject("Favorites.Code.FavoritesClass"))
#set ($FavoritesSourceDoc = $userDoc)
#set ($FavoritesObj = $FavoritesSourceDoc.getObject("Favorites.Code.FavoritesClass"))
{{html}}
#if ("$!FavoritesObj" != '')
  #if ($FavoritesObj.getProperty("pinnedPages").value.size() > 0)
    #displayFavoritesList($FavoritesObj.getProperty("pinnedPages").value, $FavoritesSourceDoc)
    #if ($FavoritesObj.getProperty("pages").value.size() > 0)
      <hr/>
    #else
      <div class="wikimodel-emptyline"></div>
    #end
  #end
  #if ($FavoritesObj.getProperty("pages").value.size() > 0)
  #displayFavoritesList($FavoritesObj.getProperty("pages").value, $FavoritesSourceDoc)
  <div class="wikimodel-emptyline"></div>
  #end
#end
<button class="btn btn-default" id="addFavorite" data-doc="$doc.documentReference" data-user="$xcontext.userReference">
  <span class="glyphicon glyphicon-plus"></span>
  $services.localization.render('favorites.user.addCurrentPage')
</button>
<a href="javascript:;" class="btn btn-default editFavorites isUser">
  <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
  $!services.localization.render('favorites.user.actions_edit')
</a>
<div>
#*
<a href="$xwiki.getURL('Favorites.WebHome')" class="btn btn-primary">
  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
  $!services.localization.render('favorites.user.tools_access')
</a>
*#
</div>
## Save the URLs that are used to add/edit FavoritesClass object of the current user in the DOM instead of generating them on the js extension to avoid cache issues.
#set ($editUserFavoritesURL = $xwiki.getURL($xcontext.user, 'get', 'sheet=Favorites.Code.FavoritesSheet'))
#set ($newUserFavoritesObjectURL = $xwiki.getURL($xcontext.user, 'edit', 'xpage=editobject&xaction=addObject&className=Favorites.Code.FavoritesClass'))
#set ($addFavoriteURL = $xwiki.getURL("${favoritesPanelDocRef.wikiReference.name}:Favorites.Code.AddRemoveFavoriteService", 'get', 'outputSyntax=plain'))
<input type="hidden" id="editUserFavoritesURL" value="$escapetool.xml($editUserFavoritesURL)"/>
<input type="hidden" id="newUserFavoritesObjectURL" value="$escapetool.xml($newUserFavoritesObjectURL)"/>
<input type="hidden" id="addFavoriteURL" value="$escapetool.xml($addFavoriteURL)"/>
##
{{/html}}
##
#panelfooter()
{{/velocity}} {code}
If this is an acceptable solution, would it be possible to add this to future versions of the Favorites Application so its applied by default? 

 

Thanks! 

 

Julia