libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Fixes KEYCLOAK-7535 - My Resources - HTML

Browse source 
This PR is to provide HTML and CSS code
JIRA task: https://issues.jboss.org/browse/KEYCLOAK-7535
This commit is contained in:
zhutaoredhat 2018-06-26 17:59:59 +08:00 committed by Stan Silvert
parent 39cbf4e9ab
commit 30e8071d1d
6 changed files with 1018 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
themes/src/main/resources/theme/base/account/messages/messages_en.properties
View file

@ -283,3 +283,30 @@ authenticatorChangePhone=Change Phone Number
authenticatorBackupCodesTitle=Backup Codes authenticatorBackupCodesTitle=Backup Codes
authenticatorBackupCodesMessage=Get your 8-digit backup codes authenticatorBackupCodesMessage=Get your 8-digit backup codes
authenticatorBackupCodesFinishSetUpMessage=12 backup codes was generated at this time. Each one can be used once. 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

312
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-detail-page.component.html
View file

@ -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">&times;</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 -->

250
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
View file

@ -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">&times;</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 -->

100
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-detail-page.component.html
View file

@ -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>

167
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-page.component.html
View file

@ -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>

168
themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
View file

@ -83,7 +83,7 @@ p.description {
border-top: 0; border-top: 0;
padding: 0; padding: 0;
} }
.card-pf-body { .card-pf-body {
padding: 20px 20px 10px; padding: 20px 20px 10px;
margin-top: 0; margin-top: 0;
} }
@ -320,6 +320,143 @@ p.description {
.card-linked-account .list-view-pf .list-group-item-text { .card-linked-account .list-view-pf .list-group-item-text {
width: calc(45% - 40px); 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) { @media (max-width: 767px) {
.card-pf-application h2 { .card-pf-application h2 {
@ -356,9 +493,36 @@ p.description {
.non-display { .non-display {
display: none; 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 */ /* authenticator style */
.list-pf { .list-pf {
border-bottom: 0; border-bottom: 0;