fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-05-11 04:52:14 +09:00
Code Issues Projects Releases Packages Wiki Activity

Modify styles for administrative interface

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8716 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon 2011-08-03 08:33:57 +00:00
parent 35d02e8d3e
commit c47f24b566
4 changed files with 174 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -557,17 +557,17 @@ input#lang_mn{background:url(../img/flag.mn.gif) no-repeat 96% center}
.thumbPreview .a:after{content:"";display:block;clear:both} .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{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:after{content:"";display:block;clear:both}
.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{position:relative;width:124px;height:84px;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 .frame{position:absolute;width:120px;height:80px;left:0;top:0;border:2px solid #fff;overflow:hidden}
.thumbPreview .i .thumb img{width:120px;margin:-10px 0 0 0} .thumbPreview .i .thumb img{width:120px;margin:0}
.thumbPreview .i label{display:block;position:relative;top:0;left:2px;width:122px;height:1.1em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thumbPreview .i label{display:block;position:relative;top:0;left:2px;width:122px;height:1.1em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbPreview .i input{display:none} .thumbPreview .i input{display:none}
.thumbPreview .i ul{display:none} .thumbPreview .i ul{display:none}
.thumbPreview .selected .i{display:block;float:none} .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{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 .selected .i .thumb .frame{width:180px;height:120px;border-width:3px}
.thumbPreview li.active.highlight .selected .i .thumb{border-color:#5ea8f6} .thumbPreview li.active.highlight .selected .i .thumb{border-color:#5ea8f6}
.thumbPreview .selected .i .thumb img{width:180px;position:relative;z-index:-1} .thumbPreview .selected .i .thumb img{width:180px;position:relative}
.thumbPreview li.active .selected .i .thumb img{z-index:auto} .thumbPreview li.active .selected .i .thumb img{z-index:auto}
.thumbPreview .selected .i label{cursor:text} .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 ul{display:block;list-style:none;border:0;margin:1em 0 1em 200px}

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

@ -1,5 +1,8 @@
/* NHN (developers@xpressengine.com) */ /* NHN (developers@xpressengine.com) */
jQuery(function($){ jQuery(function($){
// Constants
var ESC_KEY = 27;
// Overlapping label // Overlapping label
$('.form li').find('>input:text,>input:password,>textarea') $('.form li').find('>input:text,>input:password,>textarea')
.prev('label') .prev('label')
@ -91,114 +94,131 @@ jQuery(function($){
}) })
.end() .end()
// TODO: Modal Window // Modal Window
// var htmlBody = $('html,body'); $('a.modalAnchor')
// var modalAnchor = $('.modalAnchor');
// var modal = $('.modal');
// var modalBg = modal.find('>.bg');
// var modalFg = modal.find('>.fg');
// var modalCloseHtml = '<button type="button" class="modalClose" title="Close this layer">X</button>';
// var modalBlurHtml = '<button type="button" class="modalBlur"></button>';
// var docHeight = $(document).height();
$('.modal')
.hide()
.appendTo('body')
.prepend('<span class="bg"></span>')
.append('<!--[if IE 6]><iframe class="ie6"></iframe><![endif]-->');
// modalFg
// .prepend(modalCloseHtml)
// .prepend(modalBlurHtml);
// var modalClose = $('.modalClose');
// var modalBlur = $('.modalBlur');
// modalClose.eq(0).clone().appendTo(modalFg);
// modalBlur.eq(0).clone().appendTo(modalFg);
// modalAnchor
// .click(function(){
// if(typeof document.body.style.maxHeight == "undefined"){
// htmlBody.css({'width':'100%','height':'100%'});
// }
// var myTarget = $($(this).attr('href'));
// myTarget.fadeToggle(200).toggleClass('modalActive');
// myTarget.find('>.fg>.modalClose:first').focus();
// $(this).addClass('active');
// })
// .keypress(function(){
// if(event.keyCode != 32) return true;
// $(this).click();
// return false;
// });
// function closeModal() {
// if(typeof document.body.style.maxHeight == "undefined"){
// htmlBody.removeAttr('style');
// }
// modal.fadeOut(200).removeClass('modalActive');
// $('.modalAnchor.active').focus().removeClass('active');
// return false;
// }
// $(document).keydown(function(event){
// if(event.keyCode != 27) return true; // ESC
// if(modal.find('.tgContent:visible').length == 0) return closeModal();
// });
// $('.modal>.bg, .modalClose, .modal .cancel').click(closeModal);
// $('.modalBlur').focusin(function(event){
// modalClose.click();
// });
// pagination
$('.pagination')
.find('span.gotopage')
.attr('id', function(idx){ return 'gotopage-'+(idx+1) })
.hide()
.end()
.find('a[href="#gotopage"]')
.each(function(idx){
var id = '#gotopage-'+(idx+1);
$(this).attr('href', id).after($(id));
})
.click(function(){ .click(function(){
var $form, width, height, hidden, duration; var $this = $(this), $modal;
console.log(this);
$form = $(this.getAttribute('href')); // get and initialize modal window
hidden = $form.is(':hidden'); $modal = $( $this.attr('href') );
width = $form.show().width(); $this.trigger('init.mw');
height = $form.height();
duration = 100;
$form.css('overflow', 'hidden').css('whiteSpace', 'nowrap'); // set the related anchor
if(hidden) { $modal.data('anchor', $this);
$form
.css('width', 0) if($modal.data('state') == 'showing') {
.animate({width:width}, duration, function(){ $form.css({width:'',height:'',overflow:''}) }) $this.trigger('close.mw');
.find('input:text:first').focus();
} else { } else {
$form $this.trigger('open.mw');
.css('width', width)
.animate({width:0}, duration, function(){ $form.hide().css({width:'',height:'',overflow:''}) });
$(this).focus();
} }
return false; return false;
}) })
.bind('init.mw', function(){
var $this = $(this), $modal, $btnClose;
$modal = $( $this.attr('href') );
$btnClose = $('<button type="button" class="modalClose" title="Close this layer">X</button>');
$btnClose.click(function(){ $modal.data('anchor').trigger('close.mw') });
$modal
.prepend('<span class="bg"></span>')
.append('<!--[if IE 6]><iframe class="ie6"></iframe><![endif]-->')
.find('>.fg')
.prepend($btnClose)
.append($btnClose.clone(true))
.end()
.appendTo('body');
// unbind create event
$this.unbind('init.mw');
})
.bind('open.mw', function(){
var $this = $(this), $modal, duration;
// get modal window
$modal = $( $this.attr('href') );
// get duration
duration = $this.data('duration') || 'fast';
// set state : showing
$modal.data('state', 'showing');
// workaroud for IE6
$('html,body').addClass('modalContainer');
// before event trigger
$this.trigger('before-open.mw');
// after event trigger
function after(){ $this.trigger('after-open.mw') };
$(document).bind('keydown.mw', function(event){
if(event.which == ESC_KEY) {
$this.trigger('close.mw');
return false;
}
});
$modal
.fadeIn(duration, after)
.find('button.modalClose:first').focus();
})
.bind('close.mw', function(){
var $this = $(this), $modal, duration;
// get modal window
$modal = $( $this.attr('href') );
// get duration
duration = $this.data('duration') || 'fast';
// set state : hiding
$modal.data('state', 'hiding');
// workaroud for IE6
$('html,body').removeClass('modalContainer');
// before event trigger
$this.trigger('before-close.mw');
// after event trigger
function after(){ $this.trigger('after-close.mw') };
$modal.fadeOut(duration, after);
$this.focus();
});
$('div.modal').hide();
// pagination
$('.pagination')
.find('span.tgContent')
.attr('id', function(idx){ return 'goTo-'+(idx+1) })
.css('whiteSpace', 'nowrap')
.end()
.find('a.tgAnchor[href="#goTo"]')
.each(function(idx){
var id = '#goTo-'+(idx+1);
$(this).attr('href', id).after($(id));
})
.end(); .end();
// TODO: Portlet Action // Portlet Action
// var action = $('.portlet .action'); $('.portlet .action')
// var action_li = action.parent('li'); .css({display:'none',position:'absolute'})
// action.hide().css({'position':'absolute'}); .parent()
// action_li.mouseleave(function(){ .mouseleave(function(){ $(this).find('>.action').fadeOut(100); })
// action.fadeOut(100); .mouseenter(function(){ $(this).find('>.action').fadeIn(100); })
// return false; .focusin(function(){ $(this).mouseenter() })
// }); .focusout(function(){
// action_li.mouseenter(function(){ var $this = $(this), timer;
// action_li.mouseleave();
// $(this).find('>.action').fadeIn(100); clearTimeout($this.data('timer'));
// return false; timer = setTimeout(function(){ if(!$this.find(':focus').length) $this.mouseleave() }, 10);
// });
// action_li.find('*:first-child').focusin(function(){ $this.data('timer', timer);
// $(this).parent('li').mouseenter(); });
// });
// TODO: Site Map // TODO: Site Map
// var siteMap = $('.siteMap'); // var siteMap = $('.siteMap');
@ -260,19 +280,19 @@ jQuery(function($){
// get duration // get duration
duration = $this.data('duration') || 'fast'; duration = $this.data('duration') || 'fast';
// before event trigger
$this.trigger('before-open.tc');
// set state : showing // set state : showing
$layer.data('state', 'showing'); $layer.data('state', 'showing');
// before event trigger
$this.trigger('before-open.tc');
// When mouse button is down or when ESC key is pressed close this layer // When mouse button is down or when ESC key is pressed close this layer
$(document) $(document)
.unbind('mousedown.tc keydown.tc') .unbind('mousedown.tc keydown.tc')
.bind('mousedown.tc keydown.tc', .bind('mousedown.tc keydown.tc',
function(event){ function(event){
if(event && ( if(event && (
(event.type == 'keydown' && event.which != 27) || // '27' means ESC key (event.type == 'keydown' && event.which != ESC_KEY) ||
(event.type == 'mousedown' && ($(event.target).is('.tgAnchor,.tgContent') || $layer.has(event.target)[0])) (event.type == 'mousedown' && ($(event.target).is('.tgAnchor,.tgContent') || $layer.has(event.target)[0]))
)) return true; )) return true;
@ -282,12 +302,22 @@ jQuery(function($){
} }
); );
// triggering after
function trigger_after(){ $this.trigger('after-open.tc') }
switch(effect) { switch(effect) {
case 'slide': case 'slide':
$layer.slideDown(duration, function(){ $this.trigger('after-open.tc') }); $layer.slideDown(duration, trigger_after);
break;
case 'slide-h':
var w = $layer.css({'overflow-x':'',width:''}).width();
$layer
.show()
.css({'overflow-x':'hidden',width:'0px'})
.animate({width:w}, duration, function(){ $layer.css({'overflow-x':'',width:''}); trigger_after(); });
break; break;
case 'fade': case 'fade':
$layer.fadeIn(duration, function(){ $this.trigger('after-open.tc') }); $layer.fadeIn(duration, trigger_after);
break; break;
default: default:
$layer.show(); $layer.show();
@ -297,6 +327,9 @@ jQuery(function($){
.bind('close.tc', function(){ .bind('close.tc', function(){
var $this = $(this), $layer, effect, duration; var $this = $(this), $layer, effect, duration;
// unbind document's event handlers
$(document).unbind('mousedown.tc keydown.tc');
// get content container // get content container
$layer = $( $this.attr('href') ); $layer = $( $this.attr('href') );
@ -306,21 +339,25 @@ jQuery(function($){
// get duration // get duration
duration = $this.data('duration') || 'fast'; duration = $this.data('duration') || 'fast';
// set state : hiding
$layer.data('state', 'hiding');
// before event trigger // before event trigger
$this.trigger('before-close.tc'); $this.trigger('before-close.tc');
$(document).unbind('mousedown.tc keydown.tc'); // triggering after
function trigger_after(){ $this.trigger('after-close.tc') };
// set state : hiding
$layer.data('state', 'hiding');
// close this layer // close this layer
switch(effect) { switch(effect) {
case 'slide': case 'slide':
$layer.slideUp(duration, function(){ $this.trigger('after-close.tc') }); $layer.slideUp(duration, trigger_after);
break;
case 'slide-h':
$layer.animate({width:0}, duration, function(){ $layer.hide(); trigger_after(); });
break; break;
case 'fade': case 'fade':
$layer.fadeOut(duration, function(){ $this.trigger('after-close.tc') }); $layer.fadeOut(duration, trigger_after);
break; break;
default: default:
$layer.hide(); $layer.hide();
@ -329,10 +366,10 @@ jQuery(function($){
}); });
$('.tgContent') $('.tgContent')
.hide() .hide()
.focusout(function(){ .focusout(function(event){
var $this = $(this), $anchor = $this.data('anchor'); var $this = $(this), $anchor = $this.data('anchor');
setTimeout(function(){ setTimeout(function(){
if(!$this.find(':focus').length) $anchor.trigger('close.tc'); if(!$this.find(':focus').length && $this.data('state') == 'showing') $anchor.trigger('close.tc');
}, 1); }, 1);
}) })
@ -356,55 +393,4 @@ jQuery(function($){
// Display all sections then hide this button // Display all sections then hide this button
$(this).hide().parent().prevAll('.section').show(); $(this).hide().parent().prevAll('.section').show();
}); });
// TODO : Suggestion
// var suggestion = $('#suggestion');
// var snTarget = suggestion.prev('input[type=text]');
// suggestion.css('position','absolute');
// snTarget.keypress(function(){
// $(this).next('.tgContent').fadeIn(200);
// snTarget.css('background','url(./img/preLoader16.gif) no-repeat 268px center');
// });
// snTarget.keyup(function(){
// snTarget.css('background','');
// });
// suggestion
// .find('li:first-child>button').css('fontWeight','bold').end()
// .find('li:gt(0)>button').click(function(){
// var myValue = $(this).text();
// snTarget.val(myValue);
// return closeTg();
// });
// TODO: FTP Suggestion
// var ftp_path = $('#ftp_path');
// var ftpSuggestion = $('#ftpSuggestion');
// ftpSuggestion.css('position','absolute').find('.tgBlur').eq(0).remove();
// ftpSuggestion.find('li:not(:first-child)>button').click(function(){
// var setValue = ftp_path.val();
// var myValue = $(this).text();
// ftp_path.val(setValue+myValue);
// });
// TODO: Up-Down Dragable
// var uDrag = $('.uDrag');
// uDrag.find('>tr>td:first-child, >li').wrapInner('<div class="wrap"></div>');
// var uDragWrap = $('.uDrag .wrap');
// uDragWrap
// .prepend('<button type="button" class="dragBtn">Up/Down</button>')
// .each(function(){
// var t = $(this);
// var tHeight = t.parent().height();
// if(t.parent().is('td')){
// t.height(tHeight);
// }
// });
// var uDragItem = $('.uDrag>tr, .uDrag>li');
// uDragItem
// .mouseenter(function(){
// $(this).addClass('dragActive');
// })
// .mouseleave(function(){
// $(this).removeClass('dragActive');
// });
}); });

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

@ -63,6 +63,7 @@ $('#theme,#skin')
$(this).next('input:radio').prop('checked', true).change(); $(this).next('input:radio').prop('checked', true).change();
}) })
.end() .end()
.find('> .i > label').attr('title', function(){ return $(this).text() }).end()
.find('input:radio') .find('input:radio')
.bind('redraw', function(){ .bind('redraw', function(){
var $this = $(this), $big = $this.closest('.a').prev('.a'), val = $this.val(); var $this = $(this), $big = $this.closest('.a').prev('.a'), val = $this.val();
@ -79,7 +80,10 @@ $('#theme,#skin')
.find('input:radio').remove().end() .find('input:radio').remove().end()
.find('label') .find('label')
.wrapInner('<strong>') .wrapInner('<strong>')
.find('>strong').unwrap().end() .find('>strong')
.text(function(){ return $(this).attr('title') })
.unwrap()
.end()
.end() .end()
.appendTo($big); .appendTo($big);

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

@ -34,10 +34,10 @@ $('#theme').data('themes', themes);
<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> <label for="{$key}">{$val->title}({$key})</label>
<ul> <ul>
<li>&rsaquo; 버전: {$val->version}</li> <li>&middot; 버전: {$val->version}</li>
<li>&rsaquo; 제작: {$val->publisher}</li> <li>&middot; 제작: {$val->publisher}</li>
<li>&rsaquo; 설명: {$val->description}</li> <li>&middot; 설명: {$val->description}</li>
<li>&rsaquo; 경로: {$val->path}</li> <li>&middot; 경로: {$val->path}</li>
</ul> </ul>
</li> </li>
<li class="i userDefine"> <li class="i userDefine">
@ -45,7 +45,7 @@ $('#theme').data('themes', themes);
<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> <label for="theme_user_define">User Defined</label>
<ul> <ul>
<li>&rsaquo; 설명: 관리자가 설정한 테마입니다. 테마를 설정하지 않은 경우 디폴트로 노출됩니다.</li> <li>&middot; 설명: 관리자가 설정한 테마입니다. 테마를 설정하지 않은 경우 디폴트로 노출됩니다.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -60,20 +60,20 @@ $('#theme').data('themes', themes);
<p class="q">선택한 레이아웃</p> <p class="q">선택한 레이아웃</p>
<ul class="a"> <ul class="a">
<li class="i" loop="$layout_list=>$val"> <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> <span class="thumb"><span class="frame"><!--@if($val->thumbnail)--><img src="{$val->thumbnail}" 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--> /> <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> <label for="layout_{$val->layout_srl}">{$val->layout_title.'('.$val->layout.')'}</label>
<ul> <ul>
<li>&rsaquo; 버전: {$val->version}</li> <li>&middot; 버전: {$val->version}</li>
<li>&rsaquo; 제작: <li>&middot; 제작:
<!--@foreach($val->author as $author)--> <!--@foreach($val->author as $author)-->
<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a> <a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
<!--@if(!$author->homepage)-->{$author->name}<!--@end--> <!--@if(!$author->homepage)-->{$author->name}<!--@end-->
<!--@endforeach--> <!--@endforeach-->
</li> </li>
<li>&rsaquo; 설명: {$val->description}</li> <li>&middot; 설명: {$val->description}</li>
<li>&rsaquo; 경로: {$val->path}</li> <li>&middot; 경로: {$val->path}</li>
<li>&rsaquo; 설정: <a href="#">Edit</a></li> <li>&middot; 설정: <a href="#">Edit</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -94,14 +94,14 @@ $('#theme').data('themes', themes);
<input type="radio" name="{$mkey}-skin" id="{$id}" value="{$skey}" checked="checked"|cond="$theme_info->skin_info[$mkey]==$skey" /> <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> <label for="{$id}">{$sval->title.'('.$skey.')'}</label>
<ul> <ul>
<li>&rsaquo; 버전: {$sval->version}</li> <li>&middot; 버전: {$sval->version}</li>
<li>&rsaquo; 제작: <li>&middot; 제작:
<!--@foreach($sval->author as $author)--> <!--@foreach($sval->author as $author)-->
<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a> <a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
<!--@if(!$author->homepage)-->{$author->name}<!--@end--> <!--@if(!$author->homepage)-->{$author->name}<!--@end-->
<!--@endforeach--> <!--@endforeach-->
</li> </li>
<li>&rsaquo; 설명: {$sval->description}</li> <li>&middot; 설명: {$sval->description}</li>
</ul> </ul>
</li> </li>
<li class="i"> <li class="i">