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-activateRow': 'activateRow'
'click [data-type=new]': 'createNew'
'click .js-toggle': 'toggleSla'
'click .js-toggle': 'toggle'
constructor: ->
super
@ -1298,12 +1298,12 @@ class slaRef extends App.ControllerContent
render: ->
@html App.view('layout_ref/sla')()
toggleSla: (e) =>
sla = $(e.currentTarget).closest('.sla')
isInactive = sla.hasClass('is-inactive')
sla.toggleClass('is-inactive')
toggle: (e) =>
entry = $(e.currentTarget).closest('.action')
isInactive = entry.hasClass('is-inactive')
entry.toggleClass('is-inactive')
isInactive = !isInactive
sla.find('.js-toggle')
entry.find('.js-toggle')
.toggleClass('btn--danger btn--secondary')
.text(if isInactive then 'Enable' else 'Disable')
@ -1333,6 +1333,7 @@ class schedulersRef extends App.ControllerContent
events:
'click .select-value': 'select'
'click [data-type=new]': 'createNew'
'click .js-toggle': 'toggle'
constructor: ->
super
@ -1341,6 +1342,15 @@ class schedulersRef extends App.ControllerContent
render: ->
@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: =>
new App.ControllerModal
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>Number</option>
<option>Title</option>
<option selected>Group</option>
<option>State</option>
<option>Group</option>
<option selected>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">

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

@ -76,8 +76,49 @@
</div>
</div>
<div class="scheduler-list">
<div class="scheduler">
<div class="action">
<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>

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

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

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

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