Skip to content

Commit 87ab0ae

Browse files
himeshsiriwardanahimeshsiriwardana
authored
Merge pull request #5157 from himeshsiriwardana/code-samples-layout
added code samples for 7,7.1 and next
2 parents 52924ce + 9fb8b20 commit 87ab0ae

25 files changed

Lines changed: 2668 additions & 4 deletions

‎en/identity-server/7.0.0/docs/assets/code-samples/body.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{{^isPolicyPage}}
2+
<header class="fp-header">
3+
<div class="fp-header-logo">
4+
{{{ProductHeader}}}
5+
</div>
6+
<div class="fp-header-theme">
7+
<input type="checkbox" class="fp-checkbox" id="fp-checkbox">
8+
<label for="fp-checkbox" class="fp-theme-checkbox-label">
9+
<i class="moon icon"></i>
10+
<i class="sun icon"></i>
11+
<div class="fp-theme-indicator"></div>
12+
</label>
13+
</div>
14+
</header>
15+
<main class="center-segment">
16+
<div class="ui segment fp-container">
17+
<div class="fp-info-container">
18+
<div class="fp-info-illustration">
19+
<img src="extensions/layouts/custom/assets/illustration.svg" alt="Auth Page Illustration Image">
20+
</div>
21+
<div class="fp-info-content">
22+
<p>Access Our All Service With This Account</p>
23+
<div class="fp-services">
24+
<div class="fp-service-item">
25+
<i class="utensils icon"></i>
26+
<p>Create new orders</p>
27+
</div>
28+
<div class="fp-service-item">
29+
<i class="shipping fast icon"></i>
30+
<p>Get delivery to doorstep</p>
31+
</div>
32+
<div class="fp-service-item">
33+
<i class="credit card icon"></i>
34+
<p>Online payment facility</p>
35+
</div>
36+
<div class="fp-service-item">
37+
<i class="money bill alternate outline icon"></i>
38+
<p>Cash on delivery</p>
39+
</div>
40+
<div class="fp-service-item">
41+
<i class="map marker alternate icon"></i>
42+
<p>Track your order</p>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="fp-divider"></div>
48+
<div class="fp-content-container">
49+
<div class="center-segment">
50+
<div class="ui container">
51+
{{{MainSection}}}
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</main>
57+
{{{ProductFooter}}}
58+
{{/isPolicyPage}}
59+
60+
{{#isPolicyPage}}
61+
<header class="fp-header">
62+
<div class="fp-header-logo">
63+
{{{ProductHeader}}}
64+
</div>
65+
<div class="fp-header-theme">
66+
<input type="checkbox" class="fp-checkbox" id="fp-checkbox">
67+
<label for="fp-checkbox" class="fp-theme-checkbox-label">
68+
<i class="moon icon"></i>
69+
<i class="sun icon"></i>
70+
<div class="fp-theme-indicator"></div>
71+
</label>
72+
</div>
73+
</header>
74+
<main class="policy-page">
75+
<div class="app-content policy-page-content">
76+
<div class="ui container">
77+
{{{MainSection}}}
78+
</div>
79+
</div>
80+
</main>
81+
{{{ProductFooter}}}
82+
{{/isPolicyPage}}
83+
84+
<script src="extensions/layouts/custom/script.js"></script>

‎en/identity-server/7.0.0/docs/assets/code-samples/illustration.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎en/identity-server/7.0.0/docs/assets/code-samples/product-footer-1.jsp‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<%--
2+
~ Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3+
~
4+
~ WSO2 Inc. licenses this file to you under the Apache License,
5+
~ Version 2.0 (the "License"); you may not use this file except
6+
~ in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing,
12+
~ software distributed under the License is distributed on an
13+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
~ KIND, either express or implied. See the License for the
15+
~ specific language governing permissions and limitations
16+
~ under the License.
17+
--%>
18+
19+
<%@ include file="../includes/localize.jsp" %>
20+
<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.AuthenticationEndpointUtil" %>
21+
22+
<!-- footer -->
23+
<footer class="footer" style="text-align: center">
24+
<div class="container-fluid">
25+
<p>Food Paradise &copy;
26+
<script>document.write(new Date().getFullYear());</script>
27+
</p>
28+
</div>
29+
</footer>

‎en/identity-server/7.0.0/docs/assets/code-samples/product-footer-2.jsp‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<%--
2+
~ Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3+
~
4+
~ WSO2 Inc. licenses this file to you under the Apache License,
5+
~ Version 2.0 (the "License"); you may not use this file except
6+
~ in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing,
12+
~ software distributed under the License is distributed on an
13+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
~ KIND, either express or implied. See the License for the
15+
~ specific language governing permissions and limitations
16+
~ under the License.
17+
--%>
18+
19+
<%@ include file="../includes/localize.jsp" %>
20+
<%@ page import="org.wso2.carbon.identity.mgt.endpoint.util.IdentityManagementEndpointUtil" %>
21+
22+
<!-- footer -->
23+
<footer class="footer" style="text-align: center">
24+
<div class="container-fluid">
25+
<p>Food Paradise &copy;
26+
<script>document.write(new Date().getFullYear());</script>
27+
</p>
28+
</div>
29+
</footer>

‎en/identity-server/7.0.0/docs/assets/code-samples/product-title-1.jsp‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<%--
2+
~ Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3+
~
4+
~ WSO2 Inc. licenses this file to you under the Apache License,
5+
~ Version 2.0 (the "License"); you may not use this file except
6+
~ in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing,
12+
~ software distributed under the License is distributed on an
13+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
~ KIND, either express or implied. See the License for the
15+
~ specific language governing permissions and limitations
16+
~ under the License.
17+
--%>
18+
19+
<%@ include file="../includes/localize.jsp" %>
20+
<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.AuthenticationEndpointUtil" %>
21+
22+
<div class="product-title" data-testid="product-title">
23+
<div class="theme-icon inline auto transparent product-logo portal-logo">
24+
<i class="chess queen icon"></i>
25+
<p class="fp-logo-name">Food Paradise</p>
26+
</div>
27+
</div>

‎en/identity-server/7.0.0/docs/assets/code-samples/product-title-2.jsp‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<%--
2+
~ Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3+
~
4+
~ WSO2 Inc. licenses this file to you under the Apache License,
5+
~ Version 2.0 (the "License"); you may not use this file except
6+
~ in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing,
12+
~ software distributed under the License is distributed on an
13+
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
~ KIND, either express or implied. See the License for the
15+
~ specific language governing permissions and limitations
16+
~ under the License.
17+
--%>
18+
19+
<%@ include file="../includes/localize.jsp" %>
20+
<%@ page import="org.wso2.carbon.identity.mgt.endpoint.util.IdentityManagementEndpointUtil" %>
21+
22+
<div class="product-title" data-testid="product-title">
23+
<div class="theme-icon inline auto transparent product-logo portal-logo">
24+
<i class="chess queen icon"></i>
25+
<p class="fp-logo-name">Food Paradise</p>
26+
</div>
27+
</div>

‎en/identity-server/7.0.0/docs/assets/code-samples/script.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* Properties of the dark theme. */
2+
const DARK_THEME = {
3+
"fp-primary-background-color": "#010409",
4+
"fp-primary-text-color": "#c9d1d9",
5+
"fp-heading-text-color": "#c9d1d9",
6+
"fp-main-box-background-color": "#0d1117",
7+
"fp-main-box-border-color": "#30363d",
8+
"fp-input-field-base-text-color": "#ffffff",
9+
"fp-input-field-base-background-color": "#010409",
10+
"fp-input-field-base-label-text-color": "#c9d1d9",
11+
"fp-input-field-base-border-color": "#30363d",
12+
"fp-header-background-color": "#161b22",
13+
"fp-divider-color": "#30363d",
14+
"fp-negative-message-background-color": "#bb1a1d36",
15+
"fp-negative-message-header-color": "#c9d1d9",
16+
"fp-negative-message-border-color": "#7c1212",
17+
"fp-positive-message-background-color": "#0080001f",
18+
"fp-positive-message-header-color": "#c9d1d9",
19+
"fp-positive-message-border-color": "#067406",
20+
"fp-info-message-background-color": "#4141ff1f",
21+
"fp-info-message-header-color": "#c9d1d9",
22+
"fp-info-message-border-color": "#1010b9",
23+
"fp-warning-message-background-color": "#834e0442",
24+
"fp-warning-message-header-color": "#c9d1d9",
25+
"fp-warning-message-border-color": "#b56c07"
26+
}
27+
28+
/* Properties of the light theme. */
29+
const LIGHT_THEME = {
30+
"fp-primary-background-color": "#ffffff",
31+
"fp-primary-text-color": "rgba(0,0,0,.87)",
32+
"fp-heading-text-color": "rgba(0,0,0,.87)",
33+
"fp-main-box-background-color": "#ffffff",
34+
"fp-main-box-border-color": "rgba(34,36,38,.15)",
35+
"fp-input-field-base-text-color": "rgba(0,0,0,.87)",
36+
"fp-input-field-base-background-color": "#ffffff",
37+
"fp-input-field-base-label-text-color": "rgba(0,0,0,.87)",
38+
"fp-input-field-base-border-color": "rgba(34,36,38,.15)",
39+
"fp-header-background-color": "#f2f2f2",
40+
"fp-divider-color": "rgba(34,36,38,.15)",
41+
"fp-negative-message-background-color": "#FFF6F6",
42+
"fp-negative-message-header-color": "#912D2B",
43+
"fp-negative-message-border-color": "transparent",
44+
"fp-positive-message-background-color": "#FCFFF5",
45+
"fp-positive-message-header-color": "#1A531B",
46+
"fp-positive-message-border-color": "transparent",
47+
"fp-info-message-background-color": "#F8FFFF",
48+
"fp-info-message-header-color": "#0E566C",
49+
"fp-info-message-border-color": "transparent",
50+
"fp-warning-message-background-color": "#FFFAF3",
51+
"fp-warning-message-header-color": "#573A08",
52+
"fp-warning-message-border-color": "transparent"
53+
}
54+
55+
/* Get the theme checkbox element. */
56+
const themChangeCheckbox = document.getElementById("fp-checkbox");
57+
58+
/* Check the previously stored theme and activate. */
59+
const storedTheme = localStorage.getItem("food_paradise_theme");
60+
61+
if (storedTheme === "LIGHT") {
62+
themChangeCheckbox.checked = true;
63+
setTheme(LIGHT_THEME);
64+
} else if (storedTheme === "DARK") {
65+
themChangeCheckbox.checked = false;
66+
setTheme(DARK_THEME);
67+
} else {
68+
themChangeCheckbox.checked = true;
69+
setTheme(LIGHT_THEME);
70+
}
71+
72+
/* Create event listner for checkbox element. */
73+
themChangeCheckbox.addEventListener("change", function(e) {
74+
const checked = e.target.checked;
75+
76+
if (checked) {
77+
localStorage.setItem("food_paradise_theme", "LIGHT");
78+
setTheme(LIGHT_THEME);
79+
} else {
80+
localStorage.setItem("food_paradise_theme", "DARK");
81+
setTheme(DARK_THEME);
82+
}
83+
});
84+
85+
/* Function for set the properties of theme object into styles. */
86+
function setTheme(themValueObj) {
87+
for (const key in themValueObj) {
88+
document.documentElement.style.setProperty(`--${key}`, themValueObj[key]);
89+
}
90+
}

0 commit comments

Comments
 (0)