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

sla list: simplify, make deactivated state more obvious

Browse source
This commit is contained in:
Felix Niklas 2015-06-24 14:29:29 +02:00
parent defcd7b820
commit 9d5e4c0d12
3 changed files with 29 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1303,7 +1303,9 @@ class slaRef extends App.ControllerContent
isInactive = sla.hasClass('is-inactive')
sla.toggleClass('is-inactive')
isInactive = !isInactive
sla.find('.js-toggle').text(if isInactive then 'Enable' else 'Disable')
sla.find('.js-toggle')
.toggleClass('btn--danger btn--secondary')
.text(if isInactive then 'Enable' else 'Disable')
activateColumn: (event) =>
checkbox = @$(event.currentTarget)

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

@ -87,36 +87,16 @@
</div>
<div class="sla-times">
<h3>Repsonse Times</h3>
<div class="response-times">
<div class="response-times-entry">
<div class="response-time">00:30 Stunden</div>
<div class="response-name">
<svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
First Response Time
</div>
</div>
<div class="response-times-entry">
<div class="response-time">01:00 Stunden</div>
<div class="response-name">
<svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
Update Time
</div>
</div>
<div class="response-times-entry">
<div class="response-time">48:00 Stunden</div>
<div class="response-name">
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
Solution Time
</div>
</div>
</div>
00:30 Stunden First Response Time<br>
02:00 Stunden Update Time<br>
48:00 Stunden Solution Time
</div>
<div class="sla-businessHours">
<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="sla-toggle btn 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>
</div>
@ -132,33 +112,12 @@
</div>
<div class="sla-times">
<h3>Repsonse Times</h3>
<div class="response-times">
<div class="response-times-entry">
<div class="response-time">00:30 Stunden</div>
<div class="response-name">
<svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
First Response Time
</div>
</div>
<div class="response-times-entry">
<div class="response-time">01:00 Stunden</div>
<div class="response-name">
<svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
Update Time
</div>
</div>
<div class="response-times-entry">
<div class="response-time">48:00 Stunden</div>
<div class="response-name">
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
Solution Time
</div>
</div>
</div>
00:30 Stunden First Response Time<br>
01:00 Stunden Update Time
</div>
<div class="sla-businessHours">
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
Mo-Tu 7am - 5pm, Fr 7am - 1pm
Mo-Fr 8 Uhr - 18 Uhr
</div>
<div class="sla-controls">
<div class="sla-toggle btn js-toggle">Enable</div>

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

@ -337,12 +337,19 @@ span[data-tooltip]:hover:before {
}
}
&.btn--positive,
&.btn--success {
color: white;
background: hsl(145,51%,45%);
&:active {
background: hsl(145,51%,35%);
}
&.btn--secondary,
&.btn--secondary:active {
background: white;
color: hsl(145,51%,45%);
}
}
&.btn--danger {
@ -351,6 +358,12 @@ span[data-tooltip]:hover:before {
&:active {
background: hsl(0,65%,45%);
}
&.btn--secondary,
&.btn--secondary:active {
background: white;
color: hsl(0,65%,55%);
}
}
&.btn--text {
@ -5525,10 +5538,15 @@ output {
box-shadow: none;
position: relative;
top: 2px;
background: none;
& > *:not(.sla-controls) {
opacity: 0.33;
}
.sla-controls .btn {
background: none;
}
}
h3 {
@ -5538,7 +5556,7 @@ output {
.arrow {
align-self: center;
margin: 25px 50px 0;
margin: 22px 50px 0;
.icon {
width: 15px;
@ -5547,27 +5565,6 @@ output {
}
}
.response-times-entry {
display: flex;
.icon {
display: none;
vertical-align: middle;
margin-right: 3px;
&:not(.icon-checkmark) {
}
}
.response-time {
margin-right: 5px;
}
}
.response-times-entry:not(:last-child) {
margin: 0 0 2px;
}
.sla-businessHours {
flex-basis: 100%;
margin: 20px 0;