Skip to content

Commit

Permalink
[FIX] Button on user info contextual bar scrolling with the content (#…
Browse files Browse the repository at this point in the history 
…10358)

* Revert contextual bar style
* Fix user info with a wrapper
  • Loading branch information
@okaybroda @graywolf336
okaybroda authored and graywolf336 committed Apr 18, 2018
1 parent 6fe8e11 commit adb3f97
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 78 deletions.
11 changes: 6 additions & 5 deletions packages/rocketchat-theme/client/imports/components/contextual-bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,17 @@
}

&__content {
display: flex;
overflow: auto;

flex-direction: column;

flex: 1 1 auto;

height: 100%;

padding: var(--default-padding);

& .js-back {
width: 100%;
margin-top: 2rem;
}
justify-content: space-between;

& .section:not(:last-child) {
margin-bottom: 2rem;
Expand Down
148 changes: 75 additions & 73 deletions packages/rocketchat-ui-flextab/client/tabs/userInfo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,95 +18,97 @@ <h1 class="contextual-bar__header-title">{{_ "User_Info"}}</h1>
{{> userEdit (userToEdit)}}
{{else}}
{{#with user}}
<main class="contextual-bar__content rc-user-info-wrapper">
<div class="rc-user-info">
<div class="rc-user-info__avatar">
{{> avatar username=username}}
</div>
<h3 title="{{name}}" class="rc-user-info__name"><i class="status-{{status}}"></i> {{name}}</h3>
{{#if username}}<p class="rc-user-info__username">@{{username}}</p>{{/if}}
<span class="rc-header__status">
<main class="contextual-bar__content">
<div class="rc-user-info-wrapper">
<div class="rc-user-info">
<div class="rc-user-info__avatar">
{{> avatar username=username}}
</div>
<h3 title="{{name}}" class="rc-user-info__name"><i class="status-{{status}}"></i> {{name}}</h3>
{{#if username}}<p class="rc-user-info__username">@{{username}}</p>{{/if}}
<span class="rc-header__status">
<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{userStatus}}"></div>
<div class="rc-header__visual-status">{{userStatus}}</div>
</span>
</div>
</div>

<div class="rc-user-info-action">
{{#each actions}}
<button class="js-action rc-user-info-action__item">
{{> icon block="rc-user-info-action__icon" icon=icon }}
{{_ ./name}}
</button>
{{/each}}
{{# with moreActions}}
<button class="rc-tooltip rc-room-actions__button js-more" aria-label="{{_ 'More'}}">
{{> icon block="tab-button-icon" icon="menu" }}
</button>
{{/with}}
</div>
<div class="rc-user-info-action">
{{#each actions}}
<button class="js-action rc-user-info-action__item">
{{> icon block="rc-user-info-action__icon" icon=icon }}
{{_ ./name}}
</button>
{{/each}}
{{# with moreActions}}
<button class="rc-tooltip rc-room-actions__button js-more" aria-label="{{_ 'More'}}">
{{> icon block="tab-button-icon" icon="menu" }}
</button>
{{/with}}
</div>

<div class="rc-user-info-details">
{{#if roleTags}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">Roles</label>
<ul class="chip-container current-user-roles">
{{#each roleTags}}
<li class="role-tag" title="{{description}}">{{description}}</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if hasPermission 'view-full-other-user-info'}}
{{#if hasEmails}}
<div class="rc-user-info-details">
{{#if roleTags}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">Email address</label>
{{#each emails}} <a href="mailto:{{address}}" class="rc-user-info-details__info">{{address}}{{#if verified}}&nbsp;<i class="icon-ok success-color"></i>{{/if}}</a> {{/each}}
<label class="rc-user-info-details__label ">Roles</label>
<ul class="chip-container current-user-roles">
{{#each roleTags}}
<li class="role-tag" title="{{description}}">{{description}}</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if hasPhone}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">Phone number</label>
{{#each phone}} <a href="tel:{{phoneNumber}}" class="rc-user-info-details__info">{{phoneNumber}}</a> {{/each}}
</div>
{{#if hasPermission 'view-full-other-user-info'}}
{{#if hasEmails}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">Email address</label>
{{#each emails}} <a href="mailto:{{address}}" class="rc-user-info-details__info">{{address}}{{#if verified}}&nbsp;<i class="icon-ok success-color"></i>{{/if}}</a> {{/each}}
</div>
{{/if}}
{{#if hasPhone}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">Phone number</label>
{{#each phone}} <a href="tel:{{phoneNumber}}" class="rc-user-info-details__info">{{phoneNumber}}</a> {{/each}}
</div>
{{/if}}
{{#if createdAt}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Created_at"}}</label>
<p class="rc-user-info-details__info">{{createdAt}}</p>
</div>
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Last_login"}}</label>
<p class="rc-user-info-details__info">{{lastLogin}}</p>
</div>
{{/if}}
{{#if shouldDisplayReason}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Reason_To_Join"}}</label>
<p class="rc-user-info-details__info">{{user.reason}}</p>
</div>
{{/if}}
{{/if}}
{{#if createdAt}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Created_at"}}</label>
<p class="rc-user-info-details__info">{{createdAt}}</p>
</div>
{{#if utc}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Last_login"}}</label>
<p class="rc-user-info-details__info">{{lastLogin}}</p>
<label class="rc-user-info-details__label">Timezone</label>
<p class="rc-user-info-details__info">{{userTime}} (UTC {{utc}})</p>
</div>
{{/if}}
{{#if shouldDisplayReason}}
{{#each customField}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label ">{{_ "Reason_To_Join"}}</label>
<p class="rc-user-info-details__info">{{user.reason}}</p>
<label class="rc-user-info-details__label">{{label}}</label>
<p class="rc-user-info-details__info">{{value}}</p>
</div>
{{/if}}
{{/if}}
{{#if utc}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label">Timezone</label>
<p class="rc-user-info-details__info">{{userTime}} (UTC {{utc}})</p>
</div>
{{/if}}
{{#each customField}}
{{/each}}
<div class="rc-user-info-details__item">
<label class="rc-user-info-details__label">{{label}}</label>
<p class="rc-user-info-details__info">{{value}}</p>
{{#if services.facebook.id}} <p class="secondary-font-color"><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
{{#if services.github.id}} <p class="secondary-font-color"><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
{{#if services.gitlab.id}} <p class="secondary-font-color"><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
{{#if services.google.id}} <p class="secondary-font-color"><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
{{#if services.linkedin.id}} <p class="secondary-font-color"><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
{{#if servicesMeteor.id}} <p class="secondary-font-color"><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
{{#if services.twitter.id}} <p class="secondary-font-color"><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
{{#if services.wordpress.id}} <p class="secondary-font-color"><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
</div>
{{/each}}
<div class="rc-user-info-details__item">
{{#if services.facebook.id}} <p class="secondary-font-color"><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
{{#if services.github.id}} <p class="secondary-font-color"><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
{{#if services.gitlab.id}} <p class="secondary-font-color"><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
{{#if services.google.id}} <p class="secondary-font-color"><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
{{#if services.linkedin.id}} <p class="secondary-font-color"><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
{{#if servicesMeteor.id}} <p class="secondary-font-color"><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
{{#if services.twitter.id}} <p class="secondary-font-color"><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
{{#if services.wordpress.id}} <p class="secondary-font-color"><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
</div>
</div>
{{#if ../showAll}}
Expand Down

0 comments on commit adb3f97

Please sign in to comment.