turn sla and scheduler layout refs into modals

This commit is contained in:
Felix Niklas 2015-06-19 08:54:26 +02:00
parent 517ca061ea
commit 72ad294a5f
7 changed files with 618 additions and 647 deletions

View file

@ -1288,6 +1288,7 @@ class slaRef extends App.ControllerContent
events: events:
'click .js-activateColumn': 'activateColumn' 'click .js-activateColumn': 'activateColumn'
'click .js-activateRow': 'activateRow' 'click .js-activateRow': 'activateRow'
'click [data-type=new]': 'createNew'
constructor: -> constructor: ->
super super
@ -1305,6 +1306,15 @@ class slaRef extends App.ControllerContent
checkbox = @$(event.currentTarget) checkbox = @$(event.currentTarget)
checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked')) checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked'))
createNew: =>
new App.ControllerModal
head: 'New Service Level Agreement (SLA)'
content: App.view('layout_ref/sla_modal')()
button: 'Create SLA'
shown: true
cancel: true
container: @el
App.Config.set( 'layout_ref/sla', slaRef, 'Routes' ) App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
@ -1312,6 +1322,7 @@ class schedulersRef extends App.ControllerContent
events: events:
'click .select-value': 'select' 'click .select-value': 'select'
'click [data-type=new]': 'createNew'
constructor: -> constructor: ->
super super
@ -1320,6 +1331,15 @@ class schedulersRef extends App.ControllerContent
render: -> render: ->
@html App.view('layout_ref/schedulers')() @html App.view('layout_ref/schedulers')()
createNew: =>
new App.ControllerModal
head: 'New Scheduler'
content: App.view('layout_ref/scheduler_modal')()
button: 'Create Schedule'
shown: true
cancel: true
container: @el
select: (event) => select: (event) =>
target = $(event.currentTarget) target = $(event.currentTarget)

View file

@ -5,7 +5,7 @@
<ul> <ul>
<li><a href="#layout_ref/schedulers">Schedulers</a></li> <li><a href="#layout_ref/schedulers">Schedulers</a></li>
<li><a href="#layout_ref/sla">Sla Modal</a></li> <li><a href="#layout_ref/sla">Service Level Agreements</a></li>
<li><a href="#layout_ref/user_list">User List</a></li> <li><a href="#layout_ref/user_list">User List</a></li>
<li><a href="#layout_ref/admin_placeholder">Admin Placeholder (Inline Tutorials)</a></li> <li><a href="#layout_ref/admin_placeholder">Admin Placeholder (Inline Tutorials)</a></li>
<li><a href="#layout_ref/clues">First Steps (Clues)</a></li> <li><a href="#layout_ref/clues">First Steps (Clues)</a></li>

View file

