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) @.el = angular.element(selector)
body = angular.element("body") body = angular.element("body")
body.find(".notification-message, notification-light").addClass("hidden") body.find(".notification-message .notification-light").removeClass('active');
body.find(selector).removeClass("hidden") body.find(selector).addClass('active');
if @.tsem if @.tsem
cancelTimeout(@.tsem) cancelTimeout(@.tsem)
@.tsem = timeout 4000, => @.tsem = timeout 3500, =>
body.find(selector).addClass("hidden") body.find(selector).removeClass('active')
delete @.tsem delete @.tsem
@.el.on "click", ".icon-delete", (event) => @.el.on "click", ".icon-delete", (event) =>
body.find(selector).addClass("hidden") body.find(selector).removeClass('active')
module = angular.module("taigaBase") 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! p Our oompa Loompas saved all your changes!
a.icon.icon-delete(href="", title="Close notification") 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.icon.icon-notification-error
div.text div.text
h4.warning Oops, something happened... h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved! p Our oompa Loompas are sad, your changes were not saved!
a.icon.icon-delete(href="", title="Close notification") 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 div.text
h4.warning Oops, something happened... h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved! 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 { .notification-message {
background: $grayer; @include transform(translateY(-100%));
@include transition (all .6s ease-in-out);
background: rgba($gray-light, .8);
color: $white; color: $white;
padding: 1rem; padding: 1rem;
padding-bottom: .5em; padding-bottom: .5em;
position: relative; position: absolute;
top: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
&.active {
@include transform(translateY(0));
@include transition (all .6s ease-in-out);
}
.text { .text {
display: inline-block; display: inline-block;
margin-left: .5rem; margin-left: .5rem;
@ -26,7 +33,7 @@
} }
.notification-message-success { .notification-message-success {
background: $fresh-taiga; background: rgba($fresh-taiga, .8);
.icon-notification-success { .icon-notification-success {
@extend %xxlarge; @extend %xxlarge;
display: inline; display: inline;
@ -35,7 +42,7 @@
} }
.notification-message-error { .notification-message-error {
background: $red; background: rgba($red, .8);
.icon-notification-error { .icon-notification-error {
@extend %xxlarge; @extend %xxlarge;
display: inline; display: inline;
@ -44,18 +51,19 @@
} }
.notification-light { .notification-light {
@include transition(padding .2s linear); @include transform(translateY(-100%));
background: rgba(0, 0, 0, .8); @include transition (all .6s ease-in-out);
background: rgba($gray-light, .8);
color: $white; color: $white;
left: calc(50% - 200px); left: calc(50% - 200px);
padding: 4% 1rem .2rem; padding: 1rem 1rem .2rem;
position: absolute; position: absolute;
top: 0; top: 0;
width: 400px; width: 400px;
z-index: 999; z-index: 999;
&.hidden { &.active {
@include transition (padding .2s linear); @include transform(translateY(0));
padding: 1% 1rem .2rem; @include transition (all .6s ease-in-out);
} }
.text { .text {
display: inline-block; display: inline-block;
@ -76,5 +84,5 @@
} }
.notification-message-light-error { .notification-message-light-error {
@include background(240, 15, 8, .8); background: rgba($red, .8);
} }