From b09bcabf20e987a6bb13ed5d224ec46ab0cbffb3 Mon Sep 17 00:00:00 2001 From: taggon Date: Tue, 2 Aug 2011 02:01:22 +0000 Subject: [PATCH] 1. Complete to write a script for the theme page 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 --- modules/admin/tpl/css/admin.css | 28 ++-- modules/admin/tpl/css/admin_jp.css | 2 + modules/admin/tpl/css/admin_ko.css | 2 + modules/admin/tpl/js/admin.js | 29 ++-- modules/admin/tpl/js/theme.js | 205 ++++++++++++++++++++--------- modules/admin/tpl/theme.html | 88 +++++++------ 6 files changed, 232 insertions(+), 122 deletions(-) create mode 100644 modules/admin/tpl/css/admin_jp.css create mode 100644 modules/admin/tpl/css/admin_ko.css diff --git a/modules/admin/tpl/css/admin.css b/modules/admin/tpl/css/admin.css index 286b2dd9b..e30d921ba 100644 --- a/modules/admin/tpl/css/admin.css +++ b/modules/admin/tpl/css/admin.css @@ -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 */ diff --git a/modules/admin/tpl/css/admin_jp.css b/modules/admin/tpl/css/admin_jp.css new file mode 100644 index 000000000..cf15da188 --- /dev/null +++ b/modules/admin/tpl/css/admin_jp.css @@ -0,0 +1,2 @@ +@charset "utf-8"; +body,table,input,textarea,select,button{font-family:"MS PGothic","Osaka",Arial,sans-serif} diff --git a/modules/admin/tpl/css/admin_ko.css b/modules/admin/tpl/css/admin_ko.css new file mode 100644 index 000000000..e5d254a6c --- /dev/null +++ b/modules/admin/tpl/css/admin_ko.css @@ -0,0 +1,2 @@ +@charset "utf-8"; +body,table,input,textarea,select,button{font-family:"나눔고딕",NanumGothic,"맑은고딕",MalgunGothic,AppleGothic,"돋움",Dotum,"굴림",Gulim,sans-serif} diff --git a/modules/admin/tpl/js/admin.js b/modules/admin/tpl/js/admin.js index faf56b42e..1964be6be 100644 --- a/modules/admin/tpl/js/admin.js +++ b/modules/admin/tpl/js/admin.js @@ -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 diff --git a/modules/admin/tpl/js/theme.js b/modules/admin/tpl/js/theme.js index 6d995bea5..1cb966025 100644 --- a/modules/admin/tpl/js/theme.js +++ b/modules/admin/tpl/js/theme.js @@ -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('Show') - .next('a.prevToggle') - .click(function(){ - var $list = $(this).prev('.a'); + .find('ul.a') + .hide() + .before('') + .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('Show') + .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('') + .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() }); diff --git a/modules/admin/tpl/theme.html b/modules/admin/tpl/theme.html index 4dd502235..369019505 100644 --- a/modules/admin/tpl/theme.html +++ b/modules/admin/tpl/theme.html @@ -1,5 +1,22 @@ + +

Theme

{$XE_VALIDATOR_ERROR}

@@ -12,10 +29,9 @@

선택한 테마

    {@$current_theme = ($theme_info)?$theme_info->theme:'user_define'} - -
  • +
  • Thumbnail does not exist - checked="checked" /> + checked="checked" />
    • › 버전: {$val->version}
      • @@ -24,10 +40,9 @@
    • › 경로: {$val->path}
    • -
  • By You - checked="checked" /> + checked="checked" />
    • › 설명: 관리자가 설정한 테마입니다. 테마를 설정하지 않은 경우 디폴트로 노출됩니다.
      • @@ -40,65 +55,62 @@

      Skin Setting

      테마의 일부가 마음에 들지 않으면 스킨을 직접 선택하세요. 스킨을 직접 선택하면 'Theme Setting' 설정은 'User Defined'로 설정됩니다.

      -
        -
      • +
          +

        • 선택한 레이아웃

            - -
          • - Thumbnail does not exist - layout_srl == $current_layout)-->checked="checked" /> +
          • + Thumbnail does not exist + layout_srl == $current_layout)-->checked="checked" />
            • › 버전: {$val->version}
              • -
            • › 제작: - - {$author->name} - +
            • › 제작: + + {$author->name} + {$author->name} +
            • › 설명: {$val->description}
            • › 경로: {$val->path}
            • › 설정: Edit
            • -
          • - - -
        • -

          선택한 {$key} 스킨

          +
        • +

          선택한 {$mkey} 스킨

            - -
          • - - - +
          • + + 선택한 {$mkey} 스킨 없음
            • 선택한 테마에는 이 항목에 대한 스킨 정보가 없습니다. 스킨을 직접 선택하세요.
            • - - -
          • - Thumbnail does not exist - skin_info[$key] == $skey)-->checked="checked" /> - +
          • + {@ $id = $mkey.'_'.$skey } + Thumbnail does not exist + +
            • › 버전: {$sval->version}
              • -
            • › 제작: - - {$author->name} - +
            • › 제작: + + {$author->name} + {$author->name} +
            • › 설명: {$sval->description}
            • - +
          • + Thumbnail does not exists + + +
          • - -