@ -0,0 +1,296 @@
<h2>Selector</h2>
<p>Create rules that single out the tickets for automated processing.</p>
<h3>Filters</h3>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option>Group</option>
<option selected>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option selected>is</option>
<option>is not</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option>closed</option>
<option selected>open</option>
<option>pending close</option>
<option>pending reminder</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option selected>Group</option>
<option>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option selected>is</option>
<option>is not</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option>Inbox</option>
<option>Drafts</option>
<option>Important</option>
<option selected>Spam</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<div class="filter-preview">
<h3>Preview <span class="subtitle"><span class="u-highlight">2</span> matches</span></h3>
<table class="table table-hover">
<thead>
<tr>
<th style="width: 28px"></th>
<th>Customer</th>
<th style="width: 42%">Title</th>
<th>Group</th>
<th style="width: 25%">Created</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
<td>
<svg class="icon-priority level-1">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Actions</h2>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="horizontal-filter-text">Set</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option selected>Group</option>
<option>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="horizontal-filter-text">to</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option selected>closed</option>
<option>open</option>
<option>pending close</option>
<option>pending reminder</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove is-disabled js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<h2>Timer</h2>
<p>
When should the job run?<br>
<output class="timer-output js-timerResult">
Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
</output>
</p>
<div class="select-boxes">
<div class="select-box select-box--vertical">
<div class="select-box-header">Day</div>
<div data-type="day" class="select-value is-selected">Monday</div>
<div data-type="day" class="select-value is-selected">Tuesday</div>
<div data-type="day" class="select-value is-selected">Wednesday</div>
<div data-type="day" class="select-value is-selected">Thursday</div>
<div data-type="day" class="select-value is-selected">Friday</div>
<div data-type="day" class="select-value">Saturday</div>
<div data-type="day" class="select-value">Sunday</div>
</div>
<div class="select-box select-box--four">
<div data-type="hour" class="select-box-header">Hour</div>
<div data-type="hour" class="select-value">12 am</div><!-- 0 Uhr -->
<div data-type="hour" class="select-value">1 am</div>
<div data-type="hour" class="select-value">2 am</div>
<div data-type="hour" class="select-value">3 am</div>
<div data-type="hour" class="select-value">4 am</div>
<div data-type="hour" class="select-value">5 am</div>
<div data-type="hour" class="select-value">6 am</div>
<div data-type="hour" class="select-value is-selected">7 am</div>
<div data-type="hour" class="select-value">8 am</div>
<div data-type="hour" class="select-value">9 am</div>
<div data-type="hour" class="select-value">10 am</div>
<div data-type="hour" class="select-value">11 am</div>
<div data-type="hour" class="select-value">12 am</div><!-- 12 Uhr -->
<div data-type="hour" class="select-value is-selected">1 pm</div>
<div data-type="hour" class="select-value">2 pm</div>
<div data-type="hour" class="select-value">3 pm</div>
<div data-type="hour" class="select-value">4 pm</div>
<div data-type="hour" class="select-value">5 pm</div>
<div data-type="hour" class="select-value">6 pm</div>
<div data-type="hour" class="select-value">7 pm</div>
<div data-type="hour" class="select-value">8 pm</div>
<div data-type="hour" class="select-value">9 pm</div>
<div data-type="hour" class="select-value">10 pm</div>
<div data-type="hour" class="select-value">11 pm</div><!-- 23 Uhr -->
</div>
<div class="select-box select-box--vertical">
<div data-type="minute" class="select-box-header">Minute</div>
<div data-type="minute" class="select-value">00</div>
<div data-type="minute" class="select-value">10</div>
<div data-type="minute" class="select-value">20</div>
<div data-type="minute" class="select-value is-selected">30</div>
<div data-type="minute" class="select-value">40</div>
<div data-type="minute" class="select-value">50</div>
</div>
</div>

View file

