[Koha-patches] [PATCH 7/7] Misc UI improvements to both the QOTD editor and uploader
Chris Nighswonger
cnighswonger at foundations.edu
Fri Apr 27 21:26:10 CEST 2012
---
koha-tmpl/intranet-tmpl/prog/en/css/datatables.css | 9 +++++
koha-tmpl/intranet-tmpl/prog/en/css/uploader.css | 19 +++++++++--
.../prog/en/modules/tools/quotes-upload.tt | 33 +++++++++++--------
.../intranet-tmpl/prog/en/modules/tools/quotes.tt | 19 ++++++++---
4 files changed, 57 insertions(+), 23 deletions(-)
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
index 2a78678..ad97a48 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
@@ -191,6 +191,15 @@ div.dataTables_paginate.paging_four_button {
width: 250px;
}
+.delete, .save, .cancel {
+ border-radius: 5px;
+ margin: 1px;
+}
+
+input {
+ border-radius: 5px;
+}
+
/*
table.display {
width: 100%;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/uploader.css b/koha-tmpl/intranet-tmpl/prog/en/css/uploader.css
index eca87b9..e747255 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/uploader.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/uploader.css
@@ -10,12 +10,13 @@
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
- opacity: 1.0;
+ opacity: 1.0;
}
#progress_bar .percent {
- background-color: #99ccff;
- height: auto;
- width: 0;
+ color: #E6F0F2;
+ background-color: #004D99;
+ height: auto;
+ width: 0;
}
#server_response {
background-color: white;
@@ -36,3 +37,13 @@
top: 50%;
width: 250px;
}
+
+#file_uploader {
+ position: relative;
+ top: -24px;
+}
+
+#file_upload {
+ position: relative;
+ top: -1px;
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt
index 05fac8b..b0a181a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt
@@ -134,14 +134,14 @@
for(var i=0; i<aaData.length; i++) {
aaData[i].push('Delete'); //this is hackish FIXME
}
- document.getElementById('quotes_editor').style.visibility="visible";
+ document.getElementById('save_quotes').style.visibility="visible";
document.getElementById('file_uploader').style.visibility="hidden";
+ document.getElementById('quotes_editor').style.visibility="visible";
oTable = $('#quotes_editor').dataTable( {
"bAutoWidth" : false,
"bPaginate" : true,
"bSort" : false,
"sPaginationType" : "full_numbers",
- "sDom" : '<"save_quotes">frtip',
"aaData" : aaData,
"aoColumns" : [
{
@@ -162,7 +162,6 @@
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
noEditFields = [2]; /* action */
- /* console.log('Quote ID: '+quoteID); */
/* do foo on various cells in the current row */
$('td:eq(2)', nRow).html('<input type="button" class="delete" value="Delete" onclick="fnClickDeleteRow(this.parentNode);" />');
/* apply no_edit id to noEditFields */
@@ -184,9 +183,9 @@
},
"height" : "14px",
});
- $("div.save_quotes").html('<input type="button" class="add_quote_button" value="Save Quotes" style="float: right;" onclick="fnGetData(document.getElementById(\'quotes_editor\'));"/>');
},
});
+ document.getElementById('footer').style.visibility="visible";
}
function fnHandleFileSelect(evt) {
@@ -201,13 +200,14 @@
alert('File read cancelled');
};
reader.onloadstart = function(e) {
+ document.getElementById('cancel_upload').style.visibility="visible";
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
- setTimeout("document.getElementById('progress_bar').className='';", 2000);
+ document.getElementById('cancel_upload').style.visibility="hidden";
quotes = fnCSVToArray(e.target.result, ',');
fnDataTable(quotes);
}
@@ -215,7 +215,8 @@
reader.readAsText(evt.target.files[0]);
}
- document.getElementById('files').addEventListener('change', fnHandleFileSelect, false);
+ //document.getElementById('file_upload').addEventListener('change', fnHandleFileSelect, false);
+ $('#file_upload').one('change', fnHandleFileSelect);
});
@@ -264,11 +265,16 @@
<div id="bd">
<div id="yui-main">
<div class="yui-b">
-
- <div id="file_uploader" style="float: left; width: 100%; visibility:visible;">
- <input type="file" id="files" name="file" />
- <button onclick="fnAbortRead();">Cancel Upload</button>
- <div id="progress_bar"><div class="percent">0%</div></div>
+ <div id="toolbar" style="height:61px;">
+ <div id="save_quotes" style="visibility:hidden;">
+ <input type="button" class="add_quote_button" value="Save Quotes" style="border-radius: 5px;" onclick="fnGetData(document.getElementById(\'quotes_editor\'));"/>
+ <span class="hint">Click on any field to edit contents</span>
+ </div>
+ <div id="file_uploader" class="file_uploader" style="visibility:visible;">
+ <input id="file_upload" type="file" name="file" />
+ <button id="cancel_upload" style="visibility:hidden;" onclick="fnAbortRead();">Cancel Upload</button>
+ <div id="progress_bar"><div class="percent">0%</div></div>
+ </div>
</div>
<div id="server_response" onclick='fnResetUpload()'>Server Response</div>
<table id="quotes_editor" style="float: left; width: 100%; visibility:hidden;">
@@ -288,9 +294,8 @@
</tr>
</tbody>
</table>
-
-
-
+ <fieldset id="footer" class="action" style="visibility:hidden; height:25px">
+ </fieldset>
</div>
</div>
<div class="yui-b noprint">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt
index a5c87e4..8e14e7a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt
@@ -21,12 +21,11 @@
"sAjaxSource" : "/cgi-bin/koha/tools/quotes/quotes_ajax.pl",
"aoColumns" : [
{ "sWidth": "3%" },
- { "sWidth": "12%" },
+ { "sWidth": "11%" },
{ "sWidth": "65%" },
{ "sWidth": "10%" },
- { "sWidth": "10%" },
+ { "sWidth": "11%" },
],
- "sDom" : '<"add_quote">frtip',
"oLanguage" : {
"sEmptyTable": sEmptyTable,
},
@@ -64,7 +63,6 @@
});
},
});
- $("div.add_quote").html('<input type="button" class="add_quote_button" value="Add Quote" style="float: right;" onclick="fnClickAddRow();"/><input type="button" class="import_quote_button" value="Import Quotes" style="float: right;" onclick="parent.location=\'quotes-upload.pl\'"/>');
});
function fnClickAddQuote() {
@@ -155,7 +153,16 @@
<div id="bd">
<div id="yui-main">
<div class="yui-b">
- <table id="quotes_editor" style="float: left; width: 100%">
+ <div id="toolbar">
+ <ul class="toolbar">
+ <li>
+ <input type="button" class="add_quote_button" value="Add Quote" style="border-radius: 5px;" onclick="fnClickAddRow();"/>
+ <input type="button" class="import_quote_button" value="Import Quotes" style="border-radius: 5px;" onclick="parent.location='quotes-upload.pl'"/>
+ <span class="hint" style="">Click Source or Text field to edit contents</span>
+ </li>
+ </ul>
+ </div>
+ <table id="quotes_editor" style="float: left; width: 100%;">
<thead>
<tr>
<th>ID</th>
@@ -176,6 +183,8 @@
</tr>
</tbody>
</table>
+ <fieldset id="footer" class="action" style="height:25px;">
+ </fieldset>
</div>
</div>
<div class="yui-b noprint">
--
1.7.0.4
More information about the Koha-patches
mailing list