Enable and style application drop down.

Add border to top navigation.

diff --git a/kronolith/templates/index/index.inc b/kronolith/templates/index/index.inc
index 6e69bea..5221c5b 100644 (file)
--- a/kronolith/templates/index/index.inc
+++ b/kronolith/templates/index/index.inc
@@ -4,15 +4,18 @@
 
   <!-- begin services -->
   <div id="kronolithServices">
+    <?php if (count($GLOBALS['conf']['menu']['apps'])): ?>
     <div id="kronolithApplications">
-       <ul>
-          <li><a href="#" id="appMail" title="<?php echo _("Mail") ?>"><?php echo _("Mail") ?></a></li>
-          <li class="selected"><a href="#" id="appKronolith" title="<?php echo _("Kronolith") ?>"><?php echo _("Kronolith") ?></a></li>
-          <li><a href="#" id="appTurba" title="<?php echo _("Turba") ?>"><?php echo _("Turba") ?></a></li>
-       </ul>
-       <span class="kronolithSeparator">|</span>
+      <ul>
+        <li class="kronolithApplicationSelected"><a href="" id="kronolithApplication-kronolith" title="<?php echo $GLOBALS['registry']->get('name') ?>"><img src="<?php echo $GLOBALS['registry']->get('icon') ?>" /> <?php echo $GLOBALS['registry']->get('name') ?></a></li>
+        <?php foreach ($GLOBALS['conf']['menu']['apps'] as $app): ?>
+        <li><a href="<?php echo $GLOBALS['registry']->get('webroot', $app) ?>" id="kronolithApplication-<?php echo $app ?>" title="<?php echo $GLOBALS['registry']->get('name', $app) ?>"><img src="<?php echo $GLOBALS['registry']->get('icon', $app) ?>" /> <?php echo $GLOBALS['registry']->get('name', $app) ?></a></li>
+        <?php endforeach; ?>
+      </ul>
+      <span class="kronolithSeparator">|</span>
     </div>
-    <a href="#" id="kronolithOptions"><?php echo _("Options") ?></a><?php if ($help_link) echo ' <span class="kronolithSeparator">&middot;</span> ' . $help_link; if ($logout_link) echo ' <span class="kronolithSeparator">|</span> ' . $logout_link ?>
+    <?php endif; ?>
+    <a href="#" id="kronolithOptions"><?php echo _("Options") ?></a><?php if ($help_link) echo ' <span class="kronolithSeparator">|</span> ' . $help_link; if ($logout_link) echo ' <span class="kronolithSeparator">|</span> ' . $logout_link ?>
   </div>
   <!-- end services -->
 

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 503dbb8..db0299c 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -397,8 +397,62 @@ body.kronolithAjax {
 
 /* User data and options */
 #kronolithApplications {
+    position: relative;
+    z-index: 99;
+    float: left;
+    height: 25px;
+    line-height: 23px;
+    margin-right: 10px;
+    overflow: hidden;
+}
+#kronolithApplications:hover {
+    overflow: visible;
+}
+#kronolithApplications ul {
+    list-style: none;
+}
+#kronolithApplications li {
+    margin-bottom: 1px;
+    text-align: left;
+}
+#kronolithApplications a {
+    display: block;
+    padding: 0 4px;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    border: 1px solid #c0c0c0;
+    color: #202020;
+    font-weight: bold;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+}
+#kronolithApplications:hover a {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+#kronolithApplications:hover li:first-child a {
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+}
+#kronolithApplications:hover li:last-child a {
+    -moz-border-radius-bottomleft: 5px;
+    -moz-border-radius-bottomright: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+}
+#kronolithApplications a:hover {
+    text-decoration: none;
+    background-color: #d9d9d9;
+}
+#kronolithApplications li.kronolithApplicationSelected a {
+    background-color: #d9d9d9;
+}
+#kronolithApplications .kronolithSeparator {
     display: none;
 }
+
 #kronolithServices {
     float: right;
     margin-top: 10px;
@@ -408,8 +462,9 @@ body.kronolithAjax {
 #kronolithNotifications {
     float: left;
     padding: 0 10px;
-    height: 25px;
-    line-height: 25px;
+    height: 23px;
+    line-height: 23px;
+    border: 1px solid #c0c0c0;
     -moz-border-radius: 0 5px 5px 0;
     -webkit-border-radius: 0 5px 5px 0;
 }
@@ -579,6 +634,7 @@ a.kronolithFormCancel {
     float: left;
     margin: 0 2px 0 0;
     background: #d6d6d6;
+    border: 1px solid #c0c0c0;
     -moz-border-radius: 5px 0 0 5px;
     -webkit-border-radius: 5px 0 0 5px;
     font-weight: bold;
@@ -586,15 +642,15 @@ a.kronolithFormCancel {
 }
 #kronolithBar .kronolithDateChoice div {
     padding: 0 10px;
-    height: 25px;
-    line-height: 25px;
+    height: 23px;
+    line-height: 23px;
 }
 
 #kronolithNav {
     float: left;
     margin-left: 5px;
-    height: 25px;
-    line-height: 25px;
+    height: 23px;
+    line-height: 23px;
 }
 #kronolithNav a {
     display: block;
@@ -608,6 +664,7 @@ a.kronolithFormCancel {
     text-decoration: none;
     color: #202020;
     cursor: pointer;
+    border: 1px solid #c0c0c0;
 }
 #kronolithNav a:first-child {
     -moz-border-radius-topleft: 5px;