From c8df32b0e57c910c424cc2212acfa52bc8faa4f5 Mon Sep 17 00:00:00 2001 From: vrockai Date: Tue, 1 Oct 2013 11:03:23 +0200 Subject: [PATCH] KEYCLOAK-74 - added acc/social and acc/access mock pages --- .../resources/forms/theme/default/access.ftl | 73 ++++++- .../forms/theme/default/css/admin-console.css | 50 ++++- .../forms/theme/default/css/icons.css | 34 ++++ .../forms/theme/default/css/tables.css | 183 ++++++++++++++++++ .../resources/forms/theme/default/social.ftl | 28 ++- .../forms/theme/default/template-main.ftl | 1 + 6 files changed, 358 insertions(+), 11 deletions(-) create mode 100644 forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css create mode 100644 forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl index 8eff7d7112..127b73ffc5 100755 --- a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl @@ -1,11 +1,82 @@ +<#-- TODO: Only a placeholder, implementation needed --> <#import "template-main.ftl" as layout> <@layout.mainLayout active='access' bodyClass='access'; section> <#if section = "header"> - Authorized Applications +

Manage Authorised Access

<#elseif section = "content"> +

Services requested access to your following accounts:

+ + + + + + + + + + + + + + + + + + +
Table of services
+ \ No newline at end of file diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css index c363b3ba8c..af63a630f7 100644 --- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css @@ -240,33 +240,65 @@ td.token-cell button { margin-top: 0.45454545454545em; } table.list { - border-left: none; - border-right: none; + border-color: #EDEDED; + border-left: medium none #EDEDED; + border-right: medium none #EDEDED; margin-top: 1.5em; } table.list caption { display: none; } table.list tbody tr:first-child td { - border-top: 1px solid #dcdcdc; + border-top: 1px solid #EDEDED; } table.list tbody tr:nth-child(2n) { - background-color: #fff; + background-color: #FFFFFF; } table.list tbody tr td { - border-right: none; - border-left: none; + border-left: medium none; + border-right: medium none; } table.list tbody tr td.provider { - font-weight: bold; font-size: 1.2em; + font-weight: bold; +} +table.list tbody tr td.provider a { + display: inline-block; + padding-bottom: 0.333333em; + padding-top: 0.416667em; } table.list tbody tr td.soft { - color: #a1a1a1; + color: #A1A1A1; } table.list tbody tr td.action { - text-align: right; font-size: 1em; + text-align: right; +} +table.list tbody tr.expanded { + background-color: #F6F6F6; +} +table.list tbody tr.expanded .provider { + display: block; + font-size: 1.3913em; + padding-top: 0.5em; +} +table.list tbody tr.expanded p { + margin-bottom: 1.73913em; + margin-top: 1.30435em; +} +table.list tbody tr.expanded ul li { + margin-left: 1.30435em; +} +table.list tbody tr.expanded ul li .item, table.list tbody tr.expanded ul li .status { + margin-right: 2.6087em; +} +table.list tbody tr.expanded ul li .red { + color: #BA1212; +} +table.list tbody tr.expanded .form-actions { + font-size: 0.869565em; + margin-bottom: 1.5em; + margin-top: 0.5em; } /* Page: TOTP setup */ .totp ol li { diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css new file mode 100644 index 0000000000..3db30cd980 --- /dev/null +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css @@ -0,0 +1,34 @@ +.icon-collapse, .icon-expand { + background-image: url("img/icon-collapse-expand.png"); + background-position: left top; + background-repeat: no-repeat; + height: 14px; + margin-right: 1em; + width: 14px; +} +.icon-expand { + background-position: left -14px; + margin-top: -1px; +} +.social:before { + display: inline-block; + font: 120%/1.65 zocial; + padding-right: 10px; + width: 28px; +} +.social.googleplus:before { + color: #D54431; + content: "+"; +} +.social.google:before { + color: #3078F0; + content: "G"; +} +.social.twitter:before { + color: #46C0FB; + content: "T"; +} +.social.facebook:before { + color: #4863AE; + content: "f"; +} diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css new file mode 100644 index 0000000000..15a1f343bf --- /dev/null +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css @@ -0,0 +1,183 @@ +table { + width: 100%; + border: 1px #dcdcdc solid; + border-spacing: 0; +} +table caption { + text-align: left; + font-weight: bold; + padding: 11.5px; +} +table tbody tr:nth-child(even) { + background-color: #f6f6f6; +} +table tbody tr td, +table thead tr th { + font-weight: normal; + padding: 6px 15px; + font-size: 11.5px; + border-top: 1px #ebebeb; + border-right: 1px #dcdcdc solid; + text-align: left; +} +.rcue-table-actions { + padding: 1px; + border-top: none; +} +.rcue-table-actions span:last-child { + float: right; +} +.rcue-table-actions { + padding: 1px; +} +/* +.rcue-table-actions button { + padding: 3px 8px; + font-size: 11px; + box-shadow: 1px 2px 2px #e3e3e3; + margin: 4px; +} +*/ +.rcue-table-number { + text-align: right; + width: 100px; +} +table thead tr th { + font-weight: bold; + border: none; + border-right: 1px #dcdcdc solid; + background-image: linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #eeeeee)); + border-bottom: 1px #cedede solid; +} +/* +table tbody tr td:first-child { + color: #0099d3; +} +*/ +table thead tr th:last-child { + border-right: none; +} +table tbody tr:first-child td { + border-top: 1px solid #f2f2f2; + /* padding-top: 9px; */ + +} +table tbody tr td:last-child { + border-right: none; +} +/* +table tbody tr:hover { + cursor: pointer; + background-color: #ebebeb; +} +*/ +/* Styles from Gabriel */ +.rcue-table-actions button + button, +.rcue-table-actions .button + button { + margin-left: 5px; +} +.rcue-table-actions div.actions { + float: right; + font-size: 0.90909090909091em; +} +table tbody tr { + border-top: 1px solid #ededed; +} +table tbody tr:hover { + cursor: default; +} +table tbody tr td { + vertical-align: middle; +} +table tbody tr td.token-cell { + padding: 0 0.7em; + line-height: 0; +} +table tbody tr td.token-cell .token { + padding-top: 0.18181818181818em; + padding-bottom: 0.18181818181818em; + margin-top: 6px; + margin-bottom: 5px; +} +table tbody tr td.token-cell button { + float: left; + margin-bottom: 7px; + margin-top: 8px; +} +table tbody.selectable-rows tr:hover { + cursor: pointer; + background-color: #ebebeb; +} +table tbody.selectable-rows tr:first-child td { + padding-top: 9px; +} +table tbody.selectable-rows tr.selected, +table tbody.selectable-rows tr.selected:hover { + background-color: #eaf5fb; +} +table tbody.selectable-rows tr.selected td:first-child, +table tbody.selectable-rows tr.selected:hover td:first-child { + background-image: url(img/icon-row-selected.svg); + background-position: 0.2em center; + background-repeat: no-repeat; +} +table tfoot tr { + border-top: 1px solid #cecece; +} +table tfoot tr .table-nav { + float: right; +} +table tfoot tr .table-nav a { + display: inline-block; + line-height: 2.4em; + border-left: 1px solid #d9d9d9; + width: 3.5em; + background-color: #f3f3f3; + background-image: linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed)); + text-indent: -99999em; + background-image: url(img/sprite-table-nav.png); + background-repeat: no-repeat; + background-position: left top; + vertical-align: top; +} +table tfoot tr .table-nav a.last { + background-position: top right; +} +table tfoot tr .table-nav a.prev { + background-position: bottom left; +} +table tfoot tr .table-nav a.next { + background-position: bottom right; +} +table tfoot tr .table-nav a:hover { + background-image: url(img/sprite-table-nav.png); + background-color: #eeeeee; +} +table tfoot tr .table-nav a:active { + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25) inset; +} +table tfoot tr .table-nav a.disabled { + opacity: 0.5; + filter: alpha(opacity=50); + cursor: default; +} +table tfoot tr .table-nav a.disabled:active { + box-shadow: none; +} +table tfoot tr .table-nav span { + font-size: 1.1em; + border-left: 1px solid #d9d9d9; + line-height: 2.18181818181818em; + display: inline-block; + padding: 0 1.36363636363636em; +} diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl index 09b770e2b3..c927285df9 100755 --- a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl @@ -1,12 +1,38 @@ +<#-- TODO: Only a placeholder, implementation needed --> <#import "template-main.ftl" as layout> <@layout.mainLayout active='social' bodyClass='social'; section> <#if section = "header"> - Social Accounts +

Social Accounts

<#elseif section = "content"> +
+
+

You have the following social accounts associated to your Keycloak account:

+ + + + + + + + + + + + + + + + + + + +
Table of social accounts
Connected as john@google.comRemove Google
Add Twitter
Add Facebook
+
+
\ No newline at end of file diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl index 9f27f1e384..3cc7975f05 100644 --- a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl +++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl @@ -10,6 +10,7 @@ +