Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Broken styles in Administration's contextual bar #14222

Merged
merged 3 commits into from
Apr 23, 2019
Merged

Broken styles in Administration's contextual bar #14222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7b3d1a
Wrap userEdit into contextual bar content
tassoevan Apr 23, 2019
db7e052
Remove contextual bar header style when empty
tassoevan Apr 23, 2019
2a4a62b
Fix padding in admin room info and admin user info
tassoevan Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/theme/client/imports/components/contextual-bar.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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