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

layoutRef: ticket macros

Browse source
This commit is contained in:
Felix Niklas 2015-10-02 23:36:15 +02:00
parent 8b9cd329ef
commit 8d043a27ef
3 changed files with 97 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -795,10 +795,19 @@ class TicketZoomRef extends App.ControllerContent
'.article-text': 'articles'
'.js-highlight-icon': 'highlightIcon'
'.buttonDropdown': 'buttonDropdown'
events:
'click .js-highlight': 'toggleHighlight'
'click .js-highlightColor': 'pickColor'
'mousedown .js-openDropdown': 'toggleDropdown'
'click .js-openDropdown': 'stopPropagation'
'mouseup .js-dropdownAction': 'performTicketMacro'
stopPropagation: (event) ->
event.stopPropagation()
colors: [
{
name: 'Yellow'
@ -956,6 +965,22 @@ class TicketZoomRef extends App.ControllerContent
@storeHighlights()
toggleDropdown: =>
if @buttonDropdown.hasClass 'is-open'
@closeDropdown()
else
@buttonDropdown.addClass 'is-open'
$(document).bind 'click.buttonDropdown', @closeDropdown
closeDropdown: =>
@buttonDropdown.removeClass 'is-open'
$(document).unbind 'click.buttonDropdown'
performTicketMacro: (event) =>
console.log "perform action", $(event.currentTarget).text()
@closeDropdown()
App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' )

51
app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
View file

@ -640,50 +640,15 @@
</div>
</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 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 &amp; Close</div>
<div class="btn btn--primary js-dropdownAction">Remind me in 2 weeks</div>
</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>
<svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</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>
<svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</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>
<svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<button type="submit" class="btn btn--primary js-submit pull-right">Update</button>
<button type="submit" class="btn js-reset pull-right hide">Discard your unsaved changes.</button>
</div>
</form>
</div>
</div>
</div>

68
app/assets/stylesheets/zammad.scss
View file

@ -571,6 +571,67 @@ span[data-tooltip]:hover:before {
}
}
.buttonDropdown {
position: relative;
display: flex;
.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;
}
}
.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;
}
}
table {
table-layout: fixed;
}
@ -3316,10 +3377,6 @@ footer {
flex: 1 1 auto;
}
.attributeBar.form-inline .form-group:last-child {
flex: 0 1 auto;
}
.form-group.is-changed {
position: relative;
}
@ -4367,6 +4424,9 @@ footer {
background: white;
transition: margin 250ms;
flex-shrink: 0;
padding: 10px;
display: flex;
justify-content: flex-end;
&.is-closed {
margin-bottom: -60px;