@ -1,232 +1,3 @@
<div class="modal modal--local">
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<form>
<div class="modal-content">
<div class="modal-header">
<div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
</div>
<h1 class="modal-title">New Scheduler</h1>
</div>
<div class="modal-body">
<h2>Selector</h2>
<p>Create rules that single out the tickets for automated processing.</p>
<h3>Filters</h3>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option>Group</option>
<option>State</option>
<option>Priority</option>
<option selected>Spam</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option>equals to</option>
<option>contains</option>
<option>begins with</option>
<option>ends with</option>
<option selected>is</option>
<option>is not</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option selected>true</option>
<option>false</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove is-disabled" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<div class="filter-preview">
<h3>Preview <span class="subtitle"><span class="u-highlight">2</span> matches</span></h3>
<table class="table table-hover">
<thead>
<tr>
<th style="width: 28px"></th>
<th>Customer</th>
<th style="width: 42%">Title</th>
<th>Group</th>
<th style="width: 25%">Created</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
<td>
<svg class="icon-priority level-1">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Actions</h2>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_2">
<option selected>Move to trash</option>
<option>Set to escalated</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove is-disabled js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<h2>Timer</h2>
<p>
When should the job run?<br>
<output class="timer-output js-timerResult">
Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.
</output>
</p>
<div class="select-boxes">
<div class="select-box select-box--vertical">
<div class="select-box-header">Day</div>
<div data-type="day" class="select-value is-selected">Monday</div>
<div data-type="day" class="select-value is-selected">Tuesday</div>
<div data-type="day" class="select-value is-selected">Wednesday</div>
<div data-type="day" class="select-value is-selected">Thursday</div>
<div data-type="day" class="select-value is-selected">Friday</div>
<div data-type="day" class="select-value">Saturday</div>
<div data-type="day" class="select-value">Sunday</div>
</div>
<div class="select-box select-box--four">
<div data-type="hour" class="select-box-header">Hour</div>
<div data-type="hour" class="select-value">12 am</div><!-- 0 Uhr -->
<div data-type="hour" class="select-value">1 am</div>
<div data-type="hour" class="select-value">2 am</div>
<div data-type="hour" class="select-value">3 am</div>
<div data-type="hour" class="select-value">4 am</div>
<div data-type="hour" class="select-value">5 am</div>
<div data-type="hour" class="select-value">6 am</div>
<div data-type="hour" class="select-value is-selected">7 am</div>
<div data-type="hour" class="select-value">8 am</div>
<div data-type="hour" class="select-value">9 am</div>
<div data-type="hour" class="select-value">10 am</div>
<div data-type="hour" class="select-value">11 am</div>
<div data-type="hour" class="select-value">12 am</div><!-- 12 Uhr -->
<div data-type="hour" class="select-value is-selected">1 pm</div>
<div data-type="hour" class="select-value">2 pm</div>
<div data-type="hour" class="select-value">3 pm</div>
<div data-type="hour" class="select-value">4 pm</div>
<div data-type="hour" class="select-value">5 pm</div>
<div data-type="hour" class="select-value">6 pm</div>
<div data-type="hour" class="select-value">7 pm</div>
<div data-type="hour" class="select-value">8 pm</div>
<div data-type="hour" class="select-value">9 pm</div>
<div data-type="hour" class="select-value">10 pm</div>
<div data-type="hour" class="select-value">11 pm</div><!-- 23 Uhr -->
</div>
<div class="select-box select-box--vertical">
<div data-type="minute" class="select-box-header">Minute</div>
<div data-type="minute" class="select-value">00</div>
<div data-type="minute" class="select-value">10</div>
<div data-type="minute" class="select-value">20</div>
<div data-type="minute" class="select-value is-selected">30</div>
<div data-type="minute" class="select-value">40</div>
<div data-type="minute" class="select-value">50</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
<button type="submit" class="btn btn--success js-submit align-right">Create Schedule</button>
</div>
</div>
</form>
</div>
</div>
<div class="sidebar NavBarAdmin"> <div class="sidebar NavBarAdmin">
<h2>Manage</h2> <h2>Manage</h2>
@ -297,23 +68,16 @@
<div class="main flex"> <div class="main flex">
<div class="page-header"> <div class="page-header">
<div class="page-header-title"> <div class="page-header-title">
<h1>SLAs <small>Management</small></h1> <h1>Schedulers <small>Management</small></h1>
</div> </div>
<div class="page-header-meta"> <div class="page-header-meta">
<a class="btn btn--success" data-type="new">New SLA</a> <a class="btn btn--success" data-type="new">New Scheduler</a>
</div> </div>
</div> </div>
<div class="table-overview"> <div class="scheduler-list">
<p> <div class="scheduler">
<strong>Service-Level-Agreements</strong>, abgekürzt <b>SLAs</b>, unterstützen Sie gegenüber Kunden gewisse zeitliche Reaktionen einzuhalten. Somit können Sie z. B. sagen Kunden sollen immer nach spätestens 8 Stunden eine Reaktion von Ihnen bekommen. Falls es zu einer drohenden Unterschreitung oder einer Unterschreitung kommt, weißt Zammad Sie auf solche Ereignisse hin. </div>
</p>
<p>
Es können <strong>Reaktionszeit</strong> (Zeit zwischen Erstellung eines Tickets und erster Reaktion eines Agenten), <strong>Aktualisierungszeit</strong> (Zeit zwischen Nachfrage eines Kunden und Reaktion eines Agenten) und <strong>Lösungszeit</strong> (Zeit zwischen Erstellung und schließen eines Tickets) definiert werden.
</p>
<p>
Drohenden Unterschreitungen oder Unterschreitungen werden in einer eigenen Ansicht in den Übersichten angezeigt. Zudem können <strong>E-Mail Benachrichtigungen</strong> konfiguriert werden.
</p>
</div> </div>
</div> </div>

View file

