Browse Source

fix notify style

- transparent black background (neutral style)
- icons for success and error
Felix Niklas 9 years ago
parent
commit
6a3c17a722

+ 3 - 1
app/assets/javascripts/app/controllers/widget/notify.coffee

@@ -39,10 +39,12 @@ class App.Notify extends App.ControllerWidgetPermanent
     $('#notify').noty
       text:      data.msg
       type:      data.type
+      template:  App.view('notify')
+                   type: data.type
       animation:
         open:    'animated fadeInDown'
         close:   'animated fadeOutDown'
-      timeout:   data.timeout || 3800
+      timeout:   false #data.timeout || 3800
       closeWith: ['click']
 
   destroy: (e) ->

+ 8 - 3
app/assets/javascripts/app/views/notify.jst.eco

@@ -1,4 +1,9 @@
-<div class="alert <%= @data.type %>">
-  <a class="close" href="#">×</a>
-  <%= @data.text %>
+<div class="noty_message">
+  <% if @type is 'error': %>
+    <%- @Icon('diagonal-cross', 'icon-error') %>
+  <% end %>
+  <% if @type is 'success': %>
+    <%- @Icon('checkmark') %>
+  <% end %>
+  <span class="noty_text"></span>
 </div>

+ 7 - 15
app/assets/stylesheets/zammad.scss

@@ -1913,11 +1913,11 @@ ol.tabs li {
 }
 
 .icon-checkmark {
-  fill: #38AE6A;
+  fill: $supergood-color;
 }
 
 .icon-error {
-  fill: #F35910;
+  fill: $superbad-color;
 }
 
 .loading.icon {
@@ -2243,7 +2243,6 @@ footer {
 
     .navigation .nav-tab-name {
       text-align: left;
-      padding-bottom: 2px;
     }
 
     .tasks-navigation .nav-tab-icon .error {
@@ -6454,23 +6453,16 @@ output {
     .noty_message {
       pointer-events: auto;
       display: inline-block;
-      background: hsl(203,65%,55%);
+      background: rgba(0,0,0,.75);
       padding: 10px 15px 8px;
       border-radius: 3px;
       color: white;
     }
 
-    &.noty_type_success .noty_message {
-      background: hsl(145,51%,45%);
-    }
-
-    &.noty_type_alert .noty_message {
-      color: hsl(45,98%,17%);
-      background: hsl(45,98%,63%);
-    }
-
-    &.noty_type_error .noty_message {
-      background: hsl(11,85%,48%);
+    .icon {
+      vertical-align: middle;
+      margin-top: -3px;
+      margin-right: 5px;
     }
 
     a {