mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
web/react/components/admin_console/admin_controller.jsx
Просмотреть файл

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

272
web/react/components/admin_console/admin_sidebar.jsx
Просмотреть файл

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

8
web/react/components/admin_console/email_settings.jsx
Просмотреть файл

@@ -437,7 +437,7 @@ export default class EmailSettings extends React.Component {
</select> </select>
<div className='help-text'> <div className='help-text'>
<table <table
className='table-bordered' className='table table-bordered'
cellPadding='5' cellPadding='5'
> >
<tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr> <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>
<div className='help-text'> <div className='help-text'>
<button <button
className='help-link' className='btn'
onClick={this.handleTestConnection} onClick={this.handleTestConnection}
disabled={!this.state.sendEmailNotifications} disabled={!this.state.sendEmailNotifications}
id='connection-button' 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> <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'> <div className='help-text'>
<button <button
className='help-link' className='btn'
onClick={this.handleGenerateInvite} onClick={this.handleGenerateInvite}
disabled={!this.state.sendEmailNotifications} 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> <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'> <div className='help-text'>
<button <button
className='help-link' className='btn'
onClick={this.handleGenerateReset} onClick={this.handleGenerateReset}
disabled={!this.state.sendEmailNotifications} disabled={!this.state.sendEmailNotifications}
> >

2
web/react/components/admin_console/image_settings.jsx
Просмотреть файл

@@ -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> <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'> <div className='help-text'>
<button <button
className='help-link' className='btn btn-default'
onClick={this.handleGenerate} onClick={this.handleGenerate}
> >
{'Re-Generate'} {'Re-Generate'}

2
web/react/components/admin_console/log_settings.jsx
Просмотреть файл

@@ -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:'} {'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'}
<div className='help-text'> <div className='help-text'>
<table <table
className='table-bordered' className='table table-bordered'
cellPadding='5' cellPadding='5'
> >
<tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr> <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr>

1
web/react/utils/utils.jsx
Просмотреть файл

@@ -428,6 +428,7 @@ export function applyTheme(theme) {
if (theme.sidebarTextActiveColor) { 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, .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) { if (theme.sidebarHeaderBg) {

363
web/sass-files/sass/partials/_admin-console.scss
Просмотреть файл

@@ -1,193 +1,202 @@
#admin_controller {
.sidebar--left { &.sidebar--collapsable { > div {
background: #333; height: 100%;
.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;
}
}
}
}
} }
} .table {
.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 {
background: #fff; background: #fff;
border: 1px solid #ddd; }
padding: 0.7em 1.5em; .sidebar--left {
font-size: 0.95em; &.sidebar--collapsable {
margin: 2em 0; background: #333;
.banner__heading { .team__header {
font-size: 1.5em; background: transparent;
} margin-bottom: 5px;
.banner__content { }
width: 80%; .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%; width: 100%;
font-size: 0.95em; height: 800px;
border: 1px solid #ddd;
margin-top: 10px;
padding: 5px;
background-color: white;
} }
.panel {
border: none; .app__content {
background-color: transparent; &.admin {
} overflow: auto;
.panel-default { background-color: #f1f1f1;
> .panel-heading { padding: 0 20px 20px;
padding: 10px 0; 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; background-color: transparent;
} }
.panel-body { .panel-default {
padding: 30px 0 10px; > .panel-heading {
padding: 10px 0;
background-color: transparent;
}
.panel-body {
padding: 30px 0 10px;
}
} }
} .panel-group {
.panel-group { margin-bottom: 50px;
margin-bottom: 50px; }
} .panel-title {
.panel-title { font-size: 24px;
font-size: 24px; line-height: 1.5;
line-height: 1.5; a {
a { text-decoration: none;
text-decoration: none; display: block;
display: block; @include clearfix;
@include clearfix; &.collapsed {
&.collapsed { .fa-minus {
.fa-minus { display: none;
display: none; }
.fa-plus {
display: inline-block;
}
}
.fa {
font-size: 18px;
float: right;
margin-top: 8px;
color: #aaa;
} }
.fa-plus { .fa-plus {
display: inline-block; display: none;
} }
} }
.fa {
font-size: 18px;
float: right;
margin-top: 8px;
color: #aaa;
}
.fa-plus {
display: none;
}
} }
} }
} }

1
web/sass-files/sass/partials/_headers.scss
Просмотреть файл

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

8
web/templates/admin_console.html
Просмотреть файл

@@ -5,15 +5,15 @@
{{template "head" . }} {{template "head" . }}
<body> <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> <script>
window.setup_admin_console_page(); window.setup_admin_console_page();
$(document).ready(function(){ $(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').popover();