diff --git a/modules/backend/assets/images/tab-link.png b/modules/backend/assets/images/tab-link.png deleted file mode 100644 index 7b275d289..000000000 Binary files a/modules/backend/assets/images/tab-link.png and /dev/null differ diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less index 7de14984f..97770de88 100644 --- a/modules/backend/assets/less/layout/fancylayout.less +++ b/modules/backend/assets/less/layout/fancylayout.less @@ -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; diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less index 0927e594b..25b7e5bc0 100644 --- a/modules/backend/assets/less/layout/layout.less +++ b/modules/backend/assets/less/layout/layout.less @@ -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 // -------------------------------------------------- diff --git a/modules/backend/models/BrandSettings.php b/modules/backend/models/BrandSettings.php index ca9895c15..da4c779d8 100644 --- a/modules/backend/models/BrandSettings.php +++ b/modules/backend/models/BrandSettings.php @@ -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; diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less index b7f15c7d6..6da1c6646 100644 --- a/modules/backend/models/brandsettings/custom.less +++ b/modules/backend/models/brandsettings/custom.less @@ -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; diff --git a/modules/backend/widgets/form/partials/_section.htm b/modules/backend/widgets/form/partials/_section.htm index 2ee37a426..f311c3720 100644 --- a/modules/backend/widgets/form/partials/_section.htm +++ b/modules/backend/widgets/form/partials/_section.htm @@ -21,7 +21,7 @@
makePartial('form_tabs', ['tabs' => $tabs]) ?> diff --git a/modules/cms/assets/css/october.components.css b/modules/cms/assets/css/october.components.css index 386e2fbf5..e007994dd 100644 --- a/modules/cms/assets/css/october.components.css +++ b/modules/cms/assets/css/october.components.css @@ -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, diff --git a/modules/cms/assets/js/october.cmspage.js b/modules/cms/assets/js/october.cmspage.js index 328f7e1d5..5058c0a01 100644 --- a/modules/cms/assets/js/october.cmspage.js +++ b/modules/cms/assets/js/october.cmspage.js @@ -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 = $(''), - $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(){ diff --git a/modules/cms/assets/less/october.components.less b/modules/cms/assets/less/october.components.less index 2aec9be46..4786b6529 100644 --- a/modules/cms/assets/less/october.components.less +++ b/modules/cms/assets/less/october.components.less @@ -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; diff --git a/modules/cms/controllers/index/index.htm b/modules/cms/controllers/index/index.htm index 56aa5368d..34ce6713e 100644 --- a/modules/cms/controllers/index/index.htm +++ b/modules/cms/controllers/index/index.htm @@ -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">
diff --git a/modules/system/assets/ui/docs/scoreboard.md b/modules/system/assets/ui/docs/scoreboard.md index 3bae06666..33e985984 100644 --- a/modules/system/assets/ui/docs/scoreboard.md +++ b/modules/system/assets/ui/docs/scoreboard.md @@ -4,7 +4,6 @@ Scoreboard # Example - diff --git a/modules/system/assets/ui/docs/tab.md b/modules/system/assets/ui/docs/tab.md index f755debef..16c9357a6 100644 --- a/modules/system/assets/ui/docs/tab.md +++ b/modules/system/assets/ui/docs/tab.md @@ -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"): + +
+ +
+
Home
+
+
+ +### 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 -
+
Master
+ +
-
- Tab one content -
+ Tab one content
-
- Tab two content -
+ Tab two content
-
- Tab three content -
+ Tab three content
+ + + +
+ + + +
Primary
+ +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+ + + +
+ + + +
Secondary
+ +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+ + + +
+ + + +
Content
+ +
+ +
+
+ Tab one content +
+
+ Tab two content +
+
+ Tab three content +
+
+
+ diff --git a/modules/backend/assets/images/primary-tab-shape.png b/modules/system/assets/ui/images/primary-tab-shape.png similarity index 100% rename from modules/backend/assets/images/primary-tab-shape.png rename to modules/system/assets/ui/images/primary-tab-shape.png diff --git a/modules/system/assets/ui/js/tab.js b/modules/system/assets/ui/js/tab.js index 4cffd2d0b..ca3dc609f 100644 --- a/modules/system/assets/ui/js/tab.js +++ b/modules/system/assets/ui/js/tab.js @@ -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"): - * - *
- * - *
- *
Home
- *
- *
- * - * 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) { diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less index a3f99491a..05fb8991c 100644 --- a/modules/system/assets/ui/less/list.less +++ b/modules/system/assets/ui/less/list.less @@ -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; diff --git a/modules/system/assets/ui/less/tab.less b/modules/system/assets/ui/less/tab.less index 604271abe..c5544c9ad 100644 --- a/modules/system/assets/ui/less/tab.less +++ b/modules/system/assets/ui/less/tab.less @@ -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 {