From 4b18c5084951394add331607f6065a6e8acd90e5 Mon Sep 17 00:00:00 2001 From: Sam Georges Date: Sun, 15 Jun 2014 15:49:06 +1000 Subject: [PATCH] Simplelist control now supports scrollbars and selectable lists --- modules/backend/assets/css/october.css | 55 +++++++++++++++++-- .../backend/assets/js/october.simplelist.js | 9 +++ .../backend/assets/less/controls/lists.less | 6 +- .../assets/less/controls/simplelist.less | 40 +++++++++++++- .../backend/assets/less/core/variables.less | 21 ++++--- modules/backend/classes/NavigationManager.php | 2 +- .../codeeditor/assets/less/codeeditor.less | 4 +- 7 files changed, 117 insertions(+), 20 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 3397bdda8..e89dcbf7a 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -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; diff --git a/modules/backend/assets/js/october.simplelist.js b/modules/backend/assets/js/october.simplelist.js index 2c78d97cc..0add060c2 100644 --- a/modules/backend/assets/js/october.simplelist.js +++ b/modules/backend/assets/js/october.simplelist.js @@ -32,6 +32,15 @@ $el.find('> ul, > ol').sortable(sortableOptions) } + if ($el.hasClass('is-scrollable')) { + + /* + * Inject a scrollbar container + */ + $el.wrapInner($('
').addClass('control-scrollbar')) + var $scrollbar = $el.find('>.control-scrollbar:first') + $scrollbar.scrollbar() + } } SimpleList.DEFAULTS = { diff --git a/modules/backend/assets/less/controls/lists.less b/modules/backend/assets/less/controls/lists.less index dd1e59533..22df42dfd 100644 --- a/modules/backend/assets/less/controls/lists.less +++ b/modules/backend/assets/less/controls/lists.less @@ -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; } diff --git a/modules/backend/assets/less/controls/simplelist.less b/modules/backend/assets/less/controls/simplelist.less index 0e8c78af0..9d9ebbfb9 100644 --- a/modules/backend/assets/less/controls/simplelist.less +++ b/modules/backend/assets/less/controls/simplelist.less @@ -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; + } + } +} \ No newline at end of file diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 6ba216345..d9e7e8093 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -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; diff --git a/modules/backend/classes/NavigationManager.php b/modules/backend/classes/NavigationManager.php index a9b731582..f7abeec77 100644 --- a/modules/backend/classes/NavigationManager.php +++ b/modules/backend/classes/NavigationManager.php @@ -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) diff --git a/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less b/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less index 30648e6f5..09434b27b 100644 --- a/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less +++ b/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less @@ -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;