/modules/admin/tpl/ UI cleaning.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11860 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-10-24 05:34:02 +00:00
parent 52bfda2a44
commit 0996153dae
5 changed files with 57 additions and 109 deletions

View file

@ -1,10 +1,10 @@
<load target="./js/menu_setup.js" usecdn="true" />
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div class="x_page-header">
<h1>{$lang->admin_setup}</h1>
</div>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<section class="section">
<h1>{$lang->admin_title}</h1>
<form action="./" method="post" enctype="multipart/form-data" class="x_form-horizontal">
@ -38,29 +38,27 @@
</section>
<section class="section">
<h1>{$lang->admin_menu_setup}</h1>
<form id="listForm" action="./" class="adminMap" method="post">
<form id="listForm" action="./" method="post" class="adminMap">
<input type="hidden" name="module" value="admin" />
<input type="hidden" name="act" value="procMenuAdminDeleteItem" />
<input type="hidden" name="menu_srl" value="{$menu_srl}" />
<input type="hidden" name="title" value="{$menu_title}" />
<input type="hidden" name="menu_item_srl" value="" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispAdminSetup')}" />
<div class="adminMenu">
<ul>
<li class="parent" loop="$gnbUrlList=>$key,$value">
<input type="hidden" name="parent_key[]" value="{$value['parent_srl']}" class="_parent_key" />
<input type="hidden" name="item_key[]" value="{$value['node_srl']}" class="_item_key" />
<span>{$value['text']}</span> <span class="side"><a href="#editMenu" class="modalAnchor _add">{$lang->add}</a></span>
<ul cond="is_array($value['list']) && count($value['list'])>0">
<li loop="$value['list']=>$key2,$value2">
<input type="hidden" name="parent_key[]" value="{$value2['parent_srl']}" class="_parent_key" />
<input type="hidden" name="item_key[]" value="{$value2['node_srl']}" class="_item_key" />
<span>{$value2['text']}</span><span class="side"><a href="#delete" class="_child_delete">{$lang->delete}</a></span>
</li>
</ul>
</li>
</ul>
</div>
<ul>
<li class="parent" loop="$gnbUrlList=>$key,$value">
<input type="hidden" name="parent_key[]" value="{$value['parent_srl']}" class="_parent_key" />
<input type="hidden" name="item_key[]" value="{$value['node_srl']}" class="_item_key" />
<span>{$value['text']}</span> <span class="side"><a href="#editMenu" class="modalAnchor _add">{$lang->add}</a></span>
<ul cond="is_array($value['list']) && count($value['list'])>0">
<li loop="$value['list']=>$key2,$value2">
<input type="hidden" name="parent_key[]" value="{$value2['parent_srl']}" class="_parent_key" />
<input type="hidden" name="item_key[]" value="{$value2['node_srl']}" class="_item_key" />
<span>{$value2['text']}</span><span class="side"><a href="#delete" class="_child_delete">{$lang->delete}</a></span>
</li>
</ul>
</li>
</ul>
<div class="x_clearfix btnArea">
<div class="x_pull-left">
<button value="procAdminMenuReset" name="act" type="submit" class="x_btn x_btn-warning">{$lang->cmd_reset}</button>
@ -73,7 +71,7 @@
</section>
<!--// Modal -->
<div class="x_modal" id="editMenu">
<form id="editForm" action="./" class="x_form-horizontal">
<form id="editForm" action="./" class="x_form-horizontal" style="margin:0">
<div class="x_modal-header">
<h3>{$lang->admin_menu_add}</h3>
</div>
@ -83,12 +81,10 @@
<input type="hidden" name="menu_srl" value="{$menu_srl}" />
<input type="hidden" name="parent_srl" value="" />
<div class="x_control-group">
<div class="x_control-group">
<label class="x_control-label" for="menuNameList">{$lang->module}</label>
<div class="x_controls">
<select name="menu_name" id="menuNameList">
</select>
</div>
<label class="x_control-label" for="menuNameList">{$lang->module}</label>
<div class="x_controls">
<select name="menu_name" id="menuNameList" style="width:220px">
</select>
</div>
</div>
</div>
@ -101,65 +97,19 @@
</form>
</div>
<style>
/* Admin Map */
.x .adminMap ul{list-style:none}
.x .adminMap label{cursor:text}
.x .adminMap li li{text-indent:18px}
.x .adminMap li li li{text-indent:36px}
.x .adminMap li li li li{text-indent:54px}
.x .adminMap li li li li li{text-indent:72px}
.x .adminMap li li li li li li{text-indent:90px}
.x .adminMap li li li li li li li{text-indent:108px}
.x .adminMap li li li li li li li li{text-indent:126px}
.x .adminMap li li li li li li li li li{text-indent:144px}
.x .adminMap li li li li li li li li li li{text-indent:162px}
.x .adminMap li li li li li li li li li li li{text-indent:180px}
.x .adminMap li li li li li li li li li li li li{text-indent:198px}
.x .adminMap li *{vertical-align:middle}
.x .adminMap li .moveTo+input{width:200px;border:0;padding:0 .5em}
.x .adminMap li .moveTo+input:hover,
.x .adminMap li .moveTo+input:active,
.x .adminMap li .moveTo+input:focus{border:1px dotted #ccc;overflow:visible}
.x .adminMap .moveTo{position:relative;z-index:2;width:22px;height:32px;padding:32px 0 0 0;margin:0 3px;_margin-top:-1px;overflow:hidden;background:#fff url(../img/iconMoveTo.gif) no-repeat center 0;border:0;cursor:move}
.x .adminMap li.active,
.x .adminMap li.active .moveTo{background-color:#f7f7f7}
.x .adminMap li.active li,
.x .adminMap li.active ul{border-top-color:#f7f7f7}
.x .adminMap li.active .moveTo{background-position:center -32px}
.x .adminMap .vr,
.x .adminMap .hr{display:none;position:absolute;z-index:1;left:14px;border:0px solid #ccc;overflow:hidden}
.x .adminMap .vr{top:-16px;height:100%;border-left-width:1px}
.x .adminMap .hr{top:16px;width:16px;border-top-width:1px}
.x .adminMap li.active .vr,
.x .adminMap li.active li .hr{display:block}
.x .adminMap li li .vr,
.x .adminMap li li li .hr{left:32px}
.x .adminMap li li li .vr,
.x .adminMap li li li li .hr{left:50px}
.x .adminMap li li li li .vr,
.x .adminMap li li li li li .hr{left:68px}
.x .adminMap li li li li li .vr,
.x .adminMap li li li li li li .hr{left:86px}
.x .adminMap li li li li li li .vr,
.x .adminMap li li li li li li li .hr{left:104px}
.x .adminMap li li li li li li li .vr,
.x .adminMap li li li li li li li li .hr{left:122px}
.x .adminMap li li li li li li li li .vr,
.x .adminMap li li li li li li li li li .hr{left:140px}
.x .adminMap li li li li li li li li li .vr,
.x .adminMap li li li li li li li li li li .hr{left:158px}
.x .adminMap li li li li li li li li li li .vr,
.x .adminMap li li li li li li li li li li li .hr{left:176px}
.x .adminMap li li li li li li li li li li li .vr,
.x .adminMap li li li li li li li li li li li li .hr{left:336px}
.x .adminMap .side{padding-top:0 !important;padding-bottom:0 !important;line-height:30px;background:transparent !important}
.x .adminMap .side button{text-indent:0;line-height:1}
.x .adminMap .tgMap{position:absolute;top:12px;right:1em;padding:0 16px 0 0;line-height:16px;background:url(../img/iconArrow.gif) no-repeat right -126px}
.x .adminMap.fold .tgMap{background-position:right -158px}
.x .adminMap.fold .h2{border-bottom-color:#fff;border-radius:5px}
.x .adminMap .placeholder{background:#bbb}
.x .adminMap .draggable,
.x .adminMap .draggable .moveTo{background-color:#ddd}
.x .adminMap .draggable .summary{border-left:1px solid #ccc;padding-left:10px;margin-left:10px;font-size:11px;color:#999}
.x .adminMap a.ms{text-decoration:underline}
.adminMap ul{background:#eee;list-style:none;margin:0;position:relative;border-radius:5px}
.adminMap li{position:relative}
.adminMap li:first-child{border:0 !important}
.adminMap li.parent{padding:0 15px 1px 15px;border-top:1px dotted #fff}
.adminMap li.parent>span{display:block;height:33px;line-height:33px;font-weight:bold}
.adminMap li>ul{background:#fff;border-radius:5px;margin:0 0 10px 0}
.adminMap li li{cursor:move;border-top:1px dotted #ddd}
.adminMap li *{vertical-align:middle}
.adminMap .moveTo{position:relative;z-index:2;width:22px;height:32px;padding:32px 0 0 0;margin:0 3px;_margin-top:-1px;overflow:hidden;background:#fff url({getUrl()}modules/admin/tpl/img/iconMoveTo.gif) no-repeat center 0;border:0;cursor:move}
.adminMap li.active,
.adminMap li.active .moveTo{background-color:#f7f7f7}
.adminMap li.active .moveTo{background-position:center -32px}
.adminMap .side{position:absolute;top:0;right:15px;padding-top:0 !important;padding-bottom:0 !important;line-height:30px;background:transparent !important}
.adminMap .parent>.side{right:30px}
.adminMap .placeholder{background:#000;border-radius:5px}
</style>

View file

@ -22,7 +22,12 @@ body>.x,
/* Bootstrap Override */
.x .x_page-header{padding-bottom:0;border-bottom:2px solid #ddd}
.x .x_page-header>h1{margin-bottom:0;font-size:24px;color:#333}
.x h1,.x h2,.x h3,.x h4,.x h5,.x h6{line-height:1.5;font-weight:600;color:#666}
.x h1,
.x h2,
.x h3,
.x h4,
.x h5,
.x h6{line-height:1.5;font-weight:600;color:#666}
.x h1{font-size:22px}
.x h2{font-size:18px}
.x h3{font-size:14px}
@ -32,7 +37,7 @@ body>.x,
.x [class^="x_icon-"],
.x [class*=" x_icon-"]{text-decoration:none;border:0;padding:0;background-color:transparent;overflow:hidden;font-size:0}
.x .x_close{width:32px;height:32px}
.x .x_alert{ position:relative}
.x .x_alert{position:relative}
.x .x_alert>.x_close,
.x.x_modal>.x_close{position:absolute;top:0;right:0}
.x .x_pagination{height:32px}

View file

@ -22,7 +22,12 @@ body>.x,
/* Bootstrap Override */
.x .x_page-header{padding-bottom:0;border-bottom:2px solid #ddd}
.x .x_page-header>h1{margin-bottom:0;font-size:24px;color:#333}
.x h1,.x h2,.x h3,.x h4,.x h5,.x h6{line-height:1.5;font-weight:600;color:#666}
.x h1,
.x h2,
.x h3,
.x h4,
.x h5,
.x h6{line-height:1.5;font-weight:600;color:#666}
.x h1{font-size:22px}
.x h2{font-size:18px}
.x h3{font-size:14px}
@ -32,7 +37,7 @@ body>.x,
.x [class^="x_icon-"],
.x [class*=" x_icon-"]{text-decoration:none;border:0;padding:0;background-color:transparent;overflow:hidden;font-size:0}
.x .x_close{width:32px;height:32px}
.x .x_alert{ position:relative}
.x .x_alert{position:relative}
.x .x_alert>.x_close,
.x.x_modal>.x_close{position:absolute;top:0;right:0}
.x .x_pagination{height:32px}

View file

@ -69,7 +69,7 @@ var
dragging = false,
$holder = $('<li class="placeholder">');
$('div.adminMenu')
$('form.adminMap>ul')
.delegate('li:not(.placeholder,.parent)', {
'mousedown.st' : function(event) {
var $this, $uls, $ul, width, height, offset, position, offsets, i, dropzone, wrapper='';
@ -84,8 +84,6 @@ $('div.adminMenu')
$uls = $this.parentsUntil('.adminMap').filter('ul');
$ul = $uls.eq(-1);
$ul.css('position', 'relative');
position = {x:event.pageX, y:event.pageY};
offset = getOffset(this, $ul.get(0));
@ -207,12 +205,9 @@ $('div.adminMenu')
return false;
}
})
.find('li')
.prepend('<button type="button" class="moveTo">Move to</button>')
.filter('.parent')
.find('>button.moveTo').css({'visibility':'hidden','margin-left':'-12px'}).end()
.end()
.end()
.find('li li')
.prepend('<button type="button" class="moveTo">Move to</button>').end()
.end();
$('<div id="dropzone-marker" />')
.css({display:'none',position:'absolute',backgroundColor:'#000',opacity:0.7})

View file

@ -1,8 +1 @@
jQuery(function(b){function k(a){if(moduleList=a.menuList){var c=b("#menuNameList"),e;for(e in moduleList){var f=moduleList[e],a=b('<optgroup label="'+e+'" />').appendTo(c),d;for(d in f)a.append('<option value="'+e+":"+d+'">'+f[d].title+"</option>")}}}var d,h=b("#editForm"),a=b("#listForm");b("a._add").click(function(){d=b(this).parent().prevAll("._item_key").val();h.find("input[name=parent_srl]").val(d);exec_xml("menu","procMenuAdminAllActList",[],k,["menuList"])});b("a._parent_delete").click(function(){var i=
b(this).parent().prevAll("._parent_key").val();a.find("input[name=menu_item_srl]").val(i);a.submit()});b("a._child_delete").click(function(){var i=b(this).parents("li").find("._item_key").val();a.find("input[name=menu_item_srl]").val(i);a.submit()})});
jQuery(function(b){function k(a,b){for(var c=0,e=0;a&&a!=b;)c+=a.offsetTop,e+=a.offsetLeft,a=a.offsetParent;return{top:c,left:e}}b("form.siteMap").delegate("li:not(.placeholder)","dropped.st",function(){var a=b(this),d;d=a.find(">input._parent_key");a.parent("ul").parent("li").length?d.val(a.parent("ul").parent("li").find(">input._item_key").val()):d.val("0")});var d=!1,h=b('<li class="placeholder">');b("div.adminMenu").delegate("li:not(.placeholder,.parent)",{"mousedown.st":function(a){var i,c,e,
f,m,n,j,l,g;if(!(b(a.target).is("a,input,label,textarea")||1!=a.which)){d=!0;c=b(this);n=c.height();m=c.width();e=c.parentsUntil(".siteMap").filter("ul");f=e.eq(-1);f.css("position","relative");i=a.pageY;j=k(this,f.get(0));$clone=c.clone(!0).attr("target",!0);for(a=e.length-1;a;a--)$clone=$clone.wrap("<li><ul /></li>").parent().parent();l=[];f.find("li").each(function(){if(c[0]===this||c.has(this).length)return!0;var a=k(this,f.get(0));l.push({top:a.top,bottom:a.top+32,$item:b(this)})});$clone.find(".side,input").remove().end().addClass("draggable").css({position:"absolute",
opacity:0.6,width:m,height:n,left:j.left,top:j.top,zIndex:100}).appendTo(f.eq(0));h.css({position:"absolute",opacity:0.6,width:m,height:"10px",left:j.left,top:j.top,zIndex:99}).appendTo(f.eq(0));c.css("opacity",0.6);b(document).unbind("mousemove.st mouseup.st").bind("mousemove.st",function(a){var b,c,d;g=null;a=j.top-(i-a.pageY);b=0;for(c=l.length;b<c;b++)d=l[b],d.top>a||d.bottom<a||(g={element:d.$item},d.$item.hasClass("parent")?(g.state="prepend",h.css("top",d.bottom-5)):d.top>a-12?(g.state="before",
h.css("top",d.top-5)):(g.state="after",h.css("top",d.bottom-5)));$clone.css({top:a})}).bind("mouseup.st",function(){var a,e;d=!1;b(document).unbind("mousemove.st mouseup.st");c.css("opacity","");$clone.remove();h.remove();e=b("<li />").height(c.height());if(g){a=b(g.element);c.before(e);if("prepend"==g.state)a.find(">ul").length||a.find(">.side").after("<ul>"),a.find(">ul").prepend(c.hide());else a[g.state](c.hide());c.slideDown(100,function(){c.removeClass("active")});e.slideUp(100,function(){var a=
e.parent();e.remove();a.children("li").length||a.remove()});c.trigger("dropped.st")}});return!1}},"mouseover.st":function(){d||b(this).addClass("active");return!1},"mouseout.st":function(){d||b(this).removeClass("active");return!1}}).find("li").prepend('<button type="button" class="moveTo">Move to</button>').filter(".parent").find(">button.moveTo").css({visibility:"hidden","margin-left":"-12px"}).end().end().end();b('<div id="dropzone-marker" />').css({display:"none",position:"absolute",backgroundColor:"#000",
opacity:0.7}).appendTo("body")});
jQuery(function(e){var d;var f;var a=e("#editForm");var c=e("#listForm");e("a._add").click(function(){f=e(this).parent().prevAll("._item_key").val();a.find("input[name=parent_srl]").val(f);if(!d){var h=new Array();var g=new Array("menuList");exec_xml("menu","procMenuAdminAllActList",h,b,g);}});function b(k){var h;moduleList=k.menuList;if(moduleList){var i=e("#menuNameList");for(var g in moduleList){var j=moduleList[g];h=e('<optgroup label="'+g+'" />').appendTo(i);for(var l in j){h.append('<option value="'+g+":"+l+'">'+j[l].title+"</option>");}}}}e("a._parent_delete").click(function(){var g=e(this).parent().prevAll("._parent_key").val();c.find("input[name=menu_item_srl]").val(g);c.submit();});e("a._child_delete").click(function(){var g=e(this).parents("li").find("._item_key").val();c.find("input[name=menu_item_srl]").val(g);c.submit();});});jQuery(function(d){d("form.adminMap").delegate("li:not(.placeholder)","dropped.st",function(){var h=d(this),g,e,f;g=h.find(">input._parent_key");f=!!h.parent("ul").parent("li").length;if(f){g.val(h.parent("ul").parent("li").find(">input._item_key").val());}else{g.val("0");}});var c=false,b=d('<li class="placeholder">');d("form.adminMap>ul").delegate("li:not(.placeholder,.parent)",{"mousedown.st":function(f){var o,m,l,g,q,j,n,h,k,p,e="";if(d(f.target).is("a,input,label,textarea")||f.which!=1){return;}c=true;o=d(this);q=o.height();g=o.width();m=o.parentsUntil(".adminMap").filter("ul");l=m.eq(-1);n={x:f.pageX,y:f.pageY};j=a(this,l.get(0));$clone=o.clone(true).attr("target",true);for(k=m.length-1;k;k--){$clone=$clone.wrap("<li><ul /></li>").parent().parent();}h=[];l.find("li").each(function(i){if(o[0]===this||o.has(this).length){return true;}var r=a(this,l.get(0));h.push({top:r.top,bottom:r.top+32,$item:d(this)});});$clone.find(".side,input").remove().end().addClass("draggable").css({position:"absolute",opacity:0.6,width:g,height:q,left:j.left,top:j.top,zIndex:100}).appendTo(l.eq(0));b.css({position:"absolute",opacity:0.6,width:g,height:"10px",left:j.left,top:j.top,zIndex:99}).appendTo(l.eq(0));o.css("opacity",0.6);d(document).unbind("mousemove.st mouseup.st").bind("mousemove.st",function(u){var v,s,t,r,x,w;p=null;v={x:n.x-u.pageX,y:n.y-u.pageY};s=j.top-v.y;for(r=0,x=h.length;r<x;r++){w=h[r];if(w.top>s||w.bottom<s){continue;}p={element:w.$item};if(w.$item.hasClass("parent")){p.state="prepend";b.css("top",w.bottom-5);}else{if(w.top>s-12){p.state="before";b.css("top",w.top-5);}else{p.state="after";b.css("top",w.bottom-5);}}}$clone.css({top:s});}).bind("mouseup.st",function(i){var s,r;c=false;d(document).unbind("mousemove.st mouseup.st");o.css("opacity","");$clone.remove();b.remove();r=d("<li />").height(o.height());if(!p){return;}s=d(p.element);o.before(r);if(p.state=="prepend"){if(!s.find(">ul").length){s.find(">.side").after("<ul>");}s.find(">ul").prepend(o.hide());}else{s[p.state](o.hide());}o.slideDown(100,function(){o.removeClass("active");});r.slideUp(100,function(){var t=r.parent();r.remove();if(!t.children("li").length){t.remove();}});o.trigger("dropped.st");});return false;},"mouseover.st":function(){if(!c){d(this).addClass("active");}return false;},"mouseout.st":function(){if(!c){d(this).removeClass("active");}return false;}}).find("li li").prepend('<button type="button" class="moveTo">Move to</button>').end().end();d('<div id="dropzone-marker" />').css({display:"none",position:"absolute",backgroundColor:"#000",opacity:0.7}).appendTo("body");function a(f,e){var h=0,g=0;while(f&&f!=e){h+=f.offsetTop;g+=f.offsetLeft;f=f.offsetParent;}return{top:h,left:g};}});