UI improvements: icons, button disabled while printing

This commit is contained in:
Philipp Klaus 2017-01-08 10:01:30 +01:00
parent 0be29b69a9
commit 1c7451786a
3 changed files with 35 additions and 8 deletions

13
static/css/custom.css Normal file
View File

@ -0,0 +1,13 @@
#statusBox.alert {
margin-bottom: 0;
}
.alert .glyphicon{
display:table-cell;
}
.alert div,
.alert span{
padding-left: 10px;
display:table-cell;
}

View File

@ -8,6 +8,7 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/custom.css">
<title>{% block page_title %}{% endblock %} | Brother QL</title> <title>{% block page_title %}{% endblock %} | Brother QL</title>
</head> </head>

View File

@ -17,30 +17,36 @@
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Label Size</a> <span class="glyphicon glyphicon-file" aria-hidden="true"></span> Label Size</a>
</h4> </h4>
</div> </div>
<div id="collapse1" class="panel-collapse collapse"> <div id="collapse1" class="panel-collapse collapse">
<div class="chooser panel-body">
<label for="labelSize" style="display: none">Label Size:</label> <label for="labelSize" style="display: none">Label Size:</label>
<select class="form-control" id="labelSize" onChange="preview()"> <select class="form-control" id="labelSize" onChange="preview()">
{% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %} {% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
</select> </select>
</div> <!-- class="chooser panel-body" -->
</div> </div>
</div> </div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Font Settings</a> <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
<!-- <span class="glyphicon glyphicon-text" aria-hidden="true"></span> -->
Font Settings
</a>
</h4> </h4>
</div> </div>
<div id="collapse2" class="panel-collapse collapse in"> <div id="collapse2" class="panel-collapse collapse in">
<div class="chooser panel-body">
<label for="fontFamily">Font Family:</label> <label for="fontFamily">Font Family:</label>
<select class="form-control" id="fontFamily" onChange="preview()"> <select class="form-control" id="fontFamily" onChange="preview()">
{% for font in fonts %}<option>{{font}}</option> {% endfor %} {% for font in fonts %}<option>{{font}}</option> {% endfor %}
</select> </select>
<label for="fontSize" >Font Size:</label> <label for="fontSize" >Font Size:</label>
<input id="fontSize" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()"> <input id="fontSize" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()" required>
<label for="fontAlign" class="control-label input-group">Font Alignment:</label> <label for="fontAlign" class="control-label input-group">Font Alignment:</label>
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"> <label class="btn btn-default">
@ -53,7 +59,7 @@
<input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span> <input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</label> </label>
</div> </div>
</div> <!-- class="chooser panel-body" -->
</div> </div>
</div> </div>
<div class="panel panel-default"> <div class="panel panel-default">
@ -64,7 +70,9 @@
</h4> </h4>
</div> </div>
<div id="collapse3" class="panel-collapse collapse"> <div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Some more settings will show here, once implemented.</div> <div class="chooser panel-body">
Some more settings will show here, once implemented.
</div> <!-- class="chooser panel-body" -->
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +88,9 @@
<fieldset class="form-group"> <fieldset class="form-group">
<label for="previewImg">Label Preview:</label> <label for="previewImg">Label Preview:</label>
<img id="previewImg" style="border: 1px solid #444; width: 90%; margin: 5%;"/> <img id="previewImg" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
<button type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">Print</button> <button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
<span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
</button>
</fieldset> </fieldset>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
@ -124,12 +134,15 @@ function preview() {
function setStatus(data) { function setStatus(data) {
if (data['success']) if (data['success'])
$('#statusPanel').html('Printing was successful.'); $('#statusPanel').html('<div id="statusBox" class="alert alert-success" role="alert"><i class="glyphicon glyphicon-check"></i><span>Printing was successful.</span></div>');
else else
$('#statusPanel').html('Printing was unsuccessful:<br />'+data['message']); $('#statusPanel').html('<div id="statusBox" class="alert alert-warning" role="alert"><i class="glyphicon glyphicon-alert"></i><span>Printing was unsuccessful:<br />'+data['message']+'</span></div>');
$('#printButton').prop('disabled', false);
} }
function print() { function print() {
$('#printButton').prop('disabled', true);
$('#statusPanel').html('');
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
dataType: 'json', dataType: 'json',