TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated the settings pages UX

This commit is contained in:
alekseybobkov 2014-07-27 15:07:22 +11:00
parent 241e174ab4
commit 7eed305000
17 changed files with 280 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
modules/backend/assets/css/october.css
View File

@ -8071,6 +8071,9 @@ label {
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form-control:focus {
-webkit-box-shadow: none;
@ -8425,16 +8428,17 @@ label {
border-radius: 2px;
}
.switch-field .field-switch {
padding-left: 105px;
padding-left: 75px;
float: left;
}
.custom-switch {
display: block;
width: 90px;
height: 25px;
width: 58px;
height: 26px;
position: relative;
text-transform: uppercase;
border: 1px solid #999999;
border: none;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@ -8452,14 +8456,14 @@ label {
z-index: 4;
display: block;
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
right: 34px;
top: 2px;
width: 22px;
height: 22px;
background-color: #f6f6f6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
@ -8481,16 +8485,18 @@ label {
filter: alpha(opacity=0);
}
.custom-switch input:checked ~ .slide-button {
right: 0%;
right: 2px;
}
.custom-switch input:checked ~ span {
background-color: #8da85e;
}
.custom-switch input:checked ~ span span:first-of-type {
color: #FFFFFF;
display: block;
}
.custom-switch input:checked ~ span span:last-of-type {
color: #666666;
display: none;
}
.custom-switch > span {
display: block;
@ -8499,28 +8505,34 @@ label {
left: 0;
width: 100%;
background-color: #cc3300;
font-size: 11px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.custom-switch > span span {
z-index: 5;
display: block;
width: 50%;
position: absolute;
top: 0;
top: 1px;
left: 0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.custom-switch > span span:last-child {
left: 50%;
color: #FFFFFF;
display: block;
}
.custom-switch > span span:first-of-type {
padding-left: 9px;
display: none;
color: #666666;
}
.custom-select .select2-choice {
@ -10186,6 +10198,7 @@ html.cssanimations .cursor-loading-indicator.hide {
border: none;
text-align: left;
outline: none!important;
padding: 9px 18px;
}
.btn[class^="oc-icon-"]:before,
.btn[class*=" oc-icon-"]:before {
@ -10856,12 +10869,14 @@ body.dropdown-open .dropdown-overlay {
.control-tabs.primary > div > ul.nav-tabs,
.control-tabs.primary > div > div > ul.nav-tabs {
position: relative;
margin-left: -20px;
margin-right: -20px;
}
.control-tabs.primary > ul.nav-tabs:before,
.control-tabs.primary > div > ul.nav-tabs:before,
.control-tabs.primary > div > div > ul.nav-tabs:before {
position: absolute;
top: 19px;
top: 26px;
height: 1px;
width: 100%;
content: ' ';
@ -10873,16 +10888,64 @@ body.dropdown-open .dropdown-overlay {
padding-right: 10px;
padding-left: 11px;
margin-right: 0;
margin-left: -30px;
background: transparent;
}
.control-tabs.primary > ul.nav-tabs > li:first-child,
.control-tabs.primary > div > ul.nav-tabs > li:first-child,
.control-tabs.primary > div > div > ul.nav-tabs > li:first-child {
margin-left: 0;
padding-left: 15px!important;
}
.control-tabs.primary > ul.nav-tabs > li a,
.control-tabs.primary > div > ul.nav-tabs > li a,
.control-tabs.primary > div > div > ul.nav-tabs > li a {
font-size: 12px;
padding-bottom: 3px;
padding: 0 16px;
margin: 0;
position: relative;
z-index: 101;
background: transparent;
overflow: visible;
}
.control-tabs.primary > ul.nav-tabs > li a > span.title,
.control-tabs.primary > div > ul.nav-tabs > li a > span.title,
.control-tabs.primary > div > div > ul.nav-tabs > li a > span.title {
position: relative;
display: inline-block;
padding: 5px 5px 9px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #f0f0f0;
z-index: 100;
}
.control-tabs.primary > ul.nav-tabs > li a > span.title:before,
.control-tabs.primary > div > ul.nav-tabs > li a > span.title:before,
.control-tabs.primary > div > div > ul.nav-tabs > li a > span.title:before,
.control-tabs.primary > ul.nav-tabs > li a > span.title:after,
.control-tabs.primary > div > ul.nav-tabs > li a > span.title:after,
.control-tabs.primary > div > div > ul.nav-tabs > li a > span.title:after {
content: ' ';
position: absolute;
background: transparent url(../images/primary-tab-shape.png) no-repeat left -31px;
width: 16px;
height: 26px;
display: block;
top: -1px;
z-index: 100;
}
.control-tabs.primary > ul.nav-tabs > li a > span.title:before,
.control-tabs.primary > div > ul.nav-tabs > li a > span.title:before,
.control-tabs.primary > div > div > ul.nav-tabs > li a > span.title:before {
left: -16px;
}
.control-tabs.primary > ul.nav-tabs > li a > span.title:after,
.control-tabs.primary > div > ul.nav-tabs > li a > span.title:after,
.control-tabs.primary > div > div > ul.nav-tabs > li a > span.title:after {
right: -16px;
background-position: -61px -31px;
}
.control-tabs.primary > ul.nav-tabs > li:last-child,
.control-tabs.primary > div > ul.nav-tabs > li:last-child,
@ -10899,12 +10962,36 @@ body.dropdown-open .dropdown-overlay {
.control-tabs.primary > ul.nav-tabs > li.active a:before,
.control-tabs.primary > div > ul.nav-tabs > li.active a:before,
.control-tabs.primary > div > div > ul.nav-tabs > li.active a:before {
content: ' ';
position: absolute;
width: 100%;
top: 26px;
height: 1px;
right: 2px;
left: 0;
top: 19px;
border-bottom: 1px solid #ec8017;
content: ' ';
background-color: #fafafa;
}
.control-tabs.primary > ul.nav-tabs > li.active a,
.control-tabs.primary > div > ul.nav-tabs > li.active a,
.control-tabs.primary > div > div > ul.nav-tabs > li.active a {
z-index: 107;
}
.control-tabs.primary > ul.nav-tabs > li.active a > span.title,
.control-tabs.primary > div > ul.nav-tabs > li.active a > span.title,
.control-tabs.primary > div > div > ul.nav-tabs > li.active a > span.title {
z-index: 105;
border-top-color: #d6d6d6;
}
.control-tabs.primary > ul.nav-tabs > li.active a > span.title:before,
.control-tabs.primary > div > ul.nav-tabs > li.active a > span.title:before,
.control-tabs.primary > div > div > ul.nav-tabs > li.active a > span.title:before {
background-position: left 0;
z-index: 107;
}
.control-tabs.primary > ul.nav-tabs > li.active a > span.title:after,
.control-tabs.primary > div > ul.nav-tabs > li.active a > span.title:after,
.control-tabs.primary > div > div > ul.nav-tabs > li.active a > span.title:after {
background-position: -61px 0;
z-index: 107;
}
.control-tabs.secondary > ul.nav-tabs > li,
.control-tabs.secondary > div > ul.nav-tabs > li,

BIN
modules/backend/assets/images/primary-tab-shape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

51
modules/backend/assets/js/october.scrollbar.js
View File

@ -255,6 +255,57 @@
: this.$el.get(0).scrollWidth;
}
Scrollbar.prototype.gotoElement = function(element, callback) {
var $el = $(element)
if (!$el.length)
return;
var self = this,
offset = 0,
animated = false,
params = {
duration: 300,
queue: false,
complete: function(){
if (callback !== undefined)
callback()
}
}
if (!this.options.vertical) {
offset = $el.get(0).offsetLeft - this.$el.scrollLeft()
if (offset < 0) {
this.$el.animate({'scrollLeft': $el.get(0).offsetLeft}, params)
animated = true
} else {
offset = $el.get(0).offsetLeft + $el.outerWidth() - (this.$el.scrollLeft() + this.$el.outerWidth())
if (offset > 0) {
this.$el.animate({'scrollLeft': $el.get(0).offsetLeft + $el.outerWidth() - this.$el.outerWidth()}, params)
animated = true
}
}
} else {
offset = $el.get(0).offsetTop - this.$el.scrollTop()
if (offset < 0) {
this.$el.animate({'scrollTop': $el.get(0).offsetTop}, params)
animated = true
} else {
offset = $el.get(0).offsetTop - (this.$el.scrollTop() + this.$el.outerHeight())
if (offset > 0) {
this.$el.animate({'scrollTop': $el.get(0).offsetTop + $el.outerHeight() - this.$el.outerHeight()}, params)
animated = true
}
}
}
if (!animated && callback !== undefined)
callback()
return this
}
// SCROLLBAR PLUGIN DEFINITION
// ============================

6
modules/backend/assets/js/october.sidenav-tree.js
View File

@ -50,6 +50,12 @@
this.$searchInput.val(searchTerm)
this.applySearch()
}
var scrollbar = $('[data-control=scrollbar]', this.$el).data('oc.scrollbar'),
active = $('li.active', this.$el)
if (active.length > 0)
scrollbar.gotoElement(active)
}
SidenavTree.prototype.toggleGroup = function(group) {

1
modules/backend/assets/less/controls/button.less
View File

@ -7,6 +7,7 @@
border: none;
text-align: left;
outline: none!important;
padding: 9px 18px;
&[class^="oc-icon-"],
&[class*=" oc-icon-"] {

53
modules/backend/assets/less/controls/forms.less
View File

@ -13,6 +13,7 @@ label {
.form-control {
.transition(none);
.box-shadow(none);
.border-radius(3px);
&:focus {
.box-shadow(none);
}
@ -361,18 +362,19 @@ label {
.switch-field {
.field-switch {
padding-left: 105px;
padding-left: 75px;
float: left;
}
}
.custom-switch {
display: block;
width: 90px;
height: 25px;
width: 58px;
height: 26px;
position: relative;
text-transform: uppercase;
border: 1px solid @color-custom-input-border;
border: none;
cursor: pointer;
.border-radius(3px);
* { .box-sizing(border-box); }
@ -381,12 +383,12 @@ label {
z-index: 4;
display: block;
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
right: 34px;
top: 2px;
width: 22px;
height: 22px;
background-color: @color-switch-input-bg;
.border-radius(3px);
.border-radius(20px);
.transition(all 0.1s);
}
@ -408,11 +410,19 @@ label {
position: absolute;
.opacity(0);
&:checked {
~ .slide-button { right: 0%; }
~ .slide-button {
right: 2px;
}
~ span { background-color: @color-switch-input-on; }
~ span span {
&:first-of-type { color: #FFFFFF; }
&:last-of-type { color: #666666; }
&:first-of-type {
color: #FFFFFF;
display: block;
}
&:last-of-type {
color: #666666;
display: none;
}
}
}
}
@ -424,19 +434,28 @@ label {
left: 0;
width: 100%;
background-color: @color-switch-input-off;
font-size: 11px;
.user-select(none);
.border-radius(3px);
.border-radius(20px);
span {
z-index: 5;
display: block;
width: 50%;
position: absolute;
top: 0;
top: 1px;
left: 0;
text-align: center;
&:last-child { left: 50%; color: #FFFFFF; }
&:first-of-type { color: #666666; }
.box-sizing(border-box);
&:last-child {
left: 50%;
color: #FFFFFF;
display: block;
}
&:first-of-type {
padding-left: 9px;
display: none;
color: #666666;
}
}
}
}

76
modules/backend/assets/less/controls/tab.less
View File

@ -171,10 +171,12 @@
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
position: relative;
margin-left: -20px;
margin-right: -20px;
&:before {
position: absolute;
top: 19px;
top: 26px;
height: 1px;
width: 100%;
content: ' ';
@ -185,14 +187,52 @@
padding-right: 10px;
padding-left: 11px;
margin-right: 0;
margin-left: -30px;
background: transparent;
&:first-child {
margin-left: 0;
padding-left: 15px!important;
}
a {
font-size: 12px;
padding-bottom: 3px;
padding: 0 16px;
margin: 0;
position: relative;
z-index: 101;
background: transparent;
overflow: visible;
> span.title {
position: relative;
display: inline-block;
padding: 5px 5px 9px 5px;
.box-sizing(border-box);
border-top: 1px solid #f0f0f0;
z-index: 100;
&:before, &:after {
content: ' ';
position: absolute;
background: transparent url(../images/primary-tab-shape.png) no-repeat left -31px;
width: 16px;
height: 26px;
display: block;
top: -1px;
z-index: 100;
}
&:before {
left: -16px;
}
&:after {
right: -16px;
background-position: -61px -31px;
}
}
}
&:last-child {
@ -205,14 +245,32 @@
padding-left: 0;
}
&.active a {
&:before {
content: ' ';
position: absolute;
width: 100%;
left: 0;
top: 19px;
border-bottom: 1px solid @color-tab-active-marker;
&.active a:before {
position: absolute;
top: 26px;
height: 1px;
right: 2px;
left: 0;
content: ' ';
background-color: @color-body-bg;
}
&.active a{
z-index: 107;
> span.title {
z-index: 105;
border-top-color: #d6d6d6;
&:before {
background-position: left 0;
z-index: 107;
}
&:after {
background-position: -61px 0;
z-index: 107;
}
}
}
}

1
modules/backend/controllers/Users.php
View File

@ -37,6 +37,7 @@ class Users extends Controller
$this->requiredPermissions = null;
BackendMenu::setContext('October.System', 'system', 'users');
SettingsManager::setContext('October.System', 'administrators');
}
/**

2
modules/system/controllers/MailLayouts.php
View File

@ -9,6 +9,7 @@ use Redirect;
use BackendMenu;
use Backend\Classes\Controller;
use System\Classes\ApplicationException;
use System\Classes\SettingsManager;
use Exception;
/**
@ -34,6 +35,7 @@ class MailLayouts extends Controller
parent::__construct();
BackendMenu::setContext('October.System', 'system', 'settings');
SettingsManager::setContext('October.System', 'mail_templates');
}
}

3
modules/system/controllers/MailTemplates.php
View File

@ -12,6 +12,7 @@ use BackendAuth;
use Backend\Classes\Controller;
use System\Models\MailTemplate;
use System\Classes\ApplicationException;
use System\Classes\SettingsManager;
use Exception;
/**
@ -39,6 +40,7 @@ class MailTemplates extends Controller
parent::__construct();
BackendMenu::setContext('October.System', 'system', 'settings');
SettingsManager::setContext('October.System', 'mail_templates');
}
public function index()
@ -47,6 +49,7 @@ class MailTemplates extends Controller
MailTemplate::syncAll();
$this->getClassExtension('Backend.Behaviors.ListController')->index();
$this->bodyClass = 'compact-container';
}
public function formBeforeSave($model)

2
modules/system/controllers/Updates.php
View File

@ -14,6 +14,7 @@ use System\Models\PluginVersion;
use System\Console\CacheClear;
use System\Classes\UpdateManager;
use System\Classes\PluginManager;
use System\Classes\SettingsManager;
use System\Classes\ApplicationException;
use Exception;
@ -44,6 +45,7 @@ class Updates extends Controller
$this->addCss('/modules/system/assets/css/updates.css', 'core');
BackendMenu::setContext('October.System', 'system', 'updates');
SettingsManager::setContext('October.System', 'updates');
$this->disableCoreUpdates = Config::get('cms.disableCoreUpdates', false);
}

1
modules/system/controllers/maillayouts/create.htm
View File

@ -1,6 +1,5 @@
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('system/settings') ?>"><?= e(trans('system::lang.settings.menu_label')) ?></a></li>
<li><a href="<?= Backend::url('system/mailtemplates') ?>"><?= e(trans('system::lang.mail_templates.menu_layouts_label')) ?></a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>

3
modules/system/controllers/maillayouts/update.htm
View File

@ -1,6 +1,5 @@
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('system/settings') ?>"><?= e(trans('system::lang.settings.menu_label')) ?></a></li>
<li><a href="<?= Backend::url('system/mailtemplates') ?>"><?= e(trans('system::lang.mail_templates.menu_layouts_label')) ?></a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
@ -11,7 +10,7 @@
<div class="scoreboard">
<div data-control="toolbar">
<div class="scoreboard-item title-value">
<h4><?= e(trans('system::lang.mail_templates.template')) ?></h4>
<h4><?= e(trans('system::lang.mail_templates.layout')) ?></h4>
<p><?= $formModel->code ?></p>
</div>
</div>

1
modules/system/controllers/mailtemplates/create.htm
View File

@ -1,6 +1,5 @@
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('system/settings') ?>"><?= e(trans('system::lang.settings.menu_label')) ?></a></li>
<li><a href="<?= Backend::url('system/mailtemplates') ?>"><?= e(trans('system::lang.mail_templates.menu_label')) ?></a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>

7
modules/system/controllers/mailtemplates/index.htm
View File

@ -1,10 +1,3 @@
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('system/settings') ?>"><?= e(trans('system::lang.settings.menu_label')) ?></a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
<?php Block::endPut() ?>
<div class="control-tabs content-tabs tabs-flush" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#templates"><?= e(trans('system::lang.mail_templates.templates')) ?></a></li>

1
modules/system/controllers/mailtemplates/update.htm
View File

@ -1,6 +1,5 @@
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('system/settings') ?>"><?= e(trans('system::lang.settings.menu_label')) ?></a></li>
<li><a href="<?= Backend::url('system/mailtemplates') ?>"><?= e(trans('system::lang.mail_templates.menu_label')) ?></a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>

2
modules/system/lang/en/lang.php
View File

@ -88,7 +88,7 @@ return [
],
'mail_templates' => [
'menu_label' => 'Mail Templates',
'menu_description' => 'Modify the mail templates that are sent to users and administrators.',
'menu_description' => 'Modify the mail templates that are sent to users and administrators, manage email layouts.',
'new_template' => 'New Template',
'new_layout' => 'New Layout',
'template' => 'Template',