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

Improvements in the back-end widgets

This commit is contained in:
alekseybobkov 2014-09-10 20:48:53 -07:00
parent 632d1b82cf
commit a77b290a8e
12 changed files with 507 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10820,6 +10820,30 @@ html.cssanimations .cursor-loading-indicator.hide {
.control-filelist ul li .checkbox label:before {
border-color: #cccccc;
}
.control-filelist.hero ul li {
background: #ffffff;
border-bottom: 1px solid #ecf0f1;
}
.control-filelist.hero ul li a {
padding: 16px 45px 15px 50px;
font-size: 13px;
}
.control-filelist.hero ul li a span.title {
font-size: 13px;
font-weight: 600;
color: #2b3e50;
}
.control-filelist.hero ul li a:hover {
background: #58b6f7;
}
.control-filelist.hero ul li a:hover span.title,
.control-filelist.hero ul li a:hover span.description {
color: #ffffff !important;
}
.control-filelist.hero ul li .checkbox {
top: 17px;
right: 17px;
}
.touch .control-filelist li:not(.active) a:hover {
background: transparent;
}
@ -12282,12 +12306,11 @@ div.control-popover {
background-clip: content-box;
left: 0;
top: 0;
z-index: 161;
z-index: 170;
}
div.control-popover > div {
position: relative;
background: #ffffff;
border: 1px solid #949ea6;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
border-top-right-radius: 5px;
@ -12398,6 +12421,9 @@ div.control-popover.placement-right > div:before {
div.control-popover div.popover-body {
padding: 15px;
}
div.control-popover div.popover-body.form-container {
padding-bottom: 0;
}
div.control-popover .popover-head {
background: #d35400;
padding: 14px 16px;
@ -12414,11 +12440,12 @@ div.control-popover .popover-head h3 {
font-size: 14px;
font-weight: 600;
margin-top: 0;
margin-bottom: 0;
}
div.control-popover .popover-head p {
font-size: 13px;
font-weight: 100;
margin: 0;
margin: 10px 0 0 0;
}
div.control-popover .popover-head .close {
float: none;
@ -12864,6 +12891,10 @@ div.popover-overlay {
.fancy-layout.control-tabs.primary > .tab-content > .tab-pane {
padding: 15px 15px 0 15px;
}
.fancy-layout .control-tabs.primary > .tab-content > .tab-pane.full-size,
.fancy-layout.control-tabs.primary > .tab-content > .tab-pane.full-size {
padding: 0;
}
.fancy-layout .control-tabs.primary > .tab-content > .tab-pane .form-control,
.fancy-layout.control-tabs.primary > .tab-content > .tab-pane .form-control {
border-width: 1px;
@ -13503,6 +13534,10 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
}
.control-treeview {
margin-bottom: 40px;
/*
* Light version of the treeview - transparent background, no bottom borders,
* smaller paddings, inline submenu
*/
}
.control-treeview ol {
margin: 0;
@ -13525,6 +13560,7 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
color: #2b3e50;
padding: 16px 45px 15px 61px;
display: block;
line-height: 150%;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -13670,6 +13706,23 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
.control-treeview ol > li > div .checkbox label:before {
border-color: #cccccc;
}
.control-treeview ol > li > div.popover-highlight {
background-color: #58b6f7 !important;
}
.control-treeview ol > li > div.popover-highlight:before {
background-position: 0px -80px;
}
.control-treeview ol > li > div.popover-highlight > a {
color: #ffffff !important;
cursor: default;
}
.control-treeview ol > li > div.popover-highlight span {
color: #ffffff !important;
}
.control-treeview ol > li > div.popover-highlight > ul.submenu,
.control-treeview ol > li > div.popover-highlight > span.drag-handle {
display: none!important;
}
.control-treeview ol > li.dragged div,
.control-treeview ol > li > div:hover {
background-color: #58b6f7 !important;
@ -13725,7 +13778,8 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
height: 26px;
left: 26px;
}
.control-treeview ol > li.has-subitems > div:hover:before {
.control-treeview ol > li.has-subitems > div:hover:before,
.control-treeview ol > li.has-subitems > div.popover-highlight:before {
background-position: 0px -52px;
}
.control-treeview ol > li.has-subitems > div span.expand {
@ -13982,6 +14036,84 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
text-align: center;
font-weight: 400;
}
.control-treeview.light {
margin-bottom: 0;
margin-top: 20px;
}
.control-treeview.light ol {
background-color: transparent;
}
.control-treeview.light ol > li > div {
background-color: transparent;
border-bottom: none;
}
.control-treeview.light ol > li > div:before {
top: 15px;
}
.control-treeview.light ol > li > div > a {
padding-top: 10px;
padding-bottom: 10px;
}
.control-treeview.light ol > li > div span.expand {
top: 19px;
}
.control-treeview.light ol > li > div > span.drag-handle {
top: 0;
right: 0;
bottom: auto;
height: 100%;
width: 60px;
background: #2581b8;
-webkit-transition: none !important;
transition: none !important;
}
.control-treeview.light ol > li > div > span.drag-handle:before {
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
}
.control-treeview.light ol > li > div > ul.submenu {
right: 60px;
left: auto;
bottom: auto;
top: 0;
height: 100%;
margin: 0;
background: transparent;
white-space: nowrap;
font-size: 0;
}
.control-treeview.light ol > li > div > ul.submenu:before,
.control-treeview.light ol > li > div > ul.submenu:after {
display: none;
}
.control-treeview.light ol > li > div > ul.submenu li {
height: 100%;
display: inline-block;
background: #2581b8;
border-right: 1px solid #328ec8;
}
.control-treeview.light ol > li > div > ul.submenu li p {
display: table;
height: 100%;
padding: 0;
margin: 0;
}
.control-treeview.light ol > li > div > ul.submenu li p a {
display: table-cell;
vertical-align: middle;
height: 100%;
padding: 0 20px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.control-treeview.light ol > li > div > ul.submenu li p a i.control-icon {
font-size: 22px;
margin-right: 0;
}
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.control-treeview ol > li > div:before {
background-position: 0px -79px;
@ -13990,12 +14122,14 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
.control-treeview ol > li.has-subitems > div:before {
background-position: 0px -52px;
}
.control-treeview ol > li.has-subitems > div:hover:before {
.control-treeview ol > li.has-subitems > div:hover:before,
.control-treeview ol > li.has-subitems > div.popover-highlight:before {
background-position: 0px -102px;
}
.control-treeview ol > li.dragged > div:before,
.control-treeview ol > li.dragged li > div:before,
.control-treeview ol > li > div:hover:before {
.control-treeview ol > li > div:hover:before,
.control-treeview ol > li > div.popover-highlight:before {
background-position: 0px -129px;
}
.control-treeview ol > li.dragged li.has-subitems > div:before,

19
modules/backend/assets/js/october.popover.js
View File

@ -2,7 +2,7 @@
* Popover plugin
*
* Options:
* - placement: top | bottom | left | right. The placement could automatically be changed
* - placement: top | bottom | left | right | center. The placement could automatically be changed
if the popover doesn't fit into the desired position.
* - fallbackPlacement: top | bottom | left | right. The placement to use if the default placement
* and all other possible placements do not work. The default value is "bottom".
@ -132,9 +132,10 @@
/*
* Display the popover
*/
this.$container.css('visibility', 'visible')
this.$container.css('visibility', 'visible')
$(document.body).addClass('popover-open')
this.$el.trigger('show.oc.popover')
var showEvent = jQuery.Event( "show.oc.popover", { relatedTarget: this.$container.get(0) } );
this.$el.trigger(showEvent)
/*
* Bind events
@ -190,7 +191,8 @@
spaceTop: targetOffset.top,
spaceBottom: documentHeight - (targetHeight + targetOffset.top),
spaceHorizontalBottom: documentHeight - targetOffset.top,
spaceVerticalRight: documentWidth - targetOffset.left
spaceVerticalRight: documentWidth - targetOffset.left,
documentWidth: documentWidth
}
}
@ -217,7 +219,10 @@
Popover.prototype.calcPlacement = function() {
var
placement = this.options.placement,
dimensions = this.calcDimensions();
dimensions = this.calcDimensions();
if (placement == 'center')
return placement
if (placement != 'bottom' && placement != 'top' && placement != 'left' && placement != 'right')
placement = 'bottom'
@ -262,6 +267,10 @@
var realOffset = this.options.offsetY === undefined ? this.options.offset : this.options.offsetY
result = {x: (dimensions.targetOffset.left + dimensions.targetWidth + this.arrowSize), y: dimensions.targetOffset.top + realOffset}
break;
case 'center' :
var windowHeight = $(window).height()
result = {x: (dimensions.documentWidth/2 - dimensions.containerWidth/2), y: (windowHeight/2 - dimensions.containerHeight/2)}
break;
}
if (!this.options.container)

14
modules/backend/assets/js/october.treeview.js
View File

@ -81,7 +81,9 @@
$container.prepend($expand)
$container.append($('<span class="drag-handle">Drag</span>'))
if (!$('.drag-handle', $container).length)
$container.append($('<span class="drag-handle">Drag</span>'))
$container.append($('<span class="borders"></span>'))
if ($(this).attr('data-no-drag-mode') !== undefined)
@ -157,6 +159,9 @@
}
TreeView.prototype.sendReorderRequest = function() {
if (this.options.reorderHandler === undefined)
return
var groups = {}
function iterator($container, node) {
@ -203,6 +208,7 @@
this.$el.on('move.oc.treelist', function(){
setTimeout(function(){
self.$el.trigger('change')
self.$allItems.removeClass('drop-target')
self.fixSubItems()
self.sendReorderRequest()
@ -273,7 +279,11 @@
// TREEVIEW DATA-API
// ===============
$(window).load(function(){
// $(window).load(function(){
// $('[data-control=treeview]').treeView()
// })
$(document).render(function(){
$('[data-control=treeview]').treeView()
})

4
modules/backend/assets/less/controls/fancylayout.less
View File

@ -292,6 +292,10 @@
> .tab-content > .tab-pane {
padding: 15px 15px 0 15px;
&.full-size {
padding: 0;
}
.form-control {
border-width: 1px;
}

32
modules/backend/assets/less/controls/filelist.less
View File

@ -165,6 +165,38 @@
}
}
}
&.hero {
ul {
li {
background: @color-filelist-hero-item-bg;
border-bottom: 1px solid @color-panel-light;
a {
padding: 16px 45px 15px 50px;
font-size: 13px;
span.title {
font-size: 13px;
font-weight: 600;
color: @color-filelist-title-hero;
}
&:hover {
background: @color-filelist-hero-hover-bg;
span.title, span.description {
color: @color-filelist-hero-hover-text!important;
}
}
}
.checkbox {
top: 17px;
right: 17px;
}
}
}
}
}
.touch .control-filelist li:not(.active) a:hover {

10
modules/backend/assets/less/controls/popover.less
View File

@ -3,12 +3,11 @@ div.control-popover {
background-clip: content-box;
left: 0;
top: 0;
z-index: 161;
z-index: 170;
& > div {
position: relative;
background: @color-popover-bg;
border: 1px solid @color-popover-border;
.box-shadow(2px 2px 2px rgba(0,0,0,0.05));
.border-top-radius(5px);
.border-bottom-radius(2px);
@ -79,6 +78,10 @@ div.control-popover {
div.popover-body {
padding: 15px;
&.form-container {
padding-bottom: 0;
}
}
.popover-head {
@ -97,12 +100,13 @@ div.control-popover {
font-size: 14px;
font-weight: 600;
margin-top: 0;
margin-bottom: 0;
}
p {
font-size: 13px;
font-weight: 100;
margin: 0;
margin: 10px 0 0 0;
}
.close {

127
modules/backend/assets/less/controls/treeview.less
View File

@ -21,6 +21,7 @@
color: @color-treeview-item-title;
padding: 16px 45px 15px 61px;
display: block;
line-height: 150%;
text-decoration: none;
.box-sizing(border-box);
}
@ -164,6 +165,27 @@
}
}
}
&.popover-highlight {
background-color: @color-treeview-hover-bg!important;
&:before {
background-position: 0px -80px;
}
> a {
color: @color-treeview-hover-text!important;
cursor: default;
}
span {
color: @color-treeview-hover-text!important;
}
> ul.submenu, > span.drag-handle {
display: none!important;
}
}
}
&.dragged div, > div:hover {
@ -224,7 +246,7 @@
}
&.has-subitems {
>div {
> div {
&:before {
background-position: 0 0;
width: 23px;
@ -232,8 +254,8 @@
left: 26px;
}
&:hover:before {
background-position: 0px -52px;
&:hover, &.popover-highlight {
&:before {background-position: 0px -52px;}
}
span.expand {
@ -386,6 +408,99 @@
text-align: center;
font-weight: 400;
}
/*
* Light version of the treeview - transparent background, no bottom borders,
* smaller paddings, inline submenu
*/
&.light {
margin-bottom: 0;
margin-top: 20px;
ol {
background-color: transparent;
> li {
> div {
background-color: transparent;
border-bottom: none;
&:before {
top: 15px;
}
> a {
padding-top: 10px;
padding-bottom: 10px;
}
span.expand {
top: 19px;
}
> span.drag-handle {
top: 0;
right: 0;
bottom: auto;
height: 100%;
width: 60px;
background: @color-treeview-light-submenu-bg;
.transition(none)!important;
&:before {
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
}
}
> ul.submenu {
right: 60px;
left: auto;
bottom: auto;
top: 0;
height: 100%;
margin: 0;
background: transparent;
white-space: nowrap;
font-size: 0;
&:before, &:after {
display: none;
}
li {
height: 100%;
display: inline-block;
background: @color-treeview-light-submenu-bg;
border-right: 1px solid @color-treeview-light-submenu-border;
p {
display: table;
height: 100%;
padding: 0;
margin: 0;
a {
display: table-cell;
vertical-align: middle;
height: 100%;
padding: 0 20px;
font-size: 13px;
.box-sizing(border-box);
i.control-icon {
font-size: 22px;
margin-right: 0;
}
}
}
}
}
}
}
}
}
}
// Retina
@ -402,10 +517,12 @@
&.has-subitems > div {
&:before {background-position: 0px -52px;}
&:hover:before {background-position: 0px -102px;}
&:hover, &.popover-highlight {
&:before {background-position: 0px -102px;}
}
}
&.dragged > div, &.dragged li > div, > div:hover {
&.dragged > div, &.dragged li > div, > div:hover, > div.popover-highlight {
&:before {background-position: 0px -129px;}
}

6
modules/backend/assets/less/core/variables.less
View File

@ -215,6 +215,10 @@
@color-filelist-norecords-text: #666666;
@color-filelist-norecords-bg: #eeeeee;
@color-filelist-cb-border: #cccccc;
@color-filelist-title-hero: #2b3e50;
@color-filelist-hero-item-bg: #ffffff;
@color-filelist-hero-hover-bg: #58b6f7;
@color-filelist-hero-hover-text: #ffffff;
@color-pagination-icon: #666666;
@color-pagination-hover: @link-color;
@ -276,6 +280,8 @@
@color-treeview-hover-text: #ffffff;
@color-treeview-item-active-comment: #8f8f8f;
@color-treeview-submenu-text: #ffffff;
@color-treeview-light-submenu-bg: #2581b8;
@color-treeview-light-submenu-border: #328ec8;
//
// Sizes

55
modules/backend/traits/CollapsableWidget.php Normal file
View File

@ -0,0 +1,55 @@
<?php namespace Backend\Traits;
use Str;
use File;
use Lang;
use Input;
use Block;
use System\Classes\SystemException;
/**
* Collapsable Widget Trait
* Adds collapse/expand item features to back-end widgets
*
* @package october\backend
* @author Alexey Bobkov, Samuel Georges
*/
trait CollapsableWidget
{
protected $groupStatusCache = false;
public function onGroupStatusUpdate()
{
$this->setGroupStatus(Input::get('group'), Input::get('status'));
}
protected function getGroupStatuses()
{
if ($this->groupStatusCache !== false)
return $this->groupStatusCache;
$groups = $this->getSession('groups', []);
if (!is_array($groups))
return $this->groupStatusCache = [];
return $this->groupStatusCache = $groups;
}
protected function setGroupStatus($group, $status)
{
$statuses = $this->getGroupStatuses();
$statuses[$group] = $status;
$this->groupStatusCache = $statuses;
$this->putSession('groups', $statuses);
}
protected function getGroupStatus($group)
{
$statuses = $this->getGroupStatuses();
if (array_key_exists($group, $statuses))
return $statuses[$group];
return true;
}
}

45
modules/backend/traits/SearchableWidget.php Normal file
View File

@ -0,0 +1,45 @@
<?php namespace Backend\Traits;
use Str;
use File;
use Lang;
use Block;
use System\Classes\SystemException;
/**
* Searchable Widget Trait
* Adds search features to back-end widgets
*
* @package october\backend
* @author Alexey Bobkov, Samuel Georges
*/
trait SearchableWidget
{
protected $searchTerm = false;
protected function getSearchTerm()
{
return $this->searchTerm !== false ? $this->searchTerm : $this->getSession('search');
}
protected function setSearchTerm($term)
{
$this->searchTerm = trim($term);
$this->putSession('search', $this->searchTerm);
}
protected function textMatchesSearch(&$words, $text)
{
foreach ($words as $word) {
$word = trim($word);
if (!strlen($word))
continue;
if (Str::contains(Str::lower($text), $word))
return true;
}
return false;
}
}

62
modules/backend/traits/SelectableWidget.php Normal file
View File

@ -0,0 +1,62 @@
<?php namespace Backend\Traits;
use Str;
use File;
use Lang;
use Input;
use Block;
use System\Classes\SystemException;
/**
* Selectable Widget Trait
* Adds item selection features to back-end widgets
*
* @package october\backend
* @author Alexey Bobkov, Samuel Georges
*/
trait SelectableWidget
{
protected $selectedItemsCache = false;
protected $selectionInputName = 'object';
public function onSelect()
{
$this->extendSelection();
}
protected function getSelectedItems()
{
if ($this->selectedItemsCache !== false)
return $this->selectedItemsCache;
$items = $this->getSession('selected', []);
if (!is_array($items))
return $this->selectedItemsCache = [];
return $this->selectedItemsCache = $items;
}
protected function extendSelection()
{
$items = Input::get($this->selectionInputName, []);
$currentSelection = $this->getSelectedItems();
$this->putSession('selected', array_merge($currentSelection, $items));
}
protected function resetSelection()
{
$this->putSession('selected', []);
}
protected function isItemSelected($itemId)
{
$selectedItems = $this->getSelectedItems();
if (!is_array($selectedItems) || !isset($selectedItems[$itemId]))
return false;
return $selectedItems[$itemId];
}
}

14
modules/backend/widgets/form/partials/_section_primary-tabs.htm
View File

@ -1,9 +1,11 @@
<!-- Primary Tabs -->
<div
id="<?= $this->getId('primaryTabs') ?>"
class="control-tabs primary layout-row min-size"
data-control="tab"
data-slidable>
<?= $this->makePartial('form_tabs', ['tabs' => $primaryTabs, 'type' => 'primary', 'suppressTabs' => (isset($suppressTabs) ? $suppressTabs : false)]) ?>
<div class="layout-row min-size">
<div
id="<?= $this->getId('primaryTabs') ?>"
class="control-tabs primary layout-row min-size"
data-control="tab"
data-slidable>
<?= $this->makePartial('form_tabs', ['tabs' => $primaryTabs, 'type' => 'primary', 'suppressTabs' => (isset($suppressTabs) ? $suppressTabs : false)]) ?>
</div>
</div>