[Pharo] Personal fitness tracker web app.
Main navigation component.
src/MyFitnessTracker/MFTMainTabsComponent.class.st
@@ -1,11 +1,8 @@
1
1
Class {
2
2
#name : #MFTMainTabsComponent,
3
Removed:
#superclass : #WAComponent,
3
Added:
#superclass : #SBSComponent,
4
4
#instVars : [
5
Removed:
'tab1',
6
Removed:
'tab2',
7
Removed:
'tab3',
8
Removed:
'tab4',
5
Added:
'mainTabs',
9
6
'activeTab'
10
7
],
11
8
#category : #'MyFitnessTracker-Components'
@@ -14,35 +11,61 @@
14
11
{ #category : #hooks }
15
12
MFTMainTabsComponent >> children [
16
13
17
Removed:
^ {
18
Removed:
tab1.
19
Removed:
tab2 }
14
Added:
^ mainTabs
20
15
]
21
16
22
17
{ #category : #initialization }
23
18
MFTMainTabsComponent >> initialize [
24
19
25
20
super initialize.
26
Removed:
tab1 := MFTWorkoutsListComponent placeholder.
27
Removed:
tab2 := MFTWeightsListComponent placeholder
21
Added:
mainTabs := {
22
Added:
MFTWorkoutsListTab placeholder.
23
Added:
MFTWeightsListTab new.
24
Added:
MFTLearnTab new.
25
Added:
MFTProfileTab new }.
26
Added:
activeTab := mainTabs first
28
27
]
29
28
30
29
{ #category : #rendering }
31
30
MFTMainTabsComponent >> renderContentOn: html [
32
31
33
Removed:
html div
34
Removed:
class: 'tabs';
35
Removed:
with: [
36
Removed:
self
37
Removed:
renderTab: tab1 on: html;
38
Removed:
renderTab: tab2 on: html ].
39
Removed:
html text: 'This is working, finally!'
32
Added:
| bar id |
33
Added:
bar := html navigationBar.
34
Added:
id := '#navbarCollapsed'.
35
Added:
bar
36
Added:
beLight;
37
Added:
expandLarge.
38
Added:
bar background beLight.
39
Added:
bar with: [
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: id;
46
Added:
with: [ html navigationBarTogglerIcon ].
47
Added:
html navigationBarCollapse collapse
48
Added:
id: 'navbarCollapsed';
49
Added:
with: [
50
Added:
html navigationBarNavigation: [
51
Added:
mainTabs do: [ :tab | self renderTab: tab on: html ] ] ] ].
52
Added:
html break.
53
Added:
html render: activeTab
40
54
]
41
55
42
56
{ #category : #rendering }
43
Removed:
MFTMainTabsComponent >> renderTab: aTabComponent on: html [
57
Added:
MFTMainTabsComponent >> renderTab: tab on: html [
44
58
45
Removed:
html div
46
Removed:
class: 'tab';
47
Removed:
with: [ html render: aTabComponent ]
59
Added:
html navigationItem
60
Added:
beActiveIf: [ tab = activeTab ];
61
Added:
with: [
62
Added:
html navigationLink
63
Added:
callback: [ self setActiveTab: tab ];
64
Added:
with: tab title ]
65
Added:
]
66
Added:
67
Added:
{ #category : #initialization }
68
Added:
MFTMainTabsComponent >> setActiveTab: aTab [
69
Added:
70
Added:
activeTab := aTab
48
71
]