fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-12 07:11:42 +09:00
Code Issues Projects Releases Packages Wiki Activity

1. Complete to write a script for the theme page

Browse source 
2. Add css files for korean and japanese
3. Modified some styles including theme setting page and language selector


git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8712 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon 2011-08-02 02:01:22 +00:00
parent a1a14d4b76
commit b09bcabf20
6 changed files with 232 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

28
modules/admin/tpl/css/admin.css
View file

@ -550,27 +550,31 @@ input#lang_mn{background:url(../img/flag.mn.gif) no-repeat 96% center}
#ftpSuggestion li button:focus{background:#eee}
/* Theme & Skin Preview */
.thumbPreview li{position:relative;padding-left:10px;padding-right:10px}
.thumbPreview li.active{background:#f9f9f9}
.thumbPreview li.active.highlight{background:#f9f9f9}
.thumbPreview .prevToggle{position:absolute;top:8px;right:10px;line-height:16px;padding:0 18px 0 0;text-decoration:none;background:url(../img/iconArrow.gif) no-repeat right -32px}
.thumbPreview li.active .prevToggle{background-position:right 0}
.thumbPreview .a{border:0;margin:0;zoom:1}
.thumbPreview .a:after{content:"";display:block;clear:both}
.thumbPreview .i{float:left;vertical-align:top;margin:0 1em 1em 0;padding:0;border:0;zoom:1}
.thumbPreview .i:after{content:"";display:block;clear:both}
.thumbPreview .i .thumb{position:relative;width:120px;height:70px;padding:10px 0 0 0;text-align:center;overflow:hidden;border:1px solid #ddd;display:block;cursor:pointer;background:#fff}
.thumbPreview .i .thumb .frame{position:absolute;width:120px;height:70px;left:0;top:0;border:3px solid #fff}
.thumbPreview .i .thumb{position:relative;width:124px;height:74px;padding:0;margin-bottom:3px;text-align:center;overflow:hidden;border:1px solid #ddd;display:block;cursor:pointer;background:#fff}
.thumbPreview .i .thumb .frame{position:absolute;width:120px;height:70px;left:0;top:0;border:2px solid #fff;overflow:hidden}
.thumbPreview .i .thumb img{width:120px;margin:-10px 0 0 0}
.thumbPreview .i label{display:block;position:relative;top:0;left:2px;width:122px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbPreview .i input{display:none}
.thumbPreview .i ul{display:none}
.thumbPreview .i.checked{display:block;float:none}
.thumbPreview .i.checked .thumb{float:left;width:180px;height:120px;margin:0 1em 0 0;border:2px solid #eee}
.thumbPreview .i.checked .thumb .frame{width:180px;height:120px}
.thumbPreview li.active .i.checked .thumb{border-color:#5ea8f6}
.thumbPreview .i.checked .thumb img{width:180px;position:relative;z-index:-1}
.thumbPreview li.active .i.checked .thumb img{z-index:auto}
.thumbPreview .i.checked label{cursor:text}
.thumbPreview .i.checked ul{display:block;list-style:none;border:0;margin:1em 0 1em 200px}
.thumbPreview .i.checked li{border:0;padding:0;margin:0 0 .2em 0}
.thumbPreview .selected .i{display:block;float:none}
.thumbPreview .selected .i .thumb{float:left;width:186px;height:126px;margin:0 1em 0 0;border:2px solid #eee}
.thumbPreview .selected .i .thumb .frame{width:180px;height:120px}
.thumbPreview li.active.highlight .selected .i .thumb{border-color:#5ea8f6}
.thumbPreview .selected .i .thumb img{width:180px;position:relative;z-index:-1}
.thumbPreview li.active .selected .i .thumb img{z-index:auto}
.thumbPreview .selected .i label{cursor:text}
.thumbPreview .selected .i ul{display:block;list-style:none;border:0;margin:1em 0 1em 200px}
.thumbPreview .selected .i li{border:0;padding:0;margin:0 0 .2em 0}
.thumbPreview.jx .i label{display:inline;width:auto}
.thumbPreview.jx .i.noDirection {display:none}
.thumbPreview.jx .i input {display:inline}
#skin .showAll{float:right;border:0;overflow:visible;padding:0 18px 0 0;cursor:pointer;color:#00f;background:url(../img/iconArrow.gif) no-repeat right -32px}
#skin .showAll.hideAll{background-position:right 0}
/* Sign Up Form */

2
modules/admin/tpl/css/admin_jp.css Normal file
View file

@ -0,0 +1,2 @@
@charset "utf-8";
body,table,input,textarea,select,button{font-family:"MS PGothic","Osaka",Arial,sans-serif}

2
modules/admin/tpl/css/admin_ko.css Normal file
View file

@ -0,0 +1,2 @@
@charset "utf-8";
body,table,input,textarea,select,button{font-family:"나눔고딕",NanumGothic,"맑은고딕",MalgunGothic,AppleGothic,"돋움",Dotum,"굴림",Gulim,sans-serif}

29
modules/admin/tpl/js/admin.js
View file

@ -23,25 +23,28 @@ jQuery(function($){
$input_rc
.change(function(){
var name = $(this).attr('name');
$input_rc
.filter('[name="'+name+'"]:not(:checked)')
.next('label').css('font-weight', 'normal').end()
.end()
.next('label').css('font-weight', 'bold').end();
$input_rc.filter(function(){ return this.name == name })
.next('label').css('font-weight', 'normal').end()
.filter(':checked')
.next('label').css('font-weight', 'bold').end();
})
.change();
// Toogle checkbox all
$('.form th>:checkbox')
$('.form th>input:checkbox')
.change(function() {
var $this = $(this), self = this, name;
var $this = $(this), name = $this.data('name');
name = $this.data('target');
$this.closest('table').find('input:checkbox')
.filter(function(){ return (this.name == name) })
.prop('checked', $this.prop('checked'))
.filter(function(){ return (this.parentNode.nodeName != 'TH') })
.change();
$this.closest('table')
.find('input:checkbox')
.filter(function(){
var $this = $(this);
return ($this.attr('name') == name) || ($this.data('name') == name);
})
.prop('checked', $this.prop('checked'))
.end()
.end()
.trigger('update.checkbox', name, this.checked);
});
// Global Navigation Bar

205
modules/admin/tpl/js/theme.js
View file

@ -1,74 +1,161 @@
jQuery(function($){
$('#theme,#skin')
// 'show all' button
.find('button.showAll')
.text('Show All')
.click(function(){
var $this = $(this), $thumbarea = $('#skin').find('>.thumbPreview');
if($this.toggleClass('hideAll').hasClass('hideAll')) {
$this.text('Hide All');
$thumbarea.children('li')
.addClass('active')
.removeClass('highlight')
.eq(0).addClass('highlight').end()
.find('>ul.a:not(.selected)').show();
} else {
$this.text('Show All');
$thumbarea.children('li')
.removeClass('active highlight')
.find('>ul.a:not(.selected)').hide();
}
})
.end()
// all thumbnail area
.find('>.thumbPreview')
.removeClass('jx')
// thumbnail list
.find('.a')
.has('li.i:nth-child(2)')
.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
.next('a.prevToggle')
.click(function(){
var $list = $(this).prev('.a');
.find('ul.a')
.hide()
.before('<ul class="a selected"></ul>')
.prev('ul.a')
.each(function(){
var $this = $(this);
if($list.parent().hasClass('active')) {
$list.trigger('hide.tp');
} else {
$list.trigger('show.tp');
$this
.delegate('span.thumb', 'click', function(){
$(this).closest('.a').nextAll('a.prevToggle:first').trigger('toggle.tp');
return false;
})
.append($this.next('.a').find('>li.noDirection:first'));
})
.end()
.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
.next('a.prevToggle')
.bind('toggle.tp', function(){
var $list = $(this).prev('.a'), $items, duration = 100;
$items = $list.closest('.thumbPreview').children('li').removeClass('highlight').end();
if($list.parent().toggleClass('active').hasClass('active')) {
$list.slideDown(duration).closest('li').addClass('highlight');
} else {
$list.slideUp(duration);
}
})
.click(function(){ $(this).trigger('toggle.tp'); return false; })
.end()
// thumbnail act as a label for a radio button
.find('span.thumb')
.attr('role', 'radio') // WAI-ARIA role
.click(function(){
$(this).next('input:radio').prop('checked', true).change();
})
.end()
.find('input:radio')
.bind('redraw', function(){
var $this = $(this), $big = $this.closest('.a').prev('.a'), val = $this.val();
// skip following actions if this checkbox was selected just before
if(val == $big.find('>li:eq(1)').data('value')) return;
$big.find('>li:not(.noDirection)').remove();
if(!val) { // select none
$big.children('li.noDirection').show();
} else {
$this.closest('li').clone()
.find('input:radio').remove().end()
.find('label')
.wrapInner('<strong>')
.find('>strong').unwrap().end()
.end()
.appendTo($big);
$big.find('>li.noDirection').hide();
}
})
.change(function(){
var $this = $(this);
$this.trigger('redraw');
// reselect theme
if($this.attr('name') != 'themeItem') {
$('#theme').trigger('select-theme');
}
})
.filter(':checked').change().end()
.filter('[name="themeItem"]')
.change(function(){
var $this = $(this), themes, thm, $radios, name;
themes = $('#theme').data('themes') || {};
thm = themes[$this.val()];
if(!thm) return;
$radios = $('#skin').find('.i > input:radio').filter('[value=""]').prop('checked', true).end();
for(var x in thm) {
if(!thm.hasOwnProperty(x)) continue;
name = (x == 'layout')?x:x+'-skin';
if(thm[x]) $radios.filter('[name="'+name+'"][value="'+thm[x]+'"]').prop('checked', true);
}
return false;
$radios.filter(':checked').trigger('redraw');
})
.end()
.end()
.bind('show.tp', function(){
$(this)
.parent().addClass('active').end()
.find('>.i:gt(0)')
.slideDown(100, function(){
var $this = $(this);
if(!$this.prev('.checked').length) return;
});
})
.bind('hide.tp', function(){
$(this)
.parent().removeClass('active').end()
.find('>.i:gt(0)')
.slideUp(100, function(){
var $this = $(this);
$('#theme')
.bind('select-theme', function(){
var $this = $(this), themes, $radios, form, selection, sel_obj={}, sel_str, name;
if(!$this.prev('.checked').length) return;
});
})
.end()
.find('.i:not(:first-child)').hide().end()
.bind('paint.pr', function(){
$(this)
.find('.i')
.removeClass('checked')
.find('.checkIcon').remove().end()
.end()
.find('.i:has(>input:checked)')
.addClass('checked')
.each(function(){
var $this = $(this);
$this.parent().prepend($this);
})
.end()
.find('.i.checked').show();
})
.trigger('paint.pr')
.find('span.thumb')
.attr('role', 'radio') // WAI-ARIA role
.click(function(){
var $radio = $(this).next('input:radio');
themes = $this.data('themes') || {};
$radios = $('#skin').find('.i > input:radio');
selection = $radios.filter(':checked[value!=""]').get();
form = $radios.get(0).form;
for(var i=0,c=selection.length; i < c; i++) {
name = selection[i].name.match(/^layout|(\w+)-skin$/);
sel_obj[name[1]||name[0]] = selection[i].value;
}
function obj2str(obj){
var s = '';
for(var x in obj) {
if(!obj.hasOwnProperty(x)) continue;
if(x != 'layout' && !form.elements[x+'-skin']) continue;
s += x+'\t'+obj[x]+'\n';
}
return s;
}
sel_str = obj2str(sel_obj);
// no matched theme => this theme is user-defined
for(var thm in themes) {
if(!themes.hasOwnProperty(thm)) continue;
if(sel_str == obj2str(themes[thm])) {
$this.find('input:radio[name="themeItem"][value="'+thm+'"]').prop('checked', true).change();
return;
}
}
$this.find('input:radio[name="themeItem"][value="user_define"]').prop('checked', true).change();
});
$radio.is(':checked')?
$radio.closest('.a').trigger('show.tp') :
$radio.prop('checked', true).change();
})
.next('input:radio').change(function(){ $(this).closest('.a').trigger('paint.pr') }).end()
.end()
.end()
});

88
modules/admin/tpl/theme.html
View file

@ -1,5 +1,22 @@
<load target="js/theme.js" type="body" />
<script type="text/javascript">
jQuery(function($){
var themes = {};
// Example - default theme
themes['xe_default'] = {
'layout': '82',
'board' : 'xe_v3', // board module has the xe_v3 skin by default
'poll' : 'simple' // poll module has the simple skin by default
};
$('#theme').data('themes', themes);
});
</script>
<h1 class="h1">Theme</h1>
<p class="xe_validator_error">{$XE_VALIDATOR_ERROR}</p>
<form ruleset="insertThemeInfo" action="./" method="post" class="form">
@ -12,10 +29,9 @@
<p class="q">선택한 테마</p>
<ul class="a">
{@$current_theme = ($theme_info)?$theme_info->theme:'user_define'}
<!--@foreach($theme_list as $key=>$val)-->
<li class="i">
<li class="i" loop="$theme_list=>$key,$val">
<span class="thumb"><!--@if($val->thumbnail)--><img src="{$val->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span>
<input type="radio" name="themeItem" id="{$key}" value="{$key}" <!--@if($key == $current_theme)-->checked="checked"<!--@end--> />
<input type="radio" name="themeItem" id="{$key}" value="{$key}" <!--@if($key == $current_theme)-->checked="checked"<!--@end--> />
<label for="{$key}">{$val->title}({$key})</label>
<ul>
<li>&rsaquo; 버전: {$val->version}</li>
@ -24,10 +40,9 @@
<li>&rsaquo; 경로: {$val->path}</li>
</ul>
</li>
<!--@end-->
<li class="i userDefine">
<span class="thumb">By You</span>
<input type="radio" name="themeItem" id="theme_user_define" value="user_define" <!--@if($current_theme == 'user_define')-->checked="checked"<!--@end--> />
<input type="radio" name="themeItem" id="theme_user_define" value="user_define" <!--@if($current_theme == 'user_define')-->checked="checked"<!--@end--> />
<label for="theme_user_define">User Defined</label>
<ul>
<li>&rsaquo; 설명: 관리자가 설정한 테마입니다. 테마를 설정하지 않은 경우 디폴트로 노출됩니다.</li>
@ -40,65 +55,62 @@
<fieldset id="skin">
<h2 class="h2">Skin Setting</h2>
<p>테마의 일부가 마음에 들지 않으면 스킨을 직접 선택하세요. 스킨을 직접 선택하면 'Theme Setting' 설정은 'User Defined'로 설정됩니다. <button type="button" class="showAll"></button></p>
<ul class="thumbPreview">
<li>
<ul class="thumbPreview jx">
<li data-skintype="layout">
<p class="q">선택한 레이아웃</p>
<ul class="a">
<!--@foreach($layout_list as $val)-->
<li class="i">
<span class="thumb"><span class="frame"><!--@if($val->thumbnail)--><img src="{$val->thumbnaill}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
<input type="radio" name="layout" id="layout_{$val->layout_srl}" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->checked="checked"<!--@end--> />
<li class="i" loop="$layout_list=>$val">
<span class="thumb"><span class="frame"><!--@if($val->thumbnail)--><img src="{$val->thumbnaill}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
<input type="radio" name="layout" id="layout_{$val->layout_srl}" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->checked="checked"<!--@end--> />
<label for="layout_{$val->layout_srl}">{$val->layout_title.'('.$val->layout.')'}</label>
<ul>
<li>&rsaquo; 버전: {$val->version}</li>
<li>&rsaquo; 제작:
<!--@foreach($val->author as $author)-->
<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;"><!--@end-->{$author->name}<!--@if($author->homepage)--></a><!--@end-->
<!--@endforeach-->
<li>&rsaquo; 제작:
<!--@foreach($val->author as $author)-->
<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
<!--@if(!$author->homepage)-->{$author->name}<!--@end-->
<!--@endforeach-->
</li>
<li>&rsaquo; 설명: {$val->description}</li>
<li>&rsaquo; 경로: {$val->path}</li>
<li>&rsaquo; 설정: <a href="#">Edit</a></li>
</ul>
</li>
<!--@end-->
</ul>
</li>
<!--@foreach($module_list as $key=>$val)-->
<!--@if($key != '__IS_PARSE__')-->
<li>
<p class="q">선택한 {$key} 스킨</p>
<li loop="$module_list=>$mkey,$mval" cond="$mkey!='__IS_PARSE__'" data-skintype="{$mkey}">
<p class="q">선택한 {$mkey} 스킨</p>
<ul class="a">
<!--@if(!$theme_info->skin_info[$key])-->
<li class="i noDirection">
<span class="thumb"><span class="frame"></span></span>
<input type="radio" name="{$key}-skin" id="{$key}_none" value="__skin_none__" checked="checked" />
<label for="{$key}_none">선택한 {$key} 스킨 없음</label>
<li class="i noDirection" cond="!$theme_info->skin_info[$mkey]">
<span class="thumb"><span class="frame"></span></span>
<strong>선택한 {$mkey} 스킨 없음</strong>
<ul>
<li>선택한 테마에는 이 항목에 대한 스킨 정보가 없습니다. 스킨을 직접 선택하세요.</li>
</ul>
</li>
<!--@end-->
<!--@foreach($val as $skey=>$sval)-->
<li class="i">
<span class="thumb"><span class="frame"><!--@if($sval->thumbnail)--><img src="{$sval->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
<input type="radio" name="{$key}-skin" id="{$key.'_'.$skey}" value="{$skey}" <!--@if($theme_info->skin_info[$key] == $skey)-->checked="checked"<!--@end--> />
<label for="{$key.'_'.$skey}">{$sval->title.'('.$skey.')'}</label>
<li class="i" loop="$mval=>$skey,$sval">
{@ $id = $mkey.'_'.$skey }
<span class="thumb"><span class="frame"><!--@if($sval->thumbnail)--><img src="{$sval->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
<input type="radio" name="{$mkey}-skin" id="{$id}" value="{$skey}" checked="checked"|cond="$theme_info->skin_info[$mkey]==$skey" />
<label for="{$id}">{$sval->title.'('.$skey.')'}</label>
<ul>
<li>&rsaquo; 버전: {$sval->version}</li>
<li>&rsaquo; 제작:
<!--@foreach($sval->author as $author)-->
<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;"><!--@end-->{$author->name}<!--@if($author->homepage)--></a><!--@end-->
<!--@endforeach-->
<li>&rsaquo; 제작:
<!--@foreach($sval->author as $author)-->
<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
<!--@if(!$author->homepage)-->{$author->name}<!--@end-->
<!--@endforeach-->
</li>
<li>&rsaquo; 설명: {$sval->description}</li>
</ul>
</li>
<!--@end-->
<li class="i">
<span class="thumb"><span class="frame">Thumbnail does not exists</span></span>
<input type="radio" name="{$mkey}-skin" id="{$mkey}_none" value="" checked="checked"|cond="!$theme_info->skin_info[$mkey]" />
<label for="{$mkey}_none">선택안함</label>
</li>
</ul>
</li>
<!--@end-->
<!--@end-->
</ul>
</fieldset>
<div class="btnArea">