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.center{text-align:center}
.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-120{width:120px}
.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.center{text-align:center}
.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-cell{display:table-cell;vertical-align:top;height:100%}
.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.center{text-align:center}
.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}
.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.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}
@ -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.nav{display:inline-block}
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{left:-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)
nav.verticalMenu($('a.menu-toggle',navbar))
$('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)
$.oc={}
var SideNav=function(element,options){this.options=options
@ -1090,7 +1090,7 @@ if(this.pageTitleTemplate===undefined)
this.pageTitleTemplate=$title.data('titleTemplate')
$title.text(this.pageTitleTemplate.replace('%s',title))}
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
$children.each(function(){$el=$(this)
margin=$el.data('oc.layoutMargin')

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

@ -15,7 +15,9 @@
OctoberLayout.prototype.updateLayout = function(title) {
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()
if ($children.length > 0) {

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

@ -12,7 +12,7 @@
(function($){
$(window).load(function() {
$('nav.navbar').each(function(){
var
var
navbar = $(this),
nav = $('ul.nav', navbar)
@ -23,7 +23,7 @@
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')
if (dragScroll) {
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 {
vertical-align: middle;
}
&.width-fix {
> form, > div {
display: inline-block;
}
}
}
display: table;
@ -148,6 +142,16 @@ body {
background: white;
}
//
// Calculated fixed width
//
.layout-cell.width-fix, [data-calculate-width] {
> form, > div {
display: inline-block;
}
}
//
// Layout styles
//

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

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

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

@ -169,8 +169,8 @@
MarkdownEditor.prototype.createToolbar = function() {
var self = this,
$button,
$buttons = $('<div class="layout-cell toolbar-item" />'),
$fixedButtons = $('<div class="layout-cell toolbar-item width-fix" />')
$buttons = $('<div class="toolbar-item toolbar-primary" />'),
$fixedButtons = $('<div class="toolbar-item" data-calculate-width />')
$.each($.oc.markdownEditorButtons, function(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): ?>
<div class="form-control"><?= e($value) ?></div>
<?php else: ?>
@ -10,8 +9,7 @@
data-view-mode="<?= $mode ?>"
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">
<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();
$mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
?>
<nav class="navbar layout control-toolbar" id="layout-mainmenu" role="navigation">
<div class="layout-cell">
<div class="toolbar-item">
<div data-control="toolbar">
<a class="menu-toggle" href="javascript:;">
<i class="icon-bars"></i>
<?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
</a>
<nav class="navbar control-toolbar" id="layout-mainmenu" role="navigation">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<a class="menu-toggle" href="javascript:;">
<i class="icon-bars"></i>
<?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
</a>
<ul class="nav">
<?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
<li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>">
<a href="<?= $item->url ?>">
<i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<ul class="nav">
<?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
<li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>">
<a href="<?= $item->url ?>">
<i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="layout-cell width-fix">
<div class="toolbar-item" data-calculate-width>
<ul>
<li class="icon preview with-tooltip">
<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="layout control-toolbar">
<div class="control-toolbar">
<!-- Control Panel -->
<div class="layout-cell toolbar-item">
<div class="toolbar-item toolbar-primary">
<?= ($controlPanel) ?: '&nbsp;' ?>
</div>
<!-- List Search -->
<?php if ($search): ?>
<div class="layout-cell toolbar-item width-fix">
<div class="toolbar-item" data-calculate-width>
<?= $search ?>
</div>
<?php endif ?>
</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 control-toolbar">
<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>
<div class="control-toolbar toolbar-padded">
<ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
<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>
<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>
<li role="presentation" class="divider"></li>
<li role="presentation"><a
role="menuitem"
tabindex="-1"
href="javascript:;"
class="oc-icon-folder-o"
data-control="popup"
data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
</ul>
</div>
<!-- Control Panel -->
<div class="toolbar-item" data-calculate-width>
<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>
<div class="dropdown hide"
id="<?= $this->getId('tools-button') ?>"
data-trigger-action="show"
data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
data-trigger-condition="checked">
<button type="button" class="btn btn-primary empty oc-icon-wrench last"
data-toggle="dropdown"
data-control="asset-tools"
></button>
<ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
<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>
<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>
<li role="presentation" class="divider"></li>
<li role="presentation"><a
role="menuitem"
tabindex="-1"
href="javascript:;"
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')) ?>">
<li role="presentation"><a
role="menuitem"
tabindex="-1"
href="javascript:;"
data-control="delete-asset"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
class="oc-icon-trash-o"
><?= e(trans('cms::lang.asset.delete')) ?></a></li>
<div class="dropdown hide"
id="<?= $this->getId('tools-button') ?>"
data-trigger-action="show"
data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
data-trigger-condition="checked">
<button type="button" class="btn btn-primary empty oc-icon-wrench last"
data-toggle="dropdown"
data-control="asset-tools"
></button>
<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>
<ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>">
<li role="presentation"><a
role="menuitem"
tabindex="-1"
href="javascript:;"
data-control="delete-asset"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
class="oc-icon-trash-o"
><?= e(trans('cms::lang.asset.delete')) ?></a></li>
<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 class="layout-cell">
<div class="relative toolbar-item loading-indicator-container size-input-text">
<input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>"
class="form-control icon search" autocomplete="off"
data-track-input
data-load-indicator
data-load-indicator-opaque
data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')"
data-request="<?= $this->getEventHandler('onSearch') ?>"
/>
</div>
<!-- Asset Search -->
<div class="relative toolbar-item loading-indicator-container size-input-text">
<input
type="text"
name="search"
value="<?= e($this->getSearchTerm()) ?>"
class="form-control icon search" autocomplete="off"
placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>"
data-track-input
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>

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;
?>
<div class="layout control-toolbar standalone-paddings">
<div class="layout-cell toolbar-item">
<div class="control-toolbar toolbar-padded">
<div class="toolbar-item toolbar-primary">
<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>

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

@ -1,6 +1,6 @@
<div class="layout-row min-size">
<div class="layout control-toolbar standalone-paddings">
<div class="layout-cell toolbar-item">
<div class="control-toolbar toolbar-padded">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="btn-group offset-right">
<button type="button" class="btn btn-primary oc-icon-upload" data-control="upload"
@ -22,10 +22,14 @@
</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">
<input placeholder="<?= e(trans('cms::lang.media.search')) ?>" type="text" name="search" value="<?= e($searchTerm) ?>"
class="form-control icon search growable"
<input
type="text"
name="search"
value="<?= e($searchTerm) ?>"
class="form-control icon search growable"
placeholder="<?= e(trans('cms::lang.media.search')) ?>"
data-control="search"
autocomplete="off"
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 control-toolbar">
<div class="layout-cell width-fix">
<div class="toolbar-item">
<div class="btn-group">
<button type="button" class="btn btn-primary oc-icon-plus last"
data-control="create-template"
><?= e(trans('cms::lang.sidebar.add')) ?></button>
<button type="button" class="btn btn-primary empty oc-icon-trash-o hide"
id="<?= $this->getId('delete-button') ?>"
data-control="delete-template"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
data-trigger-action="show"
data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]"
data-trigger-condition="checked"></button>
</div>
<div class="control-toolbar toolbar-padded">
<!-- Control Panel -->
<div class="toolbar-item" data-calculate-width>
<div class="btn-group">
<button type="button" class="btn btn-primary oc-icon-plus last"
data-control="create-template"
><?= e(trans('cms::lang.sidebar.add')) ?></button>
<button type="button" class="btn btn-primary empty oc-icon-trash-o hide"
id="<?= $this->getId('delete-button') ?>"
data-control="delete-template"
data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
data-trigger-action="show"
data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]"
data-trigger-condition="checked"></button>
</div>
</div>
<div class="layout-cell">
<div class="relative toolbar-item loading-indicator-container size-input-text">
<input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>"
class="form-control icon search" autocomplete="off"
data-track-input
data-load-indicator
data-load-indicator-opaque
data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')"
data-request="<?= $this->getEventHandler('onSearch') ?>"
/>
</div>
<!-- Template Search -->
<div class="relative toolbar-item loading-indicator-container size-input-text">
<input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>"
class="form-control icon search" autocomplete="off"
data-track-input
data-load-indicator
data-load-indicator-opaque
data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')"
data-request="<?= $this->getEventHandler('onSearch') ?>"
/>
</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.
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
<div class="layout control-toolbar">
<div class="layout-cell toolbar-item">
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<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>
</div>
</div>
<div class="layout-cell toolbar-item width-fix">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
### Button groups
<div class="layout control-toolbar">
<div class="layout-cell toolbar-item">
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<div class="btn-group">
<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 class="layout-cell toolbar-item width-fix">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
### Button with Tooltips
<div class="layout control-toolbar">
<div class="layout-cell toolbar-item">
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<button
type="button"
@ -61,15 +63,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
</button>
</div>
</div>
<div class="layout-cell toolbar-item width-fix">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</div>
</div>
### Dropdown buttons
<div class="layout control-toolbar">
<div class="layout-cell toolbar-item">
<div class="control-toolbar">
<div class="toolbar-item toolbar-primary">
<div data-control="toolbar">
<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 class="layout-cell toolbar-item width-fix">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
<div class="toolbar-item" style="width: 110px">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
</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>
</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-expand"></button>
</div>

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

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