MenuButtonv2

cs160-berkeley · Nov 9, 2016 · 28ce05a · 28ce05a
1 parent 510f006
commit 28ce05a
Showing 1 changed file with 43 additions and 16 deletions.
diff --git a/group-14-companion/Menu.js b/group-14-companion/Menu.js
@@ -1,20 +1,28 @@
 import * as common from "common";
 
-var menubox= new Skin({fill: "#666666"});
+var menuboxSkin= new Skin({fill: "#666666"});
+var selectedboxSkin = new Skin({fill:"#333333"});
 var menufont = new Style({ font: "15px Roboto Medium", color: "white" })
-var TabType = "documents";
-var selectionbox = Container.template($ =>({
- top: $.offset,height:35, left: 0, right: 0, active: true,
-    skin: menubox,
+
+var selectionbox = Container.template($ =>({//A Button overlayed with a rectangle of the same color, rectangle changes if button is selected 
+ name:$.name, top: $.offset,height:35, left: 0, right: 0, active: true,
+    skin: menuboxSkin,
     contents:[
+    	new Container({name:"selected",top:3,left:5,right:5,bottom:3,skin:$.color}),
     	$.icon,
     	 new Label({ top: 0, left: $.left,height:35 ,
             style: menufont, 
             string: $.string }),
     ],
-    Behavior: class extends common.ButtonBehavior {
-      onTap(content) {
+    Behavior: class extends Behavior {
+      /*onTap(content) {
         application.distribute("dispatch", $.screenName);
+      }*/
+      onTouchBegan(content){            content.selected.skin = selectedboxSkin;
+    }
+      onTouchEnded(content){
+      		content.selected.skin = menuboxSkin;
+     		application.distribute("dispatch", $.screenName);
       }
     }
 }));
@@ -33,7 +41,7 @@ var Screen1Template = Column.template($ => ({
     top: 0, bottom: 0, left: 0, right: 90, active: true,
     skin: new Skin({fill: "#595959"}),
     contents: [
-        new Container({ top: 0, height: 70, left: 0, right: 0,  skin: menubox,
+        new Container({ top: 0, height: 70, left: 0, right: 0,  skin: menuboxSkin,
 			contents:[
 			new Picture({height:60,left:-40, url: "assets/UserProfileIcon.png"}),			
 			new Label({ top: 15, right: 63,height:22 ,
@@ -44,16 +52,35 @@ var Screen1Template = Column.template($ => ({
             		string: "Access Tier    Admin" })
             ] }),
        new subtitlebox({height:22,string: "Tabs"}),
-       new selectionbox({offset:1,icon:whiteDocIcon,left:45,string: "Document Explorer", screenName: "documentsScreen"}),
-       new selectionbox({offset:1,icon:whiteUsersIcon,left:45,string: "Users", screenName: "usersScreen"}),
-       new selectionbox({offset:1,icon:whiteCabinetIcon,left:45,string: "Cabinet Manager"}),
+       new selectionbox({offset:1,icon:whiteDocIcon,left:45,name: "documents", string: "Document Explorer", screenName: "documentsScreen",color:menuboxSkin}),
+       new selectionbox({offset:1,icon:whiteUsersIcon,left:45,name:"users",string: "Users", screenName: "usersScreen",color:menuboxSkin}),
+       new selectionbox({offset:1,icon:whiteCabinetIcon,left:45,name:"cabinets",string: "Cabinet Manager",color:menuboxSkin}),
 	   new subtitlebox({height:22,string: "Other"}),
-       new selectionbox({offset:1,left:20,string: "Password Settings"}),
-       new selectionbox({offset:1,left:20,string: "Help"}),
-       new selectionbox({offset:1,left:20,string: "Log Out"}),
-       new Container({top:1,height:200,left:0,right:0,skin:menubox})
+       new selectionbox({offset:1,left:20,string: "Password Settings",color:menuboxSkin}),
+       new selectionbox({offset:1,left:20,string: "Help",color:menuboxSkin}),
+       new selectionbox({offset:1,left:20,string: "Log Out",color:menuboxSkin}),
+       new Container({top:1,height:200,left:0,right:0,skin:menuboxSkin})
 
-    ]
+    ],
+    Behavior: class extends Behavior {e
+      update(content) {//TabType = {documents,users,cabinets
+        if(TabType ==="documents"){
+        	content.documents.selected.skin=selectedboxSkin;
+        	content.users.selected.skin = menuboxSkin;
+        	content.cabinets.selected.skin = menuboxSkin;
+        }
+        if(TabType ==="users"){
+        	content.documents.selected.skin=menuboxSkin;
+        	content.users.selected.skin = selectedboxSkin;
+        	content.cabinets.selected.skin = menuboxSkin;
+        }
+        if(TabType ==="cabinets"){
+        	content.documents.selected.skin=menuboxSkin;
+        	content.users.selected.skin = menuboxSkin;
+        	content.cabinets.selected.skin = selectedboxSkin;
+        }
+      }
+    }
 }));
 
 export var Menu = Screen1Template;