Home›Help›Trac

Changeset 15959


Ignore:
Timestamp:
02/07/12 21:29:48 (4 months ago)
Author:
Alexander Trofimov
Message:

Popups redesign

Location:
trunk
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/inc/classes/BxDolTemplate.php

    r15948 r15959  
    852852            case 'popup_loading': 
    853853                bx_import('BxTemplFunctions'); 
    854                 $sRet = '<div id="bx-popup-loading" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block bx-popup-ajax-content"></div>') . '</div>'; 
     854                $sRet = '<div id="bx-popup-loading" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-popup-content-wrapped"></div>') . '</div>'; 
    855855                break; 
    856856            case 'main_div_width': 

  • trunk/inc/design.inc.php

    r15942 r15959  
    148148} 
    149149 
    150 function PopupBox($sName, $sTitle, $sContent, $aActions = array(), $isHiddenByDefault = false) { 
    151     bx_import('BxTemplFunctions'); 
    152     return BxTemplFunctions::getInstance()->popupBox($sName, $sTitle, $sContent, $aActions, $isHiddenByDefault); 
     150function PopupBox($sName, $sTitle, $sContent, $isHiddenByDefault = false) { 
     151    bx_import('BxTemplFunctions'); 
     152    return BxTemplFunctions::getInstance()->popupBox($sName, $sTitle, $sContent, $isHiddenByDefault); 
    153153} 
    154154 

  • trunk/inc/js/jquery.dolPopup.js

    r15946 r15959  
    167167            return; 
    168168 
     169        if ('undefined' == typeof(options.container)) 
     170            options.container = '.bx-popup-content-wrapped'; 
     171 
    169172        var bx_menu_on = function (e, b) { 
    170173            var li = $(e).parents('li:first');    
    … …  
    222225 
    223226                $('body').append('<div id="bx-popup-ajax-wrapper-' + id + '" style="display:none;">' + $('#bx-popup-loading').html() + '</div>'); 
    224                 bx_loading_content($('#bx-popup-ajax-wrapper-' + id + ' .bx-popup-ajax-content'), true, true); 
    225                 console.log('iswin:' + $.isWindow(e[0]) + " / "); 
    226                 console.log(e); 
     227                bx_loading_content($('#bx-popup-ajax-wrapper-' + id + ' .bx-popup-content-wrapped'), true, true); 
     228 
    227229                $('#bx-popup-ajax-wrapper-' + id).dolPopup({ 
    228230                    pointer: $.isWindow(e[0]) ? false : {el:e, align:'center'}, 
    … …  
    233235                }); 
    234236 
    235                 $('#bx-popup-ajax-wrapper-' + id + ' .bx-popup-ajax-content').load(sUrlRoot + options.url, function () {                     
     237                $('#bx-popup-ajax-wrapper-' + id).find(options.container).load(sUrlRoot + options.url, function () {                     
    236238                    $('#bx-popup-ajax-wrapper-' + id)._dolPopupSetPosition({ 
    237239                        pointer: $.isWindow(e[0]) ? false : {el:e, align:'center'} 
    … …  
    272274                    at: o.pointer.align + ' bottom', 
    273275                    collision: 'flip none', 
    274                     offset: parseInt(aOffset[0]) + ' ' + parseInt(aOffset[1]) 
     276                    offset: parseInt(aOffset[0]) + ' ' + parseInt(aOffset[1] - 0) 
    275277                }); 
    276278 
    … …  
    279281                    my: 'center top', 
    280282                    at: 'center bottom', 
    281                     offset: (parseInt(aOffsetPointer[0]) + parseInt(aOffsetPointer[0])) + ' ' + (parseInt(aOffsetPointer[1]) + parseInt(aOffset[1])) 
     283                    offset: (parseInt(aOffsetPointer[0]) + parseInt(aOffsetPointer[0])) + ' ' + (parseInt(aOffsetPointer[1]) + parseInt(aOffset[1]) + 0) 
    282284                });  
    283285 

  • trunk/samples/popup.php

    r15946 r15959  
    4242     
    4343    // transBox 
    44     echo '<div id="bx-sample-popup-transbox" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block">transBox</div>') . '</div>'; 
     44    echo '<div id="bx-sample-popup-transbox" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding">transBox</div>') . '</div>'; 
    4545    echo '<button class="bx-btn" onclick="$(\'#bx-sample-popup-transbox\').dolPopup()">transBox</button>'; 
    4646 
    4747    // transBox AJAX 
    48     echo '<button class="bx-btn bx-def-margin-left" onclick="$(window).dolPopupAjax({url: \'samples/popup.php\'})">transBox AJAX</button>'; 
     48    echo '<button class="bx-btn bx-def-margin-left" onclick="$(window).dolPopupAjax({url: \'samples/popup.php?_t=a'.time().'\'})">transBox AJAX</button>'; 
    4949 
    5050    // popupBox 
    51     echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box', 'popupBox', 'popupBox content', array( 
    52         array('name' => 'one', 'title' => 'One', 'onclick' => "alert('one');"), 
    53         array('name' => 'two', 'title' => 'Two', 'onclick' => "alert('two');"), 
    54         array('name' => 'three', 'title' => 'Three', 'onclick' => "alert('three');"), 
    55     ), true); 
     51    echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box', 'popupBox', 'popupBox content', true); 
    5652    echo '<button class="bx-btn bx-def-margin-left" onclick="$(\'#bx-sample-popup-box\').dolPopup()">popupBox</button>'; 
    5753 
    5854    // popupBox without fog 
    59     echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-without-fog', 'popupBox', 'popupBox without fog content', array(), true); 
     55    echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-without-fog', 'popupBox', 'popupBox without fog content', true); 
    6056    echo '<button class="bx-btn bx-def-margin-left" onclick="$(\'#bx-sample-popup-box-without-fog\').dolPopup({fog:0})">popupBox without fog</button>'; 
    6157 
    … …  
    6460 
    6561    // transBox with pointer 
    66     echo '<div id="bx-sample-popup-transbox-with-pointer" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding bx-def-color-bg-block">transBox with pointer</div>') . '</div>'; 
     62    echo '<div id="bx-sample-popup-transbox-with-pointer" style="display:none;">' . BxTemplFunctions::getInstance()->transBox('<div class="bx-def-padding">transBox with pointer</div>') . '</div>'; 
    6763    echo '<button class="bx-btn" onclick="$(\'#bx-sample-popup-transbox-with-pointer\').dolPopup({pointer:{el:$(this)}})">transBox with pointer</button>'; 
    6864 
    6965    // popupBox with pointer 
    70     echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-with-pointer', 'popupBox', 'popupBox with pointer content', array(), true); 
     66    echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-with-pointer', 'popupBox', 'popupBox with pointer content', true); 
    7167    echo '<button class="bx-btn bx-def-margin-left" onclick="$(\'#bx-sample-popup-box-with-pointer\').dolPopup({pointer:{el:$(this)}})">popupBox with pointer</button>'; 
    7268 
    7369    // popupBox with pointer AJAX 
    74     echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-with-pointer', 'popupBox', 'popupBox with pointer AJAX', array(), true); 
    75     echo '<button class="bx-btn bx-def-margin-left" onclick="$(this).dolPopupAjax({url: \'samples/popup.php\'})">popupBox with pointer AJAX</button>'; 
     70    echo BxTemplFunctions::getInstance()->popupBox('bx-sample-popup-box-with-pointer', 'popupBox', 'popupBox with pointer AJAX', true); 
     71    echo '<button class="bx-btn bx-def-margin-left" onclick="$(this).dolPopupAjax({url: \'samples/popup.php?_t=b'.time().'\'})">popupBox with pointer AJAX</button>'; 
    7672 
    7773    echo '<div class="bx-clear"></div>'; 

  • trunk/studio/templates/base/css/builder_page.css

    r15945 r15959  
    7777 
    7878/*--- Add Block popups style ---*/ 
    79 div#adm-bp-create-block-popup div.bx-def-popup-width { 
     79div#adm-bp-create-block-popup div.bx-popup-width { 
    8080    width: 620px; 
    8181} 
    82 div#adm-bp-create-block-popup div.bx-db-content { 
     82div#adm-bp-create-block-popup div.bx-popup-content { 
    8383    padding-left: 0px; 
    8484    padding-right: 0px;  
    … …  
    122122 
    123123/*--- Page Settings popups style ---*/ 
    124 div#adm-bp-edit-popup div.bx-def-popup-width { 
     124div#adm-bp-edit-popup div.bx-popup-width { 
    125125    width: 560px; 
    126126} 
    127 div#adm-bp-edit-popup div.bx-db-content { 
     127div#adm-bp-edit-popup div.bx-popup-content { 
    128128    padding-left: 0px; 
    129129    padding-right: 0px;  

  • trunk/studio/templates/base/css/default.css

    r15942 r15959  
    22.bx-def-page-margin { 
    33    margin:0 auto 0 auto; 
    4 } 
    5  
    6 /* popup */ 
    7 .bx-def-popup-width { 
    8     width: 500px; 
    94} 
    105 

  • trunk/studio/templates/base/login_form.html

    r15791 r15959  
    1 <div class="bx-std-login-form bx-def-padding-sec bx-def-color-bg-block"> 
     1<div class="bx-std-login-form bx-def-padding-sec"> 
    22    <form class="bx-std-login-form" action="__action_url__" method="post" onsubmit="javascript:oBxDolStudioLogin.validate(this); return false;"> 
    33        <input type="hidden" name="relocate" value="__relocate_url__" /> 

  • trunk/templates/base/css/common.css

    r15950 r15959  
    3131} 
    3232 
    33 .bx-popup .bx-db-header { 
    34     color: #ffffff; 
    35     text-shadow: #000 0px 1px 2px; 
    36  
    37     border-bottom: 1px solid #383d66; 
    38     /*border-top: 1px solid #666;*/ 
     33.bx-db-title { 
     34    float:left; 
     35} 
     36 
     37.bx-db-content { 
     38 
     39} 
     40 
     41.bx-db-menu { 
     42    line-height:40px; 
     43    float: right; 
     44} 
     45 
     46.bx-db-menu-tab { 
     47    float: left; 
     48    margin-left:5px; 
     49} 
     50 
     51.bx-db-menu-tab-active { 
     52    text-decoration:underline; 
     53} 
     54 
     55.bx-db-menu-tab-btn { 
     56    padding-top:20px; 
     57} 
     58 
     59/* --------------- popup boxes */ 
     60 
     61.bx-popup-width { 
     62    width: 500px; 
     63} 
     64 
     65.bx-popup-border { 
     66    border:1px solid #383d66; 
     67} 
     68 
     69.bx-popup-color-bg { 
     70    background-color:#fff; 
     71} 
     72 
     73.bx-popup {     
     74    overflow:hidden; 
     75 
     76    -moz-box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 10px 25px 0px rgba(33, 33, 33, 0.5); 
     77    -webkit-box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 10px 25px 0px rgba(33, 33, 33, 0.5); 
     78    box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 10px 25px 0px rgba(33, 33, 33, 0.5); 
     79} 
     80 
     81.bx-popup-header { 
     82    position:relative; 
     83 
     84    border-bottom: 2px solid #383d66; 
    3985 
    4086    background-image: url(../images/bg-toolbar.png); 
    4187    background-repeat: repeat-x; 
    4288    background-color:#0764a7; 
    43 /* 
    44     -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8); 
    45     -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8); 
    46     box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);  
    47 */ 
    48 } 
    49  
    50 .bx-db-title { 
    51     float:left; 
    52 } 
    53  
    54 .bx-db-content { 
    55  
    56 } 
    57  
    58 .bx-db-menu { 
    59     line-height:40px; 
    60     float: right; 
    61 } 
    62  
    63 .bx-db-menu-tab { 
    64     float: left; 
    65     margin-left:5px; 
    66 } 
    67  
    68 .bx-db-menu-tab-active { 
    69     text-decoration:underline; 
    70 } 
    71  
    72 .bx-db-menu-tab-btn { 
    73     padding-top:20px; 
    74 } 
    75  
    76 /* --------------- popup boxes */ 
    77  
    78 .bx-popup {     
    79     overflow:hidden; 
    80  
    81     -moz-box-shadow:0px 0px 10px 0px rgba(128, 128, 128, 0.3), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
    82     -webkit-box-shadow:0px 0px 10px 0px rgba(128, 128, 128, 0.3), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
    83     box-shadow:0px 0px 10px 0px rgba(128, 128, 128, 0.3), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
     89} 
     90 
     91.bx-popup-header .bx-db-menu-tab-btn { 
     92    padding-top:16px; 
     93} 
     94 
     95.bx-popup-header h2 { 
     96    margin:0; 
     97    color: #ffffff; 
     98    text-shadow: #000 0px 1px 2px; 
     99    text-align:center; 
    84100} 
    85101 
    … …  
    87103    display:none; 
    88104    position:relative; 
     105    top:10px; 
    89106    width:13px; 
    90107    height:7px; 
    … …  
    97114    overflow:hidden; 
    98115    font-size:1px;  
    99 } 
    100  
    101 .bx-popup-box-pointer > .i0 {top:0px; left:6px; width:0px; } 
    102 .bx-popup-box-pointer > .i1 {top:1px; left:5px; width:1px; } 
    103 .bx-popup-box-pointer > .i2 {top:2px; left:4px; width:3px; } 
    104 .bx-popup-box-pointer > .i3 {top:3px; left:3px; width:5px; } 
    105 .bx-popup-box-pointer > .i4 {top:4px; left:2px; width:7px; } 
    106 .bx-popup-box-pointer > .i5 {top:5px; left:1px; width:9px; } 
    107 .bx-popup-box-pointer > .i6 {top:6px; left:0px; width:11px; } 
     116    background-color:#383d66;     
     117} 
     118 
     119.bx-popup-box-pointer > .i0 {top:0px; left:6px; width:0px; border-left:1px solid rgba(255, 255, 255, 0.2); } 
     120.bx-popup-box-pointer > .i1 {top:1px; left:5px; width:1px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2); } 
     121.bx-popup-box-pointer > .i2 {top:2px; left:4px; width:3px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);} 
     122.bx-popup-box-pointer > .i3 {top:3px; left:3px; width:5px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);} 
     123.bx-popup-box-pointer > .i4 {top:4px; left:2px; width:7px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);} 
     124.bx-popup-box-pointer > .i5 {top:5px; left:1px; width:9px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);} 
     125.bx-popup-box-pointer > .i6 {top:6px; left:0px; width:11px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);} 
    108126 
    109127/* --------------- message box */ 
    … …  
    141159    padding:10px 10px; 
    142160 
    143     background-color:rgb(128, 169, 213); 
     161    background-color:rgb(148, 189, 233); 
    144162    background-color:rgba(128, 169, 213, 0.5); 
    145163 

  • trunk/templates/base/css/default.css

    r15942 r15959  
    11 
    2 /* popup */ 
    3 .bx-def-popup-width { 
    4     width: 500px; 
    5 } 
    62 
    73/* margins */ 

  • trunk/templates/base/css/menu.css

    r15946 r15959  
    4141 
    4242.bx-menu-ver li { 
    43     margin-top:5px; 
     43     
    4444} 
    4545 

  • trunk/templates/base/menu_vertical.html

    r15865 r15959  
    11<ul class="bx-menu-ver"> 
    22    <bx_repeat:menu_items> 
    3         <li class="__class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li> 
     3        <li class="bx-def-margin-sec-top __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li> 
    44    </bx_repeat:menu_items> 
    55    <div class="bx-clear"></div> 

  • trunk/templates/base/popup_box.html

    r15942 r15959  
    11<div id="__id__" class="bx-popup-wrapper" style="__wrapper_style__"> 
    22    <div class="bx-popup-box-pointer"> 
    3         <i class="i0 bx-def-color-bg-block">&#160;</i> 
    4         <i class="i1 bx-def-color-bg-block">&#160;</i> 
    5         <i class="i2 bx-def-color-bg-block">&#160;</i> 
    6         <i class="i3 bx-def-color-bg-block">&#160;</i> 
    7         <i class="i4 bx-def-color-bg-block">&#160;</i> 
    8         <i class="i5 bx-def-color-bg-block">&#160;</i> 
    9         <i class="i6 bx-def-color-bg-block">&#160;</i> 
     3        <i class="i0">&#160;</i> 
     4        <i class="i1">&#160;</i> 
     5        <i class="i2">&#160;</i> 
     6        <i class="i3">&#160;</i> 
     7        <i class="i4">&#160;</i> 
     8        <i class="i5">&#160;</i> 
     9        <i class="i6">&#160;</i> 
    1010    </div> 
    11     <div class="bx-popup bx-popup-box bx-db-container bx-def-popup-width bx-def-color-bg-block bx-def-round-corners"> 
    12         <div class="bx-db-header"> 
    13             <div class="bx-db-title bx-def-padding-left"><h2>__title__</h2></div> 
    14             __buttons__ 
    15             <div class="bx-clear"></div> 
     11    <div class="bx-popup bx-popup-box bx-popup-width bx-popup-color-bg bx-popup-border bx-def-round-corners"> 
     12    <div class="bx-def-round-corners" style="overflow:hidden;"> 
     13        <div class="bx-popup-header bx-popup-color-bg bx-def-padding"> 
     14            <h2>__title__</h2> 
    1615        </div> 
    17         <div class="bx-db-content bx-def-padding">__content__</div> 
     16        <div class="bx-popup-content bx-def-padding">__content__</div> 
     17    </div> 
    1818    </div> 
    1919</div> 

  • trunk/templates/base/popup_trans.html

    r15942 r15959  
    11<div class="bx-popup-wrapper"> 
    22    <div class="bx-popup-box-pointer"> 
    3         <i class="i0 bx-def-color-bg-block">&#160;</i> 
    4         <i class="i1 bx-def-color-bg-block">&#160;</i> 
    5         <i class="i2 bx-def-color-bg-block">&#160;</i> 
    6         <i class="i3 bx-def-color-bg-block">&#160;</i> 
    7         <i class="i4 bx-def-color-bg-block">&#160;</i> 
    8         <i class="i5 bx-def-color-bg-block">&#160;</i> 
    9         <i class="i6 bx-def-color-bg-block">&#160;</i> 
     3        <i class="i0">&#160;</i> 
     4        <i class="i1">&#160;</i> 
     5        <i class="i2">&#160;</i> 
     6        <i class="i3">&#160;</i> 
     7        <i class="i4">&#160;</i> 
     8        <i class="i5">&#160;</i> 
     9        <i class="i6">&#160;</i> 
    1010    </div> 
    11     <div class="bx-popup bx-popup-trans bx-def-round-corners"> 
    12         __content__ 
     11    <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg bx-def-round-corners"> 
     12        <div class="bx-popup-content" style="">__content__</div> 
    1313    </div> 
    1414</div> 

  • trunk/templates/base/scripts/BxBaseFunctions.php

    r15942 r15959  
    177177 
    178178    /** 
    179      * Get standard popup box. 
     179     * Get standard popup box with title. 
    180180     * 
    181181     * @param string $sTitle - translated title 
    182182     * @param string $sContent - content of the box 
    183      * @param array $aActions - an array of actions. See an example below. 
    184      * @return string HTML of Standard Popup Box 
    185      * 
    186      * @see Example of actions 
    187      *      $aActions = array( 
    188      *          'a1' => array('href' => 'javascript:void(0)', 'onclick' => 'javascript: changeType(this)', 'class' => 'wall-ptype-ctl', 'icon' => 'post_text.png', 'title' => _t('_title_a1'), 'active' => 1), 
    189      *          'a2' => array('href' => 'javascript:void(0)', 'onclick' => 'javascript: changeType(this)', 'class' => 'wall-ptype-ctl', 'icon' => 'post_text.png', 'title' => _t('_title_a2')) 
    190      *      ); 
    191      */ 
    192     function popupBox($sName, $sTitle, $sContent, $mixedMenu = false, $isHiddenByDefault = false) { 
     183     * @return HTML string 
     184     */ 
     185    function popupBox($sName, $sTitle, $sContent, $isHiddenByDefault = false) { 
    193186 
    194187        $iId = !empty($sName) ? $sName : mktime(); 
    … …  
    198191            'wrapper_style' => $isHiddenByDefault ? 'display:none;' : '', 
    199192            'title' => $sTitle, 
    200             'buttons' => $this->designBoxMenu ($mixedMenu, array ( 
    201                 array ('menu' => 1), 
    202                 array ('icon' => 'cross-button.png', 'class' => 'bx-popup-element-close'), 
    203             )), 
    204193            'content' => $sContent 
    205194        )); 
    206195    } 
    207196 
    208     function transBox($content, $isPlaceInCenter = false) { 
     197    /** 
     198     * Get popup box without title. 
     199     * 
     200     * @param string $sContent - content of the box 
     201     * @return HTML string 
     202     */ 
     203    function transBox($sContent, $isPlaceInCenter = false) { 
    209204        return 
    210205            ($isPlaceInCenter ? '<div class="login_ajax_wrap">' : '') . 
    211                 $this->_oTemplate->parseHtmlByName('popup_trans.html', array('content' => $content)) . 
     206                $this->_oTemplate->parseHtmlByName('popup_trans.html', array('content' => $sContent)) . 
    212207            ($isPlaceInCenter ? '</div>' : ''); 
    213208    } 
Note: See TracChangeset for help on using the changeset viewer.
 
 

Site Search

Market

Notes

Websites

About BoonEx• Contacts• © BoonEx (ACN 127966581)