@ -1,401 +1,3 @@
<div class="modal modal--local">
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<form>
<div class="modal-content">
<div class="modal-header">
<div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
</div>
<h1 class="modal-title">New Service Level Agreement (SLA)</h1>
</div>
<div class="modal-body">
<h2>Selector</h2>
<p>Create rules that single out the tickets for the Service Level Agreement.</p>
<h3>Filters</h3>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option>Group</option>
<option>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option>equals to</option>
<option>contains</option>
<option>begins with</option>
<option>ends with</option>
<option>is</option>
<option>is not</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<input id="filter_value_1" type="text" class="form-control">
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove is-disabled" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<div class="filter-preview">
<h3>Preview <span class="subtitle"><span class="u-highlight">5</span> matches</span></h3>
<table class="table table-hover">
<thead>
<tr>
<th style="width: 28px"></th>
<th>Customer</th>
<th style="width: 42%">Title</th>
<th>Group</th>
<th style="width: 25%">Created</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
<td>
<svg class="icon-priority level-1">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="3" data-position="3" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="4" data-original-title="" title="">
Hans Huber
</span> </td>
<td>
<a href="#ticket/zoom/3"> <span title="Noch mehr Tickets bitte">
Noch mehr Tickets bitte
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="4" data-position="4" style="cursor: pointer;">
<td>
<svg class="icon-priority level-3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/4"> <span title="Welcome to Zammad!">
Welcome to Zammad!
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-05-04T14:26:51.000Z" data-tooltip="05/04/2015 16:26">05/04/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="5" data-position="5" style="cursor: pointer;">
<td>
<svg class="icon-priority level-3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/5"> <span title="das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge">
das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-10T13:41:29.000Z" data-tooltip="06/10/2015 15:41">5 days 21 hours ago</span> </span>
</td>
</tr>
<tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
</td>
</tr>
</tbody>
</table>
</div>
<!--<h2>Auto Attributes</h2>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="horizontal-filter-text">Set</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_2">
<option>Owner</option>
<option>Group</option>
<option>State</option>
<option>Priority</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="horizontal-filter-text">to</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_2">
<option>Max Reuter</option>
<option>Caroline Blank</option>
<option>Joe Noes</option>
<option>Fizz Buzz</option>
<option>Captain Chunk</option>
<option>Marele Moon</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="horizontal-filter-text">or</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_2">
<option>-</option>
<option>Caroline Blank</option>
<option>Joe Noes</option>
<option>Fizz Buzz</option>
<option>Captain Chunk</option>
<option>Marele Moon</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="horizontal-filter-text">Set</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_2">
<option>Owner</option>
<option>Group</option>
<option>State</option>
<option selected>Priority</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="horizontal-filter-text">to</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_2">
<option>High</option>
<option>Normal</option>
<option>Low</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>-->
<h2>Schedule</h2>
<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
<table class="settings-list settings-list--toggleColumn">
<thead>
<tr>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Mo</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tu</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> We</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Th</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Fr</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Sa</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Su</label>
</tr>
</thead>
<tbody>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_start_time">from</label>
<input type="time" id="monday_start_time" value="07:00" step="600">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_start_time">from</label>
<input type="time" id="tuesday_start_time" value="07:00" step="600">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_start_time">from</label>
<input type="time" id="wednesday_start_time" value="07:00" step="600">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_start_time">from</label>
<input type="time" id="thursday_start_time" value="07:00" step="600">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_start_time">from</label>
<input type="time" id="friday_start_time" value="07:00" step="600">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_start_time">from</label>
<input type="time" id="saturday_start_time" value="09:00" step="600">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_start_time">from</label>
<input type="time" id="sunday_start_time" step="600">
</tr>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_end_time">till</label>
<input type="time" id="monday_end_time" value="18:00" step="600">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_end_time">till</label>
<input type="time" id="tuesday_end_time" value="18:00" step="600">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_end_time">till</label>
<input type="time" id="wednesday_end_time" value="18:00" step="600">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_end_time">till</label>
<input type="time" id="thursday_end_time" value="18:00" step="600">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_end_time">till</label>
<input type="time" id="friday_end_time" value="13:00" step="600">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_end_time">till</label>
<input type="time" id="saturday_end_time" value="16:00" step="600">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_end_time">till</label>
<input type="time" id="sunday_end_time" step="600">
</tr>
</tbody>
</table>
<h3>Response Times <span class="subtitle">in Business Hours</span></h3>
<table class="settings-list settings-list--toggleRow">
<thead>
<tr>
<th>Active
<th>Type
<th>Time <span class="text-muted">in hours</span>
</tr>
</thead>
<tbody>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time">
<td>
<label class="inline-label" for="first_response_time">First Response Time</label>
<p class="subtle">Timeframe for the first response.</p>
<td><input type="time" step="600" max="259200">
</tr>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
<td>
<label class="inline-label" for="update_time">Update Time</label>
<p class="subtle">Timeframe for every following response.</p>
<td><input type="time" step="600" max="259200">
</tr>
<tr>
<td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
<td>
<label class="inline-label" for="solution_time">Solution Time</label>
<p class="subtle">Timeframe for solving the problem.</p>
<td><input type="time" step="600" max="259200">
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
<button type="submit" class="btn btn--success js-submit align-right">Create SLA</button>
</div>
</div>
</form>
</div>
</div>
<div class="sidebar NavBarAdmin"> <div class="sidebar NavBarAdmin">
<h2>Manage</h2> <h2>Manage</h2>

View file

@ -0,0 +1,285 @@
<h2>Selector</h2>
<p>Create rules that single out the tickets for the Service Level Agreement.</p>
<h3>Filters</h3>
<div class="horizontal-filters">
<div class="horizontal-filter">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_attribute_1">
<optgroup label="Ticket">
<option>Customer</option>
<option>Owner</option>
<option>Number</option>
<option>Title</option>
<option>Group</option>
<option>State</option>
<option>Priority</option>
</optgroup>
<optgroup label="Customer">
<option>Email</option>
<option>Country</option>
<option>Group</option>
<option>Organization</option>
<option>Department</option>
<option>VIP</option>
</optgroup>
<optgroup label="Organization">
<option>Country</option>
<option>VIP</option>
</optgroup>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin">
<select class="form-control" name="filter_operator_1">
<option>equals to</option>
<option>contains</option>
<option>begins with</option>
<option>ends with</option>
<option>is</option>
<option>is not</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
</div>
</div>
<input id="filter_value_1" type="text" class="form-control">
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove is-disabled" title="Remove rule">
<svg class="icon icon-minus"><use xlink:href="#icon-minus" /></svg>
</div>
<div class="filter-control filter-control-add js-add" title="Add new rule">
<svg class="icon icon-plus"><use xlink:href="#icon-plus" /></svg>
</div>
</div>
</div>
</div>
<div class="filter-preview">
<h3>Preview <span class="subtitle"><span class="u-highlight">5</span> matches</span></h3>
<table class="table table-hover">
<thead>
<tr>
<th style="width: 28px"></th>
<th>Customer</th>
<th style="width: 42%">Title</th>
<th>Group</th>
<th style="width: 25%">Created</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1" data-position="1" style="cursor: pointer;">
<td>
<svg class="icon-priority level-1">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/1"> <span title="Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf">
Welcome to our little planet with flowers and forests&nbsp;asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-12T12:58:42.000Z" data-tooltip="01/12/2015 13:58">01/12/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="3" data-position="3" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="4" data-original-title="" title="">
Hans Huber
</span> </td>
<td>
<a href="#ticket/zoom/3"> <span title="Noch mehr Tickets bitte">
Noch mehr Tickets bitte
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-01-20T11:47:43.000Z" data-tooltip="01/20/2015 12:47">01/20/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="4" data-position="4" style="cursor: pointer;">
<td>
<svg class="icon-priority level-3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/4"> <span title="Welcome to Zammad!">
Welcome to Zammad!
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-05-04T14:26:51.000Z" data-tooltip="05/04/2015 16:26">05/04/2015</span> </span>
</td>
</tr>
<tr class="item" data-id="5" data-position="5" style="cursor: pointer;">
<td>
<svg class="icon-priority level-3">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/5"> <span title="das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge">
das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debuggen, da ich mir nicht das ist für mich schwer zu debugge
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-10T13:41:29.000Z" data-tooltip="06/10/2015 15:41">5 days 21 hours ago</span> </span>
</td>
</tr>
<tr class="item" data-id="6" data-position="6" style="cursor: pointer;">
<td>
<svg class="icon-priority level-2">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-priority"></use>
</svg>
</td>
<td> <span class="user-popover" data-id="2" data-original-title="" title="">
Nicole Braun (Zammad Foundation)
</span> </td>
<td>
<a href="#ticket/zoom/6"> <span title="script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler">
script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler.rb start script/scheduler
</span> </a>
</td>
<td> <span>
Users
</span> </td>
<td class="noTruncate"> <span>
<span class="humanTimeFromNow undefined" data-time="2015-06-11T07:26:31.000Z" data-tooltip="06/11/2015 09:26">5 days 3 hours ago</span> </span>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Schedule</h2>
<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
<table class="settings-list settings-list--toggleColumn">
<thead>
<tr>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Mo</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tu</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> We</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Th</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Fr</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Sa</label>
<th style="text-align: center">
<label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Su</label>
</tr>
</thead>
<tbody>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_start_time">from</label>
<input type="time" id="monday_start_time" value="07:00" step="600">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_start_time">from</label>
<input type="time" id="tuesday_start_time" value="07:00" step="600">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_start_time">from</label>
<input type="time" id="wednesday_start_time" value="07:00" step="600">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_start_time">from</label>
<input type="time" id="thursday_start_time" value="07:00" step="600">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_start_time">from</label>
<input type="time" id="friday_start_time" value="07:00" step="600">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_start_time">from</label>
<input type="time" id="saturday_start_time" value="09:00" step="600">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_start_time">from</label>
<input type="time" id="sunday_start_time" step="600">
</tr>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_end_time">till</label>
<input type="time" id="monday_end_time" value="18:00" step="600">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_end_time">till</label>
<input type="time" id="tuesday_end_time" value="18:00" step="600">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_end_time">till</label>
<input type="time" id="wednesday_end_time" value="18:00" step="600">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_end_time">till</label>
<input type="time" id="thursday_end_time" value="18:00" step="600">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_end_time">till</label>
<input type="time" id="friday_end_time" value="13:00" step="600">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_end_time">till</label>
<input type="time" id="saturday_end_time" value="16:00" step="600">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_end_time">till</label>
<input type="time" id="sunday_end_time" step="600">
</tr>
</tbody>
</table>
<h3>Response Times <span class="subtitle">in Business Hours</span></h3>
<table class="settings-list settings-list--toggleRow">
<thead>
<tr>
<th>Active
<th>Type
<th>Time <span class="text-muted">in hours</span>
</tr>
</thead>
<tbody>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time">
<td>
<label class="inline-label" for="first_response_time">First Response Time</label>
<p class="subtle">Timeframe for the first response.</p>
<td><input type="time" step="600" max="259200">
</tr>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
<td>
<label class="inline-label" for="update_time">Update Time</label>
<p class="subtle">Timeframe for every following response.</p>
<td><input type="time" step="600" max="259200">
</tr>
<tr>
<td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
<td>
<label class="inline-label" for="solution_time">Solution Time</label>
<p class="subtle">Timeframe for solving the problem.</p>
<td><input type="time" step="600" max="259200">
</tr>
</tbody>
</table>

