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

generalise sla list, add scheduler list

Browse source
This commit is contained in:
Felix Niklas 2015-06-24 15:33:23 +02:00
parent 369de95fb4
commit 5366ae4dae
5 changed files with 90 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1289,7 +1289,7 @@ class slaRef extends App.ControllerContent
'click .js-activateColumn': 'activateColumn' 'click .js-activateColumn': 'activateColumn'
'click .js-activateRow': 'activateRow' 'click .js-activateRow': 'activateRow'
'click [data-type=new]': 'createNew' 'click [data-type=new]': 'createNew'
'click .js-toggle': 'toggleSla' 'click .js-toggle': 'toggle'
constructor: -> constructor: ->
super super
@ -1298,12 +1298,12 @@ class slaRef extends App.ControllerContent
render: -> render: ->
@html App.view('layout_ref/sla')() @html App.view('layout_ref/sla')()
toggleSla: (e) => toggle: (e) =>
sla = $(e.currentTarget).closest('.sla') entry = $(e.currentTarget).closest('.action')
isInactive = sla.hasClass('is-inactive') isInactive = entry.hasClass('is-inactive')
sla.toggleClass('is-inactive') entry.toggleClass('is-inactive')
isInactive = !isInactive isInactive = !isInactive
sla.find('.js-toggle') entry.find('.js-toggle')
.toggleClass('btn--danger btn--secondary') .toggleClass('btn--danger btn--secondary')
.text(if isInactive then 'Enable' else 'Disable') .text(if isInactive then 'Enable' else 'Disable')
@ -1333,6 +1333,7 @@ class schedulersRef extends App.ControllerContent
events: events:
'click .select-value': 'select' 'click .select-value': 'select'
'click [data-type=new]': 'createNew' 'click [data-type=new]': 'createNew'
'click .js-toggle': 'toggle'
constructor: -> constructor: ->
super super
@ -1341,6 +1342,15 @@ class schedulersRef extends App.ControllerContent
render: -> render: ->
@html App.view('layout_ref/schedulers')() @html App.view('layout_ref/schedulers')()
toggle: (e) =>
entry = $(e.currentTarget).closest('.action')
isInactive = entry.hasClass('is-inactive')
entry.toggleClass('is-inactive')
isInactive = !isInactive
entry.find('.js-toggle')
.toggleClass('btn--danger btn--secondary')
.text(if isInactive then 'Enable' else 'Disable')
createNew: => createNew: =>
new App.ControllerModal new App.ControllerModal
head: 'New Scheduler' head: 'New Scheduler'

4
app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco
View file

@ -195,8 +195,8 @@
<option>Owner</option> <option>Owner</option>
<option>Number</option> <option>Number</option>
<option>Title</option> <option>Title</option>
<option selected>Group</option> <option>Group</option>
<option>State</option> <option selected>State</option>
<option>Priority</option> <option>Priority</option>
</optgroup> </optgroup>
<optgroup label="Customer"> <optgroup label="Customer">

45
app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
View file

@ -76,8 +76,49 @@
</div> </div>
</div> </div>
<div class="scheduler-list"> <div class="action">
<div class="scheduler"> <div class="action-flow">
<div class="action-block">
<h3>Filters</h3>
Where <b>State</b> is <b>open</b>.<br>
In <b>Folder</b> <b>Spam</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<div class="action-block">
<h3>Actions</h3>
Set <b>State</b> to <b>closed</b>.
</div>
</div>
<div class="action-block">
<h3>Timer</h3>
Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
</div>
<div class="action-controls">
<div class="sla-toggle btn btn--danger btn--secondary js-toggle">Disable</div>
<div class="sla-edit btn js-edit">Edit</div>
</div>
</div>
<div class="action is-inactive">
<div class="action-flow">
<div class="action-block">
<h3>Filters</h3>
Where <b>State</b> is <b>open</b>.<br>
In <b>Folder</b> <b>Spam</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<div class="action-block">
<h3>Actions</h3>
Set <b>State</b> to <b>closed</b>.
</div>
</div>
<div class="action-block">
<h3>Timer</h3>
Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
</div>
<div class="action-controls">
<div class="sla-toggle btn js-toggle">Enable</div>
<div class="sla-edit btn js-edit">Edit</div>
</div> </div>
</div> </div>
</div> </div>

