v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기

관리자 모듈에서 2개의 파일을 수정합니다.

1. xe/modules/admin/tpl/_spLnb.content.html 

 <div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>

위 파일을 열면 요것이 전부인데 맨 아래 </div> 바로 윗줄에 아래와 같이 추가합니다.

v1.4 관리자 모듈의 loadSideBar() 함수를 통째로 복구한 내용입니다...^^ 

인스톨된 모듈의 목록과 선택된 모듈을 구하고 목록을 만들어 출력한 후 스크립트를 이용해 접고 펼수 있도록 합니다.

※ 수정된 파일을 첨부하였지만 직접 수정하려는 경우 코드 하이라이트 우측 상단에서 뷰소스(view source) 보기를 클릭하여

추가되는 내용만 복사->붙여넣기 하십시오.

<div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>

<!-- // 여기서부터 -->
{@
    $oModuleModel = &getModel('module');
    $installed_module_list = $oModuleModel->getModulesXmlInfo();

    $installed_modules = $package_modules = array();
    $package_idx = 0;
}
<block loop="$installed_module_list=>$key, $val">
{@
    if($val->category == 'migration') $val->category = 'system';
    if($val->category == 'interlock') $val->category = 'accessory';
    if($val->category == 'statistics') $val->category = 'accessory';

    if($val->module == 'admin' || !$val->admin_index_act) continue;
    // get action information
    $action_spec = $oModuleModel->getModuleActionXml($val->module);
    $actions = array();
    if($action_spec->default_index_act) $actions[] = $action_spec->default_index_act;
    if($action_spec->admin_index_act) $actions[] = $action_spec->admin_index_act;
    if($action_spec->action) foreach($action_spec->action as $k => $v) $actions[] = $k;

    $obj = null;
    $obj->category = $val->category;
    $obj->title = $val->title;
    $obj->description = $val->description;
    $obj->index_act = $val->admin_index_act;
    if(in_array(Context::get('act'), $actions)) $obj->selected = true;
}
<!--@if($val->category == 'package')-->
{@
    if($package_idx == 0) $obj->position = "first";
    else $obj->position = "mid";
    $package_modules[] = $obj;
    $package_idx ++;
    if($obj->selected) $package_selected= 'true';
}
<!--@else-->
{@ $installed_modules[] = $obj;}
<!--@end-->
<!--@if($obj->selected)-->
{@
    $selected_module_category=$val->category;
    $selected_module_info=$val;
}
<!--@end-->
</block> 

<script type="text/javascript">
<!--
function toggleModuleMenu(category) {
    jQuery('#module_'+category).toggleClass('close');
    
    var arr = new Array();
    jQuery('ul.restored_navigation > li').each(function(){
        var o = jQuery(this);
        if(!o.hasClass('close')) return;
        var idx = o.attr('id').replace(/^module_/,'');
        arr.push(idx);
    });
    var expire= new Date();
    expire.setTime(expire.getTime()+(7000*24*3600000));
    xSetCookie('XEAM',arr.join(','),expire,'/');
}
//-->
</script>

