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') isInactive = sla.hasClass('is-inactive')
sla.toggleClass('is-inactive') sla.toggleClass('is-inactive')
isInactive = !isInactive 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) => activateColumn: (event) =>
checkbox = @$(event.currentTarget) checkbox = @$(event.currentTarget)

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

@ -87,36 +87,16 @@
</div> </div>
<div class="sla-times"> <div class="sla-times">
<h3>Repsonse Times</h3> <h3>Repsonse Times</h3>
<div class="response-times"> 00:30 Stunden First Response Time<br>
<div class="response-times-entry"> 02:00 Stunden Update Time<br>
<div class="response-time">00:30 Stunden</div> 48:00 Stunden Solution Time
<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>
</div> </div>
<div class="sla-businessHours"> <div class="sla-businessHours">
<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="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 class="sla-edit btn js-edit">Edit</div>
</div> </div>
</div> </div>
@ -132,33 +112,12 @@
</div> </div>
<div class="sla-times"> <div class="sla-times">
<h3>Repsonse Times</h3> <h3>Repsonse Times</h3>
<div class="response-times"> 00:30 Stunden First Response Time<br>
<div class="response-times-entry"> 01:00 Stunden Update Time
<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>
</div> </div>
<div class="sla-businessHours"> <div class="sla-businessHours">
<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-Fr 8 Uhr - 18 Uhr
</div> </div>
<div class="sla-controls"> <div class="sla-controls">
<div class="sla-toggle btn js-toggle">Enable</div> <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 { &.btn--success {
color: white; color: white;
background: hsl(145,51%,45%); background: hsl(145,51%,45%);
&:active { &:active {
background: hsl(145,51%,35%); background: hsl(145,51%,35%);
} }
&.btn--secondary,
&.btn--secondary:active {
background: white;
color: hsl(145,51%,45%);
}
} }
&.btn--danger { &.btn--danger {
@ -351,6 +358,12 @@ span[data-tooltip]:hover:before {
&:active { &:active {
background: hsl(0,65%,45%); background: hsl(0,65%,45%);
} }
&.btn--secondary,
&.btn--secondary:active {
background: white;
color: hsl(0,65%,55%);
}
} }
&.btn--text { &.btn--text {
@ -5525,10 +5538,15 @@ output {
box-shadow: none; box-shadow: none;
position: relative; position: relative;
top: 2px; top: 2px;
background: none;
& > *:not(.sla-controls) { & > *:not(.sla-controls) {
opacity: 0.33; opacity: 0.33;
} }
.sla-controls .btn {
background: none;
}
} }
h3 { h3 {
@ -5538,7 +5556,7 @@ output {
.arrow { .arrow {
align-self: center; align-self: center;
margin: 25px 50px 0; margin: 22px 50px 0;
.icon { .icon {
width: 15px; 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 { .sla-businessHours {
flex-basis: 100%; flex-basis: 100%;
margin: 20px 0; margin: 20px 0;