diff --git a/core/misc/dropbutton/dropbutton.base-rtl.css b/core/misc/dropbutton/dropbutton.base-rtl.css index be6fd6c..bb3bf09 100644 --- a/core/misc/dropbutton/dropbutton.base-rtl.css +++ b/core/misc/dropbutton/dropbutton.base-rtl.css @@ -15,9 +15,10 @@ left: 0.6667em; right: auto; } +.dropbutton-widget .dropbutton-content { + text-align: right; +} .dropbutton-multiple .dropbutton-widget { - left: auto; padding-left: 2em; padding-right: 0; - right: 0; } diff --git a/core/misc/dropbutton/dropbutton.base.css b/core/misc/dropbutton/dropbutton.base.css index 8eca580..e88c83e 100644 --- a/core/misc/dropbutton/dropbutton.base.css +++ b/core/misc/dropbutton/dropbutton.base.css @@ -4,6 +4,86 @@ * Base styles for dropbuttons. */ +/* The operation list. */ +.dropbuttonng { + background-color: #fff; + display: block; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; +} +.dropbuttonng, +.dropbuttonng * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-transition: max-height .5s; + -webkit-transition: max-height .5s; + transition: max-height .5s; +} +/* All actions. */ +.dropbuttonng li { + padding: 0.1em 0.5em; +} +/* Hide all secondary actions. */ +.dropbuttonng li:nth-child(n+3) { + max-height: 0; + margin-right: 2em; /* LTR */ +} +/* Position the first/default action. */ +.dropbuttonng li:nth-child(1) { + display: block; + float: left; /* LTR */ + padding-right: 2em; + width: 100%; +} +/* Turn the second, injected "More" list item into a toggle. */ +.dropbuttonng li:nth-child(2) { + background-color: rgba(0, 0, 0, 0.02); + border-left: 1px solid #e8e8e8; /* LTR */ + display: block; + height: 100%; + position: absolute; + right: 0; /* LTR */ + text-align: center; + width: 2em; +} +/* Visually restyle the inner "More" list item into an arrow. */ +.dropbuttonng li:nth-child(2) span { + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + border-style: solid; + border-width: 0.3333em 0.3333em 0; + display: inline-block; + height: 0; + overflow: hidden; + text-indent: 999em; + vertical-align: middle; + width: 0; +} + +.dropbuttonng.expanded { + z-index: 10; +} +.dropbuttonng.expanded li:nth-child(n+3) { + border-top: 1px solid #e8e8e8; + display: block; + max-height: 30em; +} + + + + + + + + + + + + /** * When a dropbutton has only one option, it is simply a button. */ @@ -29,6 +109,7 @@ list-style-type: none; margin: 0; padding: 0; + text-align: left; } .dropbutton-content li, .dropbutton-content a { @@ -51,8 +132,6 @@ .dropbutton-multiple .dropbutton-widget { display: block; padding-right: 2em; /* LTR */ - position: absolute; - right: 0; /* LTR */ } .dropbutton-multiple.open, .dropbutton-multiple.open .dropbutton-widget { diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js index ec62757..089c5c8 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -7,6 +7,19 @@ */ Drupal.behaviors.dropButton = { attach: function (context, settings) { + $(context).find('.dropbuttonng').once('dropbutton', function () { + var $list = $(this); + var $toggle = $list.children().eq(1); + $toggle.on('click.dropbutton', function () { + if (!$list.hasClass('expanded')) { + $list.addClass('expanded'); + } + else { + $list.removeClass('expanded'); + } + }); + }); + settings = ('dropbutton' in settings) ? settings.dropbutton : {}; var $dropbuttons = $(context).find('.dropbutton').once('dropbutton'); for (var i = 0, il = $dropbuttons.length; i < il; i++) { diff --git a/core/misc/dropbutton/dropbutton.theme-rtl.css b/core/misc/dropbutton/dropbutton.theme-rtl.css index a5c6c4e..34fe3ec 100644 --- a/core/misc/dropbutton/dropbutton.theme-rtl.css +++ b/core/misc/dropbutton/dropbutton.theme-rtl.css @@ -4,6 +4,9 @@ * General RTL styles for dropbuttons. */ +.dropbutton-wrapper { + text-align: left; +} .dropbutton-multiple .dropbutton-content { border-left: 1px solid #e8e8e8; border-right: 0 none; diff --git a/core/misc/dropbutton/dropbutton.theme.css b/core/misc/dropbutton/dropbutton.theme.css index 2e52c1c..df91e68 100644 --- a/core/misc/dropbutton/dropbutton.theme.css +++ b/core/misc/dropbutton/dropbutton.theme.css @@ -7,6 +7,7 @@ .dropbutton-wrapper { cursor: pointer; min-height: 2em; + text-align: right; } .dropbutton-widget { background-color: white; diff --git a/core/modules/system/tests/modules/theme_test/theme_test.module b/core/modules/system/tests/modules/theme_test/theme_test.module index 91a22c1..7be93e0 100644 --- a/core/modules/system/tests/modules/theme_test/theme_test.module +++ b/core/modules/system/tests/modules/theme_test/theme_test.module @@ -169,6 +169,46 @@ function _theme_test_list_operations() { '#header' => array('Label', 'Created', 'Operations'), '#rows' => array(), ); + + // Add a new item. + $build['#rows']['ng']['label'] = l('Reloaded', 'item/ng'); + $build['#rows']['ng']['created'] = format_interval(18600); + $build['#rows']['ng']['operations'] = array( + 'valign' => 'top', // yay ;) + 'data' => array( + '#theme' => 'links__operations', + '#attributes' => array('class' => array('dropbuttonng')), + '#links' => array( + 'edit' => array( + 'title' => 'edit', + 'href' => 'item/long/edit', + ), + // This one is to be injected via JS, of course. + 'arrow' => array( + 'title' => 'More', + ), + 'disable' => array( + 'title' => 'disable', + 'href' => 'item/long/disable', + ), + 'clone' => array( + 'title' => 'clone', + 'href' => 'item/long/clone', + ), + 'delete' => array( + 'title' => 'delete', + 'href' => 'item/long/delete', + ), + ), + ), + ); + + // Add a second new expanded item. + $build['#rows']['ng2']['label'] = l('Reloaded', 'item/ng'); + $build['#rows']['ng2']['created'] = format_interval(18600); + $build['#rows']['ng2']['operations'] = $build['#rows']['ng']['operations']; + $build['#rows']['ng2']['operations']['data']['#attributes']['class'][] = 'expanded'; + // Add an item with a very long label, using common operations. $build['#rows']['long']['label'] = l('An item with a very insanely long label, which offers quite a couple of common operations', 'item/long'); $build['#rows']['long']['created'] = format_interval(3200);