<style type="text/css">
.x .restored_navigation_wrapper {position:relative; *zoom:1; margin-top:10px; padding:0; border-bottom:2px solid #CCC;}
.x .restored_navigation {list-style:none; position:relative; *zoom:1; margin:0; padding:0;}
.x .restored_navigation li {list-style:none;}
.x .restored_navigation li.close a.parent {border-bottom:none;}
.x .restored_navigation li.close ul {display:none;}
.x .restored_navigation li ul li a {text-decoration:none;}
.x .restored_navigation li ul li a:hover {font-weight:bold; text-decoration:none;}
.x .restored_navigation li ul li.on a {color:#a33;}
.x .restored_navigation li a.parent {border:none; border-top:1px solid #CCC;}
.x .restored_navigation li.active {border:none; border-bottom:1px solid #CCC;}
</style>

<div class="restored_navigation_wrapper">
    <ul class="restored_navigation">
    {@$_c = explode(',',$_COOKIE['XEAM'])}
        <!--@foreach($lang->module_category_title as $key => $val)-->
        <!--@if($key != 'migration' && $key != 'interlock' && $key != 'statistics')-->

            <!--@if(in_array($key,$_c)&&$key!=$selected_module_category)-->
                {@$_cs = true;}
            <!--@else-->
                {@$_cs = false;}
            <!--@end-->

            <li id="module_{$key}" class="parent <!--@if($_cs)-->close<!--@end--> <!--@if($key==$selected_module_category)-->active<!--@end-->"><a href="#"  onclick="toggleModuleMenu('{$key}'); return false;" class="parent">{$val}</a>
                <ul>
                    <!--@foreach($installed_modules as $k => $v)--><!--@if($v->category == $key)-->
                    <li class="on"|cond="$v->selected"><a href="{getUrl('','module','admin','act',$v->index_act)}" title="{$v->description}">{$v->title}</a></li>
                    <!--@end--><!--@end-->
                </ul>
            </li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>
<!-- // 여기까지 -->
</div>

 
2. xe/modules/admin/tpl/layout.html

 <!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>
<!--@if($parentSrl != 0)-->
<!--#include("./_spLnb.content.html")-->
<!--@end-->
<!--#include("./_spFooter.html")-->

관리자 페이지 레이아웃 템플릿도 별거 없습니다...^^ 요기서 아래처럼 2줄만 지워 줍니다.

 <!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>

<!--#include("./_spLnb.content.html")-->

<!--#include("./_spFooter.html")-->

<!--@if($parentSrl != 0)--> 과 <!--@end--> 만 지운 것이죠.

그러면 아래 그림처럼 관리자 페이지에서 v1.4 때처럼 모듈의 목록이 펼쳐져 보일 것입니다...^^

각각의 모듈마다 조금씩 변경된 내용들은 어쩔수 없지만 [설치된]을 찾지 않아도, [즐겨찾기]를 잘 몰라도

모듈로 곧바로 갈 수 있게 됩니다.

v1.5는 무채색의 매우 단조로운 관리자 페이지를 출력합니다.

다음 1개의 파일을 조금 수정하면 아래 그림과 같이 색감을 더할 수 있습니다.

● ZEROBOARD Style XE Admin Module CSS Setting

xe/modules/admin/tpl/_spHeader.html

{@Context::addHtmlHeader('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />')}

<!-- // 여기서부터 -->
<style type="text/css">
/* ZEROBOARD Style XE Admin Module CSS Setting --- XESCHOOL */

/* common */
body{background: #333}
.x p input,.x textarea{background: #FFF !important;}
.x .header{background:#6F080A !important;}
.x .header .account{background: #000 !important;}
.x .footer{background: #333 !important; border:none !important; padding:1.5em 1em;}
.x .footer p,.x .footer a,.x .footer .cache button{color:#FFF !important;}
.x .body{box-shadow:0 0 10px #aaa; border-radius:0 0 5px 5px;}

/* Setting #1 Simple White --- 심플한 흰색 바탕 
.x .body{background:#FFF !important;}
*/
/* Setting #2 Light gray --- 옅은 회색 바탕 */
.x .body{background:#EFEFEF !important;}
</style>
<!-- // 여기까지 -->

<div class="x">
... 생략...

관리자 템플릿 _spHeader.html 파일을 열고 이번에는 맨 윗줄 상단에 내부 스타일 설정 방법으로 관리자 페이지에서 사용할 CSS를 추가 합니다. 뷰포트(viewport) 설정 바로 다음 줄에 스타일을 추가하고 저장하면 끝... 

저는 개인적으로 옅은 회색바탕이 좋아서 #2번을 씁니다. 하지만 심플한 흰색 바탕을 좋아하시는 분들도 있을 것입니다.

그런 경우 #2 부분을 주석 처리하고 #1번 흰색 바탕 설정의 주석 /* ... */ 을 풀고 사용하시면 됩니다.

※ 위 소스를 조금씩 수정해 보면 나만의 색감을 이용한 관리자 페이지를 만들 수 있습니다...^^

이 방법은 코어의 동작과 운영 내용에 전혀 영향을 주지 않습니다. 

CSS 재정의의 아주 기초적인 원리를 응용한 것입니다...^^

코어 1.5을 사용하시는데 도움이 되시기를 바랍니다...^^

설치된 레이아웃 v1.4 탭메뉴처럼 만들기

v1.5에서 v1.4처럼 레이아웃 탭메뉴를 복원하여 사용하기 위해서는 다음 3개의 파일을 수정합니다.

1. xe/modules/layout/tpl/header.html

...중략 
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
    <p>{$XE_VALIDATOR_MESSAGE}</p>
</div>

<!-- // 설치된 레이아웃 v1.4 탭메뉴처럼 만들기  시작 -->
<style type="text/css">
.tabMenu_layout {position:relative; *zoom:1; margin:0; padding:0;}
.tabMenu_layout:after {content:""; display:block; clear:both;}
.tabMenu_layout li{list-style:none; float:left; margin:0; padding:0; background:#666; border:1px solid #666;}
.tabMenu_layout li a{ float:left; padding:4px 5px 0 5px; height:18px; border:1px solid #ddd; text-decoration:none !important; color:#FFF !important;}
.tabMenu_layout li a:hover,.tabMenu_layout li.on a {background: #FFF; color:#222 !important;}
</style>
<ul class="tabMenu_layout">
    <li class="on"|cond="$act == 'dispLayoutAdminContent'"><a href="{getUrl('act','dispLayoutAdminContent','path','/','type','','layout','','layout_srl','')}">{$lang->layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledList'"><a href="{getUrl('act','dispLayoutAdminInstalledList','path'+
 ','','type','','layout','','layout_srl','')}">{$lang->downloaded_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminMobileContent'"><a href="{getUrl('act','dispLayoutAdminMobileContent','path','','layout_srl','')}">{$lang->mobile_layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledMobileList'"><a href="{getUrl('act','dispLayoutAdminInstalledMobileList','path','','layout_srl','')}">{$lang->mobile_downloaded_list}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminModify'"><a href="{getUrl('act','dispLayoutAdminModify','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_management}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminEdit'"><a href="{getUrl('act','dispLayoutAdminEdit','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_edit}</a></li>
</ul>
<!-- // 끝 -->

header.html 파일을 열어서 맨 하단에 위 내용을 추가합니다. {$XE_VALIDATOR_MESSAGE}를 받는 곳 아래에 추가하는 것입니다. header.html 파일은 레이아웃 모듈의 템플릿 파일들이 항상 include하여 쓰기 때문에 이곳에 추가하면 좋겠네요. 

위 내용을 추가하면 1.5에서 버린 index.html 과 mindex.html 파일을 다시 불러 사용하게 됩니다. 그런데 [삭제]링크와 [생성] 링크에서 문제가 생깁니다. 삭제는 layout_admin.js를 불러오면 되는데, 생성은 방법이 달라졌습니다. 그래서 새로운 레이아웃은  우선 설치된 레이아웃을 1개 선택한 후에 생성해야 합니다. 따라서 index.html 과 mindex.html 파일을 다음과 같이 수정합니다.

2. xe/modules/layout/tpl/index.html

 <!--%import("filter/delete_layout.xml")-->

<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />

...중략...

<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','')}">{$lang->cmd_make}</a></span>
</div> // 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요.-->

맨 윗줄 import문 아래에 [선택된 레이아웃 삭제를 위한 스크립트 추가] 이 부분을 추가하고

맨 아래 [생성] 버튼을 주석처리합니다.

3. xe/modules/layout/tpl/mindex.html

 <!--%import("filter/delete_layout.xml")-->

<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />

...중략...

<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','','layout_type','M')}">{$lang->cmd_make}</a></span>
</div> //모바일 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요. -->

모바일 레이아웃 목록보기 파일에서도 같은 방법으로 스크립트를 추가하고 [생성] 버튼은 주석처리 합니다.

v1.6에서 dispLayoutAdminContent() 와 같은 소스가 없어지지 않는다면 유효하게 작동할 것입니다. 하지만 // deprecated(사용중지됨)라고 적혀있어서 계속 유효할지는 모르겠습니다.

도움이 되시기를 바랍니다...^^

위 내용은 v1.5.1.3 기준으로 수정된 파일을 첨부하였습니다.