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

Decouple the toolbar from the layout system

This commit is contained in:
Samuel Georges 2015-08-26 20:24:37 +10:00
parent c3ff99f228
commit 793bf30c26
17 changed files with 186 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -583,7 +583,6 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
.layout > .layout-row > .layout-cell.min-height{height:0} .layout > .layout-row > .layout-cell.min-height{height:0}
.layout > .layout-row > .layout-cell.center{text-align:center} .layout > .layout-row > .layout-cell.center{text-align:center}
.layout > .layout-row > .layout-cell.middle{vertical-align:middle} .layout > .layout-row > .layout-cell.middle{vertical-align:middle}
.layout > .layout-row > .layout-cell.width-fix > form,.layout > .layout-row > .layout-cell.width-fix > div{display:inline-block}
.layout > .layout-row > .layout-cell.width-100{width:100px} .layout > .layout-row > .layout-cell.width-100{width:100px}
.layout > .layout-row > .layout-cell.width-120{width:120px} .layout > .layout-row > .layout-cell.width-120{width:120px}
.layout > .layout-row > .layout-cell.width-200{width:200px} .layout > .layout-row > .layout-cell.width-200{width:200px}
@ -596,7 +595,6 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
.layout > .layout-row > .layout-cell.min-height{height:0} .layout > .layout-row > .layout-cell.min-height{height:0}
.layout > .layout-row > .layout-cell.center{text-align:center} .layout > .layout-row > .layout-cell.center{text-align:center}
.layout > .layout-row > .layout-cell.middle{vertical-align:middle} .layout > .layout-row > .layout-cell.middle{vertical-align:middle}
.layout > .layout-row > .layout-cell.width-fix > form,.layout > .layout-row > .layout-cell.width-fix > div{display:inline-block}
.layout > .layout-row.min-size{height:0} .layout > .layout-row.min-size{height:0}
.layout > .layout-cell{display:table-cell;vertical-align:top;height:100%} .layout > .layout-cell{display:table-cell;vertical-align:top;height:100%}
.layout > .layout-cell.width-100{width:100px} .layout > .layout-cell.width-100{width:100px}
@ -611,8 +609,8 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
.layout > .layout-cell.min-height{height:0} .layout > .layout-cell.min-height{height:0}
.layout > .layout-cell.center{text-align:center} .layout > .layout-cell.center{text-align:center}
.layout > .layout-cell.middle{vertical-align:middle} .layout > .layout-cell.middle{vertical-align:middle}
.layout > .layout-cell.width-fix > form,.layout > .layout-cell.width-fix > div{display:inline-block}
.whiteboard{background:white} .whiteboard{background:white}
.layout-cell.width-fix > form,[data-calculate-width] > form,.layout-cell.width-fix > div,[data-calculate-width] > div{display:inline-block}
body.compact-container .layout.layout-container,body.compact-container .layout .layout-container{padding:0 !important} body.compact-container .layout.layout-container,body.compact-container .layout .layout-container{padding:0 !important}
body.slim-container .layout.layout-container,body.slim-container .layout .layout-container{padding-left:0 !important;padding-right:0 !important} body.slim-container .layout.layout-container,body.slim-container .layout .layout-container{padding-left:0 !important;padding-right:0 !important}
@media (max-width:768px){.layout .hide-on-small{display:none} @media (max-width:768px){.layout .hide-on-small{display:none}
@ -639,7 +637,7 @@ nav#layout-mainmenu.navbar ul li.account a{padding-right:20px;position:relative;
nav#layout-mainmenu.navbar ul li.account img{width:25px;margin-right:7px;position:relative;top:-2px} nav#layout-mainmenu.navbar ul li.account img{width:25px;margin-right:7px;position:relative;top:-2px}
nav#layout-mainmenu.navbar ul.nav{display:inline-block} nav#layout-mainmenu.navbar ul.nav{display:inline-block}
nav#layout-mainmenu.navbar .menu-toggle{display:none} nav#layout-mainmenu.navbar .menu-toggle{display:none}
nav#layout-mainmenu.navbar .toolbar-item{margin-right:0} nav#layout-mainmenu.navbar .toolbar-item{padding-right:0}
nav#layout-mainmenu.navbar .toolbar-item:before,nav#layout-mainmenu.navbar .toolbar-item:after{margin-top:0} nav#layout-mainmenu.navbar .toolbar-item:before,nav#layout-mainmenu.navbar .toolbar-item:after{margin-top:0}
nav#layout-mainmenu.navbar .toolbar-item:before{left:-12px} nav#layout-mainmenu.navbar .toolbar-item:before{left:-12px}
nav#layout-mainmenu.navbar .toolbar-item:after{right:-12px} nav#layout-mainmenu.navbar .toolbar-item:after{right:-12px}

4
modules/backend/assets/js/october-min.js vendored
View File

@ -884,7 +884,7 @@ return this}}(window.jQuery);(function($){$(window).load(function(){$('nav.navba
navbar=$(this),nav=$('ul.nav',navbar) navbar=$(this),nav=$('ul.nav',navbar)
nav.verticalMenu($('a.menu-toggle',navbar)) nav.verticalMenu($('a.menu-toggle',navbar))
$('li.with-tooltip > a',navbar).tooltip({container:'body',placement:'bottom'}) $('li.with-tooltip > a',navbar).tooltip({container:'body',placement:'bottom'})
$('.layout-cell.width-fix',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll') $('[data-calculate-width]',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll')
if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})})(jQuery);+function($){"use strict";if($.oc===undefined) if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})})(jQuery);+function($){"use strict";if($.oc===undefined)
$.oc={} $.oc={}
var SideNav=function(element,options){this.options=options var SideNav=function(element,options){this.options=options
@ -1090,7 +1090,7 @@ if(this.pageTitleTemplate===undefined)
this.pageTitleTemplate=$title.data('titleTemplate') this.pageTitleTemplate=$title.data('titleTemplate')
$title.text(this.pageTitleTemplate.replace('%s',title))} $title.text(this.pageTitleTemplate.replace('%s',title))}
OctoberLayout.prototype.updateLayout=function(title){var $children,$el,fixedWidth,margin OctoberLayout.prototype.updateLayout=function(title){var $children,$el,fixedWidth,margin
$('.layout-cell.width-fix').each(function(){$children=$(this).children() $('.layout-cell.width-fix, [data-calculate-width]').each(function(){$children=$(this).children()
if($children.length>0){fixedWidth=0 if($children.length>0){fixedWidth=0
$children.each(function(){$el=$(this) $children.each(function(){$el=$(this)
margin=$el.data('oc.layoutMargin') margin=$el.data('oc.layoutMargin')

4
modules/backend/assets/js/october.layout.js
View File

@ -15,7 +15,9 @@
OctoberLayout.prototype.updateLayout = function(title) { OctoberLayout.prototype.updateLayout = function(title) {
var $children, $el, fixedWidth, margin var $children, $el, fixedWidth, margin
$('.layout-cell.width-fix').each(function(){ // The entire 'width-fix' class can probably be removed if year >= 2017
// After checking that it isn't being used anywhere -sg
$('.layout-cell.width-fix, [data-calculate-width]').each(function(){
$children = $(this).children() $children = $(this).children()
if ($children.length > 0) { if ($children.length > 0) {

2
modules/backend/assets/js/october.navbar.js
View File

@ -23,7 +23,7 @@
placement: 'bottom' placement: 'bottom'
}) })
$('.layout-cell.width-fix', navbar).one('oc.widthFixed', function(){ $('[data-calculate-width]', navbar).one('oc.widthFixed', function() {
var dragScroll = $('[data-control=toolbar]', navbar).data('oc.dragScroll') var dragScroll = $('[data-control=toolbar]', navbar).data('oc.dragScroll')
if (dragScroll) { if (dragScroll) {
dragScroll.goToElement($('ul.nav > li.active', navbar), undefined, {'duration': 0}) dragScroll.goToElement($('ul.nav > li.active', navbar), undefined, {'duration': 0})

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

@ -112,12 +112,6 @@ body {
&.middle { &.middle {
vertical-align: middle; vertical-align: middle;
} }
&.width-fix {
> form, > div {
display: inline-block;
}
}
} }
display: table; display: table;
@ -148,6 +142,16 @@ body {
background: white; background: white;
} }
//
// Calculated fixed width
//
.layout-cell.width-fix, [data-calculate-width] {
> form, > div {
display: inline-block;
}
}
// //
// Layout styles // Layout styles
// //

4
modules/backend/assets/less/layout/mainmenu.less
View File

@ -7,8 +7,6 @@ body.mainmenu-open {
} }
nav#layout-mainmenu.navbar { nav#layout-mainmenu.navbar {
// .clearfix();
// position: relative;
background-color: @color-mainmenu; background-color: @color-mainmenu;
height: auto; height: auto;
padding: 0 0 0 20px; padding: 0 0 0 20px;
@ -84,7 +82,7 @@ nav#layout-mainmenu.navbar {
.menu-toggle { display: none; } .menu-toggle { display: none; }
.toolbar-item { .toolbar-item {
margin-right: 0; padding-right: 0;
&:before, &:after { margin-top: 0; } &:before, &:after { margin-top: 0; }
&:before { left: -12px; } &:before { left: -12px; }

4
modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
View File

@ -169,8 +169,8 @@
MarkdownEditor.prototype.createToolbar = function() { MarkdownEditor.prototype.createToolbar = function() {
var self = this, var self = this,
$button, $button,
$buttons = $('<div class="layout-cell toolbar-item" />'), $buttons = $('<div class="toolbar-item toolbar-primary" />'),
$fixedButtons = $('<div class="layout-cell toolbar-item width-fix" />') $fixedButtons = $('<div class="toolbar-item" data-calculate-width />')
$.each($.oc.markdownEditorButtons, function(code, button) { $.each($.oc.markdownEditorButtons, function(code, button) {
$button = self.makeToolbarButton(code, button) $button = self.makeToolbarButton(code, button)

4
modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
View File

@ -1,4 +1,3 @@
<?php if ($this->previewMode): ?> <?php if ($this->previewMode): ?>
<div class="form-control"><?= e($value) ?></div> <div class="form-control"><?= e($value) ?></div>
<?php else: ?> <?php else: ?>
@ -10,8 +9,7 @@
data-view-mode="<?= $mode ?>" data-view-mode="<?= $mode ?>"
data-vendor-path="<?= URL::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>"> data-vendor-path="<?= URL::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>">
<div class="layout control-toolbar editor-toolbar"></div> <div class="control-toolbar editor-toolbar"></div>
<div class="editor-write layout-cell"> <div class="editor-write layout-cell">
<textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea> <textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>

36
modules/backend/layouts/_mainmenu.htm
View File

@ -2,28 +2,26 @@
$activeItem = BackendMenu::getActiveMainMenuItem(); $activeItem = BackendMenu::getActiveMainMenuItem();
$mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings'); $mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
?> ?>
<nav class="navbar layout control-toolbar" id="layout-mainmenu" role="navigation"> <nav class="navbar control-toolbar" id="layout-mainmenu" role="navigation">
<div class="layout-cell"> <div class="toolbar-item toolbar-primary">
<div class="toolbar-item"> <div data-control="toolbar">
<div data-control="toolbar"> <a class="menu-toggle" href="javascript:;">
<a class="menu-toggle" href="javascript:;"> <i class="icon-bars"></i>
<i class="icon-bars"></i> <?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
<?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?> </a>
</a>
<ul class="nav"> <ul class="nav">
<?php foreach (BackendMenu::listMainMenuItems() as $item): ?> <?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
<li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>"> <li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>">
<a href="<?= $item->url ?>"> <a href="<?= $item->url ?>">
<i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?> <i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?>
</a> </a>
</li> </li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</div>
</div> </div>
</div> </div>
<div class="layout-cell width-fix"> <div class="toolbar-item" data-calculate-width>
<ul> <ul>
<li class="icon preview with-tooltip"> <li class="icon preview with-tooltip">
<a <a

8
modules/backend/widgets/toolbar/partials/_toolbar.htm
View File

@ -1,15 +1,17 @@
<div class="toolbar-widget <?= $cssClasses ?>" id="<?= $this->getId() ?>"> <div class="toolbar-widget <?= $cssClasses ?>" id="<?= $this->getId() ?>">
<div class="layout control-toolbar"> <div class="control-toolbar">
<!-- Control Panel --> <!-- Control Panel -->
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<?= ($controlPanel) ?: '&nbsp;' ?> <?= ($controlPanel) ?: '&nbsp;' ?>
</div> </div>
<!-- List Search --> <!-- List Search -->
<?php if ($search): ?> <?php if ($search): ?>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" data-calculate-width>
<?= $search ?> <?= $search ?>
</div> </div>
<?php endif ?> <?php endif ?>
</div> </div>
</div> </div>

128
modules/cms/widgets/assetlist/partials/_toolbar.htm
View File

@ -1,74 +1,78 @@
<div class="layout-row min-size"> <div class="layout-row min-size">
<div class="layout control-toolbar"> <div class="control-toolbar toolbar-padded">
<div class="layout-cell width-fix">
<div class="toolbar-item">
<div class="btn-group">
<div class="dropdown last">
<button type="button" class="btn btn-primary oc-icon-plus"
data-control="create-asset"
data-toggle="dropdown"
><?= e(trans('cms::lang.sidebar.add')) ?></button>
<ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>"> <!-- Control Panel -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="create-template" class="oc-icon-file-text-o"><?= e(trans('cms::lang.asset.create_file')) ?></a></li> <div class="toolbar-item" data-calculate-width>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="upload-assets" class="oc-icon-upload"><?= e(trans('cms::lang.asset.upload_files')) ?></a></li> <div class="btn-group">
<li role="presentation" class="divider"></li> <div class="dropdown last">
<li role="presentation"><a <button type="button" class="btn btn-primary oc-icon-plus"
role="menuitem" data-control="create-asset"
tabindex="-1" data-toggle="dropdown"
href="javascript:;" ><?= e(trans('cms::lang.sidebar.add')) ?></button>
class="oc-icon-folder-o"
data-control="popup"
data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
</ul>
</div>
<div class="dropdown hide" <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
id="<?= $this->getId('tools-button') ?>" <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="create-template" class="oc-icon-file-text-o"><?= e(trans('cms::lang.asset.create_file')) ?></a></li>
data-trigger-action="show" <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="upload-assets" class="oc-icon-upload"><?= e(trans('cms::lang.asset.upload_files')) ?></a></li>
data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]" <li role="presentation" class="divider"></li>
data-trigger-condition="checked"> <li role="presentation"><a
<button type="button" class="btn btn-primary empty oc-icon-wrench last" role="menuitem"
data-toggle="dropdown" tabindex="-1"
data-control="asset-tools" href="javascript:;"
></button> class="oc-icon-folder-o"
data-control="popup"
data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
</ul>
</div>
<ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>"> <div class="dropdown hide"
<li role="presentation"><a id="<?= $this->getId('tools-button') ?>"
role="menuitem" data-trigger-action="show"
tabindex="-1" data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
href="javascript:;" data-trigger-condition="checked">
data-control="delete-asset" <button type="button" class="btn btn-primary empty oc-icon-wrench last"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>" data-toggle="dropdown"
class="oc-icon-trash-o" data-control="asset-tools"
><?= e(trans('cms::lang.asset.delete')) ?></a></li> ></button>
<li role="presentation"><a <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>">
role="menuitem" <li role="presentation"><a
tabindex="-1" role="menuitem"
href="javascript:;" tabindex="-1"
class="oc-icon-angle-double-right" href="javascript:;"
data-control="popup" data-control="delete-asset"
data-handler="<?= $this->getEventHandler('onLoadMovePopup') ?>" data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
><?= e(trans('cms::lang.asset.move')) ?></a></li> class="oc-icon-trash-o"
</ul> ><?= e(trans('cms::lang.asset.delete')) ?></a></li>
</div>
<li role="presentation"><a
role="menuitem"
tabindex="-1"
href="javascript:;"
class="oc-icon-angle-double-right"
data-control="popup"
data-handler="<?= $this->getEventHandler('onLoadMovePopup') ?>"
><?= e(trans('cms::lang.asset.move')) ?></a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="layout-cell">
<div class="relative toolbar-item loading-indicator-container size-input-text"> <!-- Asset Search -->
<input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>" <div class="relative toolbar-item loading-indicator-container size-input-text">
class="form-control icon search" autocomplete="off" <input
data-track-input type="text"
data-load-indicator name="search"
data-load-indicator-opaque value="<?= e($this->getSearchTerm()) ?>"
data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')" class="form-control icon search" autocomplete="off"
data-request="<?= $this->getEventHandler('onSearch') ?>" placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>"
/> data-track-input
</div> data-load-indicator
data-load-indicator-opaque
data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')"
data-request="<?= $this->getEventHandler('onSearch') ?>"
/>
</div> </div>
</div> </div>
</div> </div>

4
modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm
View File

@ -9,8 +9,8 @@
$sizeDisabledAttr = $currentSelectionMode == Cms\Widgets\MediaManager::SELECTION_MODE_NORMAL ? 'disabled="disabled"' : null; $sizeDisabledAttr = $currentSelectionMode == Cms\Widgets\MediaManager::SELECTION_MODE_NORMAL ? 'disabled="disabled"' : null;
?> ?>
<div class="layout control-toolbar standalone-paddings"> <div class="control-toolbar toolbar-padded">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<label class="standalone"><?= e(trans('cms::lang.media.image_size')) ?> <span data-label="width"><?= $dimensions[0] ?></span> x <span data-label="height"><?= $dimensions[1] ?></span></label> <label class="standalone"><?= e(trans('cms::lang.media.image_size')) ?> <span data-label="width"><?= $dimensions[0] ?></span> x <span data-label="height"><?= $dimensions[1] ?></span></label>

12
modules/cms/widgets/mediamanager/partials/_toolbar.htm
View File

@ -1,6 +1,6 @@
<div class="layout-row min-size"> <div class="layout-row min-size">
<div class="layout control-toolbar standalone-paddings"> <div class="control-toolbar toolbar-padded">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<div class="btn-group offset-right"> <div class="btn-group offset-right">
<button type="button" class="btn btn-primary oc-icon-upload" data-control="upload" <button type="button" class="btn btn-primary oc-icon-upload" data-control="upload"
@ -22,10 +22,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" data-calculate-width>
<div class="relative loading-indicator-container size-input-text"> <div class="relative loading-indicator-container size-input-text">
<input placeholder="<?= e(trans('cms::lang.media.search')) ?>" type="text" name="search" value="<?= e($searchTerm) ?>" <input
type="text"
name="search"
value="<?= e($searchTerm) ?>"
class="form-control icon search growable" class="form-control icon search growable"
placeholder="<?= e(trans('cms::lang.media.search')) ?>"
data-control="search" data-control="search"
autocomplete="off" autocomplete="off"
data-load-indicator data-load-indicator

53
modules/cms/widgets/templatelist/partials/_toolbar.htm
View File

@ -1,32 +1,33 @@
<div class="layout-row min-size"> <div class="layout-row min-size">
<div class="layout control-toolbar"> <div class="control-toolbar toolbar-padded">
<div class="layout-cell width-fix">
<div class="toolbar-item"> <!-- Control Panel -->
<div class="btn-group"> <div class="toolbar-item" data-calculate-width>
<button type="button" class="btn btn-primary oc-icon-plus last" <div class="btn-group">
data-control="create-template" <button type="button" class="btn btn-primary oc-icon-plus last"
><?= e(trans('cms::lang.sidebar.add')) ?></button> data-control="create-template"
<button type="button" class="btn btn-primary empty oc-icon-trash-o hide" ><?= e(trans('cms::lang.sidebar.add')) ?></button>
id="<?= $this->getId('delete-button') ?>" <button type="button" class="btn btn-primary empty oc-icon-trash-o hide"
data-control="delete-template" id="<?= $this->getId('delete-button') ?>"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>" data-control="delete-template"
data-trigger-action="show" data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]" data-trigger-action="show"
data-trigger-condition="checked"></button> data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]"
</div> data-trigger-condition="checked"></button>
</div> </div>
</div> </div>
<div class="layout-cell">
<div class="relative toolbar-item loading-indicator-container size-input-text"> <!-- Template Search -->
<input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>" <div class="relative toolbar-item loading-indicator-container size-input-text">
class="form-control icon search" autocomplete="off" <input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>"
data-track-input class="form-control icon search" autocomplete="off"
data-load-indicator data-track-input
data-load-indicator-opaque data-load-indicator
data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')" data-load-indicator-opaque
data-request="<?= $this->getEventHandler('onSearch') ?>" data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')"
/> data-request="<?= $this->getEventHandler('onSearch') ?>"
</div> />
</div> </div>
</div> </div>
</div> </div>

36
modules/system/assets/ui/docs/toolbar.md
View File

@ -2,10 +2,12 @@
A scrollable set of buttons aligned to the left with a fixed right section. A scrollable set of buttons aligned to the left with a fixed right section.
All toolbar items (`toolbar-item`) should have a fixed width, except for the primary item (`toolbar-primary`) which will stretch. In the October backend you can use the `data-calculate-width` attribute to have these widths calculated dynamically for you.
## Basic toolbar ## Basic toolbar
<div class="layout control-toolbar"> <div class="control-toolbar">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<button type="button" class="btn btn-primary oc-icon-plus">Create post</button> <button type="button" class="btn btn-primary oc-icon-plus">Create post</button>
@ -24,15 +26,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
<button type="button" class="btn btn-default oc-icon-hdd-o">Archive</button> <button type="button" class="btn btn-default oc-icon-hdd-o">Archive</button>
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/> <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div> </div>
</div> </div>
### Button groups ### Button groups
<div class="layout control-toolbar"> <div class="control-toolbar">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default oc-icon-mail-reply-all">Send by email</button> <button type="button" class="btn btn-default oc-icon-mail-reply-all">Send by email</button>
@ -40,15 +42,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
</div> </div>
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/> <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div> </div>
</div> </div>
### Button with Tooltips ### Button with Tooltips
<div class="layout control-toolbar"> <div class="control-toolbar">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<button <button
type="button" type="button"
@ -61,15 +63,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
</button> </button>
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/> <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div> </div>
</div> </div>
### Dropdown buttons ### Dropdown buttons
<div class="layout control-toolbar"> <div class="control-toolbar">
<div class="layout-cell toolbar-item"> <div class="toolbar-item toolbar-primary">
<div data-control="toolbar"> <div data-control="toolbar">
<div class="dropdown dropdown-fixed"> <div class="dropdown dropdown-fixed">
@ -88,8 +90,8 @@ A scrollable set of buttons aligned to the left with a fixed right section.
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/> <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div> </div>
</div> </div>
@ -139,7 +141,7 @@ A scrollable set of buttons aligned to the left with a fixed right section.
<button type="button" class="btn tb-icon tb-horizontalrule"></button> <button type="button" class="btn tb-icon tb-horizontalrule"></button>
</div> </div>
</div> </div>
<div class="layout-cell toolbar-item width-fix"> <div class="toolbar-item" style="width: 80px">
<button type="button" class="btn oc-icon-eye"></button> <button type="button" class="btn oc-icon-eye"></button>
<button type="button" class="btn oc-icon-expand"></button> <button type="button" class="btn oc-icon-expand"></button>
</div> </div>

35
modules/system/assets/ui/less/toolbar.less
View File

@ -27,9 +27,9 @@
position: relative; position: relative;
.horizontal-scroll-indicators(@color-scroll-indicator); .horizontal-scroll-indicators(@color-scroll-indicator);
&.standalone-paddings { display: table;
padding: 20px; table-layout: fixed;
} width: 100%;
&:before { &:before {
left: -10px; left: -10px;
@ -41,27 +41,20 @@
.toolbar-item { .toolbar-item {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
margin-right: 20px; display: table-cell;
vertical-align: top;
padding-right: 20px;
&:last-child,
&.last { &.last {
margin-right: 0; padding-right: 0;
} }
.horizontal-scroll-indicators(@color-scroll-indicator); .horizontal-scroll-indicators(@color-scroll-indicator);
&:before { left: -10px; } &:before { left: -10px; }
&:after { right: 6px; }
&.layout-cell {
padding-right: 20px;
margin-right: 0;
&:after { right: 6px; }
&:last-child {
padding-right: 0;
}
}
.btn, .btn-group, .dropdown { .btn, .btn-group, .dropdown {
white-space: nowrap; white-space: nowrap;
@ -101,6 +94,10 @@
height: auto; height: auto;
padding: 8px 10px; padding: 8px 10px;
} }
&.toolbar-padded {
padding: 20px;
}
} }
[data-control=toolbar] { [data-control=toolbar] {
@ -109,12 +106,6 @@
overflow: hidden; overflow: hidden;
} }
#layout-side-panel, .panel-contents {
.control-toolbar {
padding: 20px 0 20px 20px;
}
}
// //
// Editor toolbar // Editor toolbar
// -------------------------------------------------- // --------------------------------------------------

13
modules/system/assets/ui/storm.css
View File

@ -1471,26 +1471,23 @@ ul.status-list li span.status.danger{background:#d9534f}
ul.status-list li span.status.info{background:#5bc0de} ul.status-list li span.status.info{background:#5bc0de}
.gecko ul.status-list li span.status.circle{top:-2px} .gecko ul.status-list li span.status.circle{top:-2px}
.report-container ul.status-list{margin-top:-10px} .report-container ul.status-list{margin-top:-10px}
.control-toolbar{font-size:0;padding:0 0 20px 0;position:relative} .control-toolbar{font-size:0;padding:0 0 20px 0;position:relative;display:table;table-layout:fixed;width:100%}
.control-toolbar:after,.control-toolbar:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb} .control-toolbar:after,.control-toolbar:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb}
.control-toolbar:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"} .control-toolbar:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"}
.control-toolbar:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"} .control-toolbar:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"}
.control-toolbar.scroll-before:before{display:block} .control-toolbar.scroll-before:before{display:block}
.control-toolbar.scroll-after:after{display:block} .control-toolbar.scroll-after:after{display:block}
.control-toolbar.standalone-paddings{padding:20px}
.control-toolbar:before{left:-10px} .control-toolbar:before{left:-10px}
.control-toolbar:after{right:-8px} .control-toolbar:after{right:-8px}
.control-toolbar .toolbar-item{position:relative;white-space:nowrap;margin-right:20px} .control-toolbar .toolbar-item{position:relative;white-space:nowrap;display:table-cell;vertical-align:top;padding-right:20px}
.control-toolbar .toolbar-item.last{margin-right:0} .control-toolbar .toolbar-item:last-child,.control-toolbar .toolbar-item.last{padding-right:0}
.control-toolbar .toolbar-item:after,.control-toolbar .toolbar-item:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb} .control-toolbar .toolbar-item:after,.control-toolbar .toolbar-item:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb}
.control-toolbar .toolbar-item:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"} .control-toolbar .toolbar-item:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"}
.control-toolbar .toolbar-item:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"} .control-toolbar .toolbar-item:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"}
.control-toolbar .toolbar-item.scroll-before:before{display:block} .control-toolbar .toolbar-item.scroll-before:before{display:block}
.control-toolbar .toolbar-item.scroll-after:after{display:block} .control-toolbar .toolbar-item.scroll-after:after{display:block}
.control-toolbar .toolbar-item:before{left:-10px} .control-toolbar .toolbar-item:before{left:-10px}
.control-toolbar .toolbar-item.layout-cell{padding-right:20px;margin-right:0} .control-toolbar .toolbar-item:after{right:6px}
.control-toolbar .toolbar-item.layout-cell:after{right:6px}
.control-toolbar .toolbar-item.layout-cell:last-child{padding-right:0}
.control-toolbar .toolbar-item .btn,.control-toolbar .toolbar-item .btn-group,.control-toolbar .toolbar-item .dropdown{white-space:nowrap;float:none;display:inline-block;margin-right:10px} .control-toolbar .toolbar-item .btn,.control-toolbar .toolbar-item .btn-group,.control-toolbar .toolbar-item .dropdown{white-space:nowrap;float:none;display:inline-block;margin-right:10px}
.control-toolbar .toolbar-item .btn:last-child,.control-toolbar .toolbar-item .btn-group:last-child,.control-toolbar .toolbar-item .dropdown:last-child{margin-right:0} .control-toolbar .toolbar-item .btn:last-child,.control-toolbar .toolbar-item .btn-group:last-child,.control-toolbar .toolbar-item .dropdown:last-child{margin-right:0}
.control-toolbar .toolbar-item .btn.standalone,.control-toolbar .toolbar-item .btn-group.standalone,.control-toolbar .toolbar-item .dropdown.standalone{margin-right:15px} .control-toolbar .toolbar-item .btn.standalone,.control-toolbar .toolbar-item .btn-group.standalone,.control-toolbar .toolbar-item .dropdown.standalone{margin-right:15px}
@ -1498,8 +1495,8 @@ ul.status-list li span.status.info{background:#5bc0de}
.control-toolbar .toolbar-item .btn-group .dropdown > .btn{margin-right:0;border-bottom-right-radius:0;border-top-right-radius:0} .control-toolbar .toolbar-item .btn-group .dropdown > .btn{margin-right:0;border-bottom-right-radius:0;border-top-right-radius:0}
.control-toolbar .toolbar-item .btn-group .dropdown.last > .btn{border-bottom-right-radius:2px !important;border-top-right-radius:2px !important} .control-toolbar .toolbar-item .btn-group .dropdown.last > .btn{border-bottom-right-radius:2px !important;border-top-right-radius:2px !important}
.control-toolbar input.form-control[type=text]{height:auto;padding:8px 10px} .control-toolbar input.form-control[type=text]{height:auto;padding:8px 10px}
.control-toolbar.toolbar-padded{padding:20px}
[data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden} [data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden}
#layout-side-panel .control-toolbar,.panel-contents .control-toolbar{padding:20px 0 20px 20px}
.control-toolbar.editor-toolbar{padding:0;background:#dddddd;border-bottom-right-radius:0;border-bottom-left-radius:0} .control-toolbar.editor-toolbar{padding:0;background:#dddddd;border-bottom-right-radius:0;border-bottom-left-radius:0}
.control-toolbar.editor-toolbar .toolbar-item .btn,.control-toolbar.editor-toolbar .toolbar-item .btn-group,.control-toolbar.editor-toolbar .toolbar-item .dropdown{margin:0;padding:0} .control-toolbar.editor-toolbar .toolbar-item .btn,.control-toolbar.editor-toolbar .toolbar-item .btn-group,.control-toolbar.editor-toolbar .toolbar-item .dropdown{margin:0;padding:0}
.control-toolbar.editor-toolbar .toolbar-item .btn{text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .control-toolbar.editor-toolbar .toolbar-item .btn{text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}