tami/brother_ql_web
6
0
Fork 0
mirror of https://github.com/pklaus/brother_ql_web.git synced 2024-05-25 11:56:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements: icons, button disabled while printing

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
}

1
views/base.jinja2
View File

@ -8,6 +8,7 @@
<!-- Bootstrap 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>
</head>

29
views/labeldesigner.jinja2
View File

@ -17,30 +17,36 @@
<div class="panel-heading">
<h4 class="panel-title">
<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>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="chooser panel-body">
<label for="labelSize" style="display: none">Label Size:</label>
<select class="form-control" id="labelSize" onChange="preview()">
{% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
</select>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<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>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="chooser panel-body">
<label for="fontFamily">Font Family:</label>
<select class="form-control" id="fontFamily" onChange="preview()">
{% for font in fonts %}<option>{{font}}</option> {% endfor %}
</select>
<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>
<div class="btn-group" data-toggle="buttons">
<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>
</label>
</div>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
<div class="panel panel-default">
@ -64,7 +70,9 @@
</h4>
</div>
<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>
@ -80,7 +88,9 @@
<fieldset class="form-group">
<label for="previewImg">Label Preview:</label>
<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>
<div class="panel panel-default">
<div class="panel-heading">
@ -124,12 +134,15 @@ function preview() {
function setStatus(data) {
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
$('#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() {
$('#printButton').prop('disabled', true);
$('#statusPanel').html('');
$.ajax({
type: 'POST',
dataType: 'json',