Changeset 5634 in subversion


Ignore:
Timestamp:
Dec 20, 2011 5:21:12 AM (18 months ago)
Author:
thomasb
Message:

First steps for Larry's address book

Location:
trunk/roundcubemail
Files:
3 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/roundcubemail/program/steps/addressbook/edit.inc

    r5041 r5634  
    177177  global $OUTPUT; 
    178178 
    179   // add ID if not given 
    180   if (!$attrib['id']) 
    181     $attrib['id'] = 'rcmUploadbox'; 
     179  // set defaults 
     180  $attrib += array('id' => 'rcmUploadbox', 'buttons' => 'yes'); 
    182181 
    183182  // find max filesize value 
    … …  
    197196      html::div(null, $input->show()) . 
    198197      html::div('hint', rcube_label(array('name' => 'maxuploadsize', 'vars' => array('size' => $max_filesize)))) . 
    199       html::div('buttons', 
     198      (get_boolean($attrib['buttons']) ? html::div('buttons', 
    200199        $button->show(rcube_label('close'), array('class' => 'button', 'onclick' => "$('#$attrib[id]').hide()")) . ' ' . 
    201200        $button->show(rcube_label('upload'), array('class' => 'button mainaction', 'onclick' => JS_OBJECT_NAME . ".command('upload-photo', this.form)")) 
    202       ) 
     201      ) : '') 
    203202    ) 
    204203  ); 

  • trunk/roundcubemail/skins/larry/addressbook.css

    r5474 r5634  
    1212 * $Id$ 
    1313 */ 
     14 
     15#addressview-left { 
     16        position: absolute; 
     17        top: 0; 
     18        left: 0; 
     19        width: 220px; 
     20        bottom: 0; 
     21} 
     22 
     23#addressview-right { 
     24        position: absolute; 
     25        top: 0; 
     26        left: 232px; 
     27        right: 0; 
     28        bottom: 0; 
     29} 
     30 
     31#addressbooktoolbar { 
     32        position: absolute; 
     33        top: -6px; 
     34        left: 0; 
     35        right: 0; 
     36        height: 40px; 
     37        white-space: nowrap; 
     38} 
     39 
     40#directorylistbox { 
     41        position: absolute; 
     42        top: 42px; 
     43        left: 0; 
     44        width: 100%; 
     45        bottom: 0; 
     46} 
     47 
     48#addresslist { 
     49        position: absolute; 
     50        top: 42px; 
     51        left: 0; 
     52        width: 280px; 
     53        bottom: 0; 
     54} 
     55 
     56#contacts-box { 
     57        position: absolute; 
     58        top: 42px; 
     59        left: 292px; 
     60        right: 0; 
     61        bottom: 0; 
     62} 
     63 
     64#addressview-left #quicksearchbar input { 
     65        width: 156px; 
     66} 
     67 
     68#directorylist li a, 
     69#contacts-table .contact td.name { 
     70        background: url(images/listicons.png) -100px 0 no-repeat; 
     71        overflow: hidden; 
     72        padding-left: 36px; 
     73        text-overflow: ellipsis; 
     74} 
     75 
     76#directorylist li.addressbook a { 
     77        background-position: 6px -766px; 
     78} 
     79 
     80#directorylist li.addressbook.selected a { 
     81        background-position: 6px -791px; 
     82} 
     83 
     84#directorylist li.contactgroup a { 
     85        padding-left: 62px; 
     86        background-position: 32px -1555px; 
     87} 
     88 
     89#directorylist li.contactgroup.selected a { 
     90        background-position: 32px -1579px; 
     91} 
     92 
     93#contacts-table .contact td.name { 
     94        background-position: 6px -1603px; 
     95} 
     96 
     97#contacts-table .contact.selected td.name, 
     98#contacts-table .contact.unfocused td.name { 
     99        background-position: 6px -1627px; 
     100        font-weight: bold; 
     101} 
     102 
     103#contact-frame { 
     104        position: absolute; 
     105        top: 0; 
     106        left: 0; 
     107        right: 0; 
     108        bottom: 28px; 
     109        border: 0; 
     110} 
     111 
     112#headerbuttons { 
     113        position: absolute; 
     114        top: 48px; 
     115        right: 10px; 
     116        width: auto; 
     117        z-index: 10; 
     118} 
     119 
     120#sourcename { 
     121        color: #999; 
     122        font-size: 10px; 
     123        margin: -5px 0 8px 2px; 
     124} 
     125 
     126#contactphoto { 
     127        float: left; 
     128        margin: 0 18px 20px 0; 
     129        width: 112px; 
     130} 
     131 
     132#contactpic { 
     133        width: 112px; 
     134        min-height: 112px; 
     135        background: white; 
     136} 
     137 
     138#contactpic img { 
     139        width: 112px; 
     140} 
     141 
     142#contacthead { 
     143        border: 0; 
     144        margin: 0 20em 1em 0; 
     145        padding: 0; 
     146        line-height: 1.5em; 
     147        font-size: 12px; 
     148} 
     149 
     150#contacthead .names span.namefield, 
     151#contacthead .names input { 
     152        font-size: 140%; 
     153        font-weight: bold; 
     154} 
     155 
     156#contacthead .displayname span.namefield { 
     157        font-size: 120%; 
     158        font-weight: bold; 
     159} 
     160 
     161#contacthead span.nickname:before, 
     162#contacthead span.nickname:after, 
     163#contacthead input.ff_nickname:before, 
     164#contacthead input.ff_nickname:after { 
     165        content: '"'; 
     166} 
     167 
     168#contacthead input { 
     169        margin-right: 6px; 
     170        margin-bottom: 0.2em; 
     171} 
     172 
     173#contacthead .names input, 
     174#contacthead .addnames input { 
     175        width: 180px; 
     176} 
     177 
     178#contacthead input.ff_prefix, 
     179#contacthead input.ff_suffix { 
     180        width: 90px; 
     181} 
     182 
     183a.deletebutton { 
     184        position: relative; 
     185        left: 5px; 
     186        top: -3px; 
     187        display: inline-block; 
     188        width: 24px; 
     189        height: 18px; 
     190        text-decoration: none; 
     191        text-indent: -1000px; 
     192        background: url(images/buttons.png) -7px -337px no-repeat; 
     193} 

  • trunk/roundcubemail/skins/larry/mail.css

    r5632 r5634  
    542542} 
    543543 
    544 #messagelist tr td.flag span.unflagged:hover { 
     544#messagelist tr td.flag span.unflagged:hover, 
     545#messagelist tr td.status span.msgicon:hover { 
    545546        background-position: 0 -1056px; 
    546547} 
    … …  
    549550#messagelist tr td.subject span.unreadchildren { 
    550551        background-position: 0 -1056px; 
    551         margin: 0 4px 0 0; 
     552        margin: 0 1px 0 0; 
     553        width: 24px; 
    552554} 
    553555 
    … …  
    581583#messagelist tr td.status span.status, 
    582584#messagelist tr td.status span.unread, 
    583 #messagelist tr td.subject span.unread { 
     585#messagelist tr td.subject span.unread, 
     586#messagelist tr td.status span.unread:hover { 
    584587        background-position: 0 -1016px; 
     588} 
     589 
     590#messagelist thead tr td.status span.status { 
     591        background-position: -24px -1016px; 
    585592} 
    586593 
    … …  
    11331140        position: absolute; 
    11341141        right: 0; 
    1135         top: 0; 
     1142        top: 1px; 
    11361143        bottom: 0; 
    11371144        width: 240px; 
    11381145        background: #f0f0f0; 
     1146        border-left: 1px solid #ddd; 
    11391147        padding: 8px; 
    11401148        overflow: auto; 
    … …  
    11721180} 
    11731181 
     1182#composebody_toolbargroup { 
     1183        border-bottom: 1px solid #ddd; 
     1184} 
     1185 
     1186 
     1187 

  • trunk/roundcubemail/skins/larry/styles.css

    r5632 r5634  
    3636input[type="password"], 
    3737textarea { 
     38        margin: 0; /* Safari by default adds a margin */ 
    3839        padding: 4px; 
    3940        border: 1px solid #b2b2b2; 
    … …  
    8384        -moz-box-shadow: 0 1px 1px 0 #ccc; 
    8485        text-decoration: none; 
     86        outline: none; 
    8587} 
    8688 
    … …  
    104106} 
    105107 
    106 .formbuttons input.button:hover { 
     108.formbuttons input.button:hover, 
     109.formbuttons input.button:focus { 
    107110        color: #f2f2f2; 
    108111        border-color: #465864; 
    … …  
    177180 
    178181a.button:hover, 
    179 input.button:hover { 
     182input.button:hover, 
     183input.button:focus { 
    180184        border-color: #4fadd5; 
    181185        box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); 
    … …  
    343347        background-position: -7px -397px; 
    344348} 
     349 
     350a.iconlink.delete { 
     351        background-position: -7px -337px; 
     352} 
     353 
    345354 
    346355/*** message bar ***/ 
    … …  
    699708} 
    700709 
     710.boxfooter .listbutton.disabled { 
     711        opacity: 0.4; 
     712} 
     713 
    701714.boxfooter .listbutton .inner { 
    702715        display: inline-block; 
    … …  
    708721 
    709722.boxfooter .listbutton.add .inner { 
    710         background-position: 10px -1210px; 
     723        background-position: 10px -1211px; 
     724} 
     725 
     726.boxfooter .listbutton.delete .inner { 
     727        background-position: 10px -1252px; 
    711728} 
    712729 
    … …  
    759776        left: 0; 
    760777        width: 100%; 
     778        z-index: 100; 
    761779} 
    762780 
    … …  
    893911} 
    894912 
    895 #login-form input.button:hover { 
    896         box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff; 
    897         -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff; 
    898         -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff; 
    899         -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff; 
     913#login-form input.button:hover, 
     914#login-form input.button:focus { 
     915        box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; 
     916        -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; 
     917        -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; 
     918        -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; 
    900919} 
    901920 
    … …  
    9831002        text-overflow: ellipsis; 
    9841003        white-space: nowrap; 
    985         padding: 28px 2px 2px 2px; 
     1004        padding: 28px 2px 0 2px; 
    9861005        text-shadow: 0px 1px 1px #eee; 
    9871006        box-shadow: none; 
    … …  
    10681087.toolbar a.button.spellcheck { 
    10691088        background-position: center -930px; 
     1089} 
     1090 
     1091.toolbar a.button.search { 
     1092        background-position: center -970px; 
     1093} 
     1094 
     1095.toolbar a.button.import { 
     1096        background-position: center -1010px; 
     1097} 
     1098 
     1099.toolbar a.button.export { 
     1100        background-position: center -1050px; 
    10701101} 
    10711102 
    … …  
    12271258.popupdialog .formbuttons { 
    12281259        margin: 20px 0 4px 0; 
     1260} 
     1261 
     1262.ui-dialog .prompt input { 
     1263        display: block; 
     1264        margin: 8px 0; 
    12291265} 
    12301266 
    … …  
    13011337} 
    13021338 
     1339 
     1340/*** fieldset tabs ***/ 
     1341 
     1342.tabsbar { 
     1343        margin-bottom: 10px; 
     1344        padding-top: 15px; 
     1345        height: 27px; 
     1346} 
     1347 
     1348.tabsbar .tablink { 
     1349        padding: 15px 1px 15px 0; 
     1350        background: #f8f8f8; 
     1351        background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); 
     1352        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8)); 
     1353        background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); 
     1354        background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); 
     1355        background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); 
     1356        background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); 
     1357} 
     1358 
     1359.tabsbar .tablink:last-child { 
     1360        background: none; 
     1361} 
     1362 
     1363.tabsbar .tablink:last-child a { 
     1364        border-right: 0; 
     1365} 
     1366 
     1367.tabsbar .tablink a { 
     1368        padding: 15px; 
     1369        color: #999; 
     1370        font-size: 12px; 
     1371        font-weight: bold; 
     1372        text-decoration: none; 
     1373        background: #fff; 
     1374        border-right: 1px solid #fafafa; 
     1375} 
     1376 
     1377.tabsbar .tablink.selected a { 
     1378        color: #004458; 
     1379        background: #fff; 
     1380        background: -moz-linear-gradient(top, #fff 40%, #efefef 100%); 
     1381        background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef)); 
     1382        background: -o-linear-gradient(top, #fff 40%, #efefef 100%); 
     1383        background: -ms-linear-gradient(top, #fff 40%, #efefef 100%); 
     1384        background: linear-gradient(top, #fff 40%, #efefef 100%); 
     1385} 
     1386 
     1387fieldset.tab { 
     1388        border: 0; 
     1389        padding: 0; 
     1390} 
     1391 
     1392 

  • trunk/roundcubemail/skins/larry/templates/compose.html

    r5632 r5634  
    105105<div id="composeoptionsbox"> 
    106106        <span class="composeoption"> 
    107                 <label><roundcube:label name="options" /></label> 
    108                 <a href="#options" id="composeoptionstoggle">&nbsp;</a> 
     107                <label><roundcube:label name="options" /> 
     108                        <a href="#options" id="composeoptionstoggle">&nbsp;</a></label> 
    109109        </span> 
    110110         

  • trunk/roundcubemail/skins/larry/ui.js

    r5632 r5634  
    3535  // export public methods 
    3636  this.init = init; 
     37  this.init_tabs = init_tabs; 
    3738  this.show_popup = show_popup; 
    3839  this.set_searchmod = set_searchmod; 
    … …  
    6970        layout_composeview(); 
    7071 
    71         $('#composeoptionstoggle').click(function(){ 
    72           $(this).toggleClass('enabled'); 
     72        $('#composeoptionstoggle').parent().click(function(){ 
     73          $('#composeoptionstoggle').toggleClass('enabled'); 
    7374          $('#composeoptions').toggle(); 
    7475          layout_composeview(); 
    7576          return false; 
    76         }); 
     77        }).css('cursor', 'pointer'); 
    7778 
    7879        new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', 
    … …  
    108109      } 
    109110    } 
     111    else if (rcmail.env.task == 'addressbook') { 
     112 
     113    } 
     114 
     115    // turn a group of fieldsets into tabs 
     116    $('.tabbed').each(function(idx, elem){ init_tabs(elem); }) 
    110117 
    111118    $(document.body).bind('mouseup', function(e){ 
    … …  
    190197 
    191198    if (window.tinyMCE && tinyMCE.get('composebody')) { 
    192       $('#composebody_tbl').width((w+11)+'px').height('').css('margin-top', '1px'); 
    193       $('#composebody_ifr').width((w+11)+'px').height((h-24)+'px'); 
     199      $('#composebody_tbl').width((w+12)+'px').height('').css('margin-top', '1px'); 
     200      $('#composebody_ifr').width((w+12)+'px').height((h-22)+'px'); 
    194201    } 
    195202    else { 
    … …  
    540547    $('#' + which + '-link').show(); 
    541548    this.resize_compose_body(); 
     549  } 
     550 
     551 
     552  /** 
     553   * Fieldsets-to-tabs converter 
     554   */ 
     555  function init_tabs(elem, current) 
     556  { 
     557    var id = elem.id, 
     558      content = $(elem), 
     559      fs = content.children('fieldset'); 
     560 
     561    if (!fs.length) 
     562      return; 
     563 
     564    if (!id) { 
     565      id = 'rcmtabcontainer'; 
     566      elem.attr('id', id); 
     567    } 
     568 
     569    // first hide not selected tabs 
     570    current = current || 0; 
     571    fs.each(function(idx) { if (idx != current) $(this).hide(); }); 
     572 
     573    // create tabs container 
     574    var tabs = $('<div>').addClass('tabsbar').prependTo(content); 
     575 
     576    // convert fildsets into tabs 
     577    fs.each(function(idx) { 
     578      var tab, a, elm = $(this), legend = elm.children('legend'); 
     579 
     580      // create a tab 
     581      a   = $('<a>').text(legend.text()).attr('href', '#'); 
     582      tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'}) 
     583        .click(function() { show_tab(id, idx); return false }) 
     584 
     585      // remove legend 
     586      legend.remove(); 
     587      // style fieldset 
     588      elm.addClass('tab'); 
     589      // style selected tab 
     590      if (idx == current) 
     591        tab.addClass('selected'); 
     592 
     593      // add the tab to container 
     594      tab.append(a).appendTo(tabs); 
     595    }); 
     596  } 
     597 
     598  function show_tab(id, index) 
     599  { 
     600    var fs = $('#'+id).children('fieldset'); 
     601 
     602    fs.each(function(idx) { 
     603      // Show/hide fieldset (tab content) 
     604      $(this)[index==idx ? 'show' : 'hide'](); 
     605      // Select/unselect tab 
     606      $('#tab'+idx).toggleClass('selected', idx==index); 
     607    }); 
    542608  } 
    543609} 
Note: See TracChangeset for help on using the changeset viewer.