admin ux enhancement

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12384 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
nagoon97 2012-12-12 02:29:03 +00:00
parent 8327266214
commit 163c1c0e64
2 changed files with 123 additions and 27 deletions

View file

@ -271,9 +271,9 @@ body>.x{max-width:none !important}
#layout li ul._edit_menu {display:none}
#layout li.selected ul._edit_menu {display:block}
#layout .x_btn-group{border-top:1px solid #ddd;padding:10px 0}
#layout .list{position:relative}
#layout .mask{display:none;position:absolute;width:100%;height:100%;left:0;top:0;background:#fff;opacity:.5;filter:alpha(opacity=50);z-index:99}
#layout .disabled>.mask{display:block;cursor:not-allowed}
#layout .list, #skin .list{position:relative}
#layout .mask, #skin .mask{display:none;position:absolute;width:100%;height:100%;left:0;top:0;background:#fff;opacity:.5;filter:alpha(opacity=50);z-index:99}
#layout .disabled>.mask, #skin .disabled>.mask{display:block;cursor:not-allowed}
/* Message Box */
#msgBox{width:600px;margin-left:-300px}
#msgBox._small{width:400px;margin-left:-200px}
@ -281,6 +281,9 @@ body>.x{max-width:none !important}
#msgBox._type_alert ._cancel{display:none}
#msgBox._nobody .x_modal-footer{border-top:0}
/* Divide local/global settings view */
._siteDesign .siteMapUI {display:none;}
._siteMap .siteDesignUI {display:none;}
._siteDesign #design ._item,
._siteDesign #design .x_close,
._siteDesign #skin ul ul,

View file

