gistfile1.js

Superduper.mainPage = SC.Page.design({

  mainPane: SC.MainPane.design({
  backgroundColor: '#ddd',
  childViews: 'topBar body bottomBar'.w(),

    topBar: SC.ToolbarView.design({
      layout: { top: 0, left: 0, right: 0, height: 40 },
	  backgroundColor: '#4c4c4c',
	  borderStyle: SC.BORDER_NONE,
	  classNames: "header".w(),
	  childViews: 'labelView'.w(),
      anchorLocation: SC.ANCHOR_TOP,
	  
	  labelView: SC.LabelView.design({
        layout: { centerY: 0, centerX: 0, right: 10, height: 20 },
        controlSize: SC.SMALL_CONTROL_SIZE,
		textAlign: SC.ALIGN_RIGHT,
        fontWeight: SC.BOLD_WEIGHT,
        value:   'Add Button | Show/Hide Sidebar | Refresh | Undo | Redo | Communicating Icon | Welcome Back, James Hayton | Logout'
      })
    }),
	
	body: SC.SplitView.design({
      layout: { top: 46, bottom: 46, left: 0, right: 0 },
	  borderStyle: SC.BORDER_NONE,
	  hasHorizontalScroller: NO,
	  dividerThickness: 6,
	  defaultThickness: 250,
	  topLeftThickness: 300,
	  topLeftMinThickness: 200,
	  topLeftMaxThickness: 300,
	  bottomRightMinThickness: 550,
	  
	  topLeftView: SC.View.design({
	    canCollapse: YES, 
		backgroundColor: '#ddd',
		classNames: "sidebar".w(),
		isCollapsed: YES,  //Not Working
        childViews: "navigationHeaderContainer navView".w(),
		
		navigationHeaderContainer: SC.View.design({
          layout: { height: 70, top: 0, left: 6, right: 0 },
		  backgroundColor: '#86B8EF',
		  hasHorizontalScroller: NO,
		  classNames: "header-container".w(),
		  childViews: "navigationTitleControlContainter navigationSearchBoxContainer".w(),
		  
		  navigationTitleControlContainter: SC.View.design({
			layout: { height: 30, top: 4 },
			borderStyle: SC.BORDER_NONE,
			backgroundColor: '#5693D6',
			classNames: "title-control-container".w(),
			childViews: "navigationTitle".w(),
			
			navigationTitle: SC.LabelView.design({
		      layout: { top: 5, left: 7, height: 20 },
			  controlSize: SC.MEDIUM_CONTROL_SIZE,
			  classNames: "title".w(),
			  textAlign: SC.ALIGN_LEFT,
			  fontWeight: SC.BOLD_WEIGHT,
			  value:   'Workspaces'
			})
			
		  }),
		  
		  navigationSearchBoxContainer: SC.View.design({
		    layout: { top: 34, left: 0, right: 0, height: 36 },
			borderStyle: SC.BORDER_NONE,
		    classNames: "search-box-container".w(),
		    childViews: "navigationSearchBox".w(),
			
		    navigationSearchBox: SC.TextFieldView.design({
              layout: { height: 20, top: 8, left: 20, right: 20 },
		      hint: "Search...",
		      borderStyle: SC.BORDER_NONE
            })
		  })
        }),
	  
	    navView: SC.ScrollView.design({
          hasHorizontalScroller: NO,
	      borderStyle: SC.BORDER_NONE,
		  backgroundColor: '#fff',
          layout: { top: 71, left: 6, right: 0},
		  
		  contentView: SC.SourceListView.design({
		    contentBinding: "Superduper.navigationController.arrangedObjects",
		    selectionBinding: "Superduper.navigationController.selection",
			contentValueKey: "displayName",
			rowHeight:25,
			fontWeight: SC.BOLD_WEIGHT
		  })
        })
	  }),
	  
	  bottomRightView: SC.View.design({
	    canCollapse: NO, 
		backgroundColor: '#d3d3d3',
		childViews: "mainView productsHeaderContainer".w(),
		
		productsHeaderContainer: SC.View.design({
		layout: { height: 70, top: 0, left: 1, right: 1 },
		backgroundColor: '#86B8EF',
		hasHorizontalScroller: NO,
		classNames: "header-container".w(),
		childViews: "productsTitleControlContainer productsToolbarContainer".w(),
		
		  productsTitleControlContainer: SC.View.design({
		    layout: { height: 30, top: 4 },
		    borderStyle: SC.BORDER_NONE,
			backgroundColor: '#5693D6',
		    classNames: "title-control-container".w(),
		    childViews: "productsTitle".w(),
		  
		    productsTitle: SC.LabelView.design({
		      layout: { top: 5, left: 7, height: 20 },
			  controlSize: SC.MEDIUM_CONTROL_SIZE,
			  classNames: "title".w(),
			  textAlign: SC.ALIGN_LEFT,
			  fontWeight: SC.BOLD_WEIGHT,
			  value:   'Products'
			})
		  }),
		
		  productsToolbarContainer: SC.ToolbarView.design({
		    layout: { top: 34, left: 0, right: 0, height: 36 },
		    borderStyle: SC.BORDER_NONE,
		    classNames: "toolbar-container".w(),
		    childViews: "addButton exportButton filterButton updateButton deleteButton".w(),
		  
		    addButton: SC.ButtonView.design({
              layout: { left: 8, height: 20, bottom: 5, width: 125 },
		      target: "Superduper.productController",
              action: "addProduct",
              title:  "Add"
            }),
		  
		    deleteButton: SC.ButtonView.design({
              layout: { left: 141, height: 20, bottom: 5, width: 125 },
		      target: "Superduper.productController",
              action: "addProduct",
              title:  "Delete"
            }),
		  
		    exportButton: SC.ButtonView.design({
              layout: { right: 8, height: 20, bottom: 5, width: 125 },
		      target: "Superduper.productController",
              action: "addProduct",
              title:  "Export"
            }),
		  
		    filterButton: SC.ButtonView.design({
              layout: { left: 274, height: 20, bottom: 5, width: 125 },
		      target: "Superduper.productController",
              action: "addProduct",
              title:  "Filter"
            }),
		  
		    updateButton: SC.ButtonView.design({
              layout: { left: 407, height: 20, bottom: 5, width: 125 },
		      target: "Superduper.productController",
              action: "addProduct",
              title:  "Update"
            })
		  })
		}),
		
		mainView: SC.SplitView.design({
          layout: { top: 70, bottom: 0, left: 1, right: 1 },
	      borderStyle: SC.BORDER_NONE,
	      dividerThickness: 6,
	      defaultThickness: .3,
	      autoresizeBehavior: SC.RESIZE_TOP_LEFT,
	      topLeftMinThickness: 500,
	      bottomRightMinThickness: 350,
          backgroundColor: '#fff',
	  
		  topLeftView: SC.View.design({
	        canCollapse: NO, 
		    borderStyle: SC.BORDER_NONE,
            childViews: "productList".w(),
		  
		    productList: SC.ScrollView.design({
		      layout: { left:0, right:0, top: 0, bottom:0 },
		      hasHorizontalScroller: NO,
		      borderStyle: SC.BORDER_NONE,
		  
		      contentView: SC.SourceListView.design({
		        contentBinding: "Superduper.productController.arrangedObjects",
		        selectionBinding: "Superduper.productController.selection",
			    contentValueKey: "description",
			    //canEditContent: YES,
				canDeleteContent: YES,
				actOnSelect: YES,
			    rowHeight:25
		      })
		    }) // Product List
	      }),
	  
	      bottomRightView: SC.View.design({
		    backgroundColor: '#fff',  
		    classNames: "sidebar".w(),
		    canCollapse: NO,
		    borderStyle: SC.BORDER_NONE,
		    childViews: "noProductView".w(),
		  
		    noProductView: SC.LabelView.design({
	          layout: { centerX: 0, centerY: 0, height: 18, width: 200 },
		      borderStyle: SC.BORDER_NONE,
		      textAlign: SC.ALIGN_CENTER,
		      valueBinding: 'Superduper.productSelectionController.description'
		    })
	      })
        })
	  })
	}),
	
	bottomBar: SC.ToolbarView.design({
      layout: { left: 0, right: 0, height: 40 },
	  backgroundColor: '#4c4c4c',
	  borderStyle: SC.BORDER_NONE,
	  //classNames: "header".w(),
      anchorLocation: SC.ANCHOR_BOTTOM,
	  childViews: "sidebarHideButton".w(),
	  
	  sidebarHideButton: SC.ButtonView.design({
        layout: { left: 10, height: 20, centerY: 0, width: 50 },
		target: "Superduper.sidebarController",
        action: "showSidebar",
        title:  "Show"
        })
	})
  })
});