admin ux enhancement

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12384 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/menu/tpl/css/sitemap.css

@@ -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 .list, #skin .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 .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{display:block;cursor:not-allowed}
+#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,

modules/menu/tpl/sitemap.html

@@ -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">
+				<label style="white-space:nowrap;cursor:pointer;width:100%">
-					<input type="checkbox" class="_chkUseDefaultLayout switch" title="{$lang->use_site_default_layout}"><i></i> {$lang->use_site_default_layout}
+					{$lang->use_site_default_layout}<input type="checkbox" class="_chkUseDefaultLayout switch" title="{$lang->use_site_default_layout}"><i style="float:right"></i>
-					<a href="?module=admin&act=dispMenuAdminSiteDesign" class="x_icon-cog _siteDesignSetupLink">{$lang->site_default_layout_settings}</a>
 				</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');