Changes for page Profile of XWikiUserSheet

Last modified by Ludovic Dubost on 2024/07/22 15:51

From version 2.1
edited by Ludovic Dubost
on 2014/03/30 19:46
Change comment: Imported from XAR
To version 5.1
edited by Ludovic Dubost
on 2017/02/07 23:57
Change comment: Install extension [org.xwiki.platform:xwiki-platform-user-profile-ui-8.4.4]

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -$services.localization.render('platform.core.profile.title', ["$!doc.getValue('first_name') $!doc.getValue('last_name')"])
1 +#set($userName="$!doc.getValue('first_name') $!doc.getValue('last_name')")#if($userName==' ')#set($userName=$doc.name)#{end}$services.localization.render('platform.core.profile.title', [$userName])
Content
... ... @@ -8,28 +8,29 @@
8 8  ## Setting categories
9 9  #########################
10 10  #set($categories = [])
11 -#set($discard = $categories.add({'id':'profile', 'sheet':'XWiki.XWikiUserProfileSheet'}))
11 +#set($discard = $categories.add({'id':'profile', 'sheet':'XWiki.XWikiUserProfileSheet', 'glyphicon': 'user'}))
12 12  #set($isMyProfile = ($services.model.resolveDocument($xcontext.user) == $doc.documentReference))
13 13  #if($isMyProfile || $hasAdmin)
14 - #set($discard = $categories.add({'id':'preferences', 'sheet':'XWiki.XWikiUserPreferencesSheet'}))
14 + #set($discard = $categories.add({'id':'preferences', 'sheet':'XWiki.XWikiUserPreferencesSheet', 'glyphicon': 'wrench'}))
15 15  #end
16 16  ## TODO: add APIs to be able to display users watchlists to admins
17 -#if($isMyProfile && $hasWatch)
18 - #set($discard = $categories.add({'id':'watchlist', 'sheet':'XWiki.XWikiUserWatchListSheet'}))
17 +#if($isMyProfile && $hasWatch)
18 + #set($discard = $categories.add({'id':'watchlist', 'sheet':'XWiki.XWikiUserWatchListSheet', 'glyphicon': 'eye-open'}))
19 19  #end
20 20  #if($isMyProfile)
21 - #set($discard = $categories.add({'id':'network', 'sheet':'XWiki.XWikiUserNetworkSheet'}))
21 + #set($discard = $categories.add({'id':'network', 'sheet':'XWiki.XWikiUserNetworkSheet', 'glyphicon': 'globe'}))
22 22  #end
23 -#set($userWorkspaceSheet = 'WorkspaceManager.UserWorkspaceSheet')
24 -#if($xcontext.isMainWiki() && $xwiki.exists($userWorkspaceSheet))
23 +#set($userWikiSheet = 'WikiManager.UserWikiSheet')
24 +#if($xcontext.isMainWiki() && $xwiki.exists($userWikiSheet))
25 25   #set($discard = $categories.add({
26 - 'id': 'workspaces',
27 - 'name': $services.localization.render('workspacemanager.profile.category.workspaces'),
28 - 'sheet': $userWorkspaceSheet
26 + 'id': 'wikis',
27 + 'name': $services.localization.render('platform.wiki.menu.userwikis'),
28 + 'sheet': $userWikiSheet,
29 + 'glyphicon': 'list'
29 29   }))
30 30  #end
31 31  #if($isMyProfile && $hasDashboard)
32 - #set($discard = $categories.add({'id':'dashboard', 'sheet':'Dashboard.XWikiUserDashboardSheet'}))
33 + #set($discard = $categories.add({'id':'dashboard', 'sheet':'Dashboard.XWikiUserDashboardSheet', 'glyphicon': 'th'}))
33 33  #end
34 34  #########################
35 35  ## Current category
... ... @@ -36,7 +36,7 @@
36 36  #########################
37 37  #set($currentCategory = "$!request.category")
38 38  #if($currentCategory == "")
39 - #set($currentCategory = $listtool.get($categories, 0).get('id'))
40 + #set($currentCategory = $categories[0].get('id'))
40 40  #end
41 41  #########################
42 42  ## Creating vertical menu
... ... @@ -67,10 +67,13 @@
67 67   (((
68 68   #if($request.xpage == 'edituser')
69 69   {{html clean="false"}}
70 - #resizedUserAvatar($doc.fullName 170)
71 + #resizedUserAvatar($doc.fullName 180)
71 71   {{/html}}
72 72   #else
73 - {{attachmentSelector classname="XWiki.XWikiUsers" object="$obj.number" property="avatar" #if ($isMyProfile) savemode="direct" #end defaultValue="XWiki.XWikiUserSheet@noavatar.png" width="120" alternateText="$xwiki.getUserName($doc.fullName, false)" buttontext="$services.localization.render('platform.core.profile.changePhoto')" displayImage="true" filter="png,jpg,gif"/}}
74 + ## By specifying the image width we enable server side resizing. The width value we use is greater than the
75 + ## available space because we don't want to loose too much of the image quality (we rely on the browser to fit the
76 + ## image in the available space).
77 + {{attachmentSelector classname="XWiki.XWikiUsers" object="$obj.number" property="avatar" #if ($isMyProfile) savemode="direct" #end defaultValue="XWiki.XWikiUserSheet@noavatar.png" width="180" alternateText="$xwiki.getUserName($doc.fullName, false)" buttontext="$services.localization.render('platform.core.profile.changePhoto')" displayImage="true" filter="png,jpg,gif"/}}
74 74   #end
75 75   )))
76 76   ##########
... ... @@ -102,7 +102,7 @@
102 102  #########################
103 103  {{html clean="false"}}
104 104   #if($xcontext.action == 'edit' || $xcontext.action == 'inline')
105 - <input type='hidden' name='category' value="$!{currentCategory}" />
109 + <input type='hidden' name='category' value="$!{escapetool.xml($currentCategory)}" />
106 106   #end
107 107   <div class="clearfloats">&nbsp;</div>
108 108   #if($request.get('xpage'))
XWiki.JavaScriptExtension[0]
Code
... ... @@ -11,7 +11,7 @@
11 11   this.tabsContainer.select('.category-tab').each(function (tabElement) {
12 12   tabElement.observe('click', function(event) {
13 13   Event.stop(event);
14 - this.switchTab(tabElement.id);
14 + this.switchTab(tabElement.id, true);
15 15   }.bindAsEventListener(this));
16 16   }.bind(this));
17 17   this.tabsContainer.select('.category-tab.current').each(function (activeTab) {
... ... @@ -19,9 +19,20 @@
19 19   document.fire('xwiki:profile:switchedCategory', {'category' : activeTab.id});
20 20   }.bind(this));
21 21   this.handleCancelAction();
22 +
23 + // History navigation through our pushed states.
24 + window.addEventListener('popstate', function(event) {
25 + if (event.state && event.state.category) {
26 + this.switchTab('vertical-menu-' + event.state.category);
27 + }
28 + }.bindAsEventListener(this));
29 + // Store the initial history state so we can go back.
30 + history.replaceState({
31 + category: window.location.search.toQueryParams().category || 'profile'
32 + }, document.title, document.location.href);
22 22   },
23 23  
24 - switchTab : function(tab) {
35 + switchTab : function(tab, pushHistory) {
25 25   var tabName = tab.substring(14); // 14 = len('vertical-menu-')
26 26   $("user-page-content").select("div.user-page-pane").each(function(pane){
27 27   pane.addClassName('hidden');
... ... @@ -32,6 +32,9 @@
32 32   });
33 33   $(tab).addClassName('current');
34 34   this.updateCategoryFields(tab);
46 + if (pushHistory) {
47 + this.updateURL(tabName);
48 + }
35 35   document.fire('xwiki:profile:switchedCategory', {'category' : tab});
36 36   },
37 37  
... ... @@ -43,6 +43,17 @@
43 43   this.updateField('category', category);
44 44   },
45 45  
60 + updateURL : function (category) {
61 + if (history.pushState) {
62 + var params = window.location.search.toQueryParams();
63 + params.category = category;
64 + newQueryString = Object.toQueryString(params);
65 +
66 + var newURL = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newQueryString;
67 + window.history.pushState({category : category}, '', newURL);
68 + }
69 + },
70 +
46 46   updateField : function (fieldName, value) {
47 47   var element = $$('input[name=' + fieldName + ']');
48 48   if (element && element.size() > 0) {
XWiki.StyleSheetExtension[0]
Code
... ... @@ -6,6 +6,10 @@
6 6   width: 13em;
7 7  }
8 8  
9 +#avatar p {
10 + text-align: center;
11 +}
12 +
9 9  #avatar img {
10 10   border: 1px solid $theme.borderColor;
11 11   border-radius: 5px 5px 5px 5px;
... ... @@ -40,11 +40,11 @@
40 40   content: url("$xwiki.getSkinFile('icons/silk/application_view_tile.png')");
41 41  }
42 42  
43 -.profile-menu .user-menu-workspaces:before{
47 +.profile-menu .user-menu-wikis:before{
44 44   content: url("$xwiki.getSkinFile('icons/silk/chart_organisation.png')");
45 45  }
46 46  
47 -.profile-menu .group.user-menu-title{
51 +.skin-colibri .profile-menu .group.user-menu-title{
48 48   #set ($menuIcon = "url(${escapetool.S}$xwiki.getSkinFile('icons/silk/user.png')${escapetool.S})")
49 49   #css3_backgroundIconAndLinearGradient($menuIcon, {
50 50   'to': 'bottom',
... ... @@ -68,11 +68,6 @@
68 68   margin-left: 14em;
69 69  }
70 70  
71 -#user-page-content h1{
72 - margin: 0 0 20px 0;
73 -}
74 -
75 -
76 76  .column h1 {
77 77   font-weight:bold;
78 78   font-size:115%;
... ... @@ -116,6 +116,14 @@
116 116   background-color: $theme.backgroundSecondaryColor;
117 117  }
118 118  
118 +.userInfo {
119 + -ms-word-break: break-all; /* IE8, IE9 */
120 +}
121 +
122 +.userInfo a {
123 + word-wrap: break-word;
124 +}
125 +
119 119  .userInfo img {
120 120   max-width: 100%;
121 121  }
... ... @@ -143,24 +143,6 @@
143 143   font-weight: bold;
144 144  }
145 145  
146 -span.wikiWatchlistType, span.spaceWatchlistType, span.pageWatchlistType {
147 - width: 16px;
148 - height: 16px;
149 - display: block;
150 -}
151 -
152 -span.wikiWatchlistType {
153 - background: url("$xwiki.getSkinFile('icons/silk/world.png')") no-repeat;
154 -}
155 -
156 -span.spaceWatchlistType {
157 - background: url("$xwiki.getSkinFile('icons/silk/folder.png')") no-repeat;
158 -}
159 -
160 -span.pageWatchlistType {
161 - background: url("$xwiki.getSkinFile('icons/silk/page_white_text.png')") no-repeat;
162 -}
163 -
164 164  span#avatarUpload {
165 165   display:block;
166 166   width:$tabswidth;
... ... @@ -224,8 +224,6 @@
224 224   background: url("$xwiki.getSkinFile('icons/silk/picture_edit.png')") no-repeat center center $theme.pageContentBackgroundColor !important;
225 225   border: 0 none !important;
226 226   border-bottom-left-radius: 8px;
227 - -moz-border-radius-bottomleft: 8px;
228 - -webkit-border-bottom-left-radius: 8px;
229 229   height: 18px;
230 230   position: absolute;
231 231   right: 0;
... ... @@ -239,6 +239,7 @@
239 239  ## --------------------------------------
240 240  ## Dashboard
241 241  /* prevent the clearfloats between buttons & dashboard gadgets from clearing the tabs as well, only the buttons float */
242 -.dashboard .clearfloats {
229 +.dashboard .clearfloats,
230 +.dashboard .clearfloats:after, .dashboard .clearfloats:before {
243 243   clear: right;
244 244  }