.annotationAvatar img { + max-width: 50px; + max-height: 50px; +} the initial proposal contained #smallUserAvatar (30px) instead of #mediumUserAvatar (50px) http://incubator.myxwiki.org/xwiki/bin/Improvements/AvatarsProposalAnnotati…

On Tue, Oct 5, 2010 at 01:39, sdumitriu &lt;platform-notifications(a)xwiki.org <mailto:platform-notifications@xwiki.org>> wrote: Author: sdumitriu Date: 2010-10-05 00:39:24 +0200 (Tue, 05 Oct 2010) New Revision: 31632 Modified: platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Macros.xml platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Style.xml Log: XAANNOTATIONS-34: Display user avatars on annotations Done. + minor layout changes to make the UI more consistent with the comments tab. Modified: platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Macros.xml =================================================================== --- platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Macros.xml 2010-10-04 22:38:42 UTC (rev 31631) +++ platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Macros.xml 2010-10-04 22:39:24 UTC (rev 31632) @@ -134,6 +134,7 @@ #set($mode = 'view') #end &lt;div class="annotation $!{ann.state}" id="annotation_${mode}_$!{ann.id <http://ann.id>}"&gt; + &lt;div class="annotationAvatar"&gt;#mediumUserAvatar($ann.author)&lt;/div&gt; &lt;div class="annotationHeader"&gt; #displayAnnotationTitle($ann) #displayAnnotationToolbox($ann $mode $docWiki $docSpace $docPage) @@ -213,6 +214,18 @@ ## Fake object that allows to use the API to generate the display #set($fakeObj = $doc.newObject($annotationClassDocName)) #set($properties = $annotationClass.properties) + #if ($properties.size() == $hiddenProperties.size() + 1) + ## Do not show property labels if there's only one property to display + #set($prop = $annotationClass.get('annotation')) + #set($discard = $fakeObj.set($prop.name <http://prop.name>, "$!{ann.get($prop.name <http://prop.name>)}")) + &lt;div class="annotationText"&gt; + #if($mode == 'edit' || $mode == 'create') + $doc.displayEdit($prop, '', $fakeObj) + #else + $doc.displayView($prop, '', $fakeObj) + #end + &lt;/div&gt; + #else &lt;dl&gt; #foreach($prop in $properties) #if (!$listtool.contains($hiddenProperties, $prop.name <http://prop.name>)) @@ -226,6 +239,7 @@ #end #end &lt;/dl&gt; + #end #end {{/velocity}}</content> </xwikidoc> Modified: platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Style.xml =================================================================== --- platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Style.xml 2010-10-04 22:38:42 UTC (rev 31631) +++ platform/xwiki-applications/trunk/annotations/src/main/resources/AnnotationCode/Style.xml 2010-10-04 22:39:24 UTC (rev 31632) @@ -241,7 +241,7 @@ } .annotation-box { - padding: 2px 12px 4px 6px; + padding: 6px 12px; } .annotation-bubble .loading { @@ -252,6 +252,29 @@ width: 99%; } +.annotationAvatar { + float: left; + width: 55px; + text-align: left; +} +.annotationAvatar img { + max-width: 50px; + max-height: 50px; +} +* html .annotationAvatar img { + width: 50px; +} + +#allAnnotations .annotationAvatar { + padding-top: 5px; +} + +#allAnnotations .annotationHeader, #allAnnotations .annotationContent { + margin-left: 55px; +} +#allAnnotations .annotationTitle * { + line-height: 1.4em; +} .annotation-box .annotationAuthor { border-bottom: 1px dotted $theme.borderColor; display: block; @@ -264,30 +287,10 @@ margin-right: 51px; display: block; } -.annotationContent { +.annotation-bubble .annotationContent { clear: both; } -## In velocity comment: settings for using the larger images from silk -.annotation-box .annotation { - ##padding: 0 0 0 18px; - ##background: transparent #imgURL('note') left top no-repeat; - padding: 0 0 0 14px; - background: transparent #attImgURL('notesmall') left 4px no-repeat; -} -.annotation-box .buttons { - ##padding: 0 0 0 18px; - padding: 0 0 0 14px; -} - -/* Make room for the large note_add icon */ -.annotation-box-create .annotation, .annotation-box-create .buttons { - padding-left: 18px !important; -} -.annotation-box-create .annotation { - background: transparent #imgURL('note_add') left top no-repeat !important; -} - .annotation-box .links { float: right; font-size: 80%; @@ -298,20 +301,20 @@ background-image: #imgURL('note_add'); } -/* Annotations list (extra-tab)*/ -## In velocity comment: settings for using the larger images from silk +/* Annotations list (extra-tab) */ #allAnnotations .annotation { - margin: 8px 0; - ##padding: 0 0 0 18px; - ##background: transparent #imgURL('note') left top no-repeat; - padding: 0 0 0 14px; + margin: 0 0 8px; +} +#allAnnotations .annotation .annotationText { + padding: 0 36px 0 14px; background: transparent #attImgURL('notesmall') left 4px no-repeat; + text-align: justify; } -#allAnnotations .UPDATED, #xwikicontent .UPDATED, .annotation-bubble .UPDATED { +#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED { ##background-image: #imgURL('note_error'); background-image: #attImgURL('notesmallorange'); } -#allAnnotations .ALTERED, #xwikicontent .ALTERED, .annotation-bubble .ALTERED { +#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED { ##background-image: #imgURL('note_delete'); background-image: #attImgURL('notesmallred'); } @@ -331,7 +334,6 @@ display: block; float: right; margin-top: -1.2em; - margin-right: -2px; } .annotationTools a { background: transparent none no-repeat left top; @@ -372,6 +374,9 @@ } .annotationContent dd, .annotationContent blockquote { margin-bottom: 10px; +} +.annotationContent blockquote { + padding-left: 12px; }</code> </property> <property>