Skip to Content

Changes for page Profile of XWikiUserSheet

Last modified by Ludovic Dubost on 2024/07/22 15:51
From version 3.1
edited by Thomas Mortagne
on 2014/09/29 12:41
Change comment: Install extension [org.xwiki.platform:xwiki-platform-user-profile-ui-6.2]
To version 12.1
edited by Ludovic Dubost
on 2024/07/22 15:51
Change comment: Install extension [org.xwiki.platform:xwiki-platform-user-profile-ui/16.5.0]

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
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])
1 +#set($userName="$!doc.getValue('first_name') $!doc.getValue('last_name')")#if($userName==' ')#set($userName=$doc.documentReference.name)#{end}$services.localization.render('platform.core.profile.title', [$userName])
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.ThomasMortagne
1 +xwiki:XWiki.ludovic
Content
... ... @@ -8,30 +8,21 @@
8 8  ## Setting categories
9 9  #########################
10 10  #set($categories = [])
11 -#set($discard = $categories.add({'id':'profile', 'sheet':'XWiki.XWikiUserProfileSheet', 'glyphicon': 'user'}))
12 -#set($isMyProfile = ($services.model.resolveDocument($xcontext.user) == $doc.documentReference))
13 -#if($isMyProfile || $hasAdmin)
14 - #set($discard = $categories.add({'id':'preferences', 'sheet':'XWiki.XWikiUserPreferencesSheet', 'glyphicon': 'wrench'}))
11 +
12 +## load the user menu from the 'org.xwiki.plaftorm.user.profile.menu' UIXP.
13 +#foreach ($uix in $services.uix.getExtensions('org.xwiki.plaftorm.user.profile.menu', {'sortByParameter': 'priority'}))
14 + #if(!$uix.parameters.containsKey('isActive') || $uix.parameters.get('isActive') != 'false')
15 + #if (!$uix.parameters.containsKey('id'))
16 + ## when no id is explicitly provided, we use the id of the UIX.
17 + #set ($discard = $uix.parameters.put('id', $uix.id))
18 + #end
19 + #if ($uix.parameters.containsKey('icon'))
20 + #set ($discard = $uix.parameters.put('glyphicon', $uix.parameters.get('icon')))
21 + #end
22 + #set ($discard = $uix.parameters.put('uix', $uix))
23 + #set($discard = $categories.add($uix.parameters))
24 + #end
15 15  #end
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', 'glyphicon': 'eye-open'}))
19 -#end
20 -#if($isMyProfile)
21 - #set($discard = $categories.add({'id':'network', 'sheet':'XWiki.XWikiUserNetworkSheet', 'glyphicon': 'globe'}))
22 -#end
23 -#set($userWikiSheet = 'WikiManager.UserWikiSheet')
24 -#if($xcontext.isMainWiki() && $xwiki.exists($userWikiSheet))
25 - #set($discard = $categories.add({
26 - 'id': 'wikis',
27 - 'name': $services.localization.render('platform.wiki.menu.userwikis'),
28 - 'sheet': $userWikiSheet,
29 - 'glyphicon': 'list'
30 - }))
31 -#end
32 -#if($isMyProfile && $hasDashboard)
33 - #set($discard = $categories.add({'id':'dashboard', 'sheet':'Dashboard.XWikiUserDashboardSheet', 'glyphicon': 'th'}))
34 -#end
35 35  #########################
36 36  ## Current category
37 37  #########################
... ... @@ -68,10 +68,13 @@
68 68   (((
69 69   #if($request.xpage == 'edituser')
70 70   {{html clean="false"}}
71 - #resizedUserAvatar($doc.fullName 170)
62 + #resizedUserAvatar($doc.fullName 180)
72 72   {{/html}}
73 73   #else
74 - {{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"/}}
65 + ## By specifying the image width we enable server side resizing. The width value we use is greater than the
66 + ## available space because we don't want to loose too much of the image quality (we rely on the browser to fit the
67 + ## image in the available space).
68 + {{attachmentSelector classname="XWiki.XWikiUsers" object="$obj.number" property="avatar" #if ($hasEdit) 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,jpeg,gif"/}}
75 75   #end
76 76   )))
77 77   ##########
... ... @@ -92,8 +92,7 @@
92 92   #set($tabKey = $subcategory.get('id'))
93 93   (% id="${tabKey}Pane" class="user-page-pane#if($tabKey != $currentCategory) hidden#end" %)
94 94   (((
95 - #set($tabInclude = $subcategory.get('sheet'))
96 - {{include reference="${tabInclude}" /}}
89 + {{html}}$services.rendering.render($subcategory.uix.execute(), 'html/5.0'){{/html}}
97 97   )))
98 98   #end
99 99   #end
... ... @@ -106,10 +106,5 @@
106 106   <input type='hidden' name='category' value="$!{escapetool.xml($currentCategory)}" />
107 107   #end
108 108   <div class="clearfloats">&nbsp;</div>
109 - #if($request.get('xpage'))
110 - <script type="text/javascript">
111 - document.fire('lightbox:userprofile:loaded');
112 - </script>
113 - #end
114 114  {{/html}}
115 115  {{/velocity}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -2,9 +2,9 @@
2 2  // Start XWiki augmentation.
3 3  Object.extend(XWiki, {
4 4   userprofile : {
5 - init : function() {
5 + init : function(container) {
6 6   this.crtCategory = '';
7 - this.tabsContainer = $('user-vertical-menu');
7 + this.tabsContainer = (container || $('body')).down('#user-vertical-menu');
8 8   if (!this.tabsContainer) {
9 9   return;
10 10   }
... ... @@ -11,17 +11,29 @@
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) {
18 18   this.updateCategoryFields(activeTab.id);
19 19   document.fire('xwiki:profile:switchedCategory', {'category' : activeTab.id});
20 + document.fire('xwiki:dom:refresh');
20 20   }.bind(this));
21 21   this.handleCancelAction();
23 +
24 + // History navigation through our pushed states.
25 + window.addEventListener('popstate', function(event) {
26 + if (event.state && event.state.category) {
27 + this.switchTab('vertical-menu-' + event.state.category);
28 + }
29 + }.bindAsEventListener(this));
30 + // Store the initial history state so we can go back.
31 + history.replaceState({
32 + category: window.location.search.toQueryParams().category || 'profile'
33 + }, document.title, document.location.href);
22 22   },
23 23  
24 - switchTab : function(tab) {
36 + 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,7 +32,11 @@
32 32   });
33 33   $(tab).addClassName('current');
34 34   this.updateCategoryFields(tab);
47 + if (pushHistory) {
48 + this.updateURL(tabName);
49 + }
35 35   document.fire('xwiki:profile:switchedCategory', {'category' : tab});
51 + document.fire('xwiki:dom:refresh');
36 36   },
37 37  
38 38   updateCategoryFields : function (category) {
... ... @@ -43,9 +43,20 @@
43 43   this.updateField('category', category);
44 44   },
45 45  
62 + updateURL : function (category) {
63 + if (history.pushState) {
64 + var params = window.location.search.toQueryParams();
65 + params.category = category;
66 + var newQueryString = Object.toQueryString(params);
67 +
68 + var newURL = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newQueryString;
69 + window.history.pushState({category : category}, '', newURL);
70 + }
71 + },
72 +
46 46   updateField : function (fieldName, value) {
47 47   var element = $$('input[name=' + fieldName + ']');
48 - if (element && element.size() > 0) {
75 + if (element && element.length) {
49 49   element[0].value = value;
50 50   }
51 51   },
... ... @@ -52,7 +52,7 @@
52 52  
53 53   handleCancelAction : function() {
54 54   var elements = $$('form .buttons input[type=submit][name=action_cancel]');
55 - if (elements && elements.size() > 0) {
82 + if (elements && elements.length) {
56 56   var button = elements[0];
57 57   Event.stopObserving(button, 'click');
58 58   button.observe('click', function(event){
... ... @@ -64,12 +64,14 @@
64 64   }
65 65  });
66 66  
67 -var init = function() {
68 - XWiki.userprofile.init();
94 +var init = function(event) {
95 + ((event && event.memo.elements) || [$('body')]).each(function(element) {
96 + XWiki.userprofile.init(element);
97 + });
69 69   return true;
70 70  };
71 71  (XWiki.domIsLoaded && init()) || document.observe('xwiki:dom:loaded', init);
72 -document.observe('lightbox:userprofile:loaded', init);
101 +document.observe('xwiki:dom:updated', init);
73 73  // End XWiki augmentation.
74 74  return XWiki;
75 75  }(XWiki || {}));
XWiki.StyleSheetExtension[0]
Code
... ... @@ -6,9 +6,13 @@
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 - border-radius: 5px 5px 5px 5px;
15 + border-radius: 8px 8px 8px 8px;
12 12   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
13 13   margin: 0 auto;
14 14   padding: 0.3em;
... ... @@ -68,13 +68,13 @@
68 68   margin-left: 14em;
69 69  }
70 70  
71 -.column h1 {
72 - font-weight:bold;
73 - font-size:115%;
74 - margin:10px 0;
75 +.column h1, .column h2 {
76 + font-weight: bold;
77 + font-size: 115%;
78 + margin: 10px 0;
75 75  }
76 76  
77 -.column h2 {
81 +.column h3 {
78 78   font-size: 110%;
79 79  }
80 80  
... ... @@ -92,7 +92,7 @@
92 92  
93 93  /* ----- Profile ----- */
94 94  td.recentChangesLeft, .recentChangesMoreActions {
95 - display:none;
99 + display: none;
96 96  }
97 97  
98 98  td.recentChangesRight {
... ... @@ -111,10 +111,6 @@
111 111   background-color: $theme.backgroundSecondaryColor;
112 112  }
113 113  
114 -.userInfo {
115 - -ms-word-break: break-all; /* IE8, IE9 */
116 -}
117 -
118 118  .userInfo a {
119 119   word-wrap: break-word;
120 120  }
... ... @@ -122,21 +122,21 @@
122 122  .userInfo img {
123 123   max-width: 100%;
124 124  }
125 -
125 +
126 +.userInfo h2 {
127 + font-size: larger;
128 + font-weight: bolder;
129 + margin-top: 10px;
130 +}
131 +
126 126  div.userInfo input[type="text"], div.userInfo input[type="password"], div.userInfo textarea, div.userInfo select, div.userPreferences select {
127 127   width: 100%;
128 128  }
129 129  
130 130  div.editProfileCategory {
131 - float:right;
137 + float: right;
132 132  }
133 133  
134 -div.editProfileCategory a {
135 - display:block;
136 - width: 16px;
137 - height: 16px;
138 - background: url("$xwiki.getSkinFile('icons/silk/pencil.png')") no-repeat;
139 -}
140 140  
141 141  /* Watchlist */
142 142  
... ... @@ -147,9 +147,9 @@
147 147  }
148 148  
149 149  span#avatarUpload {
150 - display:block;
151 - width:$tabswidth;
152 - position:absolute;
150 + display: block;
151 + width: $tabswidth;
152 + position: absolute;
153 153   font-size: 10px;
154 154   font-weight: bold;
155 155   background-color: white;
... ... @@ -164,28 +164,35 @@
164 164   margin: 0;
165 165   padding: 0;
166 166  }
167 +
167 167  #networkPane .following li {
168 168   padding: 2px 20px 2px 2px;
169 169  }
171 +
170 170  #networkPane .following li:hover {
171 171   background-color: $theme.highlightColor;
172 172  }
175 +
173 173  #networkPane .following img {
174 174   float: left;
175 175   margin-right: 5px;
176 176  }
180 +
177 177  #networkPane .following .user-info {
178 178   float: left;
179 179  }
184 +
180 180  #networkPane .following .user-id {
181 181   font-size: .8em;
182 182   font-weight: 900;
183 183  }
189 +
184 184  #networkPane .following .unfollow {
185 185   float: right;
186 186   margin-right: -16px;
187 187   padding: 0;
188 188  }
195 +
189 189  ## --------------------------------------
190 190  ## Picker style
191 191  .attachment-picker {
... ... @@ -193,6 +193,7 @@
193 193   margin: auto;
194 194   width: 100%;
195 195  }
203 +
196 196  .attachment-picker p {
197 197   padding: 0;
198 198   margin: 0;
... ... @@ -201,6 +201,7 @@
201 201  .attachment-picker .picture {
202 202   z-index: -1;
203 203  }
212 +
204 204  .attachment-picker .buttonwrapper {
205 205   margin: 0;
206 206  }
Content Type
... ... @@ -1,0 +1,1 @@
1 +LESS