View file

@ -4230,6 +4230,10 @@ footer {
h2:first-child { h2:first-child {
margin-top: 0; margin-top: 0;
} }
.table > thead > tr > th {
background: hsl(197,20%,93%);
}
} }
.modal-footer { .modal-footer {
@ -5219,15 +5223,15 @@ label + .wizard-buttonList {
border: 1px solid hsl(198,19%,86%); border: 1px solid hsl(198,19%,86%);
&:first-child { &:first-child {
border-radius: 3px 3px 0 0; border-radius: 4px 4px 0 0;
} }
&:last-child { &:last-child {
border-radius: 0 0 3px 3px; border-radius: 0 0 4px 4px;
} }
&:only-child { &:only-child {
border-radius: 3px; border-radius: 4px;
} }
& + .horizontal-filter { & + .horizontal-filter {
@ -5382,19 +5386,19 @@ output {
} }
thead th:first-child { thead th:first-child {
border-top-left-radius: 3px; border-top-left-radius: 4px;
} }
thead th:last-child { thead th:last-child {
border-top-right-radius: 3px; border-top-right-radius: 4px;
} }
tbody tr:last-child td:first-child { tbody tr:last-child td:first-child {
border-bottom-left-radius: 3px; border-bottom-left-radius: 4px;
} }
tbody tr:last-child td:last-child { tbody tr:last-child td:last-child {
border-bottom-right-radius: 3px; border-bottom-right-radius: 4px;
} }
p { p {