Skip to content

Commit

Permalink
feature 2575: redesign menubar on clear administration theme
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@plegall
plegall committed Feb 14, 2012
1 parent 45fbfcf commit f5f908a
Show file tree
Hide file tree
Showing 3 changed files with 5,540 additions and 13 deletions.
20 changes: 13 additions & 7 deletions admin/themes/clear/theme.css
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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; }
Expand All @@ -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;
Expand All @@ -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 */
Expand Down Expand Up @@ -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}
32 changes: 26 additions & 6 deletions admin/themes/default/template/admin.tpl
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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>
Expand Down

0 comments on commit f5f908a

Please sign in to comment.