1
1
<!--
2
- Copyright (c)2020, 2021 , Oracle and/or its affiliates.
2
+ Copyright (c)2020, 2022 , Oracle and/or its affiliates.
3
3
Licensed under The Universal Permissive License (UPL), Version 1.0
4
4
as shown at https://oss.oracle.com/licenses/upl/
5
5
-->
6
6
7
7
< div id ="pageWrapper " class ="oj-offcanvas-outer-wrapper oj-offcanvas-page " style ="height: 100%; ">
8
- < div id ="startDrawer " role ="navigation " class ="demo-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start ">
9
- < oj-navigation-list data ="[[ $functions.getNavigationContent()]] "
10
- item.selectable ="[[ $page.functions.itemSelectable ]] "
11
- expanded ="[[ $functions.getExpandedMenu() ]] "
12
- class ="oj-flex-item oj-sm-align-self-flex-start oj-navigationlist-nofollow-link " drill-mode ="collapsible "
13
- on-selection-changed ="[[$listeners.ojNavigationListSelection]] ">
14
- < template slot ="itemTemplate " data-oj-as ="item ">
15
- < li >
16
- < a style ="cursor: pointer ">
17
- < oj-bind-if test ="[[item.data.attr.node]] ">
18
- < i :class ="[[ 'oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box')]] "> </ i >
19
- < oj-bind-text value ="[[item.data.attr.name]] "> </ oj-bind-text >
20
- </ oj-bind-if >
21
- < oj-bind-if test ="[[!item.data.attr.node]] ">
22
- < i :class ="[[ 'oj-typography-body-md oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box') + ' oj-sm-padding-4x-start']] "> </ i >
23
- < span class ="oj-typography-body-md ">
24
- < oj-bind-text value ="[[item.data.attr.name]] "> </ oj-bind-text >
25
- </ span >
26
- </ oj-bind-if >
27
- < oj-bind-if test ="[[item.data.attr.badge]] ">
28
- < span :class ="[[ ['oj-badge', 'oj-badge-'+item.data.attr.badgeType, 'oj-navigationlist-item-end'] ]] "> < oj-bind-text value ="[[item.data.attr.badge]] "> </ oj-bind-text > </ span >
29
- </ oj-bind-if >
30
- </ a >
31
- </ li >
32
- </ template >
33
- </ oj-navigation-list >
34
- </ div >
35
- < div id ="page " class ="oj-web-applayout-page " style ="height: 100%; ">
36
- < header role ="banner " class ="oj-web-applayout-header ">
37
- < div class ="oj-flex-bar oj-sm-align-items-center ">
38
- < div class ="oj-flex-bar-start oj-sm-align-items-center ">
39
- < oj-button id ="toggleNavListButtonSmall " class ="toggleNavListButton oj-button-lg " chroming ="borderless "
40
- display ="icons " on-oj-action ="[[$listeners.toggleNavListButtonSmallOjAction]] ">
41
- < span slot ="startIcon " class ="oj-ux-ico-menu "> </ span >
8
+ < div id ="page " class ="oj-web-applayout-page " style ="height: 100%; ">
9
+ < header role ="banner " class ="oj-web-applayout-header ">
10
+ < div class ="oj-flex-bar oj-sm-align-items-center ">
11
+ < div class ="oj-flex-bar-start oj-sm-align-items-center ">
12
+ < oj-button id ="toggleNavListButton " class ="toggleNavListButton oj-button-lg " chroming ="borderless "
13
+ display ="icons " on-oj-action ="[[$listeners.toggleNavListButtonSmallOjAction]] ">
14
+ < span slot ="startIcon " class ="oj-ux-ico-menu "> </ span >
42
15
< span > Application Navigation</ span >
43
- </ oj-button >
16
+ </ oj-button >
44
17
< span
45
18
class ="oj-flex-item oj-typography-body-md oj-typography-bold oj-sm-padding-2x-start oj-sm-only-hide "> Long Application Name</ span >
46
19
< span
47
20
class ="oj-flex-item oj-typography-body-md oj-typography-bold oj-sm-padding-2x-start oj-md-hide "> Short Name</ span >
48
- </ div >
49
- < div class ="oj-flex-bar-end ">
50
- < oj-toolbar id ="toolbar1 ">
51
- < oj-menu-button id ="userMenu " display ="[[$application.responsive.smOnly ? 'icons' : 'all']] " chroming ="borderless ">
52
- < span slot ="endIcon " :class ="[[{'oj-ux-ico-human-8': $application.responsive.smOnly , 'oj-component-icon oj-button-menu-dropdown-icon': !$application.responsive.smOnly}]] "> </ span >
53
- < oj-bind-text value ="[[ $application.user.email ]] "> </ oj-bind-text >
54
- < oj-menu id ="menu1 " slot ="menu " style ="display:none ">
55
- < oj-option id ="out " value ="out "> < oj-bind-text value ="[[ $application.translations.app.app_sign_out ]] "> </ oj-bind-text > </ oj-option >
56
- </ oj-menu >
57
- </ oj-menu-button >
58
- </ oj-toolbar >
21
+ </ div >
22
+ < div class ="oj-flex-bar-end ">
23
+ < oj-toolbar id ="toolbar1 ">
24
+ < oj-menu-button id ="userMenu " display ="[[$application.responsive.smOnly ? 'icons' : 'all']] "
25
+ chroming ="borderless ">
26
+ < span slot ="endIcon " :class ="[[{'oj-ux-ico-human-8': $application.responsive.smOnly , 'oj-component-icon oj-button-menu-dropdown-icon': !$application.responsive.smOnly}]] "> </ span >
27
+ < oj-bind-text value ="[[ $application.user.email ]] "> </ oj-bind-text >
28
+ < oj-menu id ="menu1 " slot ="menu " style ="display:none ">
29
+ < oj-option id ="out " value ="out ">
30
+ < oj-bind-text value ="[[ $application.translations.app.app_sign_out ]] "> </ oj-bind-text >
31
+ </ oj-option >
32
+ </ oj-menu >
33
+ </ oj-menu-button >
34
+ </ oj-toolbar >
35
+ </ div >
59
36
</ div >
60
- </ div >
61
- </ header >
37
+ </ header >
62
38
63
- <!-- for message notifications -->
64
- < oj-messages id ="vbDefaultNotifier " position ="{} " display ="general " messages ="{{$page.variables.messagesADP}} " on-oj-close ="[[$listeners.onMessageClose]] "> </ oj-messages >
39
+ <!-- for message notifications -->
40
+ < oj-messages id ="vbDefaultNotifier " position ="{} " display ="general " messages ="{{$page.variables.messagesADP}} "
41
+ on-oj-close ="[[$listeners.onMessageClose]] "> </ oj-messages >
65
42
66
- < div class ="oj-web-applayout-content-nopad oj-web-spacing oj-flex ">
67
- < div id ="animationMenu " class ="oj-flex-item oj-flex oj-sm-flex-wrap-nowrap " style ="overflow-x: auto; position: relative ">
68
- < div id ="navigation-div " style ="min-width: 300px; max-width: 300px; height: 100% " class ="oj-flex demo-contrast-marker tree-navigation-menu-panel ">
43
+ < div class ="oj-web-applayout-content-nopad oj-web-spacing oj-flex ">
44
+ < oj-drawer-layout start-opened ="{{ $page.variables.openDrawer }} " class ="drawer-layout " id ="drawer-layout ">
45
+ < div slot ="start " class ="demo-contrast-marker demo-contrast-background " style ="min-width:300px; height:100% ">
46
+
69
47
< oj-navigation-list data ="[[ $functions.getNavigationContent()]] "
70
- item.selectable ="[[ $page.functions.itemSelectable ]] "
71
- class ="demo-contrast-background oj-flex-item oj-navigationlist-nofollow-link " drill-mode ="collapsible "
72
- on-selection-changed ="[[$listeners.ojNavigationListSelection]] " expanded ="[[ $functions.getExpandedMenu() ]] ">
48
+ item.selectable ="[[ $page.functions.itemSelectable ]] "
49
+ class ="oj-flex-item oj-navigationlist-nofollow-link " drill-mode ="collapsible "
50
+ on-selection-changed ="[[$listeners.ojNavigationListSelection]] "
51
+ expanded ="[[ $functions.getExpandedMenu() ]] ">
73
52
< template slot ="itemTemplate " data-oj-as ="item ">
74
- < li >
75
- < a style ="cursor: pointer ">
76
- < oj-bind-if test ="[[item.data.attr.node]] ">
77
- < i :class ="[[ 'oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box')]] "> </ i >
78
- < oj-bind-text value ="[[item.data.attr.name]] "> </ oj-bind-text >
79
- </ oj-bind-if >
80
- < oj-bind-if test ="[[!item.data.attr.node]] ">
81
- < i :class ="[[ 'oj-typography-body-md oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box') + ' oj-sm-padding-4x-start']] "> </ i >
82
- < span class ="oj-typography-body-md ">
53
+ < li >
54
+ < a style ="cursor: pointer ">
55
+ < oj-bind-if test ="[[item.data.attr.node]] ">
56
+ < i :class ="[[ 'oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box')]] "> </ i >
57
+ < oj-bind-text value ="[[item.data.attr.name]] "> </ oj-bind-text >
58
+ </ oj-bind-if >
59
+ < oj-bind-if test ="[[!item.data.attr.node]] ">
60
+ < i :class ="[[ 'oj-typography-body-md oj-navigationlist-item-icon oj-ux-ico-' + (item.data.attr.icon ? item.data.attr.icon : 'box') + ' oj-sm-padding-4x-start']] "> </ i >
61
+ < span class ="oj-typography-body-md ">
83
62
< oj-bind-text value ="[[item.data.attr.name]] "> </ oj-bind-text >
84
63
</ span >
85
- </ oj-bind-if >
86
- < oj-bind-if test ="[[item.data.attr.badge]] ">
87
- < span :class ="[[ ['oj-badge', 'oj-badge-'+item.data.attr.badgeType, 'oj-navigationlist-item-end'] ]] "> < oj-bind-text value ="[[item.data.attr.badge]] "> </ oj-bind-text > </ span >
88
- </ oj-bind-if >
89
- </ a >
90
- </ li >
91
- </ template >
92
- </ oj-navigation-list >
64
+ </ oj-bind-if >
65
+ < oj-bind-if test ="[[item.data.attr.badge]] ">
66
+ < span :class ="[[ ['oj-badge', 'oj-badge-'+item.data.attr.badgeType, 'oj-navigationlist-item-end'] ]] "> < oj-bind-text value ="[[item.data.attr.badge]] "> </ oj-bind-text > </ span >
67
+ </ oj-bind-if >
68
+ </ a >
69
+ </ li >
70
+ </ template >
71
+ </ oj-navigation-list >
93
72
</ div >
94
73
< div class ="oj-flex-item oj-flex oj-sm-flex-direction-column tree-navigation-content-panel " style ="overflow-x: auto; ">
95
74
<!-- Where Visual Pages will be rendered -->
96
75
< oj-vb-content id ="vbRouterContent " class ="vbcs-pages-module oj-flex-item " config ="[[vbRouterFlow]] " style ="max-width: 100%; "> </ oj-vb-content >
97
76
</ div >
77
+ </ oj-drawer-layout >
98
78
</ div >
99
- </ div >
100
79
101
- < footer class ="oj-web-applayout-footer " role ="contentinfo ">
102
- < div class ="oj-web-applayout-footer-item ">
103
- < ul >
104
- < li > < a id ="about " href =""> < oj-bind-text value ="[[ $application.translations.app.app_footer_about_link ]] "> </ oj-bind-text > </ a > </ li >
105
- </ ul >
106
- </ div >
107
- < div class ="oj-web-applayout-footer-item oj-text-color-secondary oj-typography-body-sm "> < oj-bind-text value ="[[ $application.translations.app.app_footer_copyright ]] "> </ oj-bind-text > </ div >
108
- </ footer >
109
- </ div >
110
- </ div >
80
+ < footer class ="oj-web-applayout-footer " role ="contentinfo ">
81
+ < div class ="oj-web-applayout-footer-item ">
82
+ < ul >
83
+ < li > < a id ="about " href ="">
84
+ < oj-bind-text value ="[[ $application.translations.app.app_footer_about_link ]] "> </ oj-bind-text >
85
+ </ a > </ li >
86
+ </ ul >
87
+ </ div >
88
+ < div class ="oj-web-applayout-footer-item oj-text-color-secondary oj-typography-body-sm ">
89
+ < oj-bind-text value ="[[ $application.translations.app.app_footer_copyright ]] "> </ oj-bind-text >
90
+ </ div >
91
+ </ footer >
92
+ </ div >
93
+ </ div >
0 commit comments