diff --git a/app/assets/javascripts/discourse/components/group-card-contents.js.es6 b/app/assets/javascripts/discourse/components/group-card-contents.js.es6 index 2a73474d677..93f2b20260e 100644 --- a/app/assets/javascripts/discourse/components/group-card-contents.js.es6 +++ b/app/assets/javascripts/discourse/components/group-card-contents.js.es6 @@ -23,6 +23,11 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, { viewingTopic: Ember.computed.match("currentPath", /^topic\./), showMoreMembers: Ember.computed.gt("moreMembersCount", 0), + hasMembersOrIsMember: Ember.computed.or( + "group.members", + "group.is_group_owner_display", + "group.is_group_user" + ), group: null, diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6 index d13fcd101c1..d3fb83de496 100644 --- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 +++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6 @@ -46,6 +46,10 @@ export default Ember.Component.extend( "user.location", "user.website_name" ), + isSuspendedOrHasBio: Ember.computed.or( + "user.suspend_reason", + "user.bio_cooked" + ), showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"), user: null, @@ -53,6 +57,12 @@ export default Ember.Component.extend( // If inside a topic topicPostCount: null, + @computed("user.staff") + staff: isStaff => (isStaff ? "staff" : ""), + + @computed("user.trust_level") + newUser: trustLevel => (trustLevel === 0 ? "new-user" : ""), + @computed("user.name") nameFirst(name) { return ( diff --git a/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs index ef3b6fe87a9..f906f8ba549 100644 --- a/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs +++ b/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs @@ -1,72 +1,82 @@ {{#if visible}}
-
- - {{avatar-flair + +
+
+ + {{avatar-flair flairURL=group.flair_url flairBgColor=group.flair_bg_color flairColor=group.flair_color groupName=group.name}} - -
- -
- -

- {{ group.name }} -

- {{#if group.full_name}} -

{{group.full_name}}

- {{else}} -

{{group.name}}

- {{/if}} - -
- -
- {{group-membership-button - model=group - showLogin=(route-action "showLogin")}} - - {{#if group.messageable}} - {{d-button + +
+
+ +

+ {{group.name}} +

+ {{#if group.full_name}} +

{{group.full_name}}

+ {{else}} +

{{group.name}}

+ {{/if}} + +
+
+ {{group-membership-button + model=group + showLogin=(route-action "showLogin")}} + {{#if group.messageable}} + {{d-button action=(action "messageGroup") class="btn-primary group-message-button inline" icon="envelope" label="groups.message"}} - {{/if}} -
- - {{#if group.bio_cooked}}
{{{group.bio_cooked}}}
{{/if}} - -
-

- - {{i18n 'groups.user_count'}} - - {{ group.user_count }} -

-

- {{#if group.is_group_owner_display}} - - {{i18n "groups.index.is_group_owner"}} - {{else if group.is_group_user}} - - {{i18n "groups.index.is_group_user"}} {{/if}} -

-
- {{#if group.members}} -
- - {{#each group.members as |user|}} - {{bound-avatar user "tiny"}} - {{/each}} - {{#if showMoreMembers}} - +{{ moreMembersCount }} {{i18n "more"}} - {{/if}} - +
+ + {{#if group.bio_cooked}} +
+
{{{group.bio_cooked}}}
+
{{/if}} + + {{#if hasMembersOrIsMember}} +
+
+

+ + {{i18n 'groups.user_count'}} + + {{group.user_count}} +

+

+ {{#if group.is_group_owner_display}} + {{i18n "groups.index.is_group_owner"}} + {{else if group.is_group_user}} + {{i18n "groups.index.is_group_user"}} + {{/if}} +

+
+
+ {{/if}} + + {{#if group.members}} +
+
+ {{#each group.members as |user|}} + {{bound-avatar user "tiny"}} + {{/each}} + {{#if showMoreMembers}} + +{{moreMembersCount}} + {{i18n "more"}} + {{/if}} +
+
+ {{/if}} +
-{{/if}} +{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs index e9cb6048aaa..7242b76aa0f 100644 --- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs +++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs @@ -1,182 +1,201 @@ {{#if visible}}
-
- {{bound-avatar user "huge"}} - {{#if user.primary_group_name}} - {{avatar-flair + +
+
+ {{bound-avatar user "huge"}} + {{#if user.primary_group_name}} + {{avatar-flair flairURL=user.primary_group_flair_url flairBgColor=user.primary_group_flair_bg_color flairColor=user.primary_group_flair_color groupName=user.primary_group_name}} - {{/if}} - {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}} -
- -
- -

- {{if nameFirst user.name (format-username username)}} {{user-status user currentUser=currentUser}} -

- {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}} - - {{#unless nameFirst}} - {{#if user.name}} -

{{user.name}}

+ {{/if}} + {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}} +
+
+ +

+ {{if nameFirst user.name (format-username username)}} + {{user-status user currentUser=currentUser}} +

+ {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}} + {{#unless nameFirst}} + {{#if user.name}} +

{{user.name}}

+ {{/if}} + {{else}} +

{{username}}

+ {{/unless}} + {{#if user.title}} +

{{user.title}}

{{/if}} - {{else}} -

{{username}}

- {{/unless}} - - {{#if user.title}} -

{{user.title}}

- {{/if}} - - {{#if user.staged}} -

{{i18n 'user.staged'}}

- {{/if}} - - {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}} - -
- -
    - {{#if user.can_send_private_message_to_user}} -
  • - {{d-button + {{#if user.staged}} +

    {{i18n 'user.staged'}}

    + {{/if}} + {{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}} + +
+
    + {{#if user.can_send_private_message_to_user}} +
  • + {{d-button class="btn-primary" action=(route-action "composePrivateMessage" user post) icon="envelope" label="user.private_message"}} -
    • - {{/if}} - - {{#if showFilter}} -
  • - {{d-button +
    • + {{/if}} + {{#if showFilter}} +
  • + {{d-button class="btn-default" action=(action "togglePosts" user) icon="filter" translatedLabel=togglePostsLabel}} -
    • - {{/if}} - - {{#if hasUserFilters}} -
  • - {{d-button +
    • + {{/if}} + {{#if hasUserFilters}} +
  • + {{d-button action=(action "cancelFilter") icon="times" label="topic.filters.cancel"}} -
    • - {{/if}} - - {{#if showDelete}} -
  • - {{d-button +
    • + {{/if}} + {{#if showDelete}} +
  • + {{d-button class="btn-danger" action=(action "deleteUser") actionParam=user icon="exclamation-triangle" label="admin.user.delete"}} -
    • - {{/if}} -
- - {{plugin-outlet + + {{/if}} + + {{plugin-outlet name="user-card-additional-controls" args=(hash user=user close=(action "close")) tagName=""}} +
- {{#if user.suspend_reason}} -
- {{d-icon "ban"}} - {{i18n 'user.suspended_notice' date=user.suspendedTillDate}}
- {{i18n 'user.suspended_reason'}} {{user.suspend_reason}} + {{#if isSuspendedOrHasBio}} +
+ {{#if user.suspend_reason}} +
+
+ {{d-icon "ban"}} + {{i18n 'user.suspended_notice' date=user.suspendedTillDate}} +
+
+ {{i18n 'user.suspended_reason'}} + {{user.suspend_reason}} +
+
+ {{else}} + {{#if user.bio_cooked}} +
{{text-overflow class="overflow" text=user.bio_excerpt}}
+ {{/if}} + {{/if}}
- {{else}} - {{#if user.bio_cooked}}
{{text-overflow class="overflow" text=user.bio_excerpt}}
{{/if}} {{/if}} {{#if hasLocationOrWebsite}} -
- {{#if user.location}} - {{d-icon "map-marker-alt"}} {{user.location}} - {{/if}} - - {{#if user.website_name}} - - {{d-icon "globe"}} - {{#if linkWebsite}} - {{user.website_name}} - {{else}} - {{user.website_name}} - {{/if}} - - {{/if}} - - {{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}} +
+
+ {{#if user.location}} + {{d-icon "map-marker-alt"}} + {{user.location}} + {{/if}} + {{#if user.website_name}} + + {{d-icon "globe"}} + {{#if linkWebsite}} + {{user.website_name}} + {{else}} + {{user.website_name}} + {{/if}} + + {{/if}} + {{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}} +
{{/if}} {{#if user}} - {{#unless user.profile_hidden}} -
- {{#if user.last_posted_at}} -

{{i18n 'last_post'}} {{format-date user.last_posted_at leaveAgo="true"}}

- {{/if}} -

{{i18n 'joined'}} {{format-date user.created_at leaveAgo="true"}}

-

- {{i18n 'time_read'}} - {{format-duration user.time_read}} - {{#if showRecentTimeRead}} - ({{i18n 'time_read_recently' time_read=recentTimeRead}}) +
+ {{#unless user.profile_hidden}} +
+ {{#if user.last_posted_at}} +

{{i18n 'last_post'}} + {{format-date user.last_posted_at leaveAgo="true"}}

{{/if}} -

- {{#if showCheckEmail}} -

{{i18n 'joined'}} + {{format-date user.created_at leaveAgo="true"}}

+

+ {{i18n 'time_read'}} + {{format-duration user.time_read}} + {{#if showRecentTimeRead}} + ({{i18n 'time_read_recently' time_read=recentTimeRead}}) {{/if}}

- {{/if}} - {{plugin-outlet name="user-card-metadata" args=(hash user=user)}} -
- {{/unless}} - - {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} - + {{#if showCheckEmail}} + + {{/if}} + {{plugin-outlet name="user-card-metadata" args=(hash user=user)}} +
+ {{/unless}} + {{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} +
{{/if}} {{#if publicUserFields}} -
- {{#each publicUserFields as |uf|}} - {{#if uf.value}} -
- {{uf.field.name}}: - {{uf.value}} -
- {{/if}} - {{/each}} +
+
+ {{#each publicUserFields as |uf|}} + {{#if uf.value}} +
+ {{uf.field.name}}: + {{uf.value}} +
+ {{/if}} + {{/each}} +
{{/if}} {{plugin-outlet name="user-card-before-badges" args=(hash user=user)}} {{#if showBadges}} - {{#if user.featured_user_badges}} -
- {{#each user.featured_user_badges as |ub|}} - {{user-badge badge=ub.badge user=user}} - {{/each}} - {{#if showMoreBadges}} - {{#link-to 'user.badges' user class="btn more-user-badges"}} - {{i18n 'badges.more_badges' count=moreBadgesCount}} - {{/link-to}} +
+ {{#if user.featured_user_badges}} +
+ {{#each user.featured_user_badges as |ub|}} + {{user-badge badge=ub.badge user=user}} + {{/each}} + {{#if showMoreBadges}} + {{#link-to 'user.badges' user class="user-badge more-user-badges"}} + {{i18n 'badges.more_badges' count=moreBadgesCount}} + {{/link-to}} + {{/if}} +
{{/if}}
- {{/if}} {{/if}} +
-{{/if}} +{{/if}} \ No newline at end of file diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss index 84990e84dbe..e294a1cde7d 100644 --- a/app/assets/stylesheets/desktop/user-card.scss +++ b/app/assets/stylesheets/desktop/user-card.scss @@ -1,33 +1,26 @@ -// styles that apply to the "share" popup when sharing a link to a post or topic -// Colors should mostly be absolute here, it will look the same in dark & light themes - -$user_card_primary: $primary; -$user_card_background: $secondary; +$card_width: 580px; +$avatar_width: 120px; +$avatar_margin: -50px; // negative margin makes avatars extend above cards +// shared styles for user and group cards #user-card, #group-card { position: absolute; - width: 580px; - left: -9999px; - top: -9999px; + width: $card_width; z-index: z("usercard"); box-shadow: shadow("card"); - margin-top: -2px; - color: $user_card_primary; - background: $user_card_background center center; + color: $primary; + background: $secondary center center; background-size: cover; min-height: 175px; - -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; - + -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; opacity: 0; @include transform(scale(0.9)); - &.show { opacity: 1; @include transform(scale(1)); } - &.fixed { position: fixed; z-index: z("composer", "content") + 1; @@ -38,290 +31,234 @@ $user_card_background: $secondary; } .card-content { - padding: 12px 12px 0 12px; - background: rgba($user_card_background, 0.85); + padding: 12px; + background: rgba($secondary, 0.85); margin-top: 80px; - &:after { content: ""; display: block; clear: both; } - a.card-huge-avatar { outline: none; } } - - .bio { - max-height: 150px; - overflow: auto; - } - &.no-bg { min-height: 50px; - .card-content { margin-top: 0; } } - - .avatar-placeholder { - width: 120px; - height: 120px; - float: left; - padding-right: 10px; + .names { + flex: 1 1 auto; + margin-left: 0.75em; + span { + display: block; + } } - h1 { - min-width: 120px; - font-size: $font-up-4; + margin: 0; line-height: $line-height-medium; - display: block; - max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; a { - color: $user_card_primary; + color: $primary; } .d-icon { font-size: $font-down-1; - color: $user_card_primary; + color: $primary; } } - h2 { font-size: $font-up-1; - line-height: $line-height-large; margin: 0; font-weight: normal; - display: block; - max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; a { - color: $user_card_primary; + color: $primary; } } - h3 { + display: inline; + margin-right: 0.5em; font-size: $font-0; font-weight: normal; - margin-top: 0; - color: scale-color($user_card_primary, $lightness: 20%); - overflow: hidden; - text-overflow: ellipsis; + color: $primary; + .desc, a { - color: scale-color($user_card_background, $lightness: 50%); + color: $primary-high; } } - - .groups { - font-size: $font-down-1; - font-weight: normal; - margin-top: 0; - color: $user_card_background; - - .group-link { - color: $user_card_background; - } - } - - .metadata { - width: 100%; - clear: both; - padding-top: 10px; - padding-bottom: 10px; - h3 { - display: inline; - margin-right: 5px; - .desc, - a { - color: scale-color($user_card_primary, $lightness: 35%); - } - } - div { - display: inline; - color: scale-color($user_card_background, $lightness: 50%); - .group-link { - color: scale-color($user_card_background, $lightness: 50%); - } - } - } - - .bottom { - clear: both; - padding-top: 10px; - } - - .bio { - margin-top: 80px; - clear: left; - - a { - color: $user_card_primary; - text-decoration: underline; - } - img { - max-width: 100%; - } - - a.mention { - text-decoration: none; - } - - .overflow { - max-height: 60px; - overflow: hidden; - } - } - - .location-and-website { - display: flex; - width: 100%; - align-items: center; - padding-top: 5px; - .location, - .website-name { - display: flex; - max-width: 90%; - overflow: hidden; - align-items: baseline; - .d-icon { - margin-right: 0.25em; - } - } - .website-name a, - .location span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: $user_card_primary; - } - .location { - margin-right: 0.5em; - } - .website-name a { - text-decoration: underline; - } - } - - .user-card-avatar, - .group-card-avatar { - float: left; - margin-right: 10px; - margin-top: -53px; - } - - .group-card-avatar { - $size: 120px; - width: $size; - height: $size; - .avatar-flair { - width: $size; - height: $size; - display: flex; - align-items: center; - background-repeat: no-repeat; - background-position: center; - background-size: $size; - color: $primary; - .d-icon { - margin: auto; - font-size: $size / 1.5 !important; - } - &.rounded { - border-radius: 50%; - } - } - } - - .members { - padding: 0 0 10px 0; - a { - color: lighten($primary, 40%); - &:hover { - color: $primary; - } - } - } - p { margin: 0 0 5px 0; } - .btn { - margin: 0 0 7px 0; - box-sizing: border-box; + margin-bottom: 5px; } - .usercard-controls { list-style-type: none; - float: right; margin: 0; - button { width: 100%; min-width: 150px; } } - - .new-user a { - color: scale-color($user_card_background, $lightness: 70%); - } - - .names { - float: left; - width: 45%; - - span { - display: block; - width: 250px; - } - } - - .badge-section { - display: flex; - align-items: flex-start; - padding-bottom: 10px; - margin-top: 5px; - span { - overflow: hidden; - text-overflow: ellipsis; - max-width: 185px; - } - .user-badge { - display: flex; - white-space: nowrap; - margin-right: 0.5em; - background: $primary-very-low; - border: 1px solid $primary-low; - color: $user_card_primary; - } - - h3 { - color: $user_card_background; - font-size: $font-0; - margin-bottom: -8px; - } - } - - .more-user-badges { - @extend .user-badge; - padding: 3px 8px; - white-space: nowrap; - } - - .suspended { - color: $danger; - margin-bottom: 5px; - clear: left; - padding-top: 15px; - } - - .metadata .email .btn { - padding: 2px 12px; + .card-row:not(.first-row) { + margin-top: 0.5em; + } +} + +// styles for user cards +#user-card { + // avatar - names - controls + .first-row { + display: flex; + .avatar-placeholder { + width: $avatar_width; + height: $avatar_width; + } + .user-card-avatar { + margin-right: 10px; + margin-top: $avatar_margin; + } + .new-user a { + color: $primary-low-mid; + } + } + // user bio - suspension reason + .second-row { + max-height: 150px; + overflow: auto; + .bio { + a { + color: $primary; + text-decoration: underline; + } + a.mention { + text-decoration: none; + } + .overflow { + max-height: 60px; + overflow: hidden; + } + } + .suspended { + color: $danger; + .suspension-reason-title, + .suspension-date { + font-weight: bold; + } + } + } + // location and website + .third-row { + .location-and-website { + display: flex; + flex-wrap: wrap; + width: 100%; + align-items: center; + .location, + .website-name { + display: flex; + overflow: hidden; + align-items: center; + .d-icon { + margin-right: 0.25em; + } + } + .website-name a, + .location span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: $primary; + } + .location { + margin-right: 0.5em; + } + .website-name a { + text-decoration: underline; + } + } + } + // custom user fields + .fifth-row { + .public-user-fields { + margin: 0; + } + } + // badges + .sixth-row { + .badge-section { + display: flex; + align-items: flex-start; + .user-badge { + display: flex; + white-space: nowrap; + margin: 0 0.5em 0 0; + background: $primary-very-low; + border: 1px solid $primary-low; + color: $primary; + } + .badge-display-name { + overflow: hidden; + text-overflow: ellipsis; + max-width: 185px; + } + .more-user-badges { + overflow: hidden; + } + } + } +} + +// styles for group cards +#group-card { + // avatar - names and controls + .first-row { + display: flex; + .group-card-avatar { + margin-top: $avatar_margin; + } + .group-card-avatar { + .avatar-flair { + width: $avatar_width; + height: $avatar_width; + display: flex; + color: $primary; + .d-icon { + margin: auto; + font-size: $avatar_width / 1.5; + } + &.rounded { + border-radius: 50%; + } + } + } + } + // group bio + .second-row { + max-height: 150px; + overflow: auto; + .bio { + a { + color: $primary; + text-decoration: underline; + } + img { + max-width: 100%; + height: auto; + } + a.mention { + text-decoration: none; + } + .overflow { + max-height: 60px; + overflow: hidden; + } + } } }