Merge pull request #939 from asaadmahmoodspin/plt-424

Admin console UI Improvements
Этот коммит содержится в:
Corey Hulen
2015-10-06 08:54:02 -07:00
родитель c71f56a666 294ecd716e
Коммит cbe1ab8dba
9 изменённых файлов: 335 добавлений и 324 удалений

Просмотреть файл

@@ -147,7 +147,7 @@ export default class AdminController extends React.Component {
}
return (
<div className='container-fluid'>
<div>
<div
className='sidebar--menu'
id='sidebar-menu'

Просмотреть файл

@@ -129,141 +129,143 @@ export default class AdminSidebar extends React.Component {
<div className='sidebar--left sidebar--collapsable'>
<div>
<AdminSidebarHeader />
<ul className='nav nav-pills nav-stacked'>
<li>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'SETTINGS'}</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
<a
href='#'
className={this.isSelected('service_settings')}
onClick={this.handleClick.bind(this, 'service_settings', null)}
>
{'Service Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('team_settings')}
onClick={this.handleClick.bind(this, 'team_settings', null)}
>
{'Team Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('sql_settings')}
onClick={this.handleClick.bind(this, 'sql_settings', null)}
>
{'SQL Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('email_settings')}
onClick={this.handleClick.bind(this, 'email_settings', null)}
>
{'Email Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('image_settings')}
onClick={this.handleClick.bind(this, 'image_settings', null)}
>
{'File Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('log_settings')}
onClick={this.handleClick.bind(this, 'log_settings', null)}
>
{'Log Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('rate_settings')}
onClick={this.handleClick.bind(this, 'rate_settings', null)}
>
{'Rate Limit Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('privacy_settings')}
onClick={this.handleClick.bind(this, 'privacy_settings', null)}
>
{'Privacy Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('gitlab_settings')}
onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
>
{'GitLab Settings'}
</a>
</li>
</ul>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'TEAMS (' + count + ')'}</span>
<span className='menu-icon--right'>
<a
href='#'
onClick={this.showTeamSelect}
>
<i className='fa fa-plus'></i>
</a>
</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
{teams}
</li>
</ul>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'OTHER'}</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
<a
href='#'
className={this.isSelected('logs')}
onClick={this.handleClick.bind(this, 'logs', null)}
>
{'Logs'}
</a>
</li>
</ul>
</li>
</ul>
<div className='nav-pills__container'>
<ul className='nav nav-pills nav-stacked'>
<li>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'SETTINGS'}</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
<a
href='#'
className={this.isSelected('service_settings')}
onClick={this.handleClick.bind(this, 'service_settings', null)}
>
{'Service Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('team_settings')}
onClick={this.handleClick.bind(this, 'team_settings', null)}
>
{'Team Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('sql_settings')}
onClick={this.handleClick.bind(this, 'sql_settings', null)}
>
{'SQL Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('email_settings')}
onClick={this.handleClick.bind(this, 'email_settings', null)}
>
{'Email Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('image_settings')}
onClick={this.handleClick.bind(this, 'image_settings', null)}
>
{'File Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('log_settings')}
onClick={this.handleClick.bind(this, 'log_settings', null)}
>
{'Log Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('rate_settings')}
onClick={this.handleClick.bind(this, 'rate_settings', null)}
>
{'Rate Limit Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('privacy_settings')}
onClick={this.handleClick.bind(this, 'privacy_settings', null)}
>
{'Privacy Settings'}
</a>
</li>
<li>
<a
href='#'
className={this.isSelected('gitlab_settings')}
onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
>
{'GitLab Settings'}
</a>
</li>
</ul>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'TEAMS (' + count + ')'}</span>
<span className='menu-icon--right'>
<a
href='#'
onClick={this.showTeamSelect}
>
<i className='fa fa-plus'></i>
</a>
</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
{teams}
</li>
</ul>
<ul className='nav nav__sub-menu'>
<li>
<h4>
<span className='icon fa fa-gear'></span>
<span>{'OTHER'}</span>
</h4>
</li>
</ul>
<ul className='nav nav__sub-menu padded'>
<li>
<a
href='#'
className={this.isSelected('logs')}
onClick={this.handleClick.bind(this, 'logs', null)}
>
{'Logs'}
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<SelectTeamModal

Просмотреть файл

@@ -437,7 +437,7 @@ export default class EmailSettings extends React.Component {
</select>
<div className='help-text'>
<table
className='table-bordered'
className='table table-bordered'
cellPadding='5'
>
<tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr>
@@ -447,7 +447,7 @@ export default class EmailSettings extends React.Component {
</div>
<div className='help-text'>
<button
className='help-link'
className='btn'
onClick={this.handleTestConnection}
disabled={!this.state.sendEmailNotifications}
id='connection-button'
@@ -482,7 +482,7 @@ export default class EmailSettings extends React.Component {
<p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
<div className='help-text'>
<button
className='help-link'
className='btn'
onClick={this.handleGenerateInvite}
disabled={!this.state.sendEmailNotifications}
>
@@ -513,7 +513,7 @@ export default class EmailSettings extends React.Component {
<p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
<div className='help-text'>
<button
className='help-link'
className='btn'
onClick={this.handleGenerateReset}
disabled={!this.state.sendEmailNotifications}
>

Просмотреть файл

@@ -460,7 +460,7 @@ export default class FileSettings extends React.Component {
<p className='help-text'>{'32-character salt added to signing of public image links. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
<div className='help-text'>
<button
className='help-link'
className='btn btn-default'
onClick={this.handleGenerate}
>
{'Re-Generate'}

Просмотреть файл

@@ -253,7 +253,7 @@ export default class LogSettings extends React.Component {
{'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'}
<div className='help-text'>
<table
className='table-bordered'
className='table table-bordered'
cellPadding='5'
>
<tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr>

Просмотреть файл

@@ -428,6 +428,7 @@ export function applyTheme(theme) {
if (theme.sidebarTextActiveColor) {
changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2);
changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 2);
}
if (theme.sidebarHeaderBg) {

Просмотреть файл

@@ -1,193 +1,202 @@
.sidebar--left { &.sidebar--collapsable {
background: #333;
.team__header {
background: transparent;
margin-bottom: 5px;
}
.nav {
li {
padding: 0;
.icon {
width: 17px;
}
> a {
color: #fff;
padding: 9px 15px;
display: block;
&:hover, &.active, &:focus {
background-color: $primary-color;
}
}
> h4 {
background: #333;
padding: 10px 10px;
margin: 1px 0 0;
}
}
.menu-icon--right {
vertical-align: top;
padding: 5px 10px;
margin: -5px;
float: right;
.fa {
font-size: 13px;
right: -2px;
position: relative;
color: #fff;
}
}
&.nav__sub-menu {
background: #111;
-webkit-font-smoothing: auto;
&.padded {
padding: 5px 0;
}
li {
> a {
font-size: 13px;
padding: 5px 15px;
background: transparent;
color: #bbb;
&:hover {
color: lighten($primary-color, 10);
}
&.active {
color: #fff;
font-weight: 600;
}
}
.nav-more {
font-size: 13px;
padding: 5px 15px;
background: transparent;
color: #bbb;
display: block;
cursor: pointer;
&:hover {
color: lighten($primary-color, 10);
}
}
}
}
&.nav__inner-menu {
li {
> a {
padding-left: 20px;
}
}
}
}
#admin_controller {
> div {
height: 100%;
}
}
.log__panel {
overflow: scroll;
width: 100%;
height: 800px;
border: 1px solid #ddd;
margin-top: 10px;
padding: 5px;
background-color: white;
}
.app__content {
&.admin {
overflow: auto;
background-color: #f1f1f1;
padding: 0 20px 20px;
min-height: 600px;
}
.wrapper--fixed {
max-width: 800px;
}
.form-horizontal {
margin-top: 40px;
.control-label {
text-align: left;
padding-right: 0;
font-weight: 600;
}
.form-group {
margin-bottom: 25px;
}
.help-text {
margin: 10px 0 0 15px;
color: #777;
.help-link {
margin-right: 5px;
}
.btn {
font-size: 13px;
}
}
.alert {
display: inline-block;
padding: 5px 7px;
margin: 0;
top: 1px;
position: relative;
}
}
.banner {
.table {
background: #fff;
border: 1px solid #ddd;
padding: 0.7em 1.5em;
font-size: 0.95em;
margin: 2em 0;
.banner__heading {
font-size: 1.5em;
}
.banner__content {
width: 80%;
}
.sidebar--left {
&.sidebar--collapsable {
background: #333;
.team__header {
background: transparent;
margin-bottom: 5px;
}
.nav {
li {
padding: 0;
.icon {
width: 17px;
}
> a {
padding: 9px 15px;
display: block;
&:hover, &.active, &:focus {
background-color: #EAEAEA;
}
}
> h4 {
background: #333;
padding: 10px 10px;
margin: 1px 0 0;
}
}
.menu-icon--right {
vertical-align: top;
padding: 5px 10px;
margin: -5px;
float: right;
.fa {
font-size: 13px;
right: -2px;
position: relative;
color: #fff;
}
}
&.nav__sub-menu {
background: #111;
-webkit-font-smoothing: auto;
&.padded {
padding: 5px 0;
}
li {
> a {
font-size: 13px;
padding: 5px 15px;
background: transparent;
color: #bbb;
&:hover {
color: lighten($primary-color, 10);
}
&.active {
color: #fff;
font-weight: 600;
}
}
.nav-more {
font-size: 13px;
padding: 5px 15px;
background: transparent;
color: #bbb;
display: block;
cursor: pointer;
&:hover {
color: lighten($primary-color, 10);
}
}
}
}
&.nav__inner-menu {
li {
> a {
padding-left: 20px;
}
}
}
}
}
}
.popover {
border-radius: 3px;
.log__panel {
overflow: scroll;
width: 100%;
font-size: 0.95em;
height: 800px;
border: 1px solid #ddd;
margin-top: 10px;
padding: 5px;
background-color: white;
}
.panel {
border: none;
background-color: transparent;
}
.panel-default {
> .panel-heading {
padding: 10px 0;
.app__content {
&.admin {
overflow: auto;
background-color: #f1f1f1;
padding: 0 20px 20px;
min-height: 600px;
}
.wrapper--fixed {
max-width: 800px;
}
.form-horizontal {
margin-top: 40px;
.control-label {
text-align: left;
padding-right: 0;
font-weight: 600;
}
.form-group {
margin-bottom: 25px;
}
.help-text {
margin: 10px 0 0 15px;
color: #777;
.help-link {
margin-right: 5px;
}
.btn {
font-size: 13px;
}
}
.alert {
display: inline-block;
padding: 5px 7px;
margin: 1em 0 0;
top: 1px;
position: relative;
.fa {
margin-right: 5px;
}
}
}
.banner {
background: #fff;
border: 1px solid #ddd;
padding: 0.7em 1.5em;
font-size: 0.95em;
margin: 2em 0;
.banner__heading {
font-size: 1.5em;
}
.banner__content {
width: 80%;
}
}
.popover {
border-radius: 3px;
width: 100%;
font-size: 0.95em;
}
.panel {
border: none;
background-color: transparent;
}
.panel-body {
padding: 30px 0 10px;
.panel-default {
> .panel-heading {
padding: 10px 0;
background-color: transparent;
}
.panel-body {
padding: 30px 0 10px;
}
}
}
.panel-group {
margin-bottom: 50px;
}
.panel-title {
font-size: 24px;
line-height: 1.5;
a {
text-decoration: none;
display: block;
@include clearfix;
&.collapsed {
.fa-minus {
display: none;
.panel-group {
margin-bottom: 50px;
}
.panel-title {
font-size: 24px;
line-height: 1.5;
a {
text-decoration: none;
display: block;
@include clearfix;
&.collapsed {
.fa-minus {
display: none;
}
.fa-plus {
display: inline-block;
}
}
.fa {
font-size: 18px;
float: right;
margin-top: 8px;
color: #aaa;
}
.fa-plus {
display: inline-block;
display: none;
}
}
.fa {
font-size: 18px;
float: right;
margin-top: 8px;
color: #aaa;
}
.fa-plus {
display: none;
}
}
}
}

Просмотреть файл

@@ -37,7 +37,6 @@
&.description {
overflow: hidden;
text-overflow: ellipsis;
@include opacity(0.6);
margin-top: 2px;
max-height: 45px;
}

Просмотреть файл

@@ -5,15 +5,15 @@
{{template "head" . }}
<body>
<div id="error_bar"></div>
<div id='error_bar'></div>
<div id="admin_controller"></div>
<div id='admin_controller' class='container-fluid'></div>
<div id="select_team_modal"></div>
<div id='select_team_modal'></div>
<script>
window.setup_admin_console_page();
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();