575 lines
20 KiB
HTML
575 lines
20 KiB
HTML
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.pages.USERPROFILE">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">There are many systems which have a need for user profile pages which display personal information on each member.</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: USER PROFILE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- /// controller: 'UserCtrl' - localtion: assets/js/controllers/userCtrl.js /// -->
|
|
<div ng-controller="UserCtrl">
|
|
<!-- start: USER TABSET -->
|
|
<tabset class="tabbable">
|
|
<!-- start: TAB OVERVIEW -->
|
|
<tab heading="Overview">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="user-left">
|
|
<div class="center">
|
|
<h4>{{userInfo.firstName}} {{userInfo.lastName}}</h4>
|
|
<div flow-init="{singleFile:true}" flow-name="obj.flow" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
|
|
<div class="user-image">
|
|
<div class="thumbnail">
|
|
<img src="assets/images/default-user.png" alt="" ng-if="!obj.flow.files.length && noImage">
|
|
<img ng-src="{{userInfo.avatar}}" alt="" ng-if="!obj.flow.files.length && !noImage">
|
|
<img flow-img="obj.flow.files[0]" ng-if="obj.flow.files.length">
|
|
</div>
|
|
<div class="user-image-buttons" ng-if="obj.flow.files.length">
|
|
<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
|
|
<span class="btn btn-danger" ng-click="obj.flow.cancel()"> <i class="fa fa-times"></i> </span>
|
|
</div>
|
|
<div class="user-image-buttons" ng-if="!obj.flow.files.length">
|
|
<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
|
|
<span class="btn btn-danger" ng-if="!noImage" ng-click="removeImage()"><i class="fa fa-times"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="social-icons block">
|
|
<ul>
|
|
<li data-placement="top" data-original-title="Twitter" class="social-twitter tooltips">
|
|
<a href="#" target="_blank">
|
|
Twitter
|
|
</a>
|
|
</li>
|
|
<li data-placement="top" data-original-title="Facebook" class="social-facebook tooltips">
|
|
<a href="#" target="_blank">
|
|
Facebook
|
|
</a>
|
|
</li>
|
|
<li data-placement="top" data-original-title="Google" class="social-google tooltips">
|
|
<a href="#" target="_blank">
|
|
Google+
|
|
</a>
|
|
</li>
|
|
<li data-placement="top" data-original-title="LinkedIn" class="social-linkedin tooltips">
|
|
<a href="#" target="_blank">
|
|
LinkedIn
|
|
</a>
|
|
</li>
|
|
<li data-placement="top" data-original-title="Github" class="social-github tooltips">
|
|
<a href="#" target="_blank">
|
|
Github
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<table class="table table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">Contact Information</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>url</td>
|
|
<td>
|
|
<a href="#">
|
|
{{userInfo.url}}
|
|
</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>email:</td>
|
|
<td>
|
|
<a href>
|
|
{{userInfo.email}}
|
|
</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>phone:</td>
|
|
<td>{{userInfo.phone}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>skye</td>
|
|
<td>
|
|
<a href>
|
|
{{userInfo.skype}}
|
|
</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">General information</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Position</td>
|
|
<td>UI Designer</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Last Logged In</td>
|
|
<td>56 min</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Position</td>
|
|
<td>Senior Marketing Manager</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Supervisor</td>
|
|
<td>
|
|
<a href="#">
|
|
Kenneth Ross
|
|
</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Status</td>
|
|
<td><span class="label label-sm label-info">Administrator</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">Additional information</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Groups</td>
|
|
<td>New company web site development, HR Management</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="text-right">
|
|
<a class="btn btn-primary btn-o btn-wide" href="#" ng-click="editActive = true">
|
|
Edit Account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="row space20">
|
|
<div class="col-sm-3">
|
|
<button class="btn btn-icon margin-bottom-5 margin-bottom-5 btn-block">
|
|
<i class="ti-layers-alt block text-primary text-extra-large margin-bottom-10"></i>
|
|
Projects
|
|
</button>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<button class="btn btn-icon margin-bottom-5 btn-block">
|
|
<i class="ti-comments block text-primary text-extra-large margin-bottom-10"></i>
|
|
Messages <span class="badge badge-danger"> 23 </span>
|
|
</button>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<button class="btn btn-icon margin-bottom-5 btn-block">
|
|
<i class="ti-calendar block text-primary text-extra-large margin-bottom-10"></i>
|
|
Calendar
|
|
</button>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<button class="btn btn-icon margin-bottom-5 btn-block">
|
|
<i class="ti-flag block text-primary text-extra-large margin-bottom-10"></i>
|
|
Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-white" id="activities">
|
|
<div class="panel-heading border-light">
|
|
<h4 class="panel-title text-primary">Recent Activities</h4>
|
|
<paneltool class="panel-tools" tool-collapse="tool-collapse" tool-refresh="load1" tool-dismiss="tool-dismiss"></paneltool>
|
|
</div>
|
|
<div collapse="activities" ng-init="activities=false" class="panel-wrapper">
|
|
<div class="panel-body">
|
|
<ul class="timeline-xs">
|
|
<li class="timeline-item success">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
2 minutes ago
|
|
</div>
|
|
<p>
|
|
<a class="text-info" href>
|
|
Steven
|
|
</a>
|
|
has completed his account.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
12:30
|
|
</div>
|
|
<p>
|
|
Staff Meeting
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item danger">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
11:11
|
|
</div>
|
|
<p>
|
|
Completed new layout.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item info">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
Thu, 12 Jun
|
|
</div>
|
|
<p>
|
|
Contacted
|
|
<a class="text-info" href>
|
|
Microsoft
|
|
</a>
|
|
for license upgrades.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
Tue, 10 Jun
|
|
</div>
|
|
<p>
|
|
Started development new site
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
Sun, 11 Apr
|
|
</div>
|
|
<p>
|
|
Lunch with
|
|
<a class="text-info" href>
|
|
Nicole
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item warning">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
Wed, 25 Mar
|
|
</div>
|
|
<p>
|
|
server Maintenance.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-item">
|
|
<div class="margin-left-15">
|
|
<div class="text-muted text-small">
|
|
Fri, 20 Mar
|
|
</div>
|
|
<p>
|
|
New User Registration
|
|
<a class="text-info" href>
|
|
more details
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-white space20">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Recent Tweets</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<ul class="ltwt">
|
|
<li class="ltwt_tweet">
|
|
<p class="ltwt_tweet_text">
|
|
<a href class="text-info">
|
|
@Shakespeare
|
|
</a>
|
|
Some are born great, some achieve greatness, and some have greatness thrust upon them.
|
|
</p>
|
|
<span class="block text-light"><i class="fa fa-fw fa-clock-o"></i> 2 minuts ago</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tab>
|
|
<!-- end: TAB OVERVIEW -->
|
|
<!-- start: TAB EDIT ACCOUNT -->
|
|
<tab heading="Edit Account" active="editActive">
|
|
<form action="#" role="form" id="form">
|
|
<fieldset>
|
|
<legend>
|
|
Account Info
|
|
</legend>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
First Name
|
|
</label>
|
|
<input type="text" placeholder="Enter your first name" class="form-control" name="firstname" ng-model="userInfo.firstName">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Last Name
|
|
</label>
|
|
<input type="text" placeholder="Enter your last name" class="form-control" name="lastname" ng-model="userInfo.lastName">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Email Address
|
|
</label>
|
|
<input type="email" placeholder="email address" class="form-control" name="email" ng-model="userInfo.email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Phone
|
|
</label>
|
|
<input type="text" placeholder="phone number" class="form-control" name="phone" ng-model="userInfo.phone">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Url
|
|
</label>
|
|
<input type="text" placeholder="Enter Url" class="form-control" name="url" ng-model="userInfo.url">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="block">
|
|
Gender
|
|
</label>
|
|
<div class="clip-radio radio-primary">
|
|
<input type="radio" id="us-female" name="gender" value="female" ng-model="userInfo.gender">
|
|
<label for="us-female">
|
|
Female
|
|
</label>
|
|
<input type="radio" id="us-male" name="gender" value="male" ng-model="userInfo.gender">
|
|
<label for="us-male">
|
|
Male
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Zip Code
|
|
</label>
|
|
<input class="form-control" placeholder="enter a zip code" type="text" name="zipcode" ng-model="userInfo.zipCode">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
City
|
|
</label>
|
|
<input class="form-control" placeholder="enter your city" type="text" name="city" ng-model="userInfo.city">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
Image Upload
|
|
</label>
|
|
<div flow-init flow-object="obj.flow">
|
|
<div class="user-image">
|
|
<div class="thumbnail margin-bottom-5">
|
|
<img src="assets/images/default-user.png" alt="" ng-if="!obj.flow.files.length && noImage">
|
|
<img ng-src="{{userInfo.avatar}}" alt="" ng-if="!obj.flow.files.length && !noImage">
|
|
<img flow-img="obj.flow.files[0]" ng-if="obj.flow.files.length">
|
|
</div>
|
|
</div>
|
|
<div class="user-image-buttons-edit" ng-if="obj.flow.files.length">
|
|
<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
|
|
<span class="btn btn-danger" ng-click="obj.flow.cancel()"> <i class="fa fa-times"></i></span>
|
|
</div>
|
|
<div class="user-image-buttons-edit" ng-if="!obj.flow.files.length">
|
|
<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
|
|
<span class="btn btn-danger" ng-if="!noImage" ng-click="removeImage()"><i class="fa fa-times"></i> </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>
|
|
Additional Info
|
|
</legend>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Twitter
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Twitter" name="twitter" ng-model="userInfo.twitter">
|
|
<i class="fa fa-twitter"></i> </span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Facebook
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Facebook" name="facebook" ng-model="userInfo.facebook">
|
|
<i class="fa fa-facebook"></i> </span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Google Plus
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Google Plus" name="google" ng-model="userInfo.google">
|
|
<i class="fa fa-google-plus"></i> </span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Github
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Github" name="github" ng-model="userInfo.github">
|
|
<i class="fa fa-github"></i> </span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Linkedin
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Linkedin" name="linkedin" ng-model="userInfo.linkedin">
|
|
<i class="fa fa-linkedin"></i> </span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">
|
|
Skype
|
|
</label>
|
|
<span class="input-icon">
|
|
<input class="form-control" type="text" placeholder="Skype" name="skype" ng-model="userInfo.skype">
|
|
<i class="fa fa-skype"></i> </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</tab>
|
|
<!-- end: TAB EDIT ACCOUNT -->
|
|
<!-- start: TAB PROJECTS -->
|
|
<tab heading="Projects">
|
|
<table class="table" id="projects">
|
|
<thead>
|
|
<tr>
|
|
<th>Project Name</th>
|
|
<th class="hidden-xs">Client</th>
|
|
<th>Proj Comp</th>
|
|
<th class="hidden-xs">%Comp</th>
|
|
<th class="hidden-xs center">Priority</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>IT Help Desk</td>
|
|
<td class="hidden-xs">Master Company</td>
|
|
<td>11 november 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 70%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar progress-bar-warning">
|
|
<span class="sr-only"> 70% Complete (danger)</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-danger">Critical</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>PM New Product Dev</td>
|
|
<td class="hidden-xs">Brand Company</td>
|
|
<td>12 june 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-info">
|
|
<span class="sr-only"> 40% Complete</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-warning">High</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ClipTheme Web Site</td>
|
|
<td class="hidden-xs">Internal</td>
|
|
<td>11 november 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
|
|
<span class="sr-only"> 90% Complete</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-success">Normal</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Local Ad</td>
|
|
<td class="hidden-xs">UI Fab</td>
|
|
<td>15 april 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
|
|
<span class="sr-only"> 50% Complete</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-success">Normal</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Design new theme</td>
|
|
<td class="hidden-xs">Internal</td>
|
|
<td>2 october 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-success">
|
|
<span class="sr-only"> 20% Complete (warning)</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-danger">Critical</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>IT Help Desk</td>
|
|
<td class="hidden-xs">Designer TM</td>
|
|
<td>6 december 2014</td>
|
|
<td class="hidden-xs">
|
|
<div class="progress active progress-xs">
|
|
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
|
|
<span class="sr-only"> 40% Complete (warning)</span>
|
|
</div>
|
|
</div></td>
|
|
<td class="center hidden-xs"><span class="label label-warning">High</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</tab>
|
|
<!-- end: TAB PROJECTS -->
|
|
</tabset>
|
|
<!-- end: USER TABSET -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: USER PROFILE -->
|