32
app/assets/javascripts/app/views/layout_ref/sla.jst.eco
View file

@ -76,54 +76,50 @@
</div> </div>
</div> </div>
<div class="sla"> <div class="action">
<div class="sla-flow"> <div class="action-flow">
<div class="sla-filters"> <div class="action-block">
<h3>Filters</h3> <h3>Filters</h3>
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br> Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
Where <b>Priority</b> is <b>high</b>. Where <b>Priority</b> is <b>high</b>.
</div> </div>
<div class="sla-arrow"> <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg> <div class="action-block">
</div>
<div class="sla-times">
<h3>Repsonse Times</h3> <h3>Repsonse Times</h3>
00:30 hours First Response Time<br> 00:30 hours First Response Time<br>
02:00 hours Update Time<br> 02:00 hours Update Time<br>
48:00 hours Solution Time 48:00 hours Solution Time
</div> </div>
</div> </div>
<div class="sla-businessHours"> <div class="action-block">
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3> <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
Mo-Tu 7am - 5pm, Fr 7am - 1pm Mo-Tu 7am - 5pm, Fr 7am - 1pm
</div> </div>
<div class="sla-controls"> <div class="action-controls">
<div class="sla-toggle btn btn--danger btn--secondary js-toggle">Disable</div> <div class="sla-toggle btn btn--danger btn--secondary js-toggle">Disable</div>
<div class="sla-edit btn js-edit">Edit</div> <div class="sla-edit btn js-edit">Edit</div>
</div> </div>
</div> </div>
<div class="sla is-inactive"> <div class="action is-inactive">
<div class="sla-flow"> <div class="action-flow">
<div class="sla-filters"> <div class="action-block">
<h3>Filters</h3> <h3>Filters</h3>
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br> Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
Where <b>Priority</b> is <b>high</b>. Where <b>Priority</b> is <b>high</b>.
</div> </div>
<div class="sla-arrow"> <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg> <div class="action-block">
</div>
<div class="sla-times">
<h3>Repsonse Times</h3> <h3>Repsonse Times</h3>
00:30 hours First Response Time<br> 00:30 hours First Response Time<br>
01:00 hours Update Time 01:00 hours Update Time
</div> </div>
</div> </div>
<div class="sla-businessHours"> <div class="action-block">
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3> <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
Mo-Fr 8 Uhr - 18 Uhr Mo-Fr 8 Uhr - 18 Uhr
</div> </div>
<div class="sla-controls"> <div class="action-controls">
<div class="sla-toggle btn js-toggle">Enable</div> <div class="sla-toggle btn js-toggle">Enable</div>
<div class="sla-edit btn js-edit">Edit</div> <div class="sla-edit btn js-edit">Edit</div>
</div> </div>

34
app/assets/stylesheets/zammad.css.scss
View file

@ -5521,7 +5521,7 @@ output {
} }
} }
.sla { .action {
background: white; background: white;
border: 1px solid hsl(199,44%,93%); border: 1px solid hsl(199,44%,93%);
color: hsl(206,7%,28%); color: hsl(206,7%,28%);
@ -5530,7 +5530,7 @@ output {
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px; padding: 10px;
& + .sla { & + .action {
margin-top: 17px; margin-top: 17px;
} }
@ -5541,20 +5541,17 @@ output {
top: 2px; top: 2px;
border-color: hsl(199,44%,94%); border-color: hsl(199,44%,94%);
& > *:not(.sla-controls) { & > *:not(.action-controls) {
opacity: 0.33; opacity: 0.33;
} }
} }
.sla-flow { .action-flow {
display: flex; display: flex;
} }
.sla-filters, .action-block,
.sla-arrow, .action-controls {
.sla-times,
.sla-businessHours,
.sla-controls {
padding: 10px; padding: 10px;
} }
@ -5562,19 +5559,18 @@ output {
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
margin-top: 0; margin-top: 0;
} }
.sla-arrow {
align-self: center;
margin: 22px 20px 0;
.icon { .action-flow-icon {
width: 15px; align-self: center;
height: 24px; width: 15px;
fill: hsl(198,17%,89%); height: 24px;
} margin-top: 20px; /* compensate for h3 height */
margin-left: 20px;
margin-right: 20px;
fill: hsl(198,17%,89%);
} }
.sla-controls { .action-controls {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
align-items: flex-end; align-items: flex-end;