Fixes KEYCLOAK-7090 Applications page - HTML (#5189)
This commit is contained in:
June Zhang
Stan Silvert
parent
27d8afe4a7
commit
eb8257a52e
4 changed files with 324 additions and 59 deletions
|
|
@ -6,6 +6,8 @@ doAdd=Add
|
|||
doSignOut=Sign Out
|
||||
doLogIn=Log In
|
||||
|
||||
|
||||
|
||||
editAccountHtmlTitle=Edit Account
|
||||
personalInfoHtmlTitle=Personal Info
|
||||
federatedIdentitiesHtmlTitle=Federated Identities
|
||||
|
|
@ -227,3 +229,15 @@ locale_ru=\u0420\u0443\u0441\u0441\u043a\u0438\u0439
|
|||
locale_sk=Sloven\u010dina
|
||||
locale_sv=Svenska
|
||||
locale_zh-CN=\u4e2d\u6587\u7b80\u4f53
|
||||
|
||||
# Applications
|
||||
applicaitonName=Name
|
||||
applicationType=Application Type
|
||||
applicationInUse=In-use app only
|
||||
clearAllFilter=Clear all filters
|
||||
activeFilters=Active filters
|
||||
filterByName=Filter By Name ...
|
||||
allApps=All applications
|
||||
internalApps=Internal applications
|
||||
thirdpartyApps=Third-Party applications
|
||||
appResults=Results
|
||||
|
|
|
|||
|
|
@ -14,4 +14,43 @@
|
|||
height: 54px;
|
||||
line-height: 50px;
|
||||
width: 54px;
|
||||
}*/
|
||||
}*/
|
||||
|
||||
/*------applications-------*/
|
||||
.card-description {
|
||||
margin-left: 20px;
|
||||
margin-top: -20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.list-group-item-text .app-info {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.list-group-item-text .app-info li {
|
||||
display: inline-block;
|
||||
min-width: 160px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.divide-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #ededed;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.app-form .col-md-6 {
|
||||
line-height: 23px;
|
||||
}
|
||||
.remove-notice {
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.list-view-pf-view {
|
||||
margin-top: 0;
|
||||
}
|
||||
.card-pf-body {
|
||||
margin-top: 0;
|
||||
}
|
||||
.list-view-pf .current-color {
|
||||
font-weight: bold;
|
||||
color: #4F9207;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,266 @@
|
|||
|
||||
|
||||
<div class="cards-pf">
|
||||
<toolbar #toolbar [filterProps]="propLabels" [sortProps]="propLabels" [actionButtons]="actionButtons"></toolbar>
|
||||
<div *ngIf="toolbar.activeView === 'LargeCards'" class="container-fluid container-cards-pf">
|
||||
<div class="row row-cards-pf">
|
||||
<large-app-card *ngFor="let app of (applications | filterby:toolbar.filterBy.prop:toolbar.filterText | orderby:toolbar.sortBy.prop:toolbar.isSortAscending )"
|
||||
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
|
||||
[app]="app"
|
||||
[sessions]="sessions">
|
||||
</large-app-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="toolbar.activeView === 'SmallCards'" class="container-fluid container-cards-pf">
|
||||
<div class="row row-cards-pf">
|
||||
<small-app-card *ngFor="let app of (applications | filterby:toolbar.filterBy.prop:toolbar.filterText | orderby:toolbar.sortBy.prop:toolbar.isSortAscending )"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
[app]="app"
|
||||
[sessions]="sessions">
|
||||
</small-app-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="toolbar.activeView === 'List'" class="container-fluid">
|
||||
<div class="list-group list-view-pf list-view-pf-view">
|
||||
<row-app-card *ngFor="let app of (applications | filterby:toolbar.filterBy.prop:toolbar.filterText | orderby:toolbar.sortBy.prop:toolbar.isSortAscending )"
|
||||
class="list-group-item"
|
||||
[app]="app"
|
||||
[sessions]="sessions">
|
||||
</row-app-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<h1>{{'applicationsHtmlTitle' | translate}}</h1>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// matchHeight the contents of each .card-pf and then the .card-pf itself
|
||||
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
|
||||
});
|
||||
$(document).ready(function () {
|
||||
// Card Single Select
|
||||
$('.card-pf-view-single-select').click(function () {
|
||||
if ($(this).hasClass('active'))
|
||||
{
|
||||
$(this).removeClass('active');
|
||||
} else
|
||||
{
|
||||
$('.card-pf-view-single-select').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--The new application HTML code-->
|
||||
<div class="card-pf card-pf-utilization">
|
||||
<div class="row toolbar-pf">
|
||||
<div class="col-sm-12">
|
||||
<form class="toolbar-pf-actions">
|
||||
<div class="form-group toolbar-pf-filter">
|
||||
<label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
|
||||
<li><a href="#">{{'applicaitonType' | translate}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
|
||||
</div><!-- /input-group -->
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="dropdown btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
|
||||
<li><a href="#">{{'internalApps' | translate}}</a></li>
|
||||
<li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="row toolbar-pf-results">
|
||||
<div class="col-sm-12">
|
||||
<h5>40 {{'appResults' | translate}}</h5>
|
||||
<p>{{'activeFilters' | translate}}</p>
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
{{'applicaitonName' | translate}}: nameofthething
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
{{'applicaitonName' | translate}}: nameofthething
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label label-info">
|
||||
{{'applicaitonName' | translate}}: nameofthething
|
||||
<a href="#"><span class="pficon pficon-close"></span></a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><a href="#">{{'clearAllFilter' | translate}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="card-pf-body">
|
||||
|
||||
<div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
|
||||
<div class="list-group-item">
|
||||
<div class="list-group-item-header">
|
||||
<div class="list-view-pf-expand">
|
||||
<span class="fa fa-angle-right"></span>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-left">
|
||||
<span class="fa fa-desktop list-view-pf-icon-sm"></span>
|
||||
</div>
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
Admin CLI
|
||||
</div>
|
||||
<div class="list-group-item-text">
|
||||
<ul class="app-info">
|
||||
<li>Internal</li>
|
||||
<li><span class="current-color">In-use</span></li>
|
||||
<li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--The collapse application HTNL code-->
|
||||
<div class="list-group-item-container container-fluid hidden">
|
||||
<div class="close">
|
||||
<span class="pficon pficon-close"></span>
|
||||
</div>
|
||||
<form class="form-horizontal app-form">
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput">Client</label>
|
||||
<div class="col-md-6">
|
||||
Google
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-line"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput2">Description</label>
|
||||
<div class="col-md-6">
|
||||
Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput3">URL</label>
|
||||
<div class="col-md-6">
|
||||
<a href="#">www.google.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput4">Has access to</label>
|
||||
<div class="col-md-6">
|
||||
Account
|
||||
<ul>
|
||||
<li>View profile</li>
|
||||
<li>Manage account links</li>
|
||||
<li>Manage account</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">Access granted on</label>
|
||||
<div class="col-md-6">
|
||||
2018-1-7 17：33：52
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-line"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
|
||||
<!-- End Button trigger modal -->
|
||||
</label>
|
||||
<div class="col-md-10 remove-notice">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
<span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
</div>
|
||||
<div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
|
||||
<div class="list-group-item">
|
||||
<div class="list-group-item-header">
|
||||
<div class="list-view-pf-expand">
|
||||
<span class="fa fa-angle-right"></span>
|
||||
</div>
|
||||
<div class="list-view-pf-main-info">
|
||||
<div class="list-view-pf-left">
|
||||
<span class="fa fa-desktop list-view-pf-icon-sm"></span>
|
||||
</div>
|
||||
<div class="list-view-pf-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
Admin CLI
|
||||
</div>
|
||||
<div class="list-group-item-text">
|
||||
<ul class="app-info">
|
||||
<li>Internal</li>
|
||||
<li><span class="current-color">In-use</span></li>
|
||||
<li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--The collapse application HTNL code-->
|
||||
<div class="list-group-item-container container-fluid hidden">
|
||||
<div class="close">
|
||||
<span class="pficon pficon-close"></span>
|
||||
</div>
|
||||
<form class="form-horizontal app-form">
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput">Client</label>
|
||||
<div class="col-md-6">
|
||||
Google
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-line"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput2">Description</label>
|
||||
<div class="col-md-6">
|
||||
Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput3">URL</label>
|
||||
<div class="col-md-6">
|
||||
<a href="#">www.google.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label" for="textInput4">Has access to</label>
|
||||
<div class="col-md-6">
|
||||
Account
|
||||
<ul>
|
||||
<li>View profile</li>
|
||||
<li>Manage account links</li>
|
||||
<li>Manage account</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">Access granted on</label>
|
||||
<div class="col-md-6">
|
||||
2018-1-7 17：33：52
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-line"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
|
||||
<!-- End Button trigger modal -->
|
||||
</label>
|
||||
<div class="col-md-10 remove-notice">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
<span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End of the new application HTML code-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// click the list-view heading then expand a row
|
||||
$("#pf-list-simple-expansion .list-group-item-header").click(function(event){
|
||||
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
|
||||
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
|
||||
.end().parent().toggleClass("list-view-pf-expand-active")
|
||||
.find(".list-group-item-container").toggleClass("hidden");
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
// click the close button, hide the expand row and remove the active status
|
||||
$("#pf-list-simple-expansion .list-group-item-container .close").on("click", function (){
|
||||
$(this).parent().addClass("hidden")
|
||||
.parent().removeClass("list-view-pf-expand-active")
|
||||
.find(".fa-angle-right").removeClass("fa-angle-down");
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ p.description {
|
|||
/* Introduction Message on the left */
|
||||
.introMessage {
|
||||
margin: 10px 20px 20px 0;
|
||||
|
||||
|
||||
/* Device Activity */
|
||||
.card-title{
|
||||
margin-left: 20px;
|
||||
|
|
@ -67,20 +67,20 @@ p.description {
|
|||
.activity-item {
|
||||
padding-left: 60px;
|
||||
}
|
||||
.activity-item ul{
|
||||
.activity-item ul {
|
||||
list-style: none;
|
||||
}
|
||||
.activity-item h3 .fa{
|
||||
.activity-item h3 .fa {
|
||||
margin-left: -30px;
|
||||
margin-right: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.btn-logout{
|
||||
.btn-logout {
|
||||
margin-left: 40px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.list-view-pf .current-color{
|
||||
.list-view-pf .current-color {
|
||||
font-weight: bold;
|
||||
color: #4F9207!important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue