buttonDropdown: dropdown design, hover highlight
This commit is contained in:
parent
54ea23a330
commit
3e4ad0e8d4
4 changed files with 36 additions and 117 deletions
|
@ -795,7 +795,7 @@ class TicketZoomRef extends App.ControllerContent
|
|||
'.article-text': 'articles'
|
||||
'.js-highlight-icon': 'highlightIcon'
|
||||
|
||||
'.buttonDropdown': 'buttonDropdown'
|
||||
'.buttonDropdown': 'buttonDropdown'
|
||||
|
||||
events:
|
||||
'click .js-highlight': 'toggleHighlight'
|
||||
|
@ -804,6 +804,8 @@ class TicketZoomRef extends App.ControllerContent
|
|||
'mousedown .js-openDropdown': 'toggleDropdown'
|
||||
'click .js-openDropdown': 'stopPropagation'
|
||||
'mouseup .js-dropdownAction': 'performTicketMacro'
|
||||
'mouseenter .js-dropdownAction': 'onActionMouseEnter'
|
||||
'mouseleave .js-dropdownAction': 'onActionMouseLeave'
|
||||
|
||||
stopPropagation: (event) ->
|
||||
event.stopPropagation()
|
||||
|
@ -977,9 +979,15 @@ class TicketZoomRef extends App.ControllerContent
|
|||
$(document).unbind 'click.buttonDropdown'
|
||||
|
||||
performTicketMacro: (event) =>
|
||||
console.log "perform action", $(event.currentTarget).text()
|
||||
console.log "perform action", @$(event.currentTarget).text()
|
||||
@closeDropdown()
|
||||
|
||||
onActionMouseEnter: (event) =>
|
||||
@$(event.currentTarget).addClass('is-active')
|
||||
|
||||
onActionMouseLeave: (event) =>
|
||||
@$(event.currentTarget).removeClass('is-active')
|
||||
|
||||
|
||||
|
||||
App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' )
|
||||
|
|
|
@ -641,14 +641,13 @@
|
|||
</div>
|
||||
<div class="attributeBar">
|
||||
<div class="btn js-reset hide">Discard your unsaved changes.</div>
|
||||
<div class="buttonDropdown">
|
||||
<div class="buttonDropdown-main btn btn--primary js-submit">Update</div>
|
||||
<div class="buttonDropdown-toggle btn btn--primary btn--slim js-openDropdown"><%- @Icon('arrow-up') %></div>
|
||||
<div class="buttonDropdown-dropdown">
|
||||
<div class="btn btn--primary js-dropdownAction">Update & Close</div>
|
||||
<div class="btn btn--primary js-dropdownAction">Remind me in 2 weeks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonDropdown dropdown dropup">
|
||||
<div class="btn btn--primary btn--split--first js-submit">Update</div>
|
||||
<div class="btn btn--primary btn--slim btn--split--last js-openDropdown"><%- @Icon('arrow-up') %></div>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
|
||||
<li class="js-dropdownAction" role="menuitem">Update & Close
|
||||
<li class="js-dropdownAction" role="menuitem">Remind me in 2 weeks
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -26,50 +26,7 @@
|
|||
<div class="tabsSidebar tabsSidebar--attributeBarSpacer vertical"></div>
|
||||
|
||||
<div class="attributeBar">
|
||||
<form class="form-inline is-closed hide" role="form">
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
|
||||
<select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
|
||||
<option value="4">closed</option>
|
||||
<option value="1" selected="">new</option>
|
||||
<option value="2">open</option>
|
||||
<option value="3">pending</option>
|
||||
</select>
|
||||
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
||||
</div>
|
||||
<div class="form-group is-changed">
|
||||
<label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
|
||||
<select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
|
||||
<option value="1">1 low</option>
|
||||
<option value="2" selected="">2 normal</option>
|
||||
<option value="3">3 high</option>
|
||||
</select>
|
||||
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
|
||||
<select id="update_ticket_1_group_id123" class="form-control" name="group_id">
|
||||
<option value="4">FillGroup::450863</option>
|
||||
<option value="3">FillGroup::918672</option>
|
||||
<option value="2">Twitter</option>
|
||||
<option value="1" selected="">Users</option>
|
||||
</select>
|
||||
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
|
||||
<select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
|
||||
<option value="">-</option>
|
||||
<option value="3">Felix Niklas</option>
|
||||
</select>
|
||||
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
||||
</div>
|
||||
</form>
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn--primary js-submit pull-right"><%- @T('Update') %></button>
|
||||
<button type="submit" class="btn js-reset pull-right hide"><%- @T('Discard your unsaved changes.') %></button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="btn js-reset hide"><%- @T('Discard your unsaved changes.') %></div>
|
||||
<div class="btn btn--primary js-submit"><%- @T('Update') %></div>
|
||||
</div>
|
||||
</div>
|
|
@ -392,6 +392,10 @@ span[data-tooltip]:hover:before {
|
|||
&:active {
|
||||
background: hsl(203,65%,45%);
|
||||
}
|
||||
.icon {
|
||||
fill: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--positive,
|
||||
|
@ -572,62 +576,16 @@ span[data-tooltip]:hover:before {
|
|||
}
|
||||
|
||||
.buttonDropdown {
|
||||
position: relative;
|
||||
display: flex;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
.btn.buttonDropdown-main {
|
||||
margin: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:not(:active) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:active + .btn {
|
||||
border-left: none;
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn.buttonDropdown-toggle {
|
||||
margin: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
.icon {
|
||||
fill: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonDropdown-dropdown {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
perspective: 200px;
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
transform: rotateX(90deg);
|
||||
transform-origin: right bottom;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
// transition: 400ms;
|
||||
|
||||
&:first-child {
|
||||
transform-origin: right 82px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-open .buttonDropdown-dropdown .btn {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&.is-open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1156,7 +1114,7 @@ fieldset > .form-group {
|
|||
margin: 0 4px;
|
||||
|
||||
.formGroup-bundle-label {
|
||||
margin: 0 5px 27px 11px;
|
||||
margin: 0 10px 27px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4824,7 +4782,7 @@ footer {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 100%;
|
||||
color: hsl(198,19%,72%);
|
||||
color: white;
|
||||
text-transform: initial;
|
||||
letter-spacing: 0;
|
||||
background: hsl(234,10%,19%);
|
||||
|
@ -4848,6 +4806,7 @@ footer {
|
|||
|
||||
.dropdown-menu.dropdown-menu--light {
|
||||
background: white;
|
||||
color: hsl(198,19%,72%);
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-menu--light > li > a {
|
||||
|
@ -4891,14 +4850,14 @@ footer {
|
|||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
color: white;
|
||||
color: inherit;
|
||||
padding: 0 15px;
|
||||
margin: 0 -15px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover {
|
||||
color: white;
|
||||
color: inherit;
|
||||
background: hsl(205,90%,60%);
|
||||
}
|
||||
|
||||
|
@ -4907,14 +4866,10 @@ footer {
|
|||
}
|
||||
|
||||
.dropdown.dropdown--actions {
|
||||
.dropdown-menu {
|
||||
color: white;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: initial;
|
||||
height: auto;
|
||||
padding: 9px 15px;
|
||||
padding: 11px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
|
|
Loading…
Reference in a new issue