Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added 'dropdown' buttons and dropdown-menu to layout_ref/button.

Browse source
This commit is contained in:
Denny Bresch 2019-07-26 16:18:55 +02:00 committed by Thorsten Eckel
parent 595dd01c4e
commit c57a320d8d
2 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/javascripts/app/controllers/layout_ref.coffee
View file

@ -1619,6 +1619,14 @@ App.Config.set( 'layout_ref/calendar_subscriptions', CalendarSubscriptionsRef, '
class ButtonsRef extends App.ControllerContent class ButtonsRef extends App.ControllerContent
elements:
'.js-submitDropdown': 'buttonDropdown'
events:
'click .js-openDropdown': 'toggleMenu'
'mouseenter .js-dropdownAction': 'onActionMouseEnter'
'mouseleave .js-dropdownAction': 'onActionMouseLeave'
constructor: -> constructor: ->
super super
@render() @render()
@ -1626,6 +1634,24 @@ class ButtonsRef extends App.ControllerContent
render: -> render: ->
@html App.view('layout_ref/buttons') @html App.view('layout_ref/buttons')
toggleMenu: =>
if @buttonDropdown.hasClass('is-open')
@closeMenu()
return
@openMenu()
closeMenu: =>
@buttonDropdown.removeClass 'is-open'
openMenu: =>
@buttonDropdown.addClass 'is-open'
onActionMouseEnter: (e) =>
@$(e.currentTarget).addClass('is-active')
onActionMouseLeave: (e) =>
@$(e.currentTarget).removeClass('is-active')
App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' ) App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
class MergeCustomerRef extends App.ControllerContent class MergeCustomerRef extends App.ControllerContent

29
app/assets/javascripts/app/views/layout_ref/buttons.jst.eco
View file

@ -55,4 +55,33 @@
<div class="btn btn--action btn--split">Split</div> <div class="btn btn--action btn--split">Split</div>
<div class="btn btn--action btn--split--last">Split Last</div> <div class="btn btn--action btn--split--last">Split Last</div>
</div> </div>
<h3>Dropdown</h3>
<div class="buttonDropdown dropup js-submitDropdown" style="margin-left: 0px;">
<button class="btn btn--primary btn--split--first js-submit">Dropdown UP</button>
<button class="btn btn--primary btn--slim btn--split--last js-openDropdown">
<svg class="icon icon-arrow-up "><use xlink:href="assets/images/icons.svg#icon-arrow-up"></use></svg>
</button>
<ul class="dropdown-menu dropdown-menu" role="menu" aria-labelledby="userAction" style="min-width: 195px;">
<li class="js-dropdownAction" role="menuitem" data-id="1">Value 1</li>
<li class="js-dropdownAction" role="menuitem" data-id="2">Value 2</li>
<li class="js-dropdownAction" role="menuitem" data-id="3">Value 3</li>
</ul>
</div>
<br>
<div class="buttonDropdown dropdown js-submitDropdownDown" style="margin-left: 0px;">
<button class="btn btn--primary btn--split--first js-submit">Dropdown Down</button>
<button class="btn btn--primary btn--slim btn--split--last js-openDropdownDown">
<svg class="icon icon-arrow-up "><use xlink:href="assets/images/icons.svg#icon-arrow-down"></use></svg>
</button>
<ul class="dropdown-menu dropdown-menu" role="menu" aria-labelledby="userAction" style="min-width: 195px;">
<li class="js-dropdownActionDown" role="menuitem" data-id="1">Value 1</li>
<li class="js-dropdownActionDown" role="menuitem" data-id="2">Value 2</li>
<li class="js-dropdownActionDown" role="menuitem" data-id="3">Value 3</li>
</ul>
</div>
</div> </div>