taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added CSS interactions to confirm buttons

stable
Xavier Julián 2014-07-10 10:22:48 +02:00
parent 3c26f97d70
commit adb756b4cd
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/coffee/modules/base/confirm.coffee
View File

@ -110,18 +110,18 @@ class ConfirmService extends taiga.Service
@.el = angular.element(selector)
body = angular.element("body")
body.find(".notification-message, notification-light").addClass("hidden")
body.find(selector).removeClass("hidden")
body.find(".notification-message .notification-light").removeClass('active');
body.find(selector).addClass('active');
if @.tsem
cancelTimeout(@.tsem)
@.tsem = timeout 4000, =>
body.find(selector).addClass("hidden")
@.tsem = timeout 3500, =>
body.find(selector).removeClass('active')
delete @.tsem
@.el.on "click", ".icon-delete", (event) =>
body.find(selector).addClass("hidden")
body.find(selector).removeClass('active')
module = angular.module("taigaBase")

4
app/partials/views/components/notification-message.jade
View File

@ -5,14 +5,14 @@ div.hidden.notification-message.notification-message-success
p Our oompa Loompas saved all your changes!
a.icon.icon-delete(href="", title="Close notification")
div.hidden.notification-message.notification-message-error
div.notification-message.notification-message-error
div.icon.icon-notification-error
div.text
h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved!
a.icon.icon-delete(href="", title="Close notification")
div.hidden.notification-light.notification-message-light-error
div.notification-light.notification-message-light-error
div.text
h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved!

30
app/styles/components/notification-message.scss
View File

@ -1,11 +1,18 @@
.notification-message {
background: $grayer;
@include transform(translateY(-100%));
@include transition (all .6s ease-in-out);
background: rgba($gray-light, .8);
color: $white;
padding: 1rem;
padding-bottom: .5em;
position: relative;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
&.active {
@include transform(translateY(0));
@include transition (all .6s ease-in-out);
}
.text {
display: inline-block;
margin-left: .5rem;
@ -26,7 +33,7 @@
}
.notification-message-success {
background: $fresh-taiga;
background: rgba($fresh-taiga, .8);
.icon-notification-success {
@extend %xxlarge;
display: inline;
@ -35,7 +42,7 @@
}
.notification-message-error {
background: $red;
background: rgba($red, .8);
.icon-notification-error {
@extend %xxlarge;
display: inline;
@ -44,18 +51,19 @@
}
.notification-light {
@include transition(padding .2s linear);
background: rgba(0, 0, 0, .8);
@include transform(translateY(-100%));
@include transition (all .6s ease-in-out);
background: rgba($gray-light, .8);
color: $white;
left: calc(50% - 200px);
padding: 4% 1rem .2rem;
padding: 1rem 1rem .2rem;
position: absolute;
top: 0;
width: 400px;
z-index: 999;
&.hidden {
@include transition (padding .2s linear);
padding: 1% 1rem .2rem;
&.active {
@include transform(translateY(0));
@include transition (all .6s ease-in-out);
}
.text {
display: inline-block;
@ -76,5 +84,5 @@
}
.notification-message-light-error {
@include background(240, 15, 8, .8);
background: rgba($red, .8);
}