keycloak-memoizeit
Changes
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.css 41(+40 -1)
Details
diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
index 43c4a69..110de18 100755
--- a/themes/src/main/resources/theme/base/account/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
@@ -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
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.css
index 090ab1b..7f81bea 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.css
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.css
@@ -14,4 +14,43 @@
height: 54px;
line-height: 50px;
width: 54px;
-}*/
\ No newline at end of file
+}*/
+
+/*------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;
+}
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
index 075d64a..f58debd 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
@@ -1,54 +1,266 @@
+<div class="page-header">
+ <h1>{{'applicationsHtmlTitle' | translate}}</h1>
+</div>
+<!--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>
-<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>
+ </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 *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 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 *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 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>
- $(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>
\ No newline at end of file
+<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>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
index 2f212bd..f40d3a9 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
@@ -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;
}