#5 - font icons for informer

inc/classes/BxDolInformer.php

@@ -9,6 +9,7 @@
 
 define('BX_INFORMER_ALERT', 1); 
 define('BX_INFORMER_INFO', 2);
+define('BX_INFORMER_ERROR', 3);
 
 /** 
  * @page objects 
@@ -74,7 +75,7 @@ class BxDolInformer extends BxDol {
      * Add message to informer.
      * @param $sId - message id
      * @param $sMsg - message text
-     * @param $iType - message type: BX_INFORMER_ALERT or BX_INFORMER_INFO
+     * @param $iType - message type: BX_INFORMER_ALERT, BX_INFORMER_INFO or BX_INFORMER_ERROR
      */
     public function add ($sId, $sMsg, $iType = BX_INFORMER_INFO) {
         $this->_aMessages[$sId] = array (

template/css/colors.css

@@ -0,0 +1,60 @@
+
+/* --------------- color palette */
+
+
+.col-red1 { color: #d80960; }
+.bg-col-red1 { background-color: #d80960; }
+.col-red1-dark { color: #c20756; }
+.bg-col-red1-dark { background-color: #c20756; }
+
+.col-red2 { color: #e7441e; }
+.bg-col-red2 { background-color: #e7441e; }
+.col-red2-dark { color: #cf3c19; }
+.bg-col-red2-dark { background-color: #cf3c19; }
+
+.col-red3 { color: #f38f00; }
+.bg-col-red3 { background-color: #f38f00; }
+.col-red3-dark { color: #da8000; }
+.bg-col-red3-dark { background-color: #da8000; }
+
+
+
+.col-green1 { color: #60ae00; }
+.bg-col-green1 { background-color: #60ae00; }
+.col-green1-dark { color: #569c00; }
+.bg-col-green1-dark { background-color: #569c00; }
+
+.col-green2 { color: #d1d300; }
+.bg-col-green2 { background-color: #d1d300; }
+.col-green2-dark { color: #babc00; }
+.bg-col-green2-dark { background-color: #babc00; }
+
+.col-green3 { color: #307424; }
+.bg-col-green3 { background-color: #307424; }
+.col-green3-dark { color: #2b6820; }
+.bg-col-green3-dark { background-color: #2b6820; }
+
+
+
+.col-blue1 { color: #0a3d8f; }
+.bg-col-blue1 { background-color: #0a3d8f; }
+.col-blue1-dark { color: #093680; }
+.bg-col-blue1-dark { background-color: #093680; }
+
+.col-blue2 { color: #00a4a5; }
+.bg-col-blue2 { background-color: #00a4a5; }
+.col-blue2-dark { color: #009294; }
+.bg-col-blue2-dark { background-color: #009294; }
+
+.col-blue3 { color: #00a0ce; }
+.bg-col-blue3 { background-color: #00a0ce; }
+.col-blue3-dark { color: #008fb8; }
+.bg-col-blue3-dark { background-color: #008fb8; }
+
+
+
+.col-gray { color: #616161; }
+.bg-col-gray { background-color: #616161; }
+.col-gray-dark { color: #575757; }
+.bg-col-gray-dark { background-color: #575757; }
+

template/css/default.css

@@ -199,6 +199,7 @@
     padding-left:5px;
 }
 
+/* colors */
 .bx-def-color-bg-block {
     background-color:#fff;
 }

template/css/informer.css

@@ -3,8 +3,18 @@
     margin-top:0;
 }
 
+.bx-informer-msg .sys-icon {
+    position:absolute;
+    top:10px;
+    left:20px;
+    width:32px;
+    height:32px;
+    font-size:32px;
+    vertical-align:middle;
+    text-align:center;
+}
+
 .bx-informer-msg {
-    background-position:20px 20px;
-    background-repeat:no-repeat;
-    padding-left:56px;
+    position:relative;
+    padding-left:62px;
 }

template/informer.html

@@ -1,7 +1,10 @@
 <div class="bx-page-wrapper" style="width:__main_div_width__;">
     <div id="bx-informer" class="bx-def-border bx-def-color-bg-block bx-def-round-corners bx-def-padding bx-def-margin-top">
         <bx_repeat:messages>
-            <div id="__id__" class="bx-informer-msg __class__ bx-def-padding bx-def-color-bg-hl bx-def-round-corners bx-def-margin-top" style="background-image:url(__icon_url__)">__msg__</a></div>
+            <div id="__id__" class="bx-informer-msg __class__ bx-def-padding bx-def-color-bg-hl bx-def-round-corners bx-def-margin-top">
+                <i class="sys-icon __icon__ bx-def-margin-right"></i>
+                __msg__
+            </div>
         </bx_repeat:messages>
     </div>
 </div>

template/scripts/BxBaseInformer.php

@@ -20,12 +20,14 @@ class BxBaseInformer extends BxDolInformer {
     protected $_oTemplate;
 
     protected $_aMapType2Icon = array(
-        BX_INFORMER_ALERT => 'exclamation-red-frame.png',
-        BX_INFORMER_INFO => 'information-frame.png',
+        BX_INFORMER_ALERT => 'exclamation col-red3',
+        BX_INFORMER_INFO => 'info col-blue2-dark',
+        BX_INFORMER_ERROR => 'ban-circle col-red1',
     );
     protected $_aMapType2Class = array(
         BX_INFORMER_ALERT => 'bx-informer-msg-alert',
         BX_INFORMER_INFO => 'bx-informer-msg-info',
+        BX_INFORMER_ERROR => 'bx-informer-msg-error',
     );
 
     public function __construct ($oTemplate) {
@@ -49,7 +51,7 @@ class BxBaseInformer extends BxDolInformer {
 
         foreach ($this->_aMessages as $sId => $a) {
             $this->_aMessages[$sId]['class'] = $this->_aMapType2Class[$a['type']];
-            $this->_aMessages[$sId]['icon_url'] = $this->_oTemplate->getIconUrl($this->_aMapType2Icon[$a['type']]);
+            $this->_aMessages[$sId]['icon'] = $this->_aMapType2Icon[$a['type']];
         }
 
         $this->_addJsCss();
@@ -64,7 +66,7 @@ class BxBaseInformer extends BxDolInformer {
     protected function _addJsCss() {
         if ($this->_bJsCssAdded)
             return;
-        $this->_oTemplate->addCss('informer.css');
+        $this->_oTemplate->addCss(array('informer.css', 'colors.css'));
         $this->_bJsCssAdded = true;
     }
 }

template/scripts/BxBasePageAccount.php

@@ -59,7 +59,7 @@ class BxBasePageAccount extends BxTemplPage {
             } 
 
             if ($oInformer)
-                $oInformer->add('sys-account-profile-context-change-result', $sInformerMsg ? $sInformerMsg : _t('_Error occured'), $sInformerMsg ? BX_INFORMER_INFO : BX_INFORMER_ALERT);
+                $oInformer->add('sys-account-profile-context-change-result', $sInformerMsg ? $sInformerMsg : _t('_Error occured'), $sInformerMsg ? BX_INFORMER_INFO : BX_INFORMER_ERROR);
         }
 
     }