Adjustment in user_profile template. Add avatar uploading support

This commit is contained in:
Khanh Ngo
2015-12-17 00:50:28 +07:00
parent 28882b57b1
commit 5d06195795
8 changed files with 114 additions and 26 deletions

View File

@ -98,7 +98,11 @@
<!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
<li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
{% if current_user.avatar %}
<img alt="" class="img-circle" src="{{ url_for('user_avatar', filename=current_user.avatar) }}"/>
{% else %}
<img alt="" class="img-circle" src="{{ url_for('static', filename='admin/layout2/img/avatar.png') }}"/>
{% endif %}
<span class="username username-hide-on-mobile">
{% if current_user.is_authenticated() %} {{ current_user.firstname }} {% endif %}</span>
<i class="fa fa-angle-down"></i>

View File

@ -91,13 +91,15 @@
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<form action="{{ user_profile }}" role="form">
<form action="{{ user_profile }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
<div class="fileinput-new thumbnail" style="width: 200px; height: 210px;">
{% if current_user.avatar %}
<img src="{{ url_for('user_avatar', filename=current_user.avatar) }}" alt=""/ style="width:200px;height:200px;">
{% else %}
<img src="http://www.placehold.it/200x200/EFEFEF/AAAAAA&amp;text=no+image" alt=""/>
{% endif %}
</div>
<div>
<span class="btn default btn-file">
@ -105,7 +107,7 @@
Select image </span>
<span class="fileinput-exists">
Change </span>
<input type="file" name="...">
<input type="file" name="file">
</span>
<a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput">
Remove </a>
@ -113,14 +115,11 @@
</div>
<div class="clearfix margin-top-10">
<span class="label label-danger">NOTE! </span>
<span>Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only </span>
<span>&nbsp;Only support <strong>.PNG, .JPG, .JPEG</strong>. Best size is <strong>200x200</strong>. </span>
</div>
</div>
<div class="margin-top-10">
<a href="javascript:;" class="btn green-haze">
Submit </a>
<a href="javascript:;" class="btn default">
Cancel </a>
<button type="submit" class="btn green-haze"> Submit</button>
</div>
</form>
</div>
@ -130,23 +129,17 @@
{% if not current_user.password %}
Your account password is managed via LDAP which isn't supported to change here.
{% else %}
<form action="{{ user_profile }}" method="POST">
<div class="form-group">
<label class="control-label">Current Password</label>
<input type="password" class="form-control"/>
</div>
<form class="password-form" action="{{ user_profile }}" method="POST">
<div class="form-group">
<label class="control-label">New Password</label>
<input type="password" class="form-control"/>
<input name="password" id="newpassword" type="password" class="form-control"/>
</div>
<div class="form-group">
<label class="control-label">Re-type New Password</label>
<input name="newpassword" type="password" class="form-control"/>
<input name="rpassword" type="password" class="form-control"/>
</div>
<div class="margin-top-10">
<button type="submit" class="btn green-haze"> Change Password</button>
<a href="javascript:;" class="btn default">
Cancel </a>
</div>
</form>
{% endif %}
@ -167,18 +160,19 @@
{{ super() }}
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/select2/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
<script src="{{ url_for('static', filename='global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ url_for('static', filename='global/scripts/metronic.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/layout2/scripts/layout.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/pages/scripts/user_profile.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
jQuery(document).ready(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
UserProfile.init();
});
</script>
<!-- END JAVASCRIPTS -->