openrat-cms

commit de2138b230abc3dabeed9faa432a695b5c424ac7
parent 046c10fd4ef7eac976b33a3c80e9227e8ca7e085
Author: Jan Dankert <devnull@localhost>
Date:   Wed,  5 Dec 2018 00:45:26 +0100

Notices aufgehübscht und für die initialen Notices gibt es einen Ablauftimer von 30 Sek.

Diffstat:
modules/cms-ui/themes/default/layout/index.php
 | 
4
+++-
modules/cms-ui/themes/default/script/openrat.js
 | 
28
+++++++++++++++-------------
modules/cms-ui/themes/default/style/openrat-ui.less
 | 
16
++++++++++++++++

3 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/modules/cms-ui/themes/default/layout/index.php b/modules/cms-ui/themes/default/layout/index.php
@@ -102,7 +102,9 @@
 
 <div id="noticebar">
     <?php /* Inline Notices */ foreach( $notices as $notice ) { ?>
-        <div class="notice <?php echo $notice['status'] ?>"><div class="text"><?php echo $notice['text'] ?></div></div>
+        <div class="notice <?php echo $notice['status'] ?>">
+            <div class="or-notice-toolbar"><i class="or-action-close image-icon image-icon--menu-close"></i></div>
+            <div class="text"><?php echo $notice['text'] ?></div></div>
     <?php } ?>
 </div>
 
diff --git a/modules/cms-ui/themes/default/script/openrat.js b/modules/cms-ui/themes/default/script/openrat.js
@@ -26,13 +26,6 @@ $( function() {
 
     Workbench.initialize();
 
-    // Per Klick wird die Notice entfernt.
-    $('#noticebar .notice').click(function () {
-        $(this).fadeOut('fast', function () {
-            $(this).remove();
-        });
-    });
-
     loadTree(); // Initial Loading of the navigationtree
 
 
@@ -58,12 +51,21 @@ $( function() {
 
 
 
-    // Per Klick werden die Notices entfernt.
-    $('#noticebar .notice').fadeIn().click(function () {
-        $(this).fadeOut('fast', function () {
+    // Per Klick wird die Notice entfernt.
+    $('#noticebar .notice .image-icon--menu-close').click(function () {
+        $(this).closest('.notice').fadeOut('fast', function () {
             $(this).remove();
         });
     });
+    // Die Notices verschwinden automatisch.
+    $('#noticebar .notice').each(function () {
+    	let noticeToClose = this;
+		setTimeout( function() {
+			$(noticeToClose).fadeOut('slow', function() { $(this).remove(); } );
+		},30/*seconds*/ *1000 );
+
+    });
+
 
     registerOpenClose($('section.toggle-open-close'));
 
@@ -827,12 +829,12 @@ function notify( type,name,status,msg,log=[] )
 
 	let toolbar = $('<div class="or-notice-toolbar"></div>');
 	if   ( log.length )
-        $(toolbar).append('<img class="or-action-full" src="modules/cms-ui/themes/default/images/icon/menu/fullscreen.svg" />');
-	$(toolbar).append('<img class="or-action-close" src="modules/cms-ui/themes/default/images/icon/method/close.svg"/>');
+        $(toolbar).append('<i class="or-action-full image-icon image-icon--menu-fullscreen"></i>');
+	$(toolbar).append('<i class="or-action-close image-icon image-icon--menu-close"></i>');
 	$(notice).append(toolbar);
 
 	if	(name)
-		$(notice).append('<div class="name"><img class="or-action-full" src="modules/cms-ui/themes/default/images/icon/action/'+type+'.svg"/>'+name+'</div>');
+		$(notice).append('<div class="name"><i class="or-action-full image-icon image-icon--action-'+type+'"></i> '+name+'</div>');
 
 	$(notice).append( '<div class="text">'+htmlEntities(msg)+'</div>');
 
diff --git a/modules/cms-ui/themes/default/style/openrat-ui.less b/modules/cms-ui/themes/default/style/openrat-ui.less
@@ -99,6 +99,8 @@
   &.image-icon--method-mail:after { content: "mail"; }
   &.image-icon--method-search:after { content: "search"; }
   &.image-icon--method-add:after { content: "add_box"; }
+  &.image-icon--menu-close:after { content: "close"; }
+  &.image-icon--menu-fullscreen:after { content: "fullscreen"; }
 
   &.image-icon--menu-menu:after { content: "menu"; }
 
@@ -152,6 +154,20 @@ div#noticebar {
     .border-radius(5px);
     .box-shadow(3px, 2px, 5px, @color-overridden-by-theme);
 
+    .or-notice-toolbar {
+      float: right;
+      margin:0 0.2em;
+      font-size: 2em;
+      color: gray;
+      cursor: pointer;
+    }
+
+    &:hover {
+      .or-notice-toolbar {
+        color: black;
+      }
+    }
+
     &.full {
       display: block;
       position: fixed;