feature 2575: redesign menubar on clear administration theme

SVG icons with raphael.js (not sure this is the best way to add icons, it's a test)

The menubar is sticked to the left border of the window.


git-svn-id: http://piwigo.org/svn/trunk@13168 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 39 insertions, 13 deletions

diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index d031694a6..1ca520cc3 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -82,6 +82,8 @@ h3, .content, .throw, .row1 { background-color: #ddd; }
 
 .content {
   border: 1px solid #aaa;
+  margin-left:217px;
+  margin-top: 7px;
 }
 
 .content h3 { font-size:20px; letter-spacing:-0.4px; margin:0 20px 12px 0;
@@ -141,7 +143,7 @@ ul.actions, .content form#waiting  {text-align:center;}
 
 /* tabsheets are often used in admin  pages => No specific css files */
 #tabsheet { width:auto; margin:-1px; margin-right:-6px; padding:0;
-border:1px solid #f9f9f9; border-bottom:1px solid #aaa; background-color:#f9f9f9;}
+border:1px solid #f9f9f9; border-bottom:1px solid #aaa; background-color:#f9f9f9;margin-top:-7px;}
 .tabsheet { display:table; white-space:nowrap; padding-left:10px; margin:0; width:auto;
 font-family:verdana,arial,helvetica,sans-serif; font-size:8px;
 list-style-type:none; list-style-image:none; text-decoration:none; }
@@ -164,7 +166,8 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
 .sort { clear: none; }
 /* menubar is on all admin pages => No specific css file */
 #menubar {
-  padding:0; width:207px; z-index:99; text-align: left;
+  padding:0; width:207px; z-index:99; text-align: left;margin-top:7px;
+  margin-left:0;
 }
 
 #menubar ul.scroll { overflow-y:auto;
@@ -173,19 +176,20 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
  scrollbar-3dlight-color: #d6d6d6; scrollbar-darkshadow-color: #ccc; scrollbar-track-color: #eee;
  scrollbar-arrow-color: #0cccc; }
 #menubar dd { margin: 0; padding: 0;}
-#menubar dl { width: 207px; border:0; margin: 0; padding: 0; display: block; min-height:35px; border:1px solid #ddd; background-color:#f1f1f1; border-left:1px solid #aaa; border-right:1px solid #aaa;}
-#menubar dl.first {border-top:1px solid #aaa;}
-#menubar dl.last {border-bottom:1px solid #aaa;}
+#menubar dl { width: 200px; border:0; margin: 0; padding: 0; display: block; min-height:35px; border:1px solid #ddd; background-color:#f1f1f1; border-left:none; border-right:1px solid #ddd;}
+#menubar dl.first {border-top:none;border-radius:0 6px 0 0;}
+#menubar dl.first dt {border-radius:0 6px 0 0;}
+#menubar dl.last {border-bottom:1px solid #ddd; border-radius:0 0 6px 0;}
 #menubar dt { background-color: #ddd; margin: 0; display: block; font-weight:bold;
 position:relative; padding: 5px 1px 4px 5px; font-size: 13px; color: #777; }
 #menubar dt  span { cursor:pointer; }
 #menubar li { margin: 0; padding-left:10px; }
 #menubar li A { display:block; }
-#menubar li A:hover { border:none; }
+#menubar li A:hover { border:none; color:black;}
 #menubar li:hover {background-color:#dbe8f3;}
 #menubar ul { color: #ccc; margin:0; line-height: 25px;
   list-style-type: none; list-style-position: inside; padding: 0; }
-#adminHome       {background-color:#ddd;}
+#adminHome       {background-color:#ddd;border-radius: 0 6px 6px 0;margin-left:0;margin-bottom:17px;}
 #adminHome:hover {background-color:#d0d0d0;}
 
 /* jQuery tooltips */
@@ -288,3 +292,5 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
 #batchManagerGlobal #selectedMessage {background-color:#C2F5C2;}
 
 .selectedComment {background-color:#C2F5C2;}
+
+#pwgMain {padding-left:0}
diff --git a/admin/themes/default/template/admin.tpl b/admin/themes/default/template/admin.tpl
index f4e52cb2c..f9da9fccf 100644
--- a/admin/themes/default/template/admin.tpl
+++ b/admin/themes/default/template/admin.tpl
@@ -10,10 +10,30 @@ jQuery(document).ready(function(){ldelim}
 });
 {/footer_script}
 
+{combine_script id='raphael' load='footer' path='themes/default/js/raphael.js' }
+{footer_script require='raphael'}{literal}
+jQuery(document).ready(function(){
+  Raphael("menubarUsers", 20, 16).path("M21.053,20.8c-1.132-0.453-1.584-1.698-1.584-1.698s-0.51,0.282-0.51-0.51s0.51,0.51,1.02-2.548c0,0,1.414-0.397,1.132-3.68h-0.34c0,0,0.849-3.51,0-4.699c-0.85-1.189-1.189-1.981-3.058-2.548s-1.188-0.454-2.547-0.396c-1.359,0.057-2.492,0.792-2.492,1.188c0,0-0.849,0.057-1.188,0.397c-0.34,0.34-0.906,1.924-0.906,2.321s0.283,3.058,0.566,3.624l-0.337,0.113c-0.283,3.283,1.132,3.68,1.132,3.68c0.509,3.058,1.019,1.756,1.019,2.548s-0.51,0.51-0.51,0.51s-0.452,1.245-1.584,1.698c-1.132,0.452-7.416,2.886-7.927,3.396c-0.511,0.511-0.453,2.888-0.453,2.888h26.947c0,0,0.059-2.377-0.452-2.888C28.469,23.686,22.185,21.252,21.053,20.8zM8.583,20.628c-0.099-0.18-0.148-0.31-0.148-0.31s-0.432,0.239-0.432-0.432s0.432,0.432,0.864-2.159c0,0,1.199-0.336,0.959-3.119H9.538c0,0,0.143-0.591,0.237-1.334c-0.004-0.308,0.006-0.636,0.037-0.996l0.038-0.426c-0.021-0.492-0.107-0.939-0.312-1.226C8.818,9.619,8.53,8.947,6.947,8.467c-1.583-0.48-1.008-0.385-2.159-0.336C3.636,8.179,2.676,8.802,2.676,9.139c0,0-0.72,0.048-1.008,0.336c-0.271,0.271-0.705,1.462-0.757,1.885v0.281c0.047,0.653,0.258,2.449,0.469,2.872l-0.286,0.096c-0.239,2.783,0.959,3.119,0.959,3.119c0.432,2.591,0.864,1.488,0.864,2.159s-0.432,0.432-0.432,0.432s-0.383,1.057-1.343,1.439c-0.061,0.024-0.139,0.056-0.232,0.092v5.234h0.575c-0.029-1.278,0.077-2.927,0.746-3.594C2.587,23.135,3.754,22.551,8.583,20.628zM30.913,11.572c-0.04-0.378-0.127-0.715-0.292-0.946c-0.719-1.008-1.008-1.679-2.59-2.159c-1.584-0.48-1.008-0.385-2.16-0.336C24.72,8.179,23.76,8.802,23.76,9.139c0,0-0.719,0.048-1.008,0.336c-0.271,0.272-0.709,1.472-0.758,1.891h0.033l0.08,0.913c0.02,0.231,0.022,0.436,0.027,0.645c0.09,0.666,0.21,1.35,0.33,1.589l-0.286,0.096c-0.239,2.783,0.96,3.119,0.96,3.119c0.432,2.591,0.863,1.488,0.863,2.159s-0.432,0.432-0.432,0.432s-0.053,0.142-0.163,0.338c4.77,1.9,5.927,2.48,6.279,2.834c0.67,0.667,0.775,2.315,0.746,3.594h0.48v-5.306c-0.016-0.006-0.038-0.015-0.052-0.021c-0.959-0.383-1.343-1.439-1.343-1.439s-0.433,0.239-0.433-0.432s0.433,0.432,0.864-2.159c0,0,0.804-0.229,0.963-1.841v-1.227c-0.001-0.018-0.001-0.033-0.003-0.051h-0.289c0,0,0.215-0.89,0.292-1.861V11.572z").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"});
+
+Raphael("menubarAlbums", 20, 16).path("M6.812,17.202l7.396-3.665v-2.164h-0.834c-0.414,0-0.808-0.084-1.167-0.237v1.159l-7.396,3.667v2.912h2V17.202zM26.561,18.875v-2.913l-7.396-3.666v-1.158c-0.358,0.152-0.753,0.236-1.166,0.236h-0.832l-0.001,2.164l7.396,3.666v1.672H26.561zM16.688,18.875v-7.501h-2v7.501H16.688zM27.875,19.875H23.25c-1.104,0-2,0.896-2,2V26.5c0,1.104,0.896,2,2,2h4.625c1.104,0,2-0.896,2-2v-4.625C29.875,20.771,28.979,19.875,27.875,19.875zM8.125,19.875H3.5c-1.104,0-2,0.896-2,2V26.5c0,1.104,0.896,2,2,2h4.625c1.104,0,2-0.896,2-2v-4.625C10.125,20.771,9.229,19.875,8.125,19.875zM13.375,10.375H18c1.104,0,2-0.896,2-2V3.75c0-1.104-0.896-2-2-2h-4.625c-1.104,0-2,0.896-2,2v4.625C11.375,9.479,12.271,10.375,13.375,10.375zM18,19.875h-4.625c-1.104,0-2,0.896-2,2V26.5c0,1.104,0.896,2,2,2H18c1.104,0,2-0.896,2-2v-4.625C20,20.771,19.104,19.875,18,19.875z").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"});
+
+Raphael("menubarPhotos", 20, 16).path("M2.5,4.833v22.334h27V4.833H2.5zM25.25,25.25H6.75V6.75h18.5V25.25zM11.25,14c1.426,0,2.583-1.157,2.583-2.583c0-1.427-1.157-2.583-2.583-2.583c-1.427,0-2.583,1.157-2.583,2.583C8.667,12.843,9.823,14,11.25,14zM24.251,16.25l-4.917-4.917l-6.917,6.917L10.5,16.333l-2.752,2.752v5.165h16.503V16.25z").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"});
+
+Raphael("menubarPlugins", 20, 16).path("M3.739,13.619c0,0,3.516-4.669,5.592-3.642c2.077,1.027-0.414,2.795,1.598,3.719c2.011,0.924,5.048-0.229,4.376-2.899c-0.672-2.67-1.866-0.776-2.798-2.208c-0.934-1.432,4.586-4.59,4.586-4.59s3.361,6.651,4.316,4.911c1.157-2.105,3.193-4.265,5.305-1.025c0,0,1.814,2.412,0.246,3.434s-2.917,0.443-3.506,1.553c-0.586,1.112,3.784,4.093,3.784,4.093s-2.987,4.81-4.926,3.548c-1.939-1.262,0.356-3.364-2.599-3.989c-1.288-0.23-3.438,0.538-3.818,2.34c-0.13,2.709,1.604,2.016,2.797,3.475c1.191,1.457-4.484,4.522-4.484,4.522s-1.584-3.923-3.811-4.657c-2.227-0.735-0.893,2.135-2.917,2.531c-2.024,0.396-4.816-2.399-3.46-4.789c1.358-2.391,3.275-0.044,3.441-1.951C7.629,16.087,3.739,13.619,3.739,13.619z").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"});
+
+Raphael("menubarTools", 20, 16).path("M26.834,14.693c1.816-2.088,2.181-4.938,1.193-7.334l-3.646,4.252l-3.594-0.699L19.596,7.45l3.637-4.242c-2.502-0.63-5.258,0.13-7.066,2.21c-1.907,2.193-2.219,5.229-1.039,7.693L5.624,24.04c-1.011,1.162-0.888,2.924,0.274,3.935c1.162,1.01,2.924,0.888,3.935-0.274l9.493-10.918C21.939,17.625,24.918,16.896,26.834,14.693z").scale(0.5, 0.5, 0, 0).attr({fill: "#464646", stroke: "none"});
+
+Raphael("menubarConfiguration", 20, 16).path("M26.974,16.514l3.765-1.991c-0.074-0.738-0.217-1.454-0.396-2.157l-4.182-0.579c-0.362-0.872-0.84-1.681-1.402-2.423l1.594-3.921c-0.524-0.511-1.09-0.977-1.686-1.406l-3.551,2.229c-0.833-0.438-1.73-0.77-2.672-0.984l-1.283-3.976c-0.364-0.027-0.728-0.056-1.099-0.056s-0.734,0.028-1.099,0.056l-1.271,3.941c-0.967,0.207-1.884,0.543-2.738,0.986L7.458,4.037C6.863,4.466,6.297,4.932,5.773,5.443l1.55,3.812c-0.604,0.775-1.11,1.629-1.49,2.55l-4.05,0.56c-0.178,0.703-0.322,1.418-0.395,2.157l3.635,1.923c0.041,1.013,0.209,1.994,0.506,2.918l-2.742,3.032c0.319,0.661,0.674,1.303,1.085,1.905l4.037-0.867c0.662,0.72,1.416,1.351,2.248,1.873l-0.153,4.131c0.663,0.299,1.352,0.549,2.062,0.749l2.554-3.283C15.073,26.961,15.532,27,16,27c0.507,0,1.003-0.046,1.491-0.113l2.567,3.301c0.711-0.2,1.399-0.45,2.062-0.749l-0.156-4.205c0.793-0.513,1.512-1.127,2.146-1.821l4.142,0.889c0.411-0.602,0.766-1.243,1.085-1.905l-2.831-3.131C26.778,18.391,26.93,17.467,26.974,16.514zM20.717,21.297l-1.785,1.162l-1.098-1.687c-0.571,0.22-1.186,0.353-1.834,0.353c-2.831,0-5.125-2.295-5.125-5.125c0-2.831,2.294-5.125,5.125-5.125c2.83,0,5.125,2.294,5.125,5.125c0,1.414-0.573,2.693-1.499,3.621L20.717,21.297z").scale(0.5, 0.5, 0, 0).attr({fill: "#464646", stroke: "none"});
+/*
+Raphael("menubarUsers", 20, 16).path("").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"});
+*/
+});
+{/literal}{/footer_script}
+
 <div id="menubar">
   <div id="adminHome"><a href="{$U_ADMIN}">{'Administration Home'|@translate}</a></div>
   <dl class="first">
-    <dt class="rdion"><span>{'Photos'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarPhotos">&nbsp;{'Photos'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
         <li><a href="{$U_ADD_PHOTOS}">{'Add'|@translate}</a></li>
@@ -25,7 +45,7 @@ jQuery(document).ready(function(){ldelim}
     </dd>
   </dl>
   <dl>
-    <dt class="rdion"><span>{'Albums'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarAlbums">&nbsp;{'Albums'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
         <li><a href="{$U_CATEGORIES}">{'Manage'|@translate}</a></li>
@@ -36,7 +56,7 @@ jQuery(document).ready(function(){ldelim}
     </dd>
   </dl>
   <dl>
-    <dt class="rdion"><span>{'Users'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarUsers">&nbsp;{'Users'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
         <li><a href="{$U_USERS}">{'Manage'|@translate}</a></li>
@@ -46,7 +66,7 @@ jQuery(document).ready(function(){ldelim}
     </dd>
   </dl>
   <dl>
-    <dt class="rdion"><span>{'Plugins'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarPlugins">&nbsp;{'Plugins'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
         <li><a href="{$U_PLUGINS}">{'Manage'|@translate}</a></li>
@@ -62,7 +82,7 @@ jQuery(document).ready(function(){ldelim}
     </dd>
   </dl>
   <dl>
-    <dt class="rdion"><span>{'Tools'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarTools">&nbsp;{'Tools'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
 {if $ENABLE_SYNCHRONIZATION}
@@ -79,7 +99,7 @@ jQuery(document).ready(function(){ldelim}
     </dd>
   </dl>
   <dl class="last">
-    <dt class="rdion"><span>{'Configuration'|@translate}&nbsp;</span></dt>
+    <dt class="rdion"><span id="menubarConfiguration">&nbsp;{'Configuration'|@translate}&nbsp;</span></dt>
     <dd>
       <ul>
         <li><a href="{$U_CONFIG_GENERAL}">{'Options'|@translate}</a></li>