/
MainView.mxml
75 lines (69 loc) · 2.22 KB
/
MainView.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<sp:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:sp="library://ns.unhurdle.com/spectrum" xmlns:panes="view.panes.*"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:view="view.*" xmlns:html="library://ns.apache.org/royale/html" initComplete="init()">
<fx:Script>
<![CDATA[
import com.unhurdle.spectrum.Application;
import models.Theme;
import org.apache.royale.routing.RouteState;
import models.DataModel;
[Bindable]public var navProvider:Array = DataModel.navProvider;
private function init():void{
Theme.router = router;
setNavSelection();
}
private function setNavSelection():void{
var routeState:RouteState = router.routeState;
var navIndex:int = navProvider.indexOf(routeState.title);
if(navIndex != -1){
sideNav.selectedIndex = navIndex;
}
else {
sideNav.selectedIndex = 0;
}
}
private function onNavChange():void{
var title:String = sideNav.selectedItem as String;
var hash:String = title.split(/[^a-zA-Z0-9]+/).join("_").toLowerCase();
router.routeState.path = hash;
router.renderState();
}
private function hashChanged():void{
setNavSelection();
}
]]>
</fx:Script>
<fx:Style>
.pane-container{
padding:40px;
flex-grow:1;
max-height:100vh;
overflow: auto;
}
.variant-container{
padding-top:36px;
}
.variant-header{
padding-bottom:12px;
}
.markup-section{
margin:36px 24px;
}
.markup-header{
padding-bottom:12px;
}
.variant-header-padding{
height: 36px
}
.spectrum-FieldGroup--vertical > .spectrum-ButtonGroup + .spectrum-ButtonGroup{
margin-top: 21px;
}
</fx:Style>
<sp:beads>
<view:BrowserRouter localId="router" routeComplete="hashChanged()"/>
</sp:beads>
<sp:FlexContainer id="mainGroup" wrap="false">
<sp:List id="sideNav" dataProvider="{navProvider}" change="onNavChange()" style="max-height:100vh;flex-shrink: 0; padding-left:14px; padding-right:14px; background-color:rgba(0.5,0.5,0.5,0.05)"/>
<html:Div id="paneHolder" style="flex-grow: 1;"/>
</sp:FlexContainer>
</sp:View>