customization of upload package input in admin interface

This commit is contained in:
Paolo Caruccio
2013-07-15 00:27:49 +02:00
parent fdad44315f
commit 38828c9ece
2 changed files with 83 additions and 13 deletions
+46
View File
@@ -281,6 +281,52 @@ td.cbcentered>input, th.cbcentered>input { margin-top:-1px; }
.languageform input.untranslated { background-color:#FC0; }
/*=============================================================
MASKED UPLOAD INPUT (NO BOOTSTRAP RELATED)
==============================================================*/
#appupdate_file.masked {
margin: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 7 */
font-size: 100px;
position: absolute;
top: 0;
right: 0;
z-index: 410;
}
#fileselect {
padding: 4px 6px;
border: 1px solid #ccc;
border-radius: 4px;
color: #555;
cursor: default;
position: relative;
z-index: 400;
font-size: 14px;
background-color: #fff;
margin-bottom: 10px;
overflow: hidden;
}
#fileselect span {
position: absolute;
left: 6px;
top: 4px;
}
.uploadbtn {
position: absolute;
top: 3px;
right: 3px;
}
.txtPlaceholder {
font-style: italic;
color: #ccc;
}
/*=============================================================
MEDIA QUERIES
==============================================================*/
+37 -13
View File
@@ -17,7 +17,7 @@
<body class="{{=T('direction: ltr') == 'direction: rtl' and 'RTLbody' or ''}} {{block sectionclass}}home{{end}}">
<!-- NAVBAR
<!-- NAVBAR
============== -->
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
@@ -43,7 +43,7 @@
</div><!-- /navbar-inner -->
</div><!-- /#header -->
<!-- MAIN
<!-- MAIN
=========== -->
<div id="main" class="container-fluid">
<div id="main_inner" class="row-fluid">
@@ -54,7 +54,7 @@
</div><!-- /main row-fluid -->
</div><!-- /#main -->
<!-- FOOTER
<!-- FOOTER
============== -->
<footer id="footer" class="fixed">
<p><span>{{=T('Powered by')}} {{=A('web2py', _href='http://www.web2py.com')}}&trade; {{=T('created by')}} Massimo Di Pierro &copy;2007-{{=request.now.year}}
@@ -70,19 +70,43 @@
</p>
</footer><!-- /#footer -->
<!-- BS JAVASCRIPT
<!-- BS JAVASCRIPT
====================== -->
<script src="{{=URL('static','js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("[rel=tooltip]").tooltip();
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("[rel=tooltip]").tooltip();
});
</script>
{{if request.function in ('index','site'):}}
<a style="position:fixed;bottom:0;left:0;z-index:1000" href="https://groups.google.com/forum/?fromgroups#!forum/web2py" target="_blank">
<!-- http://webchat.freenode.net/?channels=web2py" //-->
<img src="{{=URL('static','images/questions.png')}}" />
</a>
{{pass}}
<script>
// ====================
// upload input mask
// ====================
function FileSelectHandler(e) {
e.stopPropagation();
var filename = e.target.value.split(/\\|\//).pop();
jQuery('#fileselect>span').removeClass('txtPlaceholder').text(filename)
}
jQuery(document).ready(function(){
var iupload = jQuery('#appupdate_file');
var ow = 300, oh = 20;
var iplaceholder = jQuery('<span class="txtPlaceholder">{{=T("no package selected")}}</span>'),
iuploadbtn = jQuery('<button class="btn btn-inverse btn-mini uploadbtn"><i class="icon-white icon-circle-arrow-up"></i></button>');
iupload
.addClass('masked')
.wrap('<div id="fileselect" style="width:'+ow+'px;height:'+oh+'px"></div>')
.on('change', function(event){FileSelectHandler(event)});
jQuery('#fileselect').append(iplaceholder, iuploadbtn);
});
</script>
{{if request.function in ('index','site'):}}
<a style="position:fixed;bottom:0;left:0;z-index:1000" href="https://groups.google.com/forum/?fromgroups#!forum/web2py" target="_blank">
<!-- http://webchat.freenode.net/?channels=web2py" //-->
<img src="{{=URL('static','images/questions.png')}}" />
</a>
{{pass}}
</body>
</html>