improve dashboard howto

inc/dashboard.class.php

@@ -91,12 +91,18 @@ function showDashBoard($show_reports_dropdown = true){
          echo "<div class='empty_dashboard'>";
          echo "<div class='empty_dashboard_text'>";
          echo __("Dashboard is empty. Please add reports by clicking on the icon", 'mreporting');
-         echo "<br />";
-         echo "&#xf063;";
-         echo "<br />";
+         echo "</div>";
+         echo "</div>";
       }
 
-      echo "<button id='addReport_button' class='m_right'></button>";
+      //echo "<button id='addReport_button' class='m_right'></button>";
+      echo "<div class='m_dashboard_controls'>";
+      echo "<div class='add_report' id='addReport_button'><span>&nbsp;</span></div>";
+      if (!empty($widgets)) {
+         echo "<span class='add_report_helptext'>".__("Add a report", 'mreporting').
+              " &#xf061;</span>";
+      }
+      echo "</div>";
       echo "
       <div id='addReport_dialog'>".$this->getFormForColumn()."</div>
       <script type='text/javascript'>
@@ -126,12 +132,7 @@ function showDashBoard($show_reports_dropdown = true){
                title: '".__("Select a report to add", 'mreporting')."'
             });
 
-            $('#addReport_button').button({
-               icons: {
-                 primary: 'ui-icon-plusthick'
-               },
-               text: false
-            }).click(function( event ) {
+            $('#addReport_button').click(function( event ) {
                addReport.dialog('open');
             });
          });

locales/en_GB.po

@@ -146,6 +146,10 @@ msgstr ""
 msgid "More"
 msgstr ""
 
+#: inc/dashboard.class.php:102
+msgid "Add a report"
+msgstr ""
+
 #: inc/dashboard.class.php:121
 msgid "Select a report to add"
 msgstr ""

locales/fr_FR.po

@@ -146,6 +146,10 @@ msgstr "Sélectionnez un rapport à afficher"
 msgid "Dashboard is empty. Please add reports by clicking on the icon"
 msgstr "Le tableau de bord est vide. Merci d'ajouter des rapports en cliquant sur cette icône"
 
+#: inc/dashboard.class.php:102
+msgid "Add a report"
+msgstr "Ajouter un rapport"
+
 #: inc/dashboard.class.php:121
 msgid "Select a report to add"
 msgstr "Sélectionnez un rapport à ajouter"

locales/glpi.pot

@@ -146,6 +146,10 @@ msgstr ""
 msgid "More"
 msgstr ""
 
+#: inc/dashboard.class.php:102
+msgid "Add a report"
+msgstr ""
+
 #: inc/dashboard.class.php:121
 msgid "Select a report to add"
 msgstr ""

mreporting.css

@@ -140,27 +140,69 @@ select[name=graphmenu] option {
    width: 80px !important;
 }
 
-.empty_dashboard {
-   width: 90%;
-   margin: 15px auto;
-   height: 150px;
-   border: 3px dashed #CCC;
-   color: #999;
-   font-size: 1.4em;
-   text-transform: uppercase;
-   font-weight: bold;
+.m_dashboard_controls {
+   float: right;   
+   color: #999; 
 }
 
-.empty_dashboard_text {
-   width: 300px;
+.add_report {
+   border: 3px solid #999;
+   float: right;   
+   border-radius: 6px;
+   cursor: pointer;
+   height: 30px;
+   width: 30px;
+   background: #eeeeee; /* Old browsers */
+   background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
+   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
+   background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
+   background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
+   background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
+   background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
+   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
+}
+
+.add_report:hover {
+   background: #999;
+}
+
+.add_report_helptext {
+   line-height: 30px;
+   margin-right: 5px;
+   display: none;
+}
+
+.m_dashboard_controls:hover .add_report_helptext {
+   display: inline-block;
+}
+
+.add_report span:before {
    text-align: center;
-   margin: 20px auto;
+   font-size: 2em;
+   content: "\f067";
+   padding-top: 4px;
+   width: 100%;
+   display: block;
 }
 
-.empty_dashboard .m_right {
-   float: none;
+.add_report:hover span:before {
+   color: white; 
 }
 
-.empty_dashboard #addReport_button {
-   zoom: 1.5;
+.empty_dashboard {
+   position: absolute;
+   right: 40px;   
+   background: url(pics/howto_arrow.png) no-repeat right top;
+}
+
+.empty_dashboard_text {
+   width: 300px;
+   text-align: center;
+   margin-top: 120px;
+   margin-right: 150px;
+   color: #999;
+   font-size: 1.4em;
+   text-transform: uppercase;
+   font-weight: bold;
+
 }