Fixes KEYCLOAK-7382 - Application Response HTML Update (#5235)
This commit is contained in:
June Zhang
Stan Silvert
parent
65c39763eb
commit
5e8db32329
2 changed files with 260 additions and 207 deletions
|
|
@ -3,246 +3,253 @@
|
|||
</div>
|
||||
|
||||
<!--The new application HTML code-->
|
||||
<div class="card-pf card-pf-utilization">
|
||||
<div class="card-pf card-pf-application">
|
||||
<div class="card-pf-body">
|
||||
<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>
|
||||
<div id="toolbar-application-mobile">
|
||||
<h2>
|
||||
<span class="fa fa-angle-right"></span>
|
||||
<a href="javascript:void(0)">Filter</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="toolbar-application">
|
||||
<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="#">{{'applicaitonName' | translate}}</a></li>
|
||||
<li><a href="#">{{'applicaitonType' | translate}}</a></li>
|
||||
<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><!-- /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 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="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 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-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
Admin CLI
|
||||
<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 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>
|
||||
</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>
|
||||
<div class="row form-horizontal">
|
||||
<label class="col-md-2 control-label non-display" for="textInput">Client</label>
|
||||
<div class="col-md-6 non-display">
|
||||
Google
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-horizontal">
|
||||
<label class="col-md-2 control-label non-display" 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="row form-horizontal">
|
||||
<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="row form-horizontal">
|
||||
<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>
|
||||
</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 class="row form-horizontal">
|
||||
<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="row form-horizontal">
|
||||
<label class="col-md-2 control-label">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-default" 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>
|
||||
|
||||
</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>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
</div>
|
||||
<div 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 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-body">
|
||||
<div class="list-view-pf-description">
|
||||
<div class="list-group-item-heading">
|
||||
Admin CLI
|
||||
<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 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>
|
||||
</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>
|
||||
</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 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>
|
||||
<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>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
<!--The end of the collapse application HTNL code-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End of the new application HTML code-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#toolbar-application-mobile").click(function(){
|
||||
$("#toolbar-application").toggle();
|
||||
})
|
||||
// click the list-view heading then expand a row
|
||||
$(".list-group-item-header").click(function(event){
|
||||
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ p.description {
|
|||
.col-xs-12,
|
||||
.col-xs-2,
|
||||
.col-xs-10,
|
||||
.col-sm-12
|
||||
.col-sm-12,
|
||||
.col-sm-4,
|
||||
.col-md-4,
|
||||
.col-md-8,
|
||||
|
|
@ -281,3 +281,49 @@ p.description {
|
|||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Application Style */
|
||||
.card-pf-application {
|
||||
padding: 0;
|
||||
}
|
||||
.card-pf-application .card-pf-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card-pf-application .toolbar-pf {
|
||||
margin: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
#toolbar-application-mobile {
|
||||
display: none;
|
||||
}
|
||||
.card-pf-application .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.card-pf-application h2 {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.card-pf-application h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-pf-application .list-group-item-container {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.card-pf-application .form-horizontal {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#toolbar-application-mobile {
|
||||
display: block;
|
||||
}
|
||||
#toolbar-application {
|
||||
display: none;
|
||||
}
|
||||
.non-display {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue