Simplelist control now supports scrollbars and selectable lists
This commit is contained in:
parent
2c61afaa2e
commit
4b18c50849
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue