Skip to Content

Changes for page Profile of XWikiUserSheet

Last modified by Ludovic Dubost on 2024/07/22 15:51
From 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]
To version 2.1
edited by Ludovic Dubost
on 2014/03/30 19:46
Change comment: Imported from XAR

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.documentReference.name)#{end}$services.localization.render('platform.core.profile.title', [$userName])
1 +$services.localization.render('platform.core.profile.title', ["$!doc.getValue('first_name') $!doc.getValue('last_name')"])
Content
... ... @@ -8,27 +8,35 @@
8 8  ## Setting categories
9 9  #########################
10 10  #set($categories = [])
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
11 +#set($discard = $categories.add({'id':'profile', 'sheet':'XWiki.XWikiUserProfileSheet'}))
12 +#set($isMyProfile = ($services.model.resolveDocument($xcontext.user) == $doc.documentReference))
13 +#if($isMyProfile || $hasAdmin)
14 + #set($discard = $categories.add({'id':'preferences', 'sheet':'XWiki.XWikiUserPreferencesSheet'}))
25 25  #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'}))
19 +#end
20 +#if($isMyProfile)
21 + #set($discard = $categories.add({'id':'network', 'sheet':'XWiki.XWikiUserNetworkSheet'}))
22 +#end
23 +#set($userWorkspaceSheet = 'WorkspaceManager.UserWorkspaceSheet')
24 +#if($xcontext.isMainWiki() && $xwiki.exists($userWorkspaceSheet))
25 + #set($discard = $categories.add({
26 + 'id': 'workspaces',
27 + 'name': $services.localization.render('workspacemanager.profile.category.workspaces'),
28 + 'sheet': $userWorkspaceSheet
29 + }))
30 +#end
31 +#if($isMyProfile && $hasDashboard)
32 + #set($discard = $categories.add({'id':'dashboard', 'sheet':'Dashboard.XWikiUserDashboardSheet'}))
33 +#end
26 26  #########################
27 27  ## Current category
28 28  #########################
29 29  #set($currentCategory = "$!request.category")
30 30  #if($currentCategory == "")
31 - #set($currentCategory = $categories[0].get('id'))
39 + #set($currentCategory = $listtool.get($categories, 0).get('id'))
32 32  #end
33 33  #########################
34 34  ## Creating vertical menu
... ... @@ -59,13 +59,10 @@
59 59   (((
60 60   #if($request.xpage == 'edituser')
61 61   {{html clean="false"}}
62 - #resizedUserAvatar($doc.fullName 180)
70 + #resizedUserAvatar($doc.fullName 170)
63 63   {{/html}}
64 64   #else
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"/}}
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"/}}
69 69   #end
70 70   )))
71 71   ##########
... ... @@ -86,7 +86,8 @@
86 86   #set($tabKey = $subcategory.get('id'))
87 87   (% id="${tabKey}Pane" class="user-page-pane#if($tabKey != $currentCategory) hidden#end" %)
88 88   (((
89 - {{html}}$services.rendering.render($subcategory.uix.execute(), 'html/5.0'){{/html}}
94 + #set($tabInclude = $subcategory.get('sheet'))
95 + {{include reference="${tabInclude}" /}}
90 90   )))
91 91   #end
92 92   #end
... ... @@ -96,8 +96,13 @@
96 96  #########################
97 97  {{html clean="false"}}
98 98   #if($xcontext.action == 'edit' || $xcontext.action == 'inline')
99 - <input type='hidden' name='category' value="$!{escapetool.xml($currentCategory)}" />
105 + <input type='hidden' name='category' value="$!{currentCategory}" />
100 100   #end
101 101   <div class="clearfloats">&nbsp;</div>
108 + #if($request.get('xpage'))
109 + <script type="text/javascript">
110 + document.fire('lightbox:userprofile:loaded');
111 + </script>
112 + #end
102 102  {{/html}}
103 103  {{/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(container) {
5 + init : function() {
6 6   this.crtCategory = '';
7 - this.tabsContainer = (container || $('body')).down('#user-vertical-menu');
7 + this.tabsContainer = $('user-vertical-menu');
8 8   if (!this.tabsContainer) {
9 9   return;
10 10   }
... ... @@ -11,29 +11,17 @@
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, true);
14 + this.switchTab(tabElement.id);
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');
21 21   }.bind(this));
22 22   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);
34 34   },
35 35  
36 - switchTab : function(tab, pushHistory) {
24 + switchTab : function(tab) {
37 37   var tabName = tab.substring(14); // 14 = len('vertical-menu-')
38 38   $("user-page-content").select("div.user-page-pane").each(function(pane){
39 39   pane.addClassName('hidden');
... ... @@ -44,11 +44,7 @@
44 44   });
45 45   $(tab).addClassName('current');
46 46   this.updateCategoryFields(tab);
47 - if (pushHistory) {
48 - this.updateURL(tabName);
49 - }
50 50   document.fire('xwiki:profile:switchedCategory', {'category' : tab});
51 - document.fire('xwiki:dom:refresh');
52 52   },
53 53  
54 54   updateCategoryFields : function (category) {
... ... @@ -59,20 +59,9 @@
59 59   this.updateField('category', category);
60 60   },
61 61  
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 -
73 73   updateField : function (fieldName, value) {
74 74   var element = $$('input[name=' + fieldName + ']');
75 - if (element && element.length) {
48 + if (element && element.size() > 0) {
76 76   element[0].value = value;
77 77   }
78 78   },
... ... @@ -79,7 +79,7 @@
79 79  
80 80   handleCancelAction : function() {
81 81   var elements = $$('form .buttons input[type=submit][name=action_cancel]');
82 - if (elements && elements.length) {
55 + if (elements && elements.size() > 0) {
83 83   var button = elements[0];
84 84   Event.stopObserving(button, 'click');
85 85   button.observe('click', function(event){
... ... @@ -91,14 +91,12 @@
91 91   }
92 92  });
93 93  
94 -var init = function(event) {
95 - ((event && event.memo.elements) || [$('body')]).each(function(element) {
96 - XWiki.userprofile.init(element);
97 - });
67 +var init = function() {
68 + XWiki.userprofile.init();
98 98   return true;
99 99  };
100 100  (XWiki.domIsLoaded && init()) || document.observe('xwiki:dom:loaded', init);
101 -document.observe('xwiki:dom:updated', init);
72 +document.observe('lightbox:userprofile:loaded', init);
102 102  // End XWiki augmentation.
103 103  return XWiki;
104 104  }(XWiki || {}));
XWiki.StyleSheetExtension[0]
Code
... ... @@ -6,13 +6,9 @@
6 6   width: 13em;
7 7  }
8 8  
9 -#avatar p {
10 - text-align: center;
11 -}
12 -
13 13  #avatar img {
14 14   border: 1px solid $theme.borderColor;
15 - border-radius: 8px 8px 8px 8px;
11 + border-radius: 5px 5px 5px 5px;
16 16   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
17 17   margin: 0 auto;
18 18   padding: 0.3em;
... ... @@ -44,11 +44,11 @@
44 44   content: url("$xwiki.getSkinFile('icons/silk/application_view_tile.png')");
45 45  }
46 46  
47 -.profile-menu .user-menu-wikis:before{
43 +.profile-menu .user-menu-workspaces:before{
48 48   content: url("$xwiki.getSkinFile('icons/silk/chart_organisation.png')");
49 49  }
50 50  
51 -.skin-colibri .profile-menu .group.user-menu-title{
47 +.profile-menu .group.user-menu-title{
52 52   #set ($menuIcon = "url(${escapetool.S}$xwiki.getSkinFile('icons/silk/user.png')${escapetool.S})")
53 53   #css3_backgroundIconAndLinearGradient($menuIcon, {
54 54   'to': 'bottom',
... ... @@ -72,13 +72,18 @@
72 72   margin-left: 14em;
73 73  }
74 74  
75 -.column h1, .column h2 {
76 - font-weight: bold;
77 - font-size: 115%;
78 - margin: 10px 0;
71 +#user-page-content h1{
72 + margin: 0 0 20px 0;
79 79  }
80 80  
81 -.column h3 {
75 +
76 +.column h1 {
77 + font-weight:bold;
78 + font-size:115%;
79 + margin:10px 0;
80 +}
81 +
82 +.column h2 {
82 82   font-size: 110%;
83 83  }
84 84  
... ... @@ -96,7 +96,7 @@
96 96  
97 97  /* ----- Profile ----- */
98 98  td.recentChangesLeft, .recentChangesMoreActions {
99 - display: none;
100 + display:none;
100 100  }
101 101  
102 102  td.recentChangesRight {
... ... @@ -115,28 +115,24 @@
115 115   background-color: $theme.backgroundSecondaryColor;
116 116  }
117 117  
118 -.userInfo a {
119 - word-wrap: break-word;
120 -}
121 -
122 122  .userInfo img {
123 123   max-width: 100%;
124 124  }
125 -
126 -.userInfo h2 {
127 - font-size: larger;
128 - font-weight: bolder;
129 - margin-top: 10px;
130 -}
131 -
122 +
132 132  div.userInfo input[type="text"], div.userInfo input[type="password"], div.userInfo textarea, div.userInfo select, div.userPreferences select {
133 133   width: 100%;
134 134  }
135 135  
136 136  div.editProfileCategory {
137 - float: right;
128 + float:right;
138 138  }
139 139  
131 +div.editProfileCategory a {
132 + display:block;
133 + width: 16px;
134 + height: 16px;
135 + background: url("$xwiki.getSkinFile('icons/silk/pencil.png')") no-repeat;
136 +}
140 140  
141 141  /* Watchlist */
142 142  
... ... @@ -146,10 +146,28 @@
146 146   font-weight: bold;
147 147  }
148 148  
149 -span#avatarUpload {
146 +span.wikiWatchlistType, span.spaceWatchlistType, span.pageWatchlistType {
147 + width: 16px;
148 + height: 16px;
150 150   display: block;
151 - width: $tabswidth;
152 - position: absolute;
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 +span#avatarUpload {
165 + display:block;
166 + width:$tabswidth;
167 + position:absolute;
153 153   font-size: 10px;
154 154   font-weight: bold;
155 155   background-color: white;
... ... @@ -164,35 +164,28 @@
164 164   margin: 0;
165 165   padding: 0;
166 166  }
167 -
168 168  #networkPane .following li {
169 169   padding: 2px 20px 2px 2px;
170 170  }
171 -
172 172  #networkPane .following li:hover {
173 173   background-color: $theme.highlightColor;
174 174  }
175 -
176 176  #networkPane .following img {
177 177   float: left;
178 178   margin-right: 5px;
179 179  }
180 -
181 181  #networkPane .following .user-info {
182 182   float: left;
183 183  }
184 -
185 185  #networkPane .following .user-id {
186 186   font-size: .8em;
187 187   font-weight: 900;
188 188  }
189 -
190 190  #networkPane .following .unfollow {
191 191   float: right;
192 192   margin-right: -16px;
193 193   padding: 0;
194 194  }
195 -
196 196  ## --------------------------------------
197 197  ## Picker style
198 198  .attachment-picker {
... ... @@ -200,7 +200,6 @@
200 200   margin: auto;
201 201   width: 100%;
202 202  }
203 -
204 204  .attachment-picker p {
205 205   padding: 0;
206 206   margin: 0;
... ... @@ -209,7 +209,6 @@
209 209  .attachment-picker .picture {
210 210   z-index: -1;
211 211  }
212 -
213 213  .attachment-picker .buttonwrapper {
214 214   margin: 0;
215 215  }
... ... @@ -218,6 +218,8 @@
218 218   background: url("$xwiki.getSkinFile('icons/silk/picture_edit.png')") no-repeat center center $theme.pageContentBackgroundColor !important;
219 219   border: 0 none !important;
220 220   border-bottom-left-radius: 8px;
227 + -moz-border-radius-bottomleft: 8px;
228 + -webkit-border-bottom-left-radius: 8px;
221 221   height: 18px;
222 222   position: absolute;
223 223   right: 0;
... ... @@ -231,7 +231,6 @@
231 231  ## --------------------------------------
232 232  ## Dashboard
233 233  /* prevent the clearfloats between buttons & dashboard gadgets from clearing the tabs as well, only the buttons float */
234 -.dashboard .clearfloats,
235 -.dashboard .clearfloats:after, .dashboard .clearfloats:before {
242 +.dashboard .clearfloats {
236 236   clear: right;
237 237  }
Content Type
... ... @@ -1,1 +1,0 @@
1 -LESS