[Pharo] Personal fitness tracker web app.
Main navigation bar and tabs component update.
Changed files
src/MyFitnessTracker/MFTMainNavigationBarComponent.class.st
@@ -0,0 +1,71 @@
1
Added:
Class {
2
Added:
#name : #MFTMainNavigationBarComponent,
3
Added:
#superclass : #SBSComponent,
4
Added:
#instVars : [
5
Added:
'activeTab'
6
Added:
],
7
Added:
#category : #'MyFitnessTracker-Components'
8
Added:
}
9
Added:
10
Added:
{ #category : #hooks }
11
Added:
MFTMainNavigationBarComponent >> children [
12
Added:
13
Added:
^ self session mainTabs
14
Added:
]
15
Added:
16
Added:
{ #category : #initialization }
17
Added:
MFTMainNavigationBarComponent >> initialize [
18
Added:
19
Added:
super initialize.
20
Added:
activeTab := self session mainTabs first
21
Added:
]
22
Added:
23
Added:
{ #category : #rendering }
24
Added:
MFTMainNavigationBarComponent >> renderContentOn: html [
25
Added:
"FIXME: NavigationBar Bootstrap class cannot be sticky-top, otherwise login modals are hidden by a shadow..."
26
Added:
27
Added:
html navigationBar
28
Added:
beLight;
29
Added:
lightBackground;
30
Added:
expandLarge;
31
Added:
marginBottom: 3;
32
Added:
paddingLeftAndRight: 3;
33
Added:
with: [ self renderNavigationBarItemsOn: html ].
34
Added:
html render: activeTab
35
Added:
]
36
Added:
37
Added:
{ #category : #rendering }
38
Added:
MFTMainNavigationBarComponent >> renderNavigationBarItemsOn: html [
39
Added:
40
Added:
html navigationBarBrand: 'MyFitnessTracker'.
41
Added:
"The toggler that is only visible when reducing the width of screen"
42
Added:
html navigationBarToggler
43
Added:
beButtonType;
44
Added:
collapse;
45
Added:
dataTarget: '#navbarCollapsed';
46
Added:
with: [ html navigationBarTogglerIcon ].
47
Added:
html navigationBarCollapse collapse
48
Added:
id: 'navbarCollapsed';
49
Added:
with: [
50
Added:
html navigationBarNavigation: [
51
Added:
self session mainTabs do: [ :tab |
52
Added:
html navigationItem
53
Added:
beActiveIf: [ activeTab = tab ];
54
Added:
with: [
55
Added:
html navigationLink
56
Added:
callback: [ activeTab := tab ];
57
Added:
with: tab title asCapitalizedPhrase ] ].
58
Added:
html navigationItem dropdown with: [
59
Added:
html navigationLink
60
Added:
dropdownToggle;
61
Added:
dataToggle: 'dropdown';
62
Added:
with: 'Learn'.
63
Added:
html dropdownMenu
64
Added:
attributeAt: 'aria-labelledby' put: 'navbarDropdown';
65
Added:
with: [
66
Added:
html dropdownItem: 'Exercises'.
67
Added:
html dropdownItem: 'Muscles' ] ] ].
68
Added:
html div
69
Added:
class: 'ms-auto';
70
Added:
with: [ html render: MFTLoginRegisterLogoutComponent new ] ]
71
Added:
]
src/MyFitnessTracker/MFTMainNavigationbarComponent.class.st
@@ -1,93 +0,0 @@
1
Removed:
Class {
2
Removed:
#name : #MFTMainNavigationbarComponent,
3
Removed:
#superclass : #SBSComponent,
4
Removed:
#instVars : [
5
Removed:
'mainTabs',
6
Removed:
'activeTab'
7
Removed:
],
8
Removed:
#category : #'MyFitnessTracker-Components'
9
Removed:
}
10
Removed:
11
Removed:
{ #category : #hooks }
12
Removed:
MFTMainNavigationbarComponent >> children [
13
Removed:
14
Removed:
^ mainTabs
15
Removed:
]
16
Removed:
17
Removed:
{ #category : #initialization }
18
Removed:
MFTMainNavigationbarComponent >> initialize [
19
Removed:
20
Removed:
super initialize.
21
Removed:
mainTabs := {
22
Removed:
(self session user
23
Removed:
ifNil: [ MFTPublicHomepage new ]
24
Removed:
ifNotNil: [ MFTUserHomepage new ]).
25
Removed:
MFTWorkoutsListTab placeholder.
26
Removed:
MFTWeightsListTab new.
27
Removed:
MFTLearnTab new.
28
Removed:
MFTProfileTab new }.
29
Removed:
activeTab := mainTabs first
30
Removed:
]
31
Removed:
32
Removed:
{ #category : #rendering }
33
Removed:
MFTMainNavigationbarComponent >> renderContentOn: html [
34
Removed:
35
Removed:
html navigationBar
36
Removed:
beLight;
37
Removed:
lightBackground;
38
Removed:
expandLarge;
39
Removed:
marginBottom: 3;
40
Removed:
paddingLeftAndRight: 3;
41
Removed:
class: 'sticky-top';
42
Removed:
with: [ self renderNavigationBarItemsOn: html ].
43
Removed:
html render: activeTab
44
Removed:
]
45
Removed:
46
Removed:
{ #category : #rendering }
47
Removed:
MFTMainNavigationbarComponent >> renderLoginOn: html [
48
Removed:
49
Removed:
^ MFTLoginAndRegisterComponent new renderContentOn: html
50
Removed:
]
51
Removed:
52
Removed:
{ #category : #rendering }
53
Removed:
MFTMainNavigationbarComponent >> renderNavigationBarItemsOn: html [
54
Removed:
55
Removed:
html navigationBarBrand: 'MyFitnessTracker'.
56
Removed:
"The toggler that is only visible when reducing the width of screen"
57
Removed:
html navigationBarToggler
58
Removed:
beButtonType;
59
Removed:
collapse;
60
Removed:
dataTarget: '#navbarCollapsed';
61
Removed:
with: [ html navigationBarTogglerIcon ].
62
Removed:
html navigationBarCollapse collapse
63
Removed:
id: 'navbarCollapsed';
64
Removed:
with: [
65
Removed:
html navigationBarNavigation: [
66
Removed:
mainTabs do: [ :tab | self renderTab: tab on: html ].
67
Removed:
html navigationItem dropdown with: [
68
Removed:
html navigationLink
69
Removed:
dropdownToggle;
70
Removed:
dataToggle: 'dropdown';
71
Removed:
with: 'Learn'.
72
Removed:
html dropdownMenu
73
Removed:
attributeAt: 'aria-labelledby' put: 'navbarDropdown';
74
Removed:
with: [
75
Removed:
html dropdownItem: 'Exercises'.
76
Removed:
html dropdownItem: 'Muscles'
77
Removed:
"html dropdownDivider.
78
Removed:
html dropdownItem: 'Something else here'" ] ] ].
79
Removed:
html div
80
Removed:
class: 'ms-auto';
81
Removed:
with: [ html render: MFTLoginAndRegisterComponent new ] ]
82
Removed:
]
83
Removed:
84
Removed:
{ #category : #rendering }
85
Removed:
MFTMainNavigationbarComponent >> renderTab: tab on: html [
86
Removed:
87
Removed:
html navigationItem
88
Removed:
beActiveIf: [ activeTab = tab ];
89
Removed:
with: [
90
Removed:
html navigationLink
91
Removed:
callback: [ activeTab := tab ];
92
Removed:
with: tab title asCapitalizedPhrase ]
93
Removed:
]