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

Improve tabs consistency, fix conflict with .primary 

.primary -> .primary-tabs
.secondary -> .secondary-tabs
.master -> .master-tabs
This commit is contained in:
Samuel Georges 2015-07-11 08:43:43 +10:00
parent 6f4590404c
commit 84da7f3698
16 changed files with 243 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
modules/backend/assets/images/tab-link.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 B

10
modules/backend/assets/less/layout/fancylayout.less
View File

@ -33,7 +33,7 @@
}
.control-tabs, &.control-tabs {
&.master {
&.master-tabs {
overflow: hidden;
&:before, &:after {
@ -178,7 +178,7 @@
}
}
&.secondary {
&.secondary-tabs {
> div > ul.nav-tabs {
background: @color-fancy-secondary-tabs-bg;
> li {
@ -215,7 +215,7 @@
}
}
&.content-tabs {
&.secondary-content-tabs {
> div > ul.nav-tabs {
background: @body-bg;
@ -308,7 +308,7 @@
}
}
&.primary {
&.primary-tabs {
> div > ul.nav-tabs {
background: @color-fancy-primary-tabs-bg;
margin-left: 0!important;
@ -559,7 +559,7 @@
}
}
.content-tabs .field-richeditor {
.secondary-content-tabs .field-richeditor {
.redactor-box .redactor-toolbar {
margin: 20px 20px 0 20px!important;
.border-radius(3px)!important;

19
modules/backend/assets/less/layout/layout.less
View File

@ -42,6 +42,25 @@ body {
height: 100%;
}
//
// Tabs override for Layout
// Primary tabs should use inset by default, unless otherwise specified
// --------------------------------------------------
.control-tabs.primary-tabs {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
margin-left: -20px;
margin-right: -20px;
}
&.tabs-no-inset {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
margin-left: 0;
margin-right: 0;
}
}
}
//
// Flexible layout system
// --------------------------------------------------

8
modules/backend/models/BrandSettings.php
View File

@ -172,10 +172,10 @@ class BrandSettings extends Model
* Compile CSS
*/
$css = '';
$css .= '.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,';
$css .= '.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {';
$css .= '.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,';
$css .= '.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {';
$css .= "background-image: url('".$svg."')}";
return $css;

10
modules/backend/models/brandsettings/custom.less
View File

@ -116,13 +116,13 @@ table.table.data {
.fancy-layout {
.control-tabs, &.control-tabs {
&.master {
&.master-tabs {
> div > div.tabs-container {
background: @color-fancy-master-tabs-bg;
}
}
&.secondary {
&.secondary-tabs {
&.content-tabs {
&.primary-collapsed {
> div > ul.nav-tabs {
@ -132,7 +132,7 @@ table.table.data {
}
}
&.primary {
&.primary-tabs {
> div > ul.nav-tabs {
&.master-area {
background: @color-fancy-form-tabless-fields-bg;
@ -140,7 +140,7 @@ table.table.data {
}
}
&.master {
&.master-tabs {
> div > div.tabs-container > ul.nav-tabs > li {
a > span.title {
background-color: @color-fancy-form-inactive-tab;
@ -184,7 +184,7 @@ div.control-componentlist {
.fancy-layout {
.control-tabs, &.control-tabs {
&.primary {
&.primary-tabs {
> div > ul.nav-tabs {
&.component-area {
background: @color-component-list-bg;

2
modules/backend/widgets/form/partials/_section.htm
View File

@ -21,7 +21,7 @@
<div
id="<?= $this->getId($type.'Tabs') ?>"
class="control-tabs <?= $type ?> layout <?= $tabs->cssClass ?>"
class="control-tabs <?= $type ?>-tabs layout <?= $tabs->cssClass ?>"
data-control="tab"
data-slidable>
<?= $this->makePartial('form_tabs', ['tabs' => $tabs]) ?>

4
modules/cms/assets/css/october.components.css
View File

@ -326,8 +326,8 @@ div.control-componentlist div.components div.layout-cell.adding > div {
text-shadow: 0 0 1px #475354 !important;
color: #ffffff !important;
}
.fancy-layout .control-tabs.primary > div > ul.nav-tabs.component-area,
.fancy-layout.control-tabs.primary > div > ul.nav-tabs.component-area {
.fancy-layout .control-tabs.primary-tabs > div > ul.nav-tabs.component-area,
.fancy-layout.control-tabs.primary-tabs > div > ul.nav-tabs.component-area {
background: #2c3e50;
}
body.drag div.control-componentlist div.components div.layout-cell > div,

20
modules/cms/assets/js/october.cmspage.js
View File

@ -120,7 +120,7 @@
var $el = $(element),
$panel = $el.closest('.form-tabless-fields.collapsed'),
$primaryPanel = $el.closest('.control-tabs.primary.collapsed')
$primaryPanel = $el.closest('.control-tabs.primary-tabs.collapsed')
if ($panel.length > 0)
$panel.removeClass('collapsed')
@ -129,7 +129,7 @@
$primaryPanel.removeClass('collapsed')
var pane = $primaryPanel.closest('.tab-pane'),
$secondaryPanel = $('.control-tabs.secondary', pane)
$secondaryPanel = $('.control-tabs.secondary-tabs', pane)
$secondaryPanel.removeClass('primary-collapsed')
}
@ -208,8 +208,8 @@
})
var $primaryCollapseIcon = $('<a href="javascript:;" class="tab-collapse-icon primary"><i class="icon-chevron-down"></i></a>'),
$primaryPanel = $('.control-tabs.primary', data.pane),
$secondaryPanel = $('.control-tabs.secondary', data.pane),
$primaryPanel = $('.control-tabs.primary-tabs', data.pane),
$secondaryPanel = $('.control-tabs.secondary-tabs', data.pane),
$primaryTabContainer = $('.nav-tabs', $primaryPanel)
$primaryTabContainer.addClass('master-area')
@ -511,7 +511,7 @@
CmsPage.prototype.updateComponentListClass = function(pane) {
var $componentList = $('.control-componentlist', pane),
$primaryPanel = $('.control-tabs.primary', pane),
$primaryPanel = $('.control-tabs.primary-tabs', pane),
$primaryTabContainer = $('.nav-tabs', $primaryPanel),
hasComponents = $('.layout', $componentList).children(':not(.hidden)').length > 0
@ -554,11 +554,11 @@
CmsPage.prototype.updateModifiedCounter = function() {
var counters = {
page: {menu: 'pages', count: 0},
partial: {menu: 'partials', count: 0},
layout: {menu: 'layouts', count: 0},
content: {menu: 'content', count: 0},
asset:{menu: 'assets', count: 0}
page: { menu: 'pages', count: 0 },
partial: { menu: 'partials', count: 0 },
layout: { menu: 'layouts', count: 0 },
content: { menu: 'content', count: 0 },
asset: { menu: 'assets', count: 0}
}
$('> div.tab-content > div.tab-pane[data-modified]', '#cms-master-tabs').each(function(){

2
modules/cms/assets/less/october.components.less
View File

@ -354,7 +354,7 @@ div.control-componentlist {
.fancy-layout {
.control-tabs, &.control-tabs {
&.primary {
&.primary-tabs {
> div > ul.nav-tabs {
&.component-area {
background: @color-component-list-bg;

2
modules/cms/controllers/index/index.htm
View File

@ -15,7 +15,7 @@
data-pane-classes="layout-cell"
data-max-title-symbols="15"
data-title-as-file-names="true"
class="layout control-tabs master fancy-layout oc-bg-logo"
class="layout control-tabs master-tabs fancy-layout oc-bg-logo"
id="cms-master-tabs">
<div class="layout-row min-size">

1
modules/system/assets/ui/docs/scoreboard.md
View File

@ -4,7 +4,6 @@ Scoreboard
# Example
<script src="/assets/js/october.goalmeter.js"></script>
<script src="/assets/js/vendor/raphael-min.js"></script>
<script src="/assets/js/october.chartutils.js"></script>

159
modules/system/assets/ui/docs/tab.md
View File

@ -1,32 +1,159 @@
# Tabs
# Tab control
## Content tabs
This plugin is a wrapper for the Twitter Bootstrap Tab component. It provides the following features:
Content tabs are heavier tabs designed for displaying content.
- Adding tabs
- Optional close icons with 2 states (modified / unmodified). The icon state can be changed by triggering the modified.oc.tab/unmodified.oc.tab events on any element within tab, or on the tab itself.
- Removing tabs with the Close icon, or with triggering an event from inside a tab pane or tab. The removing can be canceled if the confirm.oc.tab event handler returns false.
- Scrolling tabs if they do not fit the screen
- Collapsible tabs
### Supported data attributes:
- data-control="tab" - creates the tab control from an element
- data-closable - enables the Close Tab feature
- data-pane-classes - a list of CSS classes to apply new pane elements
Example with data attributes (data-control="tab"):
<div class="control-tabs master" data-control="tab" data-closable>
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">Home</div>
</div>
</div>
### JavaScript API:
- $('#mytabs').ocTab({closable: true, closeConfirmation: 'Do you really want to close this tab? Unsaved data will be lost.'})
- $('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier) - adds tab. The optional identifier parameter allows to associate a identifier with a tab. The identifier can be used with the goTo() method to find and open a tab by it's identifier.
- $('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true) - closes a tab. The second argument can point to a tab or tab pane. The thrid argument determines whether the tab should be closed without the user confirmation. The default value is false.
- $('.nav-tabs > li.active').trigger('close.oc.tab') - another way to close a tab. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane.
- $('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active') - marks a tab as modified. Use the 'unmodifyTab' to mark a tab as unmodified.
- $('.nav-tabs > li.active').trigger('modified.oc.tab') - another way to mark a tab as modified. The event can be triggered on a tab, tab pane or any element inside a tab or tab pane. Use the 'unmodified.oc.tab' to mark a tab as unmodified.
- $('#mytabs').ocTab('goTo', 'someidentifier') - Finds a tab by it's identifier and opens it.
- $('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first') - Opens a tab in context of it's content (pane element)
### Supported options:
- closable - adds the "close" icon to the tab and lets users to close tabs. Corresponds the data-closable attribute.
- closeConfirmation - a confirmation to show when a user tries to close a modified tab. Corresponds the data-close-confirmation
attribute. The confirmation is displayed only if the tab was modified.
- slidable - allows the tabs to be switched with the swipe gesture on touch devices. Corresponds the data-slidable attribute.
- paneClasses - a list of CSS classes to apply new pane elements. Corresponds to the data-pane-classes attribute.
- maxTitleSymbols - the maximum number of characters in tab titles.
- titleAsFileNames - treat tab titles as file names. In this mode only the file name part is displayed in the tab, and the directory part
is hidden.
### Supported events:
- beforeClose.oc.tab - triggered on a tab pane element before tab is closed by the user. Call the event's
preventDefault() method to cancel the action.
- afterAllClosed.oc.tab - triggered after all tabs have been closed
# Example
<div class="control-tabs content-tabs" data-control="tab">
<h5>Master</h5>
<div class="control-tabs master-tabs" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#tabOne">One</a></li>
<li><a href="#tabTwo">Two</a></li>
<li><a href="#tabThree">Three</a></li>
<li class="active"><a href="#primaryTabOne">One</a></li>
<li><a href="#primaryTabTwo">Two</a></li>
<li><a href="#primaryTabThree">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="padded-container">
Tab one content
</div>
Tab one content
</div>
<div class="tab-pane">
<div class="padded-container">
Tab two content
</div>
Tab two content
</div>
<div class="tab-pane">
<div class="padded-container">
Tab three content
</div>
Tab three content
</div>
</div>
</div>
<hr />
<h5>Primary</h5>
<div class="control-tabs primary-tabs" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#primaryTabOne">One</a></li>
<li><a href="#primaryTabTwo">Two</a></li>
<li><a href="#primaryTabThree">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
Tab one content
</div>
<div class="tab-pane">
Tab two content
</div>
<div class="tab-pane">
Tab three content
</div>
</div>
</div>
<hr />
<h5>Secondary</h5>
<div class="control-tabs secondary-tabs" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#secondaryTabOne">One</a></li>
<li><a href="#secondaryTabTwo">Two</a></li>
<li><a href="#secondaryTabThree">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
Tab one content
</div>
<div class="tab-pane">
Tab two content
</div>
<div class="tab-pane">
Tab three content
</div>
</div>
</div>
<hr />
<h5>Content</h5>
<div class="control-tabs content-tabs" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#contentTabOne">One</a></li>
<li><a href="#contentTabTwo">Two</a></li>
<li><a href="#contentTabThree">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
Tab one content
</div>
<div class="tab-pane">
Tab two content
</div>
<div class="tab-pane">
Tab three content
</div>
</div>
</div>

0
modules/backend/assets/images/primary-tab-shape.png → modules/system/assets/ui/images/primary-tab-shape.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

64
modules/system/assets/ui/js/tab.js
View File

@ -1,71 +1,13 @@
/*
=require ../vendor/bootstrap/js/transition.js
=require ../vendor/bootstrap/js/tab.js
=require toolbar.js
*/
/*
* Tab control.
* Tab control
*
* This plugin is a wrapper for the Twitter Bootstrap Tab component. It provides the following features:
* - Adding tabs
* - Optional close icons with 2 states (modified / unmodified). The icon state can be changed by
* triggering the modified.oc.tab/unmodified.oc.tab events on any element within tab, or on the tab itself.
* - Removing tabs with the Close icon, or with triggering an event from inside a tab pane or tab.
* The removing can be canceled if the confirm.oc.tab event handler returns false.
* - Scrolling tabs if they do not fit the screen
* - Collapsible tabs
*
* Data attributes:
* - data-control="tab" - creates the tab control from an element
* - data-closable - enables the Close Tab feature
* - data-pane-classes - a list of CSS classes to apply new pane elements
*
* Example with data attributes (data-control="tab"):
*
* <div class="control-tabs master" data-control="tab" data-closable>
* <ul class="nav nav-tabs">
* <li class="active"><a href="#home">Home</a></li>
* </ul>
* <div class="tab-content">
* <div class="tab-pane active">Home</div>
* </div>
* </div>
*
* JavaScript methods:
* - $('#mytabs').ocTab({closable: true, closeConfirmation: 'Do you really want to close this tab? Unsaved data will be lost.'})
* - $('#mytabs').ocTab('addTab', 'Tab title', 'Tab content', identifier) - adds tab. The optional identifier parameter allows to
associate a identifier with a tab. The identifier can be used with the goTo() method to find and open a tab by it's identifier.
* - $('#mytabs').ocTab('closeTab', '.nav-tabs > li.active', true) - closes a tab. The second argument can point to a tab or tab pane.
The thrid argument determines whether the tab should be closed without the user confirmation. The default value is false.
* - $('.nav-tabs > li.active').trigger('close.oc.tab') - another way to close a tab. The event can be triggered on a tab, tab pane
* or any element inside a tab or tab pane.
* - $('#mytabs').ocTab('modifyTab', '.nav-tabs > li.active') - marks a tab as modified. Use the 'unmodifyTab' to mark a tab as unmodified.
* - $('.nav-tabs > li.active').trigger('modified.oc.tab') - another way to mark a tab as modified. The event can be triggered on a tab, tab pane
* or any element inside a tab or tab pane. Use the 'unmodified.oc.tab' to mark a tab as unmodified.
* - $('#mytabs').ocTab('goTo', 'someidentifier') - Finds a tab by it's identifier and opens it.
* - $('#mytabs').ocTab('goToPane', '.tab-content .tab-pane:first') - Opens a tab in context of it's content (pane element)
*
* Supported options:
* - closable - adds the "close" icon to the tab and lets users to close tabs. Corresponds the data-closable attribute.
* - closeConfirmation - a confirmation to show when a user tries to close a modified tab. Corresponds the data-close-confirmation
* attribute. The confirmation is displayed only if the tab was modified.
* - slidable - allows the tabs to be switched with the swipe gesture on touch devices. Corresponds the data-slidable attribute.
* - paneClasses - a list of CSS classes to apply new pane elements. Corresponds to the data-pane-classes attribute.
* - maxTitleSymbols - the maximum number of characters in tab titles.
* - titleAsFileNames - treat tab titles as file names. In this mode only the file name part is displayed in the tab, and the directory part
* is hidden.
*
* Events:
* - beforeClose.oc.tab - triggered on a tab pane element before tab is closed by the user. Call the event's
* preventDefault() method to cancel the action.
* - afterAllClosed.oc.tab - triggered after all tabs have been closed
*
* Dependences:
* - DragScroll (october.dragscroll.js)
* - Toolbar (october.toolbar.js)
* - Touchwipe (jquery.touchwipe.min.js)
* - Documentation: ../docs/tab.md
*/
+function ($) { "use strict";
var Tab = function (element, options) {

6
modules/system/assets/ui/less/list.less
View File

@ -150,6 +150,12 @@ table.table.data {
}
}
tr.frozen {
td, th, td a, th a {
color: #337ab7;
}
}
tr.processing {
td, th, td a, th a {
color: #666666;

55
modules/system/assets/ui/less/tab.less
View File

@ -46,6 +46,7 @@
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
@tab-image-path: @image-path;
.control-tabs {
position: relative;
@ -206,7 +207,12 @@
}
}
&.master {
//
// Master tabs
//
&.master, // Deprecated
&.master-tabs {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
> li {
a {
@ -224,13 +230,18 @@
}
}
&.primary {
//
// Primary tabs
//
&.primary, // Deprecated
&.primary-tabs {
margin-bottom: 5px;
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
position: relative;
margin-left: -20px;
margin-right: -20px;
margin-left: 0;
margin-right: 0;
&:before {
position: absolute;
@ -250,9 +261,9 @@
&:first-child {
margin-left: 0;
padding-left: 15px!important;
padding-left: 15px !important;
}
a {
font-size: 12px;
padding-bottom: 3px;
@ -274,7 +285,7 @@
&:before, &:after {
content: ' ';
position: absolute;
background: transparent url(../images/primary-tab-shape.png?v2) no-repeat left -31px;
background: transparent url('@{tab-image-path}/primary-tab-shape.png') no-repeat left -31px;
width: 16px;
height: 26px;
display: block;
@ -337,16 +348,21 @@
> div.tab-content {
}
// Tabs to sit in by the standard offset (0px)
&.tabs-offset {
// Tab divider to sit inset the standard padding (20px)
&.tabs-inset {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
margin-left: 0;
margin-right: 0;
margin-left: -20px;
margin-right: -20px;
}
}
}
&.secondary {
//
// Secondary tabs
//
&.secondary, // Deprecated
&.secondary-tabs {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
> li {
padding-right: 10px;
@ -368,6 +384,10 @@
}
}
//
// Content tabs
//
&.content-tabs {
> ul.nav-tabs {
@ -425,6 +445,17 @@
}
}
// Tab divider to sit inset the standard padding (20px)
&.tabs-inset {
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
margin-left: -20px;
margin-right: -20px;
li:first-child {
margin-left: 20px;
}
}
}
// Tabs to sit in by the standard offset (20px)
&.tabs-offset {
> ul.nav-tabs {