Skip to content

Commit

Permalink
Broken styles in Administration's contextual bar (#14222)
Browse files Browse the repository at this point in the history 
* Wrap userEdit into contextual bar content

* Remove contextual bar header style when empty

* Fix padding in admin room info and admin user info
  • Loading branch information
@tassoevan @ggazzo
tassoevan authored and ggazzo committed Apr 23, 2019
1 parent abe05b6 commit b4df795
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 184 deletions.
5 changes: 5 additions & 0 deletions app/theme/client/imports/components/contextual-bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,11 @@

font-size: 20px;
}

&--empty {
border-bottom: none;
background: none;
}
}

& .search-form .rc-input__icon-svg {
Expand Down
1 change: 0 additions & 1 deletion app/theme/client/imports/general/base_old.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5011,7 +5011,6 @@ rc-old select,
flex-direction: column;

height: 100%;
padding: 20px;
}

&__header {
Expand Down
4 changes: 2 additions & 2 deletions app/ui-admin/client/rooms/adminRoomInfo.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template name="adminRoomInfo">
{{#with selectedRoom}}
<div class="content">
<section class="contextual-bar__content">
<div class="list-view channel-settings">
<div class="title">
<h2>{{_ "Room_Info"}}</h2>
Expand Down Expand Up @@ -97,6 +97,6 @@ <h2>{{_ "Room_Info"}}</h2>
</nav>
{{/if}}
</div>
</div>
</section>
{{/with}}
</template>
17 changes: 7 additions & 10 deletions app/ui-admin/client/users/adminUserInfo.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<template name="adminUserInfo">


{{#if _id}}
{{> userInfo .}}
{{else}}
<div class="edit-form">
<div>{{_ "Please_select_an_user"}}</div>
</div>
{{/if}}

{{#if _id}}
{{> userInfo .}}
{{else}}
<section class="contextual-bar__content">
<div>{{_ "Please_select_an_user"}}</div>
</section>
{{/if}}
</template>
2 changes: 1 addition & 1 deletion app/ui-flextab/client/flexTabBar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="flex-tab-container border-component-color {{opened}}">
<section class="flex-tab border-component-color content-background-color">
<div class="content flex-tab__content">
<header class="contextual-bar__header">
<header class="contextual-bar__header {{#unless headerData}}contextual-bar__header--empty{{/unless}}">
{{#with headerData}}
<div class="contextual-bar__header-data">
{{> icon block="contextual-bar__header-icon" icon=icon}}
Expand Down
284 changes: 143 additions & 141 deletions app/ui-flextab/client/tabs/userEdit.html
View file
Original file line number Diff line number Diff line change
@@ -1,170 +1,172 @@
<template name="userEdit">
{{#unless canEditOrAdd}}
<p class="secondary-font-color">{{_ "You_are_not_authorized_to_view_this_page"}}</p>
{{else}}
<form class="" action="index.html" method="post" autocomplete="off">
<div class="rc-form-group rc-form-group--small">
<label class="rc-form-label">
{{_ "Profile_picture"}}
</label>
<div class="rc-select-avatar">
<div class="rc-select-avatar__preview">
{{#if avatarPreview}}
{{#if $eq avatarPreview.service 'initials'}}
{{> avatar username=avatarPreview.blob}}
<section class="contextual-bar__content">
{{#unless canEditOrAdd}}
<p class="secondary-font-color">{{_ "You_are_not_authorized_to_view_this_page"}}</p>
{{else}}
<form action="index.html" method="post" autocomplete="off">
<div class="rc-form-group rc-form-group--small">
<label class="rc-form-label">
{{_ "Profile_picture"}}
</label>
<div class="rc-select-avatar">
<div class="rc-select-avatar__preview">
{{#if avatarPreview}}
{{#if $eq avatarPreview.service 'initials'}}
{{> avatar username=avatarPreview.blob}}
{{else}}
{{> avatar url=avatarPreview.blob}}
{{/if}}
{{else}}
{{> avatar url=avatarPreview.blob}}
{{> avatar username=user.username}}
{{/if}}
{{else}}
{{> avatar username=user.username}}
{{/if}}
</div>

<div class="rc-select-avatar__list">
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
{{> avatar username=initialsUsername }}
</div>
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
</label>
<input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg">
</div>
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}" aria-label="{{_ "Use_url_for_avatar" }}">
<label class="rc-select-avatar__upload-label avatar">
{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
</label>
</div>

<div class="rc-input">
<label class="rc-input__label">
<div class="rc-select-avatar__list">
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
{{> avatar username=initialsUsername }}
</div>
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
</label>
<input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg">
</div>
<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}" aria-label="{{_ "Use_url_for_avatar" }}">
<label class="rc-select-avatar__upload-label avatar">
{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
</label>
</div>

<div class="rc-input">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Use_url_for_avatar"}}
</div>
<div class="rc-input__wrapper">
<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
</div>
</label>
</div>
</div>
</div>
</div>
<div class="rc-input rc-form-group rc-form-group--small">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Use_url_for_avatar"}}
{{_ "Name"}}
</div>
<div class="rc-input__wrapper">
<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="name" autocomplete="off" value="{{user.name}}"/>
</div>
</label>
</div>
</div>
</label>
</div>
</div>
<div class="rc-input rc-form-group rc-form-group--small">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Name"}}
</div>
<div class="rc-input rc-form-group rc-form-group--small">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Username"}}
</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='at' }}
</div>
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="username" autocomplete="off" value="{{user.username}}"/>
</div>
</label>
</div>
<div class="rc-form-group rc-form-group--small">
<div class="rc-input">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Email"}}</div>
<div class="rc-input__wrapper">
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="name" autocomplete="off" value="{{user.name}}"/>
</div>
</label>
</div>
<div class="rc-input rc-form-group rc-form-group--small">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Username"}}
<div class="rc-input__icon">
{{> icon icon='mail' }}
</div>
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="email" autocomplete="off" value="{{user.emails.[0].address}}"/>
</div>
</label>
</div>
<div class="rc-switch">
<label class="rc-switch__label" tabindex="-1">
<input type="checkbox" class="rc-switch__input" name="type" id="verified" value="1" checked="{{user.emails.[0].verified}}"/>
<span class="rc-switch__button">
<span class="rc-switch__button-inside"></span>
</span>
<span class="rc-switch__text">
{{_ "Verified"}}
</span>
</label>
</div>
</div>


{{#if hasPermission 'edit-other-user-password'}}
<div class="rc-form-group rc-form-group--small rc-form-group--inline">
<div class="rc-input rc-form-item-inline">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Password"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='at' }}
</div>
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="username" autocomplete="off" value="{{user.username}}"/>
</div>
</label>
</div>
<div class="rc-form-group rc-form-group--small">
<div class="rc-input">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Email"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='mail' }}
<div class="rc-input__icon">
{{> icon icon='key' }}
</div>
<input name="password" class="rc-input__element rc-input__element--small" type="password" id="password" autocomplete="off" value=""/>
</div>
<input name="name" type="text" class="rc-input__element rc-input__element--small" id="email" autocomplete="off" value="{{user.emails.[0].address}}"/>
</div>
</label>
</label>
</div>
<button id="randomPassword" class="rc-button rc-button--primary rc-form-item-inline">{{_ 'Random'}}</button>
</div>
<div class="rc-switch">
<div class="rc-form-group rc-form-group--small rc-switch">
<label class="rc-switch__label" tabindex="-1">
<input type="checkbox" class="rc-switch__input" name="type" id="verified" value="1" checked="{{user.emails.[0].verified}}"/>
<input class="rc-switch__input" type="checkbox" id="changePassword" value="1" checked="{{requirePasswordChange}}"/>
<span class="rc-switch__button">
<span class="rc-switch__button-inside"></span>
</span>
<span class="rc-switch__text">
{{_ "Verified"}}
{{_ "Require_password_change"}}
</span>
</label>
</div>
</div>
{{/if}}

<label for="roles">{{_ "Roles"}}</label>
<div class="rc-form-group rc-form-group--small">
<ul id="roles" class="chip-container current-user-roles">
{{#each userRoles}}
<li class="remove-role" title="{{this}}"><i class="icon icon-cancel-circled"></i>{{this}}</li>
{{/each}}
</ul>
</div>

{{#if hasPermission 'edit-other-user-password'}}
<div class="rc-form-group rc-form-group--small rc-form-group--inline">
<div class="rc-input rc-form-item-inline">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Password"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='key' }}
</div>
<input name="password" class="rc-input__element rc-input__element--small" type="password" id="password" autocomplete="off" value=""/>
</div>
<label for="roleSelect">{{_ "Add_Role"}}</label>
<div class="rc-form-group rc-form-group--small rc-form-group--inline">
{{#let roles=role}}
<select id="roleSelect" class="rc-input rc-form-item-inline rc-input--small" {{disabled role}}>
<option value="placeholder" disabled selected>{{_ "Select_role"}}</option>
{{#each roles}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
</select>
{{/let}}
<button id="addRole" class="rc-button rc-button--primary rc-form-item-inline" {{disabled role}}>{{_ 'Add_Role'}}</button>
</div>
{{#unless user}}
<div class="input-line">
<label for="joinDefaultChannels">
<input type="checkbox" id="joinDefaultChannels" value="1" checked="true">
{{_ "Join_default_channels"}}
</label>
</div>
<button id="randomPassword" class="rc-button rc-button--primary rc-form-item-inline">{{_ 'Random'}}</button>
</div>
<div class="rc-form-group rc-form-group--small rc-switch">
<label class="rc-switch__label" tabindex="-1">
<input class="rc-switch__input" type="checkbox" id="changePassword" value="1" checked="{{requirePasswordChange}}"/>
<span class="rc-switch__button">
<span class="rc-switch__button-inside"></span>
</span>
<span class="rc-switch__text">
{{_ "Require_password_change"}}
</span>
</label>
</div>
{{/if}}

<label for="roles">{{_ "Roles"}}</label>
<div class="rc-form-group rc-form-group--small">
<ul id="roles" class="chip-container current-user-roles">
{{#each userRoles}}
<li class="remove-role" title="{{this}}"><i class="icon icon-cancel-circled"></i>{{this}}</li>
{{/each}}
</ul>
</div>

<label for="roleSelect">{{_ "Add_Role"}}</label>
<div class="rc-form-group rc-form-group--small rc-form-group--inline">
{{#let roles=role}}
<select id="roleSelect" class="rc-input rc-form-item-inline rc-input--small" {{disabled role}}>
<option value="placeholder" disabled selected>{{_ "Select_role"}}</option>
{{#each roles}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
</select>
{{/let}}
<button id="addRole" class="rc-button rc-button--primary rc-form-item-inline" {{disabled role}}>{{_ 'Add_Role'}}</button>
</div>
{{#unless user}}
<div class="input-line">
<label for="joinDefaultChannels">
<input type="checkbox" id="joinDefaultChannels" value="1" checked="true">
{{_ "Join_default_channels"}}
</label>
</div>
<div class="input-line">
<label for="sendWelcomeEmail">
<input type="checkbox" id="sendWelcomeEmail" value="1" checked="true">
{{_ "Send_welcome_email"}}
</label>
</div>
<div class="input-line">
<label for="sendWelcomeEmail">
<input type="checkbox" id="sendWelcomeEmail" value="1" checked="true">
{{_ "Send_welcome_email"}}
</label>
</div>
{{/unless}}
<div class="rc-user-info__flex rc-user-info__row">
<button class='rc-button rc-button--cancel cancel' type="button"><span>{{_ "Cancel"}}</span></button>
<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
</div>
</form>
{{/unless}}
<div class="rc-user-info__flex rc-user-info__row">
<button class='rc-button rc-button--cancel cancel' type="button"><span>{{_ "Cancel"}}</span></button>
<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
</div>
</form>
{{/unless}}
</section>
</template>
Loading

0 comments on commit b4df795

Please sign in to comment.