mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 18:51:41 +09:00
Issue 2444. multilingual layer UI modify.
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11467 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
6a4e458710
commit
db32912966
5 changed files with 128 additions and 81 deletions
|
|
@ -51,6 +51,34 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
|||
.x>.body>.gnb.all>a>i,
|
||||
.x>.body>.gnb>ul>li.open>a:before,
|
||||
.x>.body>.gnb>ul>li.active>a:before{background-image:url(../../../../common/img/glyphicons-halflings-white.png);background-repeat:no-repeat}
|
||||
/* Rotation 360 */
|
||||
.x .rotation{
|
||||
animation:ROTATION infinite 2s linear;
|
||||
-webkit-animation:ROTATION infinite 2s linear;
|
||||
-moz-animation:ROTATION infinite 1s linear;
|
||||
-o-animation:ROTATION infinite 1s linear;
|
||||
-ms-animation:ROTATION infinite 1s linear;
|
||||
}
|
||||
@keyframes ROTATION{
|
||||
from{transform:rotate(0deg)}
|
||||
to{transform:rotate(360deg)}
|
||||
}
|
||||
@-webkit-keyframes ROTATION{
|
||||
from{-webkit-transform:rotate(0deg)}
|
||||
to{-webkit-transform:rotate(360deg)}
|
||||
}
|
||||
@-moz-keyframes ROTATION{
|
||||
from{-moz-transform:rotate(0deg)}
|
||||
to{-moz-transform:rotate(360deg)}
|
||||
}
|
||||
@-o-keyframes ROTATION{
|
||||
from{-o-transform:rotate(0deg)}
|
||||
to{-o-transform:rotate(360deg)}
|
||||
}
|
||||
@-ms-keyframes ROTATION{
|
||||
from{-o-transform:rotate(0deg)}
|
||||
to{-o-transform:rotate(360deg)}
|
||||
}
|
||||
/* Layout */
|
||||
.x{box-shadow:0 0 5px #999;border-radius:5px}
|
||||
.x>.skipNav{margin:0}
|
||||
|
|
@ -192,6 +220,11 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
|||
.x .dashboard>section:nth-child(odd),
|
||||
.x .dashboard>section:nth-child(even){float:none;width:auto}
|
||||
}
|
||||
.x .multilingual>select{display:none}
|
||||
.x .multilingual>label.x_add-on>input[type="checkbox"]{opacity:0;filter:alpha(opacity=0);position:relative;z-index:2}
|
||||
.x .multilingual>label.x_add-on{font-size:0;position:relative}
|
||||
.x .multilingual>label.x_add-on>i{position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px;z-index:1;opacity:.25;filter:alpha(opacity=25)}
|
||||
.x .multilingual>label.x_add-on.checked>i{opacity:1;filter:alpha(opacity=100)}
|
||||
.x .multilingual_item>.en{background:url(../img/flag.en.gif) no-repeat right center}
|
||||
.x .multilingual_item>.ko{background:url(../img/flag.ko.gif) no-repeat right center}
|
||||
.x .multilingual_item>.jp{background:url(../img/flag.jp.gif) no-repeat right center}
|
||||
|
|
|
|||
33
modules/admin/tpl/css/admin.min.css
vendored
33
modules/admin/tpl/css/admin.min.css
vendored
|
|
@ -51,6 +51,34 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
|||
.x>.body>.gnb.all>a>i,
|
||||
.x>.body>.gnb>ul>li.open>a:before,
|
||||
.x>.body>.gnb>ul>li.active>a:before{background-image:url(../../../../common/img/glyphicons-halflings-white.png);background-repeat:no-repeat}
|
||||
/* Rotation 360 */
|
||||
.x .rotation{
|
||||
animation:ROTATION infinite 2s linear;
|
||||
-webkit-animation:ROTATION infinite 2s linear;
|
||||
-moz-animation:ROTATION infinite 1s linear;
|
||||
-o-animation:ROTATION infinite 1s linear;
|
||||
-ms-animation:ROTATION infinite 1s linear;
|
||||
}
|
||||
@keyframes ROTATION{
|
||||
from{transform:rotate(0deg)}
|
||||
to{transform:rotate(360deg)}
|
||||
}
|
||||
@-webkit-keyframes ROTATION{
|
||||
from{-webkit-transform:rotate(0deg)}
|
||||
to{-webkit-transform:rotate(360deg)}
|
||||
}
|
||||
@-moz-keyframes ROTATION{
|
||||
from{-moz-transform:rotate(0deg)}
|
||||
to{-moz-transform:rotate(360deg)}
|
||||
}
|
||||
@-o-keyframes ROTATION{
|
||||
from{-o-transform:rotate(0deg)}
|
||||
to{-o-transform:rotate(360deg)}
|
||||
}
|
||||
@-ms-keyframes ROTATION{
|
||||
from{-o-transform:rotate(0deg)}
|
||||
to{-o-transform:rotate(360deg)}
|
||||
}
|
||||
/* Layout */
|
||||
.x{box-shadow:0 0 5px #999;border-radius:5px}
|
||||
.x>.skipNav{margin:0}
|
||||
|
|
@ -192,6 +220,11 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
|||
.x .dashboard>section:nth-child(odd),
|
||||
.x .dashboard>section:nth-child(even){float:none;width:auto}
|
||||
}
|
||||
.x .multilingual>select{display:none}
|
||||
.x .multilingual>label.x_add-on>input[type="checkbox"]{opacity:0;filter:alpha(opacity=0);position:relative;z-index:2}
|
||||
.x .multilingual>label.x_add-on{font-size:0;position:relative}
|
||||
.x .multilingual>label.x_add-on>i{position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px;z-index:1;opacity:.25;filter:alpha(opacity=25)}
|
||||
.x .multilingual>label.x_add-on.checked>i{opacity:1;filter:alpha(opacity=100)}
|
||||
.x .multilingual_item>.en{background:url(../img/flag.en.gif) no-repeat right center}
|
||||
.x .multilingual_item>.ko{background:url(../img/flag.ko.gif) no-repeat right center}
|
||||
.x .multilingual_item>.jp{background:url(../img/flag.jp.gif) no-repeat right center}
|
||||
|
|
|
|||
|
|
@ -89,22 +89,29 @@ jQuery(function($){
|
|||
contentBugFix();
|
||||
});
|
||||
// Multilingual
|
||||
var $mlCheck = $('.multilingual>label>input[type="checkbox"]');
|
||||
function multilingual(){
|
||||
$('.multilingual').each(function(){
|
||||
$mlCheck.each(function(event){
|
||||
var $this = $(this);
|
||||
var $input = $this.parent('label').next('input, textarea');
|
||||
var $fieldset = $this.parent('label').siblings('fieldset:first');
|
||||
var $input = $label.siblings('input[type="text"]:first');
|
||||
var $select = $label.siblings('select:first');
|
||||
var $label = $this.parent('label'); // Checkbox label
|
||||
var $fieldset = $this.closest('.multilingual').siblings('.multilingual_item:first'); // Multilingual list
|
||||
if($this.is(':checked')){
|
||||
$input.hide();
|
||||
$select.show();
|
||||
$label.addClass('checked');
|
||||
$fieldset.show();
|
||||
} else {
|
||||
$input.show();
|
||||
$select.hide();
|
||||
$label.removeClass('checked');
|
||||
$fieldset.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
multilingual();
|
||||
$('.multilingual').change(multilingual);
|
||||
$mlCheck.change(multilingual);
|
||||
// Check All
|
||||
$('th>input[type="checkbox"]').change(function(){
|
||||
var $this =$(this);
|
||||
|
|
|
|||
15
modules/admin/tpl/js/admin.min.js
vendored
15
modules/admin/tpl/js/admin.min.js
vendored
|
|
@ -89,22 +89,29 @@ jQuery(function($){
|
|||
contentBugFix();
|
||||
});
|
||||
// Multilingual
|
||||
var $mlCheck = $('.multilingual>label>input[type="checkbox"]');
|
||||
function multilingual(){
|
||||
$('.multilingual').each(function(){
|
||||
$mlCheck.each(function(event){
|
||||
var $this = $(this);
|
||||
var $input = $this.parent('label').next('input, textarea');
|
||||
var $fieldset = $this.parent('label').siblings('fieldset:first');
|
||||
var $input = $label.siblings('input[type="text"]:first');
|
||||
var $select = $label.siblings('select:first');
|
||||
var $label = $this.parent('label'); // Checkbox label
|
||||
var $fieldset = $this.closest('.multilingual').siblings('.multilingual_item:first'); // Multilingual list
|
||||
if($this.is(':checked')){
|
||||
$input.hide();
|
||||
$select.show();
|
||||
$label.addClass('checked');
|
||||
$fieldset.show();
|
||||
} else {
|
||||
$input.show();
|
||||
$select.hide();
|
||||
$label.removeClass('checked');
|
||||
$fieldset.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
multilingual();
|
||||
$('.multilingual').change(multilingual);
|
||||
$mlCheck.change(multilingual);
|
||||
// Check All
|
||||
$('th>input[type="checkbox"]').change(function(){
|
||||
var $this =$(this);
|
||||
|
|
|
|||
|
|
@ -68,12 +68,11 @@
|
|||
<h1>메뉴 추가</h1>
|
||||
<ul class="nav _itemList">
|
||||
<script id="tmpl_menuTypeItem" type="text/x-jquery-tmpl">
|
||||
<li><a href="#add_page" data-show="#add_page" data-param='{ "moduleName" : "${ModuleName}", "moduleTitle": "${ModuleTitle}" }'>${ModuleTitle} <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_menu" data-show="#add_menu" data-param='{ "moduleName" : "${ModuleName}", "moduleTitle": "${ModuleTitle}" }'>${ModuleTitle} <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
</script>
|
||||
|
||||
<li><a href="#add_page" data-show="#add_page">위젯 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_page" data-show="#add_page">게시판 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_url" data-show="#add_url">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_menu" data-show="#add_menu">위젯 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_menu" data-show="#add_menu">게시판 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
<li><a href="#add_menu" data-show="#add_menu">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
<div class="x_btn-group">
|
||||
<a href="#download" class="x_btn x_btn-small x_btn-inverse" data-show="#download"><i class="x_icon-plus x_icon-white"></i> 다른 메뉴타입 설치</a>
|
||||
|
|
@ -81,20 +80,22 @@
|
|||
</section>
|
||||
<button type="button" class="x_close" data-hide="#add">×</button>
|
||||
</div>
|
||||
<div class="col" id="add_page">
|
||||
<div class="col page" id="add_menu">
|
||||
<fieldset>
|
||||
<h1 class="_title"></h1>
|
||||
<h1>URL 링크</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="menuName1">메뉴이름</label>
|
||||
<label class="x_muted"><input type="checkbox" class="multilingual"> 다국어 사용</label>
|
||||
<input id="menuName1" type="text" required />
|
||||
<fieldset class="multilingual_item">
|
||||
<select title="사용 가능한 다국어 목록">
|
||||
<div class="multilingual x_input-append">
|
||||
<label for="menuName2">메뉴이름</label>
|
||||
<input id="menuName2" type="text" required style="width:179px">
|
||||
<select title="사용 가능한 다국어 목록" style="width:192px">
|
||||
<option>[새로 입력]</option>
|
||||
<option>...</option>
|
||||
<option>...</option>
|
||||
</select><br>
|
||||
<option>...1</option>
|
||||
<option>...2</option>
|
||||
</select>
|
||||
<label class="x_muted x_add-on"><input type="checkbox"> 다국어 사용 <i class="x_icon-globe"></i></label>
|
||||
</div>
|
||||
<fieldset class="multilingual_item">
|
||||
<input type="text" class="en" title="English"><br>
|
||||
<input type="text" class="ko" title="한국어"><br>
|
||||
<input type="text" class="jp" title="日本語"><br>
|
||||
|
|
@ -112,7 +113,7 @@
|
|||
</p>
|
||||
</fieldset>
|
||||
</li>
|
||||
<li style="border-top:1px solid #ddd;padding-top:8px;margin-top:8px">
|
||||
<li class="typePage">
|
||||
<label for="mid1">메뉴 아이디 <a href="#help_menuId" class="x_icon-question-sign" data-toggle="#mid1_help">?</a></label>
|
||||
<div id="mid1_help" class="x_alert x_alert-info" style="display:none;width:169px">
|
||||
<button type="button" class="x_close" data-hide="#mid1_help">×</button>
|
||||
|
|
@ -120,45 +121,7 @@
|
|||
</div>
|
||||
<input id="mid1" type="text" required placeholder="생략시 임의값 사용" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="x_btn-group">
|
||||
<button type="button" class="x_btn x_btn-small x_btn-primary _save">확인</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button type="button" class="x_close" data-hide="#add_page">×</button>
|
||||
</div>
|
||||
<div class="col" id="add_url">
|
||||
<fieldset>
|
||||
<h1>URL 링크</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="menuName2">메뉴이름</label>
|
||||
<label class="x_muted"><input type="checkbox" class="multilingual"> 다국어 사용</label>
|
||||
<input id="menuName2" type="text" required />
|
||||
<fieldset class="multilingual_item">
|
||||
<select title="사용 가능한 다국어 목록">
|
||||
<option>[새로 입력]</option>
|
||||
<option>...</option>
|
||||
<option>...</option>
|
||||
</select><br>
|
||||
<input type="text" class="en" title="English"><br>
|
||||
<input type="text" class="ko" title="한국어"><br>
|
||||
<input type="text" class="jp" title="日本語"><br>
|
||||
<input type="text" class="zh-CN" title="中文(中国)"><br>
|
||||
<input type="text" class="zh-TW" title="中文(臺灣)"><br>
|
||||
<input type="text" class="fr" title="Français"><br>
|
||||
<input type="text" class="de" title="Deutsch"><br>
|
||||
<input type="text" class="ru" title="Русский"><br>
|
||||
<input type="text" class="es" title="Español"><br>
|
||||
<input type="text" class="tr" title="Türkçe"><br>
|
||||
<input type="text" class="vi" title="Tiếng Việt"><br>
|
||||
<input type="text" class="mn" title="Mongolian">
|
||||
<p class="x_alert x_alert-info" style="width:169px">
|
||||
지원하는 다국어 목록은 [<a href="{getUrl('','module','admin','act','dispAdminConfigGeneral')}">설정>일반</a>]에서 편집 가능
|
||||
</p>
|
||||
</fieldset>
|
||||
</li>
|
||||
<li style="border-top:1px solid #ddd;margin-top:8px">
|
||||
<li class="typeUrl">
|
||||
<div class="x_tabbable">
|
||||
<ul class="x_nav x_nav-tabs">
|
||||
<li class="x_active"><a href="#linkUrl">URL 링크</a></li>
|
||||
|
|
@ -179,7 +142,7 @@
|
|||
<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button type="button" class="x_close" data-hide="#add_url">×</button>
|
||||
<button type="button" class="x_close" data-hide="#add_menu">×</button>
|
||||
</div>
|
||||
<div class="col download" id="download">
|
||||
<section>
|
||||
|
|
@ -214,15 +177,17 @@
|
|||
<h1>기본 설정</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="menuName">메뉴 이름</label>
|
||||
<label class="x_muted"><input type="checkbox" class="multilingual"> 다국어 사용</label>
|
||||
<input type="text" id="menuName">
|
||||
<fieldset class="multilingual_item">
|
||||
<select title="사용 가능한 다국어 목록">
|
||||
<div class="multilingual x_input-append">
|
||||
<label for="menuName">메뉴이름</label>
|
||||
<input id="menuName" type="text" required style="width:179px">
|
||||
<select title="사용 가능한 다국어 목록" style="width:192px">
|
||||
<option>[새로 입력]</option>
|
||||
<option>...</option>
|
||||
<option>...</option>
|
||||
</select><br>
|
||||
<option>...1</option>
|
||||
<option>...2</option>
|
||||
</select>
|
||||
<label class="x_muted x_add-on"><input type="checkbox"> 다국어 사용 <i class="x_icon-globe"></i></label>
|
||||
</div>
|
||||
<fieldset class="multilingual_item">
|
||||
<input type="text" class="en" title="English"><br>
|
||||
<input type="text" class="ko" title="한국어"><br>
|
||||
<input type="text" class="jp" title="日本語"><br>
|
||||
|
|
@ -661,14 +626,16 @@
|
|||
#properties li.active>*>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
|
||||
/* Add */
|
||||
#add>*>.x_btn-group{border:0;padding:0}
|
||||
/* Add Page */
|
||||
#add_page ul{margin:15px 0}
|
||||
/* Add URL */
|
||||
#add_url ul{margin:15px 0}
|
||||
#add_url .clone ul{margin:0}
|
||||
#add_url .clone li{list-style:none}
|
||||
#add_url .clone ul ul{padding-left:15px}
|
||||
#add_url .clone .root{margin-top:15px}
|
||||
/* Add Menu */
|
||||
#add_menu ul{margin:15px 0}
|
||||
#add_menu .typePage{display:none;border-top:1px solid #ddd;padding-top:8px;margin-top:8px}
|
||||
#add_menu .typeUrl{display:none;border-top:1px solid #ddd;margin-top:8px}
|
||||
#add_menu.page .typePage,
|
||||
#add_menu.url .typeUrl{display:block}
|
||||
#add_menu .clone ul{margin:0}
|
||||
#add_menu .clone li{list-style:none}
|
||||
#add_menu .clone ul ul{padding-left:15px}
|
||||
#add_menu .clone .root{margin-top:15px}
|
||||
/* Auth */
|
||||
#auth ul{margin:15px 0}
|
||||
#auth li{border-top:1px solid #ddd;margin:0 0 15px 0;padding:15px 0 0 0}
|
||||
|
|
@ -1117,7 +1084,7 @@ jQuery(function($){
|
|||
} ).get()[0].outerHTML;
|
||||
}
|
||||
|
||||
sResult += '<li><a href="#add_url" data-show="#add_url">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>';
|
||||
sResult += '<li><a href="#add_menu" data-show="#add_menu">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>';
|
||||
$('#add ._itemList').html(sResult);
|
||||
scrollToRight();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue