Simplelist control now supports scrollbars and selectable lists

This commit is contained in:
Sam Georges 2014-06-15 15:49:06 +10:00
parent 2c61afaa2e
commit 4b18c50849
7 changed files with 117 additions and 20 deletions

View File

@ -7690,7 +7690,7 @@ label {
border-left: none;
}
.custom-select.select2-container .select2-choice .select2-arrow b {
background: none !important;
background: none;
text-align: center;
color: #666666;
}
@ -7765,7 +7765,7 @@ label {
min-height: 36px;
border: none;
border-bottom: 1px solid #b2b9be;
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px;
}
.select2-drop .select2-results {
padding: 0;
@ -7783,11 +7783,14 @@ label {
padding: 5px 7px 5px;
}
.list-preview {
padding: 20px 0 0;
padding: 0;
margin-bottom: 20px;
background: white;
border: 1px solid #e2e2e2;
}
.list-preview > .list-header:first-child {
padding-top: 20px;
}
.list-preview .control-list:last-child > table {
margin-bottom: 0;
}
@ -8363,7 +8366,8 @@ table.table.data tr.list-tree-level-25 td.list-data-column-1 {
padding-left: 15px;
}
.control-simplelist.with-icons ul,
.control-simplelist.with-checkboxes ul {
.control-simplelist.with-checkboxes ul,
.control-simplelist.is-selectable ul {
list-style-type: none;
padding-left: 0;
}
@ -8392,6 +8396,49 @@ table.table.data tr.list-tree-level-25 td.list-data-column-1 {
.control-simplelist.is-scrollable {
height: 200px;
}
.control-simplelist.is-scrollable.size-tiny {
min-height: 250px;
}
.control-simplelist.is-scrollable.size-small {
min-height: 300px;
}
.control-simplelist.is-scrollable.size-large {
min-height: 400px;
}
.control-simplelist.is-scrollable.size-huge {
min-height: 450px;
}
.control-simplelist.is-scrollable.size-giant {
min-height: 550px;
}
.control-simplelist.is-selectable li {
padding: 5px 10px;
border-bottom: 1px solid #e2e2e2;
}
.control-simplelist.is-selectable li .heading {
font-size: 14px;
font-weight: bold;
}
.control-simplelist.is-selectable li a {
color: #333333;
}
.control-simplelist.is-selectable li:hover {
background: #4da7e8;
cursor: pointer;
}
.control-simplelist.is-selectable li:hover,
.control-simplelist.is-selectable li:hover a {
color: white;
}
.control-simplelist.is-selectable li:hover a {
text-decoration: none;
}
.control-simplelist.is-selectable li:last-child {
border-bottom: none;
}
.list-preview .control-simplelist.is-selectable ul {
margin-bottom: 0;
}
.control-filter {
padding: 0 10px;
font-size: 13px;

View File

@ -32,6 +32,15 @@
$el.find('> ul, > ol').sortable(sortableOptions)
}
if ($el.hasClass('is-scrollable')) {
/*
* Inject a scrollbar container
*/
$el.wrapInner($('<div />').addClass('control-scrollbar'))
var $scrollbar = $el.find('>.control-scrollbar:first')
$scrollbar.scrollbar()
}
}
SimpleList.DEFAULTS = {

View File

@ -57,11 +57,15 @@
//
.list-preview {
padding: 20px 0 0;
padding: 0;
margin-bottom: 20px;
background: white;
border: 1px solid @color-list-border;
> .list-header:first-child {
padding-top: 20px;
}
.control-list:last-child > table {
margin-bottom: 0;
}

View File

@ -33,7 +33,7 @@
ul { padding-left: 15px; }
&.with-icons, &.with-checkboxes {
&.with-icons, &.with-checkboxes, &.is-selectable {
ul {
list-style-type: none;
padding-left: 0;
@ -65,6 +65,44 @@
&.is-scrollable {
height: 200px;
&.size-tiny { min-height: @size-tiny + 200; }
&.size-small { min-height: @size-small + 200; }
&.size-large { min-height: @size-large + 200; }
&.size-huge { min-height: @size-huge + 200; }
&.size-giant { min-height: @size-giant + 200; }
}
&.is-selectable {
li {
padding: 5px 10px;
border-bottom: 1px solid @color-list-border;
.heading {
font-size: 14px;
font-weight: bold;
}
.description {
}
a { color: @text-color; }
&:hover {
background: @color-list-hover-bg;
cursor: pointer;
&, a { color: white; }
a { text-decoration: none; }
}
&:last-child {
border-bottom: none;
}
}
}
}
.list-preview .control-simplelist {
&.is-selectable {
ul {
margin-bottom: 0;
}
}
}

View File

@ -86,6 +86,16 @@
@color-list-header-bg: transparent;
@color-list-head-bg: #ffffff;
@color-list-progress-bg: #0181b9;
@color-list-border: #e2e2e2;
@color-list-border-light: #eeeeee;
@color-list-text-head: #333333;
@color-list-text: #666666;
@color-list-text-active: #000000;
@color-list-stripe-active: #ff9933;
@color-list-accent: #f5f5f5;
@color-list-norecords-text: #666666;
@color-list-hover-bg: #4da7e8;
@color-list-active-sort: #c63e26;
@color-text-title: #405261;
@color-text-description: #8f8f8f;
@ -136,17 +146,6 @@
@color-flash-warning-bg: #f0ad4e;
@color-flash-text: #ffffff;
@color-list-border: #e2e2e2;
@color-list-border-light: #eeeeee;
@color-list-text-head: #333333;
@color-list-text: #666666;
@color-list-text-active: #000000;
@color-list-stripe-active: #ff9933;
@color-list-accent: #f5f5f5;
@color-list-norecords-text: #666666;
@color-list-hover-bg: #4da7e8;
@color-list-active-sort: #c63e26;
@color-filter-text: #666666;
@color-filter-bg: #f3f3f3;
@color-filter-bg-active: #cc3300;

View File

@ -148,7 +148,7 @@ class NavigationManager
* - permissions - an array of permissions the back-end user should have, optional.
* - counter - an optional numeric value to output near the menu icon. The value should be
* a number or a callable returning a number.
* @param string $owner Specifies the menu items owner plugin or module in the format Vendor/Module.
* @param string $owner Specifies the menu items owner plugin or module in the format Author.Plugin.
* @param array $definitions An array of the menu item definitions.
*/
public function registerMenuItems($owner, array $definitions)

View File

@ -16,7 +16,7 @@
&.size-large { min-height: @size-large; }
&.size-huge { min-height: @size-huge; }
&.size-giant { min-height: @size-giant; }
.ace_search {
font-family: @font-family-sans-serif;
font-size: 14px;
@ -25,7 +25,7 @@
.editor-code {
.border-radius(@border-radius-base);
}
.editor-toolbar {
position: absolute;
top: 0;