@ -17,7 +17,7 @@
</div>
<!--@if($act == 'dispMenuAdminSiteMap')-->
<div id="site" style="word-wrap:normal">
<div id="site" class="_siteMap" style="word-wrap:normal">
<!--@end-->
<!--@if($act == 'dispMenuAdminSiteDesign')-->
@ -386,7 +386,7 @@
<li><a href="#skin" data-admin-show="#skin" data-param='{ "moduleType" : "${ModuleType}"}'>${ModuleTypeTitle} [<span class="themeName _skinTitle">${SkinTitle}</span>] <i class="x_icon-circle-arrow-right"></i></a></li>
</script>
</ul>
<div class="btnBoth">
<div class="btnBoth siteDesignUI">
<button type="reset" class="x_btn x_pull-left _btn_cancel">{$lang->cmd_cancel}</button>
<button type="button" class="x_btn x_btn-primary x_pull-right _btn_save">
<span class="langDesktop">{$lang->desktop_settings}</span>
@ -402,19 +402,26 @@
<form action="">
<h1>{$lang->layout}</h1>
<div class="cnt">
<label style="padding-right:40px;white-space:nowrap;cursor:pointer">
<input type="checkbox" class="_chkUseDefaultLayout switch" title="{$lang->use_site_default_layout}"><i></i> {$lang->use_site_default_layout}
<a href="?module=admin&act=dispMenuAdminSiteDesign" class="x_icon-cog _siteDesignSetupLink">{$lang->site_default_layout_settings}</a>
<label style="white-space:nowrap;cursor:pointer;width:100%">
{$lang->use_site_default_layout}<input type="checkbox" class="_chkUseDefaultLayout switch" title="{$lang->use_site_default_layout}"><i style="float:right"></i>
</label>
<div class="list">
<ul class="_layout_list">
<script id="tmpl_layout_list_item_no_layout" type="text/x-jquery-tmpl">
<li class="${Selected} _layoutItem">
<label>
<input type="radio" name="layout_item" title="{$lang->no_use_layout}" class="switch"><i></i> {$lang->no_use_layout}
<input type="radio" name="layout_item" title="{$lang->no_use_layout}"><i></i> {$lang->no_use_layout}
</label>
</li>
</script>
<script id="tmpl_layout_list_item_add_new" type="text/x-jquery-tmpl">
<li data-admin-show="#downloadLayout">
<label>+Add new</label>
<button type="button" class="item _btnScreenshot">
<img src="./modules/layout/tpl/img/noThumbnail.png" class="_thumbnail">
</button>
</li>
</script>
<script id="tmpl_layout_list_item" type="text/x-jquery-tmpl">
<li class="${Selected} _layoutItem">
<label><input type="radio" name="layout_item" title="${Title}"> ${Title}</label>
@ -432,7 +439,12 @@
</ul>
<i class="mask"></i>
</div>
<!--
<a href="#downloadLayout" data-admin-show="#downloadLayout" class="x_btn x_btn-link" style="position:absolute;right:5px;bottom:7px;color:#000"><i class="x_icon-plus-sign"></i> {$lang->install_other_layouts}</a>
-->
</div>
<div class="x_btn-group siteMapUI">
<button type="button" class="x_btn x_btn-primary _save" style="margin-top:-27px">{$lang->cmd_save}</button>
</div>
</form>
<button type="button" class="x_close" data-admin-hide="#layout">&times;</button>
@ -499,9 +511,20 @@
<form action="">
<h1>{$lang->skin}</h1>
<div class="cnt">
<label>
<label style="cursor:pointer">
<!--
<input type="checkbox" class="_chkUseDefault" title="{$lang->use_site_default_skin}"> {$lang->use_site_default_skin}
<a href="?module=admin&act=dispMenuAdminSiteDesign" class="x_icon-cog _siteDesignSetupLink">{$lang->site_default_skin_settings}</a>
<label class="" style="white-space: nowrap; cursor: pointer; width: 100%; font-weight: normal;" for="i6">
사이트 기본 레이아웃 사용
<input id="i6" class="_chkUseDefaultLayout switch" type="checkbox" title="사이트 기본 레이아웃 사용">
<i style="float:right"></i>
-->
{$lang->use_site_default_skin}
<input type="checkbox" class="_chkUseDefault switch" title="{$lang->use_site_default_skin}">
<i style="float:right"></i>
</label>
</label>
<div class="list">
<ul class="_list">
@ -528,9 +551,15 @@
</li>
</script>
</ul>
<i class="mask"></i>
<!--
<a href="#downloadSkin" data-admin-show="#downloadSkin" class="x_btn x_btn-link" style="position:absolute;right:5px;bottom:7px;color:#000"><i class="x_icon-plus-sign"></i> {$lang->install_other_skins}</a>
-->
</div>
</div>
<div class="x_btn-group siteMapUI">
<button type="button" class="x_btn x_btn-primary _save" style="margin-top:-5px">{$lang->cmd_save}</button>
</div>
</form>
<button type="button" class="x_close" data-admin-hide="#skin">&times;</button>
</div>
@ -2613,6 +2642,9 @@ jQuery(function($){
return;
}
$._xeAdminVar.htSiteDefaultLayout[sMode].layout_srl = htData.layout_srl;
$._xeAdminVar.htSiteDefaultLayout[sMode].title = htData.title;
var htDesign = $._xeAdminVar.htSelectedMenuDesign = {
sModuleName : "",
sMID : "",
@ -2626,7 +2658,9 @@ jQuery(function($){
//htDesign.sLayoutSrl = htDesign.htLayoutSrl[sMode];
//htDesign.sSkinName = htDesign.htSkin[sMode];
updatePreview(htDesign);
//.//
//updatePreview(htDesign);
updateSelectedDesign(htDesign);
//scrollToRight();
});
@ -2695,8 +2729,8 @@ jQuery(function($){
$('#design').show();
});
});
$('#design ._btn_save').click(function(ev){
$('#layout ._save').click(function(ev){
ev.preventDefault();
var sMode = $._xeAdminVar.htPrevSetting.bMobilePreviewTabOpen?"M":"P";
@ -2706,14 +2740,41 @@ jQuery(function($){
var htDesign = $._xeAdminVar.htSelectedMenuDesign;
var sSkinName = htDesign.htSkin[sMode];
var htParam = {
target_module_srl : htInfo.module_srl,
skin_type : sMode,
layout_srl : htDesign.sLayoutSrl
};
jQuery.exec_json("module.procModuleAdminSetDesignInfo", htParam, function(htData){
if(htData.error !== 0){
alert(htData.message);
return;
}
alert(xe.lang.success_saved);
var sMode = $._xeAdminVar.htPrevSetting.bMobilePreviewTabOpen?"M":"P";
$._xeAdminVar.sOpenDeisgnWith = sMode;
$('#design').show();
});
});
$('#skin ._save').click(function(ev){
ev.preventDefault();
var sMode = $._xeAdminVar.htPrevSetting.bMobilePreviewTabOpen?"M":"P";
var sMenuId = $._xeAdminVar.sSelectedMenuSrl;
var htInfo = htNodeInfo[sMenuId];
var htDesign = $._xeAdminVar.htSelectedMenuDesign;
var sSkinName = htDesign.sSkinName;
var ynSkinFix = (sSkinName === "")?"N":"Y";
var htParam = {
target_module_srl : htInfo.module_srl,
skin_type : sMode,
layout_srl : htDesign.htLayoutSrl[sMode],
//layout_srl : htDesign.htLayoutSrl.P,
//mlayout_srl : htDesign.htLayoutSrl.M,
is_skin_fix : ynSkinFix,
skin_name : sSkinName,
skin_vars : "{}"
@ -2755,7 +2816,8 @@ jQuery(function($){
var sMode = $._xeAdminVar.htPrevSetting.bMobilePreviewTabOpen?"M":"P";
var sLayoutSrl = $._xeAdminVar.htSelectedMenuDesign.htLayoutSrl[sMode];
//var sLayoutSrl = $._xeAdminVar.htSelectedMenuDesign.htLayoutSrl[sMode];
var htDesign = $._xeAdminVar.htSelectedMenuDesign;
var htSkins = {};
for(var sModuleName in $._xeAdminVar.htItemTypes){
if(! $._xeAdminVar.htItemTypes.hasOwnProperty(sModuleName)) continue;
@ -2764,11 +2826,12 @@ jQuery(function($){
item = $._xeAdminVar.htItemTypes[sModuleName];
sModuleTitle = item.title;
htSkins[sModuleName] = (sMode === "P") ? item.default_skin : item.default_mskin;
htSkins[sModuleName] = (sMode === "P") ? item.defaultSkin.skin : item.defaultMobileSkin.skin;
}
var htParam = {
site_srl : 0,
layout_srl : sLayoutSrl?sLayoutSrl:"0",
layout_srl : htDesign.sLayoutSrl?htDesign.sLayoutSrl:"0",
target_type : sMode,
module_skin : $.stringify(htSkins)
};
@ -2919,8 +2982,18 @@ jQuery(function($){
}
updateLayoutListDisplayStatus();
});
$('input[type=checkbox].switch').change(function(ev){
var $this = $(this);
if($this.is(':checked')){
$this.attr('checked','checked');
} else {
$this.removeAttr('checked');
}
});
$("#tmpl_layout_list_item_no_layout").template( "layoutListItem_nolayout" );
$("#tmpl_layout_list_item").template( "layoutListItem" );
$("#tmpl_layout_list_item_add_new").template( "layoutListItemAddNew" );
$('#layout').on('show', function(ev){
if(this !== ev.target){
return;
@ -3007,6 +3080,10 @@ jQuery(function($){
Selected : sSelected
}).data('LayoutSrl', "0"));
$elItem = $.tmpl("layoutListItemAddNew", {
});
$List.append($elItem);
$._xeAdminVar.htLayoutName = {};
for(var i=0, nLen=htData.layout_list.length; i<nLen; i++){
htInfo = htData.layout_list[i];
@ -3376,7 +3453,8 @@ jQuery(function($){
$ChkBox.removeAttr('checked');
}
updateSkinListDisplayStatus();
//updateSkinListDisplayStatus();
$('#skin .list').show();
});
$('#skin').on('hide', function(ev){
if(this !== ev.target){
@ -3403,12 +3481,18 @@ jQuery(function($){
if($ChkBox.is(':visible') && $ChkBox.attr('checked')){
htDesign.sSkinName = "";
htDesign.sSkinTitle = "";
$('#skin .list').hide();
$('#skin .list').addClass('disabled');
$ChkBox.parent().css('fontWeight','bold');
//$('#skin .list').hide();
//.//
updateSelectedDesign(htDesign);
}else{
$('#skin .list').show();
$('#skin .list').removeClass('disabled');
$ChkBox.parent().css('fontWeight','normal');
//$('#skin .list').show();
}
}
// sType: "P", "M" (PC/Mobile)
@ -3440,7 +3524,8 @@ jQuery(function($){
Selected : sSelected
}).data('SkinName', ""));
*/
//console.log(htDesign.sSkinName);
var sTmpName;
for(var sName in htData.skin_info_list){
if(!htData.skin_info_list.hasOwnProperty(sName)) continue;
@ -3448,7 +3533,8 @@ jQuery(function($){
//console.log(htDesign.sSkinName);
// if nothing is selected, select the first one.
if(htDesign.sSkinName == ""){
sTmpName = htDesign.sSkinName || htDesign.sTmpSkinName;
if(sTmpName == ""){
htDesign.sSkinName = sName;
}
@ -3799,7 +3885,6 @@ jQuery(function($){
$(t).blur();
}, 0);
//.//
$.exec_json("menu.getMenuAdminDetailSetup", {
menu_item_srl : htNodeInfo[$._xeAdminVar.sSelectedMenuSrl].sNodeSrl
}, function(htData){
@ -3825,6 +3910,14 @@ jQuery(function($){
var wHeigh = $(window).height();
$('#site').height(wHeigh - 145).find('>.col').height(wHeigh - 185).find('.cnt').height(wHeigh - 252);
$('#properties, #propertiesRoot, #imgbtn, #layoutSetup, #layoutMarkupSetup, #skinSetup').find('.cnt').height(wHeigh - 222);
<!--@if($act == 'dispMenuAdminSiteMap')-->
$('#design').find('.cnt').height(wHeigh - 222);
<!--@end-->
<!--@if($act == 'dispMenuAdminSiteDesign')-->
$('#layout, #skin').find('.cnt').height(wHeigh - 222);
<!--@end-->
}).resize();
var sPackageSrl = getParameterByName('continue_install_package');