TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework user + avatar component with CSS flexboxes

Browse Source 
Signed-off-by: Alex Coles <alex@alexbcoles.com>
pull/1998/head
Alex Coles 10 years ago
parent 3247353380
commit fe5ea78d0f
5 changed files with 84 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 27
      app/assets/stylesheets/content/_user_avatars.md
  2. 23
      app/assets/stylesheets/content/_user_avatars.sass
  3. 8
      app/assets/stylesheets/content/_work_packages.sass
  4. 43
      app/assets/stylesheets/content/_work_packages_details_overview.md
  5. 16
      public/templates/work_packages/tabs/_user_field.html

27
app/assets/stylesheets/content/_user_avatars.md
Unescape View File

@ -15,3 +15,30 @@ Gravatar Mini:<br />
<img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar-mini" />
```
## User Avatar with Container
### with a user
```
<div class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">Max Mustermann</a>
</span>
<span class="user-avatar--role">
Fully Generic Person
</span>
</span>
</div>
```
### without a user
```
<div class="user-avatar--container">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user"> - </span>
</span>
</div>
```

23
app/assets/stylesheets/content/_user_avatars.sass
Unescape View File

@ -10,3 +10,26 @@ h1, h2, h3, h4, tr
.avatar, .avatar-mini
vertical-align: middle
margin-right: 7px
.user-avatar--container
+display(flex)
+align-items(flex-start)
.user-avatar--avatar
@extend .avatar-mini
margin-right: 0.5em
.user-avatar--user-with-role
+flex(1)
.user-avatar--user
display: block
line-height: 16px
.user-avatar--role
display: block
font-size: 11px
font-style: italic
color: #777777
line-height: 16px

8
app/assets/stylesheets/content/_work_packages.sass
Unescape View File

@ -176,8 +176,6 @@ div
clear: both
height: 24px
.user-field-user-link
float: left
.detail-panel-watchers-delete-watcher-icon
padding: 0 8px
font-size: 10px
@ -228,12 +226,6 @@ div
&.-text,
+ellipsis
span.role
font-size: 11px
font-size: 0.6875rem
font-style: italic
color: #777777
line-height: 20px
div.detail-panel-latest-activity
float: left

43
app/assets/stylesheets/content/_work_packages_details_overview.md
Unescape View File

@ -17,14 +17,14 @@
<div class="work-package-attributes--label">Assignee</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<p>
<span>
<img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user">
<a class="user-field-user-link" href="#">Max Mustermann</a>
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">testing.long.emails+filter-junk-away@openproject.org</a>
</span>
</span>
</p>
</span>
</div>
</div>
</li>
@ -32,14 +32,18 @@
<div class="work-package-attributes--label">Responsible</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<p>
<span>
<img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user">
<a class="user-field-user-link" href="#">Max Mustermann</a>
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
</span>
<span class="user-avatar--role">
Distinguished Statesman.
Former Minister for Economics and Technology.
</span>
</span>
</p>
</span>
</div>
</div>
</li>
@ -97,14 +101,17 @@
<div class="work-package-attributes--label">Custom User</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<p>
<span>
<img class="avatar-mini" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user">
<a class="user-field-user-link" href="#">Max Mustermann</a>
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">Max Mustermann</a>
</span>
<span class="user-avatar--role">
Fully Generic Person
</span>
</span>
</p>
</span>
</div>
</div>
</li>

16
public/templates/work_packages/tabs/_user_field.html
Unescape View File

@ -1,13 +1,15 @@
<p>
<span ng-if="userName">
<img class="avatar-mini"
<span class="user-avatar--container">
<span class="user-avatar--user-with-role" ng-if="userName">
<img class="user-avatar--avatar"
ng-if="user.props.avatar"
ng-src="{{user.props.avatar}}" alt="Avatar" title="{{userName}}" />
<span class="user">
<span class="user-avatar--user">
<a ng-href="{{ userPath(user.props.id) }}" ng-bind="user.props.name"
class="user-field-user-link"/>
</span>
<span class="role" ng-if="user.props.role" ng-bind="user.props.role"/>
<span class="user-avatar--role" ng-if="user.props.role" ng-bind="user.props.role"/>
</span>
<span ng-if="!userName"> - </span>
</p>
<span class="user-avatar--user-with-role" ng-if="!userName">
<span class="user-avatar--user"> - </span>
</span>
</span>

Write Preview
Loading…
Cancel
Save