Changeset 13168


Ignore:
Timestamp:
02/15/12 00:55:49 (8 years ago)
Author:
plg
Message:

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.

Location:
trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/themes/clear/theme.css

    r13167 r13168  
    8383.content { 
    8484  border: 1px solid #aaa; 
     85  margin-left:217px; 
     86  margin-top: 7px; 
    8587} 
    8688 
     
    142144/* tabsheets are often used in admin  pages => No specific css files */ 
    143145#tabsheet { width:auto; margin:-1px; margin-right:-6px; padding:0; 
    144 border:1px solid #f9f9f9; border-bottom:1px solid #aaa; background-color:#f9f9f9;} 
     146border:1px solid #f9f9f9; border-bottom:1px solid #aaa; background-color:#f9f9f9;margin-top:-7px;} 
    145147.tabsheet { display:table; white-space:nowrap; padding-left:10px; margin:0; width:auto; 
    146148font-family:verdana,arial,helvetica,sans-serif; font-size:8px; 
     
    165167/* menubar is on all admin pages => No specific css file */ 
    166168#menubar { 
    167   padding:0; width:207px; z-index:99; text-align: left; 
     169  padding:0; width:207px; z-index:99; text-align: left;margin-top:7px; 
     170  margin-left:0; 
    168171} 
    169172 
     
    174177 scrollbar-arrow-color: #0cccc; } 
    175178#menubar dd { margin: 0; padding: 0;} 
    176 #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;} 
    177 #menubar dl.first {border-top:1px solid #aaa;} 
    178 #menubar dl.last {border-bottom:1px solid #aaa;} 
     179#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;} 
     180#menubar dl.first {border-top:none;border-radius:0 6px 0 0;} 
     181#menubar dl.first dt {border-radius:0 6px 0 0;} 
     182#menubar dl.last {border-bottom:1px solid #ddd; border-radius:0 0 6px 0;} 
    179183#menubar dt { background-color: #ddd; margin: 0; display: block; font-weight:bold; 
    180184position:relative; padding: 5px 1px 4px 5px; font-size: 13px; color: #777; } 
     
    182186#menubar li { margin: 0; padding-left:10px; } 
    183187#menubar li A { display:block; } 
    184 #menubar li A:hover { border:none; } 
     188#menubar li A:hover { border:none; color:black;} 
    185189#menubar li:hover {background-color:#dbe8f3;} 
    186190#menubar ul { color: #ccc; margin:0; line-height: 25px; 
    187191  list-style-type: none; list-style-position: inside; padding: 0; } 
    188 #adminHome       {background-color:#ddd;} 
     192#adminHome       {background-color:#ddd;border-radius: 0 6px 6px 0;margin-left:0;margin-bottom:17px;} 
    189193#adminHome:hover {background-color:#d0d0d0;} 
    190194 
     
    289293 
    290294.selectedComment {background-color:#C2F5C2;} 
     295 
     296#pwgMain {padding-left:0} 
  • trunk/admin/themes/default/template/admin.tpl

    r12930 r13168  
    1111{/footer_script} 
    1212 
     13{combine_script id='raphael' load='footer' path='themes/default/js/raphael.js' } 
     14{footer_script require='raphael'}{literal} 
     15jQuery(document).ready(function(){ 
     16  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"}); 
     17 
     18Raphael("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"}); 
     19 
     20Raphael("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"}); 
     21 
     22Raphael("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"}); 
     23 
     24Raphael("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"}); 
     25 
     26Raphael("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"}); 
     27/* 
     28Raphael("menubarUsers", 20, 16).path("").scale(0.6, 0.6, 0, 0).attr({fill: "#464646", stroke: "none"}); 
     29*/ 
     30}); 
     31{/literal}{/footer_script} 
     32 
    1333<div id="menubar"> 
    1434  <div id="adminHome"><a href="{$U_ADMIN}">{'Administration Home'|@translate}</a></div> 
    1535  <dl class="first"> 
    16     <dt class="rdion"><span>{'Photos'|@translate}&nbsp;</span></dt> 
     36    <dt class="rdion"><span id="menubarPhotos">&nbsp;{'Photos'|@translate}&nbsp;</span></dt> 
    1737    <dd> 
    1838      <ul> 
     
    2646  </dl> 
    2747  <dl> 
    28     <dt class="rdion"><span>{'Albums'|@translate}&nbsp;</span></dt> 
     48    <dt class="rdion"><span id="menubarAlbums">&nbsp;{'Albums'|@translate}&nbsp;</span></dt> 
    2949    <dd> 
    3050      <ul> 
     
    3757  </dl> 
    3858  <dl> 
    39     <dt class="rdion"><span>{'Users'|@translate}&nbsp;</span></dt> 
     59    <dt class="rdion"><span id="menubarUsers">&nbsp;{'Users'|@translate}&nbsp;</span></dt> 
    4060    <dd> 
    4161      <ul> 
     
    4767  </dl> 
    4868  <dl> 
    49     <dt class="rdion"><span>{'Plugins'|@translate}&nbsp;</span></dt> 
     69    <dt class="rdion"><span id="menubarPlugins">&nbsp;{'Plugins'|@translate}&nbsp;</span></dt> 
    5070    <dd> 
    5171      <ul> 
     
    6383  </dl> 
    6484  <dl> 
    65     <dt class="rdion"><span>{'Tools'|@translate}&nbsp;</span></dt> 
     85    <dt class="rdion"><span id="menubarTools">&nbsp;{'Tools'|@translate}&nbsp;</span></dt> 
    6686    <dd> 
    6787      <ul> 
     
    80100  </dl> 
    81101  <dl class="last"> 
    82     <dt class="rdion"><span>{'Configuration'|@translate}&nbsp;</span></dt> 
     102    <dt class="rdion"><span id="menubarConfiguration">&nbsp;{'Configuration'|@translate}&nbsp;</span></dt> 
    83103    <dd> 
    84104      <ul> 
Note: See TracChangeset for help on using the changeset viewer.