Fixes KEYCLOAK-7535 - My Resources - HTML
This PR is to provide HTML and CSS code JIRA task: https://issues.jboss.org/browse/KEYCLOAK-7535
This commit is contained in:
zhutaoredhat
Stan Silvert
parent
39cbf4e9ab
commit
30e8071d1d
6 changed files with 1018 additions and 6 deletions
|
|
@ -283,3 +283,30 @@ authenticatorChangePhone=Change Phone Number
|
|||
authenticatorBackupCodesTitle=Backup Codes
|
||||
authenticatorBackupCodesMessage=Get your 8-digit backup codes
|
||||
authenticatorBackupCodesFinishSetUpMessage=12 backup codes was generated at this time. Each one can be used once.
|
||||
|
||||
#Resources
|
||||
resources=Resources
|
||||
myResources=My Resources
|
||||
sharedwithMe=Shared with Me
|
||||
share=Share
|
||||
resource=Resource
|
||||
application=Application
|
||||
date=Date
|
||||
sharewith=Share with
|
||||
owner=Owner
|
||||
accessPermissions=Access Permissions
|
||||
permissionRequests=Permission Requests
|
||||
approve=Approve
|
||||
approveAll=Approve all
|
||||
sharedwith=Shared with
|
||||
people=people
|
||||
perPage=per page
|
||||
currentPage=Current Page
|
||||
sharetheResource=Share the resource
|
||||
user=User
|
||||
group=Group
|
||||
selectPermission=Select Permission
|
||||
addPeople=Add people to share your resource with
|
||||
addTeam=Add team to share your resource with
|
||||
myPermissions=My Permissions
|
||||
waitingforApproval=Waiting for approval
|
||||
|
|
|
|||
|
|
@ -1 +1,311 @@
|
|||
<h1>Placeholder for My Resources Detail Page</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="#"> {{'resources' | translate}}</a>
|
||||
</li>
|
||||
<li class="active"> <strong>Alice Family</strong>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="col-sm-12 card-pf resources-list">
|
||||
<div class="resources-header">
|
||||
<span class="fa fa-file"></span>
|
||||
<h1><strong>Alice Family</strong></h1>
|
||||
<div class="resources-actions">
|
||||
<button class="btn btn-primary"><span class="fa fa-share"></span> {{'share' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#"> {{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resources-info">
|
||||
<span>Access management</span>
|
||||
<span><label> {{'application' | translate}}:</label> <a href="#">photoz-rest-api</a> </span>
|
||||
<span><label> {{'owner' | translate}}:</label> Roma William (you）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf-body row">
|
||||
<div class="m-t">
|
||||
<div id="pf-list-var3" class="list-group list-view-pf list-view-resources list-view-detail">
|
||||
<div class="list-group-item pfng-list-heading list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions list-view-master-actions">
|
||||
<button class="btn btn-default"> {{'approveAll' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#"> {{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
{{'sharewith' | translate}} 3 {{'people' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg">
|
||||
{{'accessPermissions' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg">
|
||||
{{'permissionRequests' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<button class="btn btn-default"> {{'approve' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#"> {{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<div class="user-list-avatar"><span class="fa fa-user"></span></div>
|
||||
Martin Liu
|
||||
<small>jhonsmith@paternfly.com</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg">
|
||||
Read, Battery, Test-date, Status
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg permission-requests-labels ">
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Status
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Time
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Beta
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<button class="btn btn-default"> {{'approve' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#"> {{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<div class="user-list-avatar"><span class="fa fa-user"></span></div>
|
||||
Jhon Smith
|
||||
<small>jhonsmith@paternfly.com</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg">
|
||||
Read, Battery, Test-date
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg permission-requests-labels ">
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Status
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Time
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Beta
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<!-- <button class="btn btn-default">Approve</button> -->
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#"> {{'remove' | translate}}</a></li>
|
||||
<li><a href="#"> {{'edit' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<div class="user-list-avatar"><span class="fa fa-user"></span></div>
|
||||
Jhon Wong
|
||||
<small>jhonsmith@paternfly.com</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg">
|
||||
Read, Battery, Test-date
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-lg permission-requests-labels ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
|
||||
<div class="form-group">
|
||||
<select class="selectpicker pagination-pf-pagesize">
|
||||
<option value="6">6</option>
|
||||
<option value="10" >10</option>
|
||||
<option value="15" selected="selected">15</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
<span> {{'perPage' | translate}}</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
|
||||
<ul class="pagination pagination-pf-back">
|
||||
<li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
|
||||
<li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
|
||||
</ul>
|
||||
<label for="pagination1-page" class="sr-only"> {{'currentPage' | translate}}</label>
|
||||
<input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
|
||||
<span>of <span class="pagination-pf-pages">5</span></span>
|
||||
<ul class="pagination pagination-pf-forward">
|
||||
<li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
|
||||
<li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel"> {{'sharetheResource' | translate}} -<span> Alice Family </span></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#home" data-toggle="tab">
|
||||
<span class="fa fa-user"></span> {{'user' | translate}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#team" data-toggle="tab">
|
||||
<span class="fa fa-users"></span> {{'group' | translate}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="myTabContent" class="tab-content resource-share-content">
|
||||
<div class="tab-pane fade in active" id="home">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-12" for="textInput-modal-markup">{{'addPeople' | translate}}</label>
|
||||
<div class="col-sm-12">
|
||||
<input type="text" id="textInput-modal-markup" class="form-control" placeholder="Username or email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-12" for="boostrapSelect">{{'selectPermission' | translate}}</label>
|
||||
<div class="col-md-12">
|
||||
<select class="selectpicker" multiple data-selected-text-format="count>3" id="boostrapSelect">
|
||||
<option>Mustard</option>
|
||||
<option>Ketchup</option>
|
||||
<option>Relish</option>
|
||||
<option>Onions</option>
|
||||
<option>Mushrooms</option>
|
||||
<option>Pickles</option>
|
||||
<option>Mayonnaise</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="team">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-12" for="textInput-modal-markup">{{'addTeam' | translate}}</label>
|
||||
<div class="col-sm-12">
|
||||
<input type="text" id="textInput-modal-markup" class="form-control" placeholder="Team name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-12" for="boostrapSelect">{{'selectPermission' | translate}}</label>
|
||||
<div class="col-md-12">
|
||||
<select class="selectpicker" multiple data-selected-text-format="count>3" id="boostrapSelect">
|
||||
<option>Mustard</option>
|
||||
<option>Ketchup</option>
|
||||
<option>Relish</option>
|
||||
<option>Onions</option>
|
||||
<option>Mushrooms</option>
|
||||
<option>Pickles</option>
|
||||
<option>Mayonnaise</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
|
||||
<button type="button" class="btn btn-primary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Modal -->
|
||||
|
|
|
|||
|
|
@ -1 +1,249 @@
|
|||
<h1>Placeholder for My Resources Page</h1>
|
||||
<div class="page-header">
|
||||
<h1>{{'resources' | translate}}</h1>
|
||||
</div>
|
||||
<div class="col-sm-12 card-pf resources-list">
|
||||
<div class="card-pf-body row">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#">{{'myResources' | translate}}</a></li>
|
||||
<li><a href="#">{{'sharedwithMe' | translate}}</a></li>
|
||||
</ul>
|
||||
<div class="m-t">
|
||||
<div id="pf-list-var3" class="list-group list-view-pf list-view-resources">
|
||||
<div class="list-group-item pfng-list-heading list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
{{'resource' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'application' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'date' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'sharewith' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">{{'share' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">{{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Alice Family</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">photoz-rest-api</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
12:00 AM
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">5 persons</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">{{'share' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">{{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Patternfly design document update</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">photoz-rest</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
12:00 AM
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">5 persons</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">{{'share' | translate}}</button>
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">{{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Patternfly design document</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item ">
|
||||
<a href="#">photoz-rest-api</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item ">
|
||||
12:00 AM
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">5 persons</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
|
||||
<div class="form-group">
|
||||
<select class="selectpicker pagination-pf-pagesize">
|
||||
<option value="6">6</option>
|
||||
<option value="10" >10</option>
|
||||
<option value="15" selected="selected">15</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
<span>{{'perPage' | translate}}</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
|
||||
<ul class="pagination pagination-pf-back">
|
||||
<li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
|
||||
<li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
|
||||
</ul>
|
||||
<label for="pagination1-page" class="sr-only">{{'currentPage' | translate}}</label>
|
||||
<input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
|
||||
<span>of <span class="pagination-pf-pages">5</span></span>
|
||||
<ul class="pagination pagination-pf-forward">
|
||||
<li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
|
||||
<li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">{{'sharetheResource' | translate}}-<span> Alice Family </span></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#home" data-toggle="tab">
|
||||
<span class="fa fa-user"></span> {{'user' | translate}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#team" data-toggle="tab">
|
||||
<span class="fa fa-users"></span> Group
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="myTabContent" class="tab-content resource-share-content">
|
||||
<div class="tab-pane fade in active" id="home">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-12" for="textInput-modal-markup">{{'addPeople' | translate}}</label>
|
||||
<div class="col-sm-12">
|
||||
<input type="text" id="textInput-modal-markup" class="form-control" placeholder="Username or email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-12" for="boostrapSelect">{{'selectPermission' | translate}}</label>
|
||||
<div class="col-md-12">
|
||||
<select class="selectpicker" multiple data-selected-text-format="count>3" id="boostrapSelect">
|
||||
<option>Mustard</option>
|
||||
<option>Ketchup</option>
|
||||
<option>Relish</option>
|
||||
<option>Onions</option>
|
||||
<option>Mushrooms</option>
|
||||
<option>Pickles</option>
|
||||
<option>Mayonnaise</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="team">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-12" for="textInput-modal-markup">{{'addTeam' | translate}}</label>
|
||||
<div class="col-sm-12">
|
||||
<input type="text" id="textInput-modal-markup" class="form-control" placeholder="Team name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-12" for="boostrapSelect">{{'selectPermission' | translate}}</label>
|
||||
<div class="col-md-12">
|
||||
<select class="selectpicker" multiple data-selected-text-format="count>3" id="boostrapSelect">
|
||||
<option>Mustard</option>
|
||||
<option>Ketchup</option>
|
||||
<option>Relish</option>
|
||||
<option>Onions</option>
|
||||
<option>Mushrooms</option>
|
||||
<option>Pickles</option>
|
||||
<option>Mayonnaise</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
|
||||
<button type="button" class="btn btn-primary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Modal -->
|
||||
|
|
|
|||
|
|
@ -1 +1,99 @@
|
|||
<h1>Placeholder for Shared With Me Detail Page</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="#">{{'resources' | translate}}</a>
|
||||
</li>
|
||||
<li class="active"> <strong>Alice Family</strong>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="col-sm-12 card-pf resources-list">
|
||||
<div class="resources-header">
|
||||
<span class="fa fa-file"></span>
|
||||
<h1><strong>Alice Family</strong></h1>
|
||||
<div class="resources-info">
|
||||
<span>Access management</span>
|
||||
<span><label>{{'application' | translate}}:</label> <a href="#">photoz-rest-api</a> </span>
|
||||
<span><label>{{'owner' | translate}}:</label> Christ Ma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-pf-body row">
|
||||
<div class="m-t">
|
||||
<div id="pf-list-var3" class="list-group list-view-pf list-view-resources list-view-detail">
|
||||
<div class="list-group-item pfng-list-heading list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions list-view-space">
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
{{'sharedwithMe' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'accessPermissions' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'permissionRequests' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'Status' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions list-view-pf-status">
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">{{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<div class="user-list-avatar"><span class="fa fa-user"></span></div>
|
||||
Martin Liu (you)
|
||||
<small>jhonsmith@paternfly.com</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
Read, Battery, Test-date, Status
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item permission-requests-labels my-requests-labels">
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Status
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Time
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
Beta
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<span class="label label-warning">{{'waitingforApproval' | translate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1,166 @@
|
|||
<h1>Placeholder for Shared With Me Page</h1>
|
||||
<div class="page-header">
|
||||
<h1>{{'resources' | translate}}</h1>
|
||||
</div>
|
||||
<div class="col-sm-12 card-pf resources-list">
|
||||
<div class="card-pf-body row">
|
||||
<ul class="nav nav-tabs">
|
||||
<li><a href="#">{{'myResources' | translate}}</a></li>
|
||||
<li class="active"><a href="#">{{'sharedwithMe' | translate}}</a></li>
|
||||
</ul>
|
||||
<div class="m-t">
|
||||
<div id="pf-list-var3" class="list-group list-view-pf list-view-resources list-view-shared">
|
||||
<div class="list-group-item pfng-list-heading list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
{{'resource' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'owner' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'application' | translate}}
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
{{'myPermissions' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">{{'remove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Open camera</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
Chirst Ma
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">photoz-rest-api</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
Read, Battery, Test-date, Status, Delete
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">Remove</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Open company server</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
tzhu
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
<a href="#">photoz-rest</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
Read, Battery
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
||||
<div class="list-view-pf-actions">
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
|
||||
<li><a href="#">Remove</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
<span class="fa fa-file"></span> <a href="#">Personal info of Tom Li</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info">
|
||||
<div class="list-view-pf-additional-info-item ">
|
||||
lijun
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item ">
|
||||
<a href="#">photoz-rest-api</a>
|
||||
</div>
|
||||
<div class="list-view-pf-additional-info-item">
|
||||
Email, Phone, Address, Avatar, Username…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
|
||||
<div class="form-group">
|
||||
<select class="selectpicker pagination-pf-pagesize">
|
||||
<option value="6">6</option>
|
||||
<option value="10" >10</option>
|
||||
<option value="15" selected="selected">15</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
<span>per page</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
|
||||
<ul class="pagination pagination-pf-back">
|
||||
<li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
|
||||
<li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
|
||||
</ul>
|
||||
<label for="pagination1-page" class="sr-only">Current Page</label>
|
||||
<input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
|
||||
<span>of <span class="pagination-pf-pages">5</span></span>
|
||||
<ul class="pagination pagination-pf-forward">
|
||||
<li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
|
||||
<li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ p.description {
|
|||
border-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.card-pf-body {
|
||||
.card-pf-body {
|
||||
padding: 20px 20px 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -320,6 +320,143 @@ p.description {
|
|||
.card-linked-account .list-view-pf .list-group-item-text {
|
||||
width: calc(45% - 40px);
|
||||
}
|
||||
/*resource*/
|
||||
.m-t {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.list-view-pf .list-group-item {
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.list-view-resources .list-view-pf-additional-info-item {
|
||||
width: 30%;
|
||||
}
|
||||
.list-view-resources .list-view-pf-additional-info-item .pficon {
|
||||
margin-right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.list-view-resources .list-view-pf-additional-info-item-lg {
|
||||
width: 45%;
|
||||
}
|
||||
.pfng-list-heading .list-view-pf-main-info {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
.list-view-resources .list-view-pf-actions {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
}
|
||||
.pfng-list-heading .list-view-pf-additional-info {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.list-view-resources .list-view-pf-description {
|
||||
width: 35%;
|
||||
}
|
||||
.list-view-shared .list-view-pf-description {
|
||||
width: 30%;
|
||||
}
|
||||
.list-view-shared .list-view-pf-actions {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
.list-view-detail .list-view-pf-actions {
|
||||
width: 90px;
|
||||
}
|
||||
.list-view-detail .list-view-master-actions {
|
||||
width: 105px;
|
||||
}
|
||||
.list-view-detail .list-view-space{
|
||||
width: 20px;
|
||||
}
|
||||
.list-view-resources .list-view-pf-status {
|
||||
width: auto;
|
||||
}
|
||||
.list-view-pf-additional-info-item {
|
||||
text-align: left;
|
||||
}
|
||||
.list-view-resources .list-view-pf-stacked .list-group-item-heading {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.list-view-resources .content-view-pf-pagination {
|
||||
border: none;
|
||||
}
|
||||
.resources-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.resources-header .fa-file {
|
||||
font-size: 60px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.resources-info span {
|
||||
border-right: 1px solid #cccccc;
|
||||
padding-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.resources-info span:last-child {
|
||||
border-right: 0px solid #cccccc;
|
||||
}
|
||||
.resources-actions {
|
||||
float: right;
|
||||
margin-top: -35px;
|
||||
}
|
||||
.resources-actions button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.user-list-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background-color: #1E97D6;
|
||||
color: #fff;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.list-view-master-actions {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.permission-requests-labels li {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.permission-requests-labels .label-info {
|
||||
background-color: #4A90E2;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.my-requests-labels .label-info {
|
||||
background-color: #15B692;
|
||||
}
|
||||
.modal-title span {
|
||||
font-weight: normal;
|
||||
}
|
||||
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
|
||||
width: 100%;
|
||||
}
|
||||
.resource-share-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.resources-list .nav-tabs {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.resources-list .card-pf-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.resources-list .content-view-pf-pagination {
|
||||
margin-top: 20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: 20px 15px 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.card-pf-application h2 {
|
||||
|
|
@ -356,9 +493,36 @@ p.description {
|
|||
.non-display {
|
||||
display: none;
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: 20px 15px 0px 20px;
|
||||
}
|
||||
.resources-header {
|
||||
padding: 20px 20px 0 20px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.resources-header .fa-file {
|
||||
font-size: 50px;
|
||||
}
|
||||
.resources-list .card-pf-body {
|
||||
padding: 0;
|
||||
}
|
||||
.list-view-resources .list-view-pf-additional-info-item {
|
||||
width: 100%;
|
||||
}
|
||||
.list-view-resources .list-view-pf-additional-info-item-lg {
|
||||
width: 100%;
|
||||
}
|
||||
.list-view-resources .list-view-pf-description {
|
||||
width: 100%;
|
||||
}
|
||||
.list-view-shared .list-view-pf-description {
|
||||
width: 100%;
|
||||
}
|
||||
.resources-list .nav-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* authenticator style */
|
||||
.list